bukwus Posted November 26, 2008 Share Posted November 26, 2008 HiThis is a problem I continually deal with. I have two floating objects, in this case an image and a paragraph. The IMG floats all the way to the left and the P to the right of the container DIV just as I want them to.The problem is the difference in space between the floated objects and the following object (in this case another P) in Firefox vs. IE. Using clear:left, right or all with any of the elements in styles doesn't seem to make a difference so I use a <br clear="all" /> right after the floated objects. In FF the break causes space between the floated objects and the following P, but in IE there is no space. The difference causes a flaw in my design in one browser, depending on how I code the page.Is there a way to bypass this bug or is there an alternative to floating that won't cause the difference in browser interpretation?Here's the link: http://www.bdki.com/test/Here's the HTML <body class="first last"> <div class="container"> <img src="images/logo.gif" border="0" alt="The Players' Ring" id="logo" /> <p id="headerNav"> <a href="contact.html">Contact</a><br /> <a href="contribute.html">Become a Member</a><br /> <a href="contribute.html">Donate</a><br /> <a href="blog.html">Blog</a> </p> <br /> <br clear="all" /> <p id="topNav"><a href="box.html">Box Office</a> <a href="contribute.html">Get Involved</a> <a href="onstage.html">On Stage</a> <a href="news.html">Green Room</a> <a href="about.html">About Us</a></p> <p id="homeDescription">Welcome to The Players' Ring. Our mission is to bring to the NH Seacoast original theatre: written by local authors, produced by local teams and acted by local talent. Come on down and kick Babs in the pants, it's a HOOT!</p> </div> </body> Here's the CSS body { font-size: 100%; line-height:1.125em; color: #222; background: #000000; font-family: Arial, Helvetica, sans-serif;}#headerNav { float:right; text-align:right; font-size:70%; padding:0px 5px; color:#ffffff; line-height:12px; }#topNav { font-size:80%; }#topNav A { margin-right:10px; }#homeDescription { width:30em; padding-bottom:.5em; margin-left:5em; }#logo { margin-top:15px; position:relative; top:1.1em; float:left; }.container { width:90%; margin:auto; background-image:url(../images/img_top_bg.gif); background-position:top left; background-repeat:repeat-x; background-color:#333366; } Many thanks Link to comment Share on other sites More sharing options...
jeffman Posted November 26, 2008 Share Posted November 26, 2008 I'm in FF, but I not sure what I'm supposed to be seeing. What color is the space? Is it between horizontal units (so the space is a line running up and down) or vertical units (so it's a line running left to right)? All your elements seem to have ID. Maybe you could say between which Elements the space is by using the IDs. I hate to sound like a pain, but "floated objects and the following object" doesn't mean much to me. Link to comment Share on other sites More sharing options...
jeffman Posted November 26, 2008 Share Posted November 26, 2008 Meanwhile, I just noticed this: <br clear="all" />. I didn't realize you literally meant this.1. Acceptable values for clear are left, right, both, and none. Not all.2. clear is a style attribute, not an element property, so it needs to go in a style sheet or, less desirably, in a style="clear: both" property.3. I've never heard of a <br> tag having any style attributes.4. You can apply clear to a div, and that will take it out of the float queue.5. I have no idea if any of this affects your problem, but it needed mentioning. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.