Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    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.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 04:29 AM.

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts


    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.

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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');
    }

  • #8
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.
    Last edited by ronaldb66; 03-09-2005 at 02:27 PM. Reason: Addition
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #10
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 02:27 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •