Jump to content

space after float in FF vs IE


bukwus
 Share

Recommended Posts

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...