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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Some weird IE float bug perhaps?

    ok, in FF its fine, I've done quite a few sites with CSS and I've had very few issues so far but this one I can't seem to figure out on my own.

    http://www.webrd.net/dev/wag/ (I just dumped it in there, same code just differnt logo etc.)

    For the life of me I can't seem to figure out why the content section is like that. *sigh*

    Must be looking at it too long.

    Thanks for your time everyone.
    d3

  • #2
    New Coder
    Join Date
    Sep 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, it does have something to do with the float... sort of.

    IE treats block level elements with a defined width differently than Firefox (or other browsers of a higher standard) does. It really has to do with the Padding and Margins on your div. IE actually ADDS the width of the padding to the width of your DIV, so in essence, the DIV you think is (and should be) 600px is actually 615px in IE, or something like that (I can't remember exactly what your style sheet defined the left padding to).

    My suggestion for a quick fix would be to take the width: 600 out of your CSS for that DIV. Block level elements (such as a DIV) will always expand as wide as they can, so you might have to add some margin/padding to the right side to get it to look exactly how you'd like.

    Alternatively, you can specifically set the witdth to 585px (600 - 15px) for IE, and then reset it using a child-selector for 'other browsers of a higher standard'.
    Code:
    #yourcontentdiv {
       width: 585px;
       padding: 0 0 0 15px;
       margin: 0 0 0 15px;
    }
    
    /* reset */
    html>body #yourcontentdiv {
       width: 600px;
    }
    Let me know if that works out for you.

  • #3
    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
    Well it seems that you have a case of divitis. Also you have used an id more than one time. You can't do this. If you must use the same styles over, then use a class. Your main problem though was you were putting an h2 in an unordered list directly instead of in an li. Try the below. It now works in IE and FF.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>W.A.G. Off leash Dog Park</title>
    <base href="http://www.webrd.net/dev/wag/" />
    <style type="text/css">
    /*<![CDATA[*/
    a  { color: white;} 
    a:link    	{ color: white;  text-decoration: none;} 
    a:visited	{ color: white;  text-decoration: none;} 
    a:active	{ color: white;  text-decoration: none;}
    a:hover	{ color: white; text-decoration: underline;} 
    
    body {
    background: #308014 /* url('grass.jpg') */; 
    margin-top: 0px;
    padding-top: 20px;
    font-family: georgia,serif;
    }
    
    h2 { font-size: 105%;	}
    
     ul { list-style-type: none; }
    
     li { margin:0px; padding-bottom: 7px; }
    
    input { background-color: #eeeeee; border: 1px solid #CDCDCD;  }
    
    #content img {
    border: 0px;
    }
    
    #clearspace {
    clear: both;
    margin: 0px;
    padding: 0px;
    height: 0px;
    }
    
    #container {
    width:940px;
    margin: 0 auto;
    padding: 0px;
    }
    
    #contentset {
    background: #EBEBEB /*url("page_bg.gif") no-repeat */; 
    margin: 0 auto;
    padding-top: 0px;
    width: 960px;
    line-height: 150%;
    }
    
    #flash{
    width:940px;
    height:186px;
    padding-top:2px;
    margin: 0 auto;
    }
    
    /* ---------------- right --------------------- */
    #rightnavcontainer {
    float: right;
    color: #233F5B;
    width: 186px;
    text-align: left;
    margin-left:20px;
    padding:7px;
    }
    
    #rightnavcontainer a {
    color: #006400;
    padding: 7px;
    }
    #rightnavcontainer a:hover {
    color: #00CD00;
    background-color: #F1F4F7;
    border: 1px solid #00CD00;
    padding: 7px;
    }
    /* ---------------- right --------------------- */
    
    #content {
    margin-right:230px;
    padding:0 0 0 15px;
    }
    /* ---------------- top --------------------- */
    #topnavcontainer {
    margin: auto;
    padding: 0px;
    }
    
    #topnav {
    margin-left: 10px;
    padding: 7px;
     }
    
     #topnav ul {
    margin-top: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: left; /*set the menu to left or right */
    }
    
    #topnav ul li { 
    display: inline;
    }
    
    #topnav ul li a {
    margin-top:30px;
    text-decoration: none;
    padding: 5px;
    color: #006400;
    }
    
    #topnav ul li a:hover {
    color: #00CD00;
    background-color: #F1F4F7;
    border: 1px solid #00CD00;
    }
    /* ---------------- top --------------------- */
    #copy { 
    color: #000000; 
    font-size: 11px;
    width:940px;
    height:20px;
    margin: 0 auto;
    padding: 0 0 10px 0;
    }
    
    #copy a { 
    color: #5B6D80; 
    font-size: 11px;
    text-decoration: none;	
    }
    
    .rightlist {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position:relative;
    }
    
    .active  {  
    background-color:#C1FFC1;
    font-weight: bold;  
    } 
    /*//]]>*/
    </style>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="en-us" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta name="robots" content="all" />
    <meta http-equiv="imagetoolbar" content="false" />
    <meta name="mssmarttagspreventparsing" content="true" />
    <meta name="author" content="jeffrey wilson." />
    <meta name="copyright" content="copyright (c) 1999-2004 jeffrey wilson" />
    <meta name="description" content="css, xhtml, front end design. jeffrey wilson." />
    <meta name="keywords" content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, accessibility" />
    
    </head>
    <body>
    <div id="contentset">
    	<div id="container">
    		<div id="flash"><img  src="WAG-header.jpg" alt="" /></div>
    		<div id="topnavcontainer">
    		<div id="topnav" />
    			<ul>
    				<li><a href="/dev/wag/index.php" class="active">home</a></li>
    				<li><a href="/dev/wag/index.php?section=about">about</a></li>
    				<li><a href="/dev/wag/index.php?section=conduct">conduct</a></li>
    				<li><a href="/dev/wag/index.php?section=membership">membership</a></li>
    				<li><a href="/dev/wag/index.php?section=links">links</a></li>
    				<li><a href="/dev/wag/index.php?section=faqs">faqs</a></li>
    				<li><a href="/dev/wag/index.php?section=contact">contact</a></li>
    			</ul>
    		</div>
    	</div>
    	<div id="rightnavcontainer">
    		<ul class="rightlist">
    			<li><h2>Sponsor list</h2></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    		</ul>
    		<ul class="rightlist">
    			<li><h2>Sponsor list</h2></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    		</ul>
    		<ul class="rightlist">
    			<li><h2>Sponsor list</h2></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    			<li><a href="/dev/wag/index.php?section=default">Default</a></li>
    		</ul>
    	</div>
    	<div id="content">
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor erat in sapien. Etiam id magna. Duis sollicitudin. Donec id lacus. Quisque tristique rhoncus purus. Donec pulvinar, orci id mollis iaculis, lacus justo bibendum ligula, non elementum dolor lorem et felis. Donec volutpat. Nullam viverra pede a arcu. Pellentesque vel massa. Quisque quis felis. Nam eu elit a lectus porttitor porta. Suspendisse interdum. Sed vitae erat at dui rhoncus suscipit. Praesent sem. Fusce bibendum. Nulla facilisi. Donec porta mattis nulla.</p>
    		<p>Maecenas nec eros vehicula orci rhoncus luctus. Etiam fermentum, eros eu vestibulum suscipit, nibh nisi posuere sapien, nec egestas orci libero non tellus. Integer eu lorem sit amet felis rhoncus egestas. Sed iaculis nulla vel massa. Praesent dui tellus, cursus sed, semper at, elementum non, nunc. Vivamus ac mi sit amet elit tincidunt iaculis. Pellentesque sit amet enim. Sed ut nulla vel elit egestas egestas. Sed purus neque, pharetra sed, hendrerit id, commodo quis, enim. Cras porttitor. Vestibulum et nisl id risus luctus vestibulum. Phasellus nonummy volutpat tellus. Pellentesque hendrerit massa ac enim.</p>
    		<p>In nulla arcu, semper in, egestas ut, nonummy vel, nunc. Donec ut orci et odio semper vestibulum. Praesent viverra diam sit amet mi. Phasellus id justo. Suspendisse et diam nec lectus ultrices ultrices. Suspendisse potenti. Vivamus vehicula est eget purus. Quisque placerat, metus id pharetra imperdiet, purus dolor mattis mauris, at molestie lacus purus et ligula. Nullam orci orci, rhoncus eu, dapibus eget, auctor vitae, neque. Aliquam rhoncus interdum urna. Suspendisse venenatis sem at odio.</p>
    	</div>
    	<div id="footer"></div>
    	<br /><br />
    	<div id="copy">
    		&copy; 2002- 2005 web redesign / development - all rights reserved
    		<a href="/dev/wag/index.php?section=termsofuse">terms of use</a> - 
    		<a href="/dev/wag/index.php?section=privacy">privacy policy</a><br />
    	</div>
    </div>
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, I thank you both.

    I dropped my content div back to 550, and changed the list over to a class. (oops my bad.) after going over the source again I noticed that I had an extra </div> aswell so all 3 issues where the problem.

    Thanks Reinspire and _Aerospace_Eng_

    d3


  •  

    Posting Permissions

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