Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Text extending past DIV boundaries

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-08-2005, 04:55 PM   PM User | #1
cbouchar
New Coder

 
Join Date: Mar 2005
Posts: 35
Thanks: 0
Thanked 0 Times in 0 Posts
cbouchar is an unknown quantity at this point
Unhappy Text extending past DIV boundaries
Please help!
My site is looking great in both IE and FF but the CSS is not working the same in both. I have text in a menu that is wrapping correctly in IE but extending past the DIVs border in FF. Why? How can I fix it? The link below has 2 images that show what is happing in both browsers.
ca.pg.photos.yahoo.com/ph/camandtamATrogers.com/my_photos
*replace the AT with @
The edge can be seen by the yellow/red vertical lines (they are a part the background image for the div). The red line on the outside is the exact limit of the DIV (136px) but half of the character extends past in FF (but not IE).
There is a small padding on the left side of the div, which is why the blue square is moved right a little bit - so I tried to add a padding to the right. It didn't make a difference. The text continued to go past the edge.

Thought about using a scrollbar but it would take up even more room in my narrow menu area (even when using overflow:auto) so I would like to avoid it at all costs.

Any help would be appreciated.

I cannot give the direct link to the site because it is not appropriate for this forum.
cbouchar is offline   Reply With Quote
Old 03-08-2005, 05:30 PM   PM User | #2
evo
waka Ionsurge


 
Join Date: Feb 2005
Location: United Kingdom
Posts: 881
Thanks: 5
Thanked 12 Times in 12 Posts
evo is an unknown quantity at this point
Can you post up code? It is rather hard to guess where it has gone wrong if we have nothing to actually look at. Images aren't really helpful at all.

Cheers.
evo is offline   Reply With Quote
Old 03-09-2005, 12:01 AM   PM User | #3
cbouchar
New Coder

 
Join Date: Mar 2005
Posts: 35
Thanks: 0
Thanked 0 Times in 0 Posts
cbouchar is an unknown quantity at this point
Well, I listed the site address in a different posting so I may as well post it here. Warning, the site contains adult content !

link removed
The menu is in the 'Left' div.

Notice how the text on one of the Movie names extends outside the Div in FireFox but not in IE. In IE, it wraps at the correct place.

What needs to be changed in order for it to wrap correctly in both browsers?

Thanks
Last edited by cbouchar; 03-09-2005 at 03:29 AM..
cbouchar is offline   Reply With Quote
Old 03-09-2005, 01:12 AM   PM User | #4
mcdougals4all
Regular Coder

 
Join Date: Jul 2004
Location: mile high city
Posts: 482
Thanks: 0
Thanked 0 Times in 0 Posts
mcdougals4all is an unknown quantity at this point


Well, now you did it. If you really needed help that badly, you could have taken the time to copy and paste the code, or post it at an acceptable url with PG graphics. Good luck.

Quote:
Originally Posted by posting rules
1.5) No objectionable content- Do not post content/subject/links that may not be appropriate to everybody, including minors. Examples include adult links, hateful/ distasteful content, vulgar language etc.
__________________
Computer, kill Flanders... Did I hear my name? My ears are burning...
Good start. Now finish the job.
mcdougals4all is offline   Reply With Quote
Old 03-09-2005, 03:53 AM   PM User | #5
cbouchar
New Coder

 
Join Date: Mar 2005
Posts: 35
Thanks: 0
Thanked 0 Times in 0 Posts
cbouchar is an unknown quantity at this point
Here is the code, it tried to remove all the objectionable text.

Sorry about the previous link. Hope someone can help.

Code:
<html>
<head>
<title>Two Column CSS Layout with Header</title>



<LINK 
href="qstyle.css" rel=stylesheet type=text/css>
<SCRIPT language=JavaScript src="script_files/wrapscript.js"></SCRIPT>
<SCRIPT language=JavaScript>

<!--
bAgent=navigator.userAgent;
btype=bAgent.substring(8,9);
isMac=(bAgent.indexOf("Mac")>=0);
isIE=(bAgent.indexOf("MSIE")>=0);
useframes=((isMac && isIE && btype<="3") || (btype<="2" && !(bAgent.indexOf("MSIE 3")>=0)));
function loader() {
	if(!useframes) nsloading();
}
//-->
</SCRIPT>

</head>
<body bgcolor="#333333">
<div id="header" style="width: 350px"><img border="0" src="NewHeader1.jpg" width="350" height="100"></div>

<div id="leftheader">
</div>

<div id="ablogo">
</div>

<div id="topleft">
</div>

<div id="centerleftborder" style="z-index: 1">
</div>
  
<div id="centerrightborder" style="z-index: 1">
  <img src="Gradient_topright.gif" width="11" height="11"></div>

<div id="centertopborder" style="z-index: 1">

  <img src="Gradient_topleft.gif" width="11" height="11"></div>

<div id="centerbottomborder" style="z-index: 1">
  <img src="Gradient_bottomleft.gif" width="11" height="11"></div>

<div id="centerbottomrightcorner" style="z-index: 1">
<img src="Gradient_bottomright.gif" width="11" height="11"></div>

<div id="left">
<p style="margin-top: 0; margin-bottom: 0">
<img src="leftmenutop1.bmp" width="136" height="24" style="position: absolute; left: 0;">
&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0">
&nbsp;</p>
<div class="NV0" id="TP">   

<div> <div class="NV1"
id="RR" onclick="clikker1(RR2,BB2,CC2,DD2,EE2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(1)" onmouseover="msover(1)"> &nbsp;<img border="0" height="18" id="RRp" src="script_files/Menu-1-NewMovies1.gif" width="100"></div>
<div class="NV2" id="RR2" style="DISPLAY: none"> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1
</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title 1</a><br> </div> 
<div class="NV1"
id="BB" onclick="clikker2(BB2,RR2,CC2,DD2,EE2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(2)" onmouseover="msover(2)"> &nbsp;<img border="0" height="18" id="BBp" src="script_files/Menu-2-Fetish1.gif" width="100">

</div> <div class="NV2" id="BB2" style="DISPLAY: none"> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type1</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type2</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type3<br></a> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type4<br></a> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type5</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Type6</a><br> </div>
</div> <div class="NV1" id="CC"
onclick="clikker3(CC2,RR2,BB2,DD2,EE2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(3)" onmouseover="msover(3)"> &nbsp;<img border="0" height="18" id="CCp" src="script_files/Menu-3-Studio1.gif" width="100">
</div> <div class="NV2" id="CC2" style="DISPLAY: none"> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Production Company1<br></a> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Production Company2</a><br></div>
<div class="NV1" id="DD"
onclick="clikker4(DD2,RR2,BB2,CC2,EE2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(4)" onmouseover="msover(4)"> &nbsp;<img border="0"height="18" id="DDp" src="script_files/Menu-4-Starring1.gif" width="100">

</div> <div class="NV2" id="DD2" style="DISPLAY: none"> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Female Performer</a><br>  </div>
<div class="NV1" id="EE"
onclick="clikker5(EE2,RR2,BB2,CC2,DD2,FF2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(5)" onmouseover="msover(5)"> &nbsp;<img border="0" height="18" id="EEp" src="script_files/Menu-5-Archive1.gif" width="100">
</div> <div class="NV2" id="EE2" style="DISPLAY: none"> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Movie Title1</a><br>  </div>
<div class="NV1" id="FF"
onclick="clikker6(FF2,RR2,BB2,CC2,DD2,EE2,GG2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(6)" onmouseover="msover(6)"> &nbsp;<img border="0" height="18" id="FFp" src="script_files/Menu-6-AboutUs1.gif" width="100"></div>
<div class="NV2" id="FF2" style="DISPLAY: none"> 

<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">FAQ</a><br>  </div>
<div class="NV1" id="GG"
onclick="clikker7(GG2,RR2,BB2,CC2,DD2,EE2,FF2,HH2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(7)" onmouseover="msover(7)"> &nbsp;<img border="0" height="18" id="GGp" src="script_files/Menu-7-Contact1.gif" width="100"></div>
<div class="NV2" id="GG2" style="DISPLAY: none"> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Network Issues</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Site Issues</a><br>  </div>
<div class="NV1" id="HH"
onclick="clikker8(HH2,RR2,BB2,CC2,DD2,EE2,FF2,GG2,II2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(8)" onmouseover="msover(8)"> &nbsp;<img border="0" height="18" id="HHp" src="script_files/Menu-8-Links1.gif" width="100"></div>
<div class="NV2" id="HH2" style="DISPLAY: none"> 

<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Codecs</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Media Player</a><br>  
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Categories</a><br>  </div>
<div class="NV1" id="II"
onclick="clikker9(II2,RR2,BB2,CC2,DD2,EE2,FF2,GG2,HH2,RRp,BBp,CCp,DDp,EEp,FFp,GGp,HHp,IIp);"
onmouseout="msout(9)" onmouseover="msover(9)"> &nbsp;<img border="0" height="18" id="IIp" src="script_files/Menu-9-JoinNow1.gif" width="100"></div>
<div class="NV2" id="II2" style="DISPLAY: none">
	<p style="margin-top: 0; margin-bottom: 0"> 
<img border="0" src="script_files/bullet1.gif" width="7" height="7"> <a class="roll" href="http://planmagic.com" target="_top">Join Now</a><br>  </div>

<p style="margin-top: 0; margin-bottom: 0"><img src="leftmenubottom1.bmp" width="136" height="14" style="position: absolute; left: 0;"></div></div>

<div id="center" style="width:789px; height:445px">
&nbsp;<p align="center"><font color="#FF0000">Content</font><font color="#FF0000"></div></body>
</html>
The part that I need help with is in the LEFT div.
Please help.
cbouchar is offline   Reply With Quote
Old 03-09-2005, 04:46 AM   PM User | #6
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
the css would help also but imma take a shot in the dark here, you dont have defined heights to the left div, and you are floating the stuff in side it or something around it so FF needs the height declared where as IE just goes off of the content inside it, option 2 you need a clearing div somewhere
_Aerospace_Eng_ is offline   Reply With Quote
Old 03-09-2005, 12:30 PM   PM User | #7
cbouchar
New Coder

 
Join Date: Mar 2005
Posts: 35
Thanks: 0
Thanked 0 Times in 0 Posts
cbouchar is an unknown quantity at this point
I can't really specify a definite height because I don't know what the height will be once the user opens the menu. If they open a category that only has 3 items then the menu will expand X pixels, but if they open a different category, the menu will expand XXX pixels.
I will try a clearing Div.

In the meantime, here is the CSS

Code:
#HeadTop {	LEFT: 8px; POSITION: absolute; TOP: 10px}
#globalS {	LEFT: 8px; POSITION: absolute; TOP: 10px}
#Head1 {	LEFT: 8px; POSITION: absolute; TOP: 10px}
#Menu1 {	LEFT: 16px; POSITION: absolute}
#Head2 {	LEFT: 8px; POSITION: absolute}
#Menu2 {	LEFT: 16px; POSITION: absolute}
#Head3 {	LEFT: 8px; POSITION: absolute}
#Menu3 {	LEFT: 16px; POSITION: absolute}
#Head4 {	LEFT: 8px; POSITION: absolute}
#Menu4 {	LEFT: 16px; POSITION: absolute}
#Head5 {	LEFT: 8px; POSITION: absolute}
#Menu5 {	LEFT: 16px; POSITION: absolute}
#Head6 {	LEFT: 8px; POSITION: absolute}
#Menu6 {	LEFT: 16px; POSITION: absolute}
#HeadBottom {	LEFT: 8px; POSITION: absolute}
A { COLOR: red}
A.visited { COLOR: #ff0000}
A:hover { COLOR: #ffdd00}
A.roll { COLOR: red; FONT-SIZE: 9pt; FONT-FAMILY: verdana; TEXT-DECORATION: none;}
A.roll:hover { COLOR: #FF6600; FONT-FAMILY: verdana; background: #303030; TEXT-DECORATION: none;}
A.nav { COLOR: #000000; FONT-SIZE: 7pt; TEXT-DECORATION: none}
A.nav:hover { COLOR: #ff0000}
body { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right:0; padding-left: 0; padding-right: 0;
}
#header { position: absolute; margin-left: 381px; top: 60px; height: 100px; width 350px;
}
#ablogo { position: absolute; margin-left: 2px; top: 550px; height: 56px; width: 150px; background: url('ABlogo.gif');
}
#leftheader { position: absolute; left: 800px; top: 60; height: 100px; width: 159px;
}
#topleft { position: absolute; left: 5px; top: 10; height: 150px; width: 150; background: url('NewCircleTest.gif');
}
#left { position: absolute; left: 5px; top: 180px; width: 136px; background: url('leftmenubar1.bmp') repeat-y; padding-left: 5px;
}
#center { position: absolute; top: 171; margin-left: 166px; bottom: 445px; background:#000000; width: 789px; 
}
#centerbottomrightcorner { position: absolute; top: 616; margin-left: 955px; width: 11px; height: 11px; 
}
#centerleftborder { position: absolute; top: 160; margin-left: 155px; width: 11px; height: 456px; background: url('Gradient_left.gif');
}
#centertopborder { position: absolute; top: 160; margin-left: 155px; width: 800px; height: 11px; background: url('Gradient_top.gif');
}
#centerrightborder { position: absolute; top: 160; margin-left: 955px; width: 11px; height: 456px; background: url('Gradient_right.gif');
}
#centerbottomborder { position: absolute; top: 616; margin-left: 155px; width: 800px; height: 11px; background: url('Gradient_bottom.gif');
}
cbouchar is offline   Reply With Quote
Old 03-09-2005, 12:38 PM   PM User | #8
cbouchar
New Coder

 
Join Date: Mar 2005
Posts: 35
Thanks: 0
Thanked 0 Times in 0 Posts
cbouchar is an unknown quantity at this point
Tried a Clearing Div at the end of the menu (didn't change anything) and tried one after the menu, also didn't change anything.
Is there anything else I can try?
cbouchar is offline   Reply With Quote
Old 03-09-2005, 01:18 PM   PM User | #9
ronaldb66
Senior Coder

 
Join Date: Jun 2002
Location: The Netherlands, Baarn, Ut.
Posts: 4,253
Thanks: 0
Thanked 0 Times in 0 Posts
ronaldb66 is an unknown quantity at this point
Absolute positioning
*sigh* The new table layout...

Absolute positioning takes an element out of the normal flow so it doesn't influence its surroundings anymore. When an element is absolutely positioned, its dimensions therefore need to be known so room can be created for it. Clearing an abs pos element is useless for the same reason; this works only on floats.

Instead of absolutely positioning just about everything, try to leave as much as possible in the normal flow, or use floating; at least, floated elements effect their surroundings in some way.

I have no idea what this layout should look like; perhaps you can concoct a sketch, an example page without "objectionable content" or something to show what you need; we might be able to give some pointers how to cut down on the abs pos.

Edit:
I took a look at your pics, and it looks like you need to read up on HTML a little; such a bulleted list can be marked up using an unordered list and some creative styling; no need whatsoever for abs pos.
Everything about creating link lists/menus with list markup and styling them can be found in the listutorial.
__________________
Regards,
Ronald.
ronaldvanderwijden.com
Last edited by ronaldb66; 03-09-2005 at 01:27 PM.. Reason: Addition
ronaldb66 is offline   Reply With Quote
Old 03-12-2005, 01:23 AM   PM User | #10
cbouchar
New Coder

 
Join Date: Mar 2005
Posts: 35
Thanks: 0
Thanked 0 Times in 0 Posts
cbouchar is an unknown quantity at this point
Unhappy
Here is the page with the naughty-bits blurred out. Hopefully you will be able to help me now that you can see the menu and the whole page layout.
The Link to my Site

As for the listed items under each menu, I may be wrong, but I didn't specify any absolute positioning for them, only the main DIV that contains the entire menu?

Most of the menu was simply modified from this menu here:
http://simplythebest.net/scripts/DHT...script_15.html

My problem is that the menu does not function the same way in FireFox as it does in Internet Explorer. The text seems to extend past the DIV borders in FF but it wraps correctly in IE. Why? What can I do about it?

Please help

Thank you
Last edited by cbouchar; 03-12-2005 at 01:27 AM..
cbouchar is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 11:13 AM.
Advertisement
Log in to turn off these ads.