IE vs FF discrepancy in a very simple CSS layout

Hello folks,
While trying to work out a lean CSS layout for my pages, I stumbeld into a glitch that should be visible here:

http://www.anatomy.univr.it/giuseppe/test/index.htm

As you can see from the source, there are just two divs, side-by-side.
It works fine in FF, but a gap shows up in IE between #home and #path.

I cannot figure out what the problem is, and would really appreciate any insight...

Ciao e grazie,
Giuseppe

 

Well, you shouldn't have a div within an anchor tag for starters. As far as IE goes, it could be a whitespace issue and/or you may have to specifically set the margins.

 

same here
http://y.8k.ro/dictionar/index8.html

The problem is that in Firefox everything seems ok but in IE the menu bgcolor doesnt change on mouse over the menu tabs

And at the bottom at the sitemap, same problem in FF everything works perfecty but in ie not.

Thanks

 

Hi Gordaen, thanks for the input. I've made the HTML/CSS even simpler, removing anchors, etc., altogether.

http://www.anatomy.univr.it/giuseppe/test/

The problem is still there.
Explicitly adding #path{margin-left:194px;} won't help...
Again, any help from you gurus would be highly appreciated

Giuseppe

 

That has every appearance of being IE's 3 pixel text jog bug; a generous 3px margin added to floats. That's if you have sinned recently.

If you've been good, you might get lucky and it's only IE's white space bug. In that case, this might fix it;

<div id="home"></div><div 
  id="path"></div>

Code (markup):

Notice the white space between elements has been removed.

You should reconsider your approach to this. It looks like you're still thinking in table layout terms. Google for rounded corners. There are a lot of solutions from which to choose, none of them like you're doing.

cheers,

gary

 

Gary,
I must have sinned big time, because it's not the "white space" bug; rather, as you said, it really does look like "IE's 3 pixel text jog" (how fun to discover a whole new jargon!).

The problem disappears if I left-float the second div too, while giving it a specific size instead of letting it adjust to the width of the window.

As for the more general advice, yes, you are totally right. Being far from a pro, I had initially put together this layout with tables, then discovered what a huge sin that was, and decided to start tinkering with divs & Co, in small steps. I am aware that the way things are now, although my markup is way leaner than it used to be, it still totally lacks flexibility.

Anyhow, thanks a lot for the input.

Cheers,
Giuseppe

 

There is no position on path div, try floating it left.
Of course a floated div with no content and only the height set will be blank so we will have to set a width or add content but the div will only strech as far as the content added so setting a px or percent width is recommended.

#home {
background-image: url("home.gif");
float:left;
height:61px;
width:194px;
}
#path {
height:61px;
width: 500px; *or whatever width you are design the page for taking into acocunt the width of the first div
float:left;
background-image: url("back.gif");
background-repeat:repeat-x;

 

If you are trying to build a page that will strech and be 100% wide, then using the image tags to place that first image might be more useful then the background image. Wrapping both divs in a holder type div to set the width could also work.