Firefox bug? (Image and clear)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Firefox bug? (Image and clear)

Post 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:
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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.
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Post 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.
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

i looked at this topic lately but i had the same problem and solved like you do :)
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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>
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Post 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.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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.
Post Reply