...

View Full Version : Text extending past DIV boundaries



cbouchar
03-08-2005, 04:55 PM
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.

evo
03-08-2005, 05:30 PM
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.

cbouchar
03-09-2005, 12:01 AM
Well, I listed the site address in a different posting so I may as well post it here. Warning, the site contains adult content :eek: !

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

mcdougals4all
03-09-2005, 01:12 AM
:confused:

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.



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.


:thumbsup: :D

cbouchar
03-09-2005, 03:53 AM
Here is the code, it tried to remove all the objectionable text.

Sorry about the previous link. Hope someone can help.



<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.

_Aerospace_Eng_
03-09-2005, 04:46 AM
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

cbouchar
03-09-2005, 12:30 PM
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



#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
03-09-2005, 12:38 PM
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?

ronaldb66
03-09-2005, 01:18 PM
*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.


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 (http://www.maxdesign.com.au/presentation/listutorial/index.htm).

cbouchar
03-12-2005, 01:23 AM
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 (http://tammylovescock.adultbouncer.com/testing/jeff/clean1.htm)

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/DHTML_scripts/dhtml_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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum