Page 1 of 1

Firefox bug? (Image and clear)

Posted: Tue Oct 12, 2004 8:23 am
by zenabi
Have a look at this page in Firefox: http://www.whyyy.cwc.net/bugtest.htm

Notice the mysterious margin in between the image and the footer div?

Now hit Refresh and it disappears!

Does anyone know how to get rid of the mysterious gap? Please view the source (I've made it simple to read).

It looks fine in IE :roll:

Posted: Tue Oct 12, 2004 12:44 pm
by no_memories
your margins for the #image <div> are not set correctly.

instead of using a id for your image <div> try:

Code: Select all

img &#123;
magrin: 0 auto; /* this set the top and bottom margin as 0 and the lef/right maring to flow with the text flow or auto. */
padding: 0;
display: inline;
&#125;
Or try using that same set of rules on your #image <div>. by nature an image is set as a block element, so a standards based browser will see it much like it does a <div>. Displaying the image inline sets it to read as it would text, in an inline fashion. Additionally, all <div>s should have all sides of the margin set for each to maintain consistancy.

Example:

Code: Select all

#div1 &#123;
margin: 0;
&#125;

#div2 &#123;
margin: 0;
&#125;
If that doesn't help, I will look deeper into the issue.

Posted: Wed Oct 13, 2004 7:37 am
by zenabi
Thanks for your suggestions no_memories but they still cause the same problem.

However, I did find that adding a height to the #image div worked. Although this solution is not ideal, it'll do for now.

Posted: Wed Oct 13, 2004 11:53 am
by mudkicker
i looked at this topic lately but i had the same problem and solved like you do :)

Posted: Wed Oct 13, 2004 2:59 pm
by no_memories
I noticed it still does the same thing, I'll look into it further. Looking at your CSS, it's something really simple. Look for an edit to this post.

Edited:

This should fix it.

Code: Select all

<html>
<head>
<title>Bug Test</title>
<style type="text/css">

body &#123;
margin: 0;
padding: 0;
&#125;

img &#123;
display: inline;
border: 0;
&#125;

#wrapper &#123;
margin: 0;
padding: 0;
width: 400px;
background: gray;
&#125;
#text &#123;
float: left;
margin: 0 auto;
padding: 0;
width: 200px;
background: orange;
&#125;
#image &#123;
margin: 0 0 0 200px;
padding: 0;
background: green;
&#125;
#footer &#123;
margin: 0;
padding: 0;
background: blue;
&#125;

</style>
</head>

<body>

<div id="wrapper">
	<div id="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	
	<div id="image"><img src="domokun.jpg" alt="The Domokun" title="The Domokun" /></div>
	
	<div id="footer">Footer</div>

</div>

</body>
</html>

Posted: Mon Oct 18, 2004 6:08 pm
by zenabi
Thanks again no_memories. From your code I have pin-pointed it to the clear property of the footer div. The problem is gone if the clear property is not set, but I have to make sure the content in the footer is longer than the "gap" between the image and it's containing div.

The solutions given work fine for my uses, but I still think the whole thing is a bug in Firefox. Ah well, no browser is perfect.

Posted: Tue Oct 19, 2004 8:56 am
by no_memories
Almost without fail, when you float a div, there must be a compromise. On one of my personal sites I use the float method and had to come up with a rather complex solution for the floating part of the design. To look at the design, click [url=htpp://www.thexvector.com/]here[/url] and then check out the source and the style sheet.

I had to make a height value or make sure there was enough text for the main body section so the footer would not rise above a certain point.

There is another way of doing this, you can have one relative and one absolute div (the absolute being the shortest in length) but here again there some limitations. CSS and browsers are still not perfect, but you can design complete sites around the bugginess of anything if you are persistent.