Fluid layout breaks in IE

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

hiazle - 18 Jul 2006 19:40 GMT

I have part of my website that has to be laid out with 3 DIVs like
this:

|---------------------------------------------------------||--------------------|
| ||

|---------------------------------------------------------||

| ||

|---------------------------------------------------------||--------------------|

here is the html:

<div id="Logo"></div>
<div id="Menu">...</div>
<div id="heading">.....</div>

here is the css:
#Main{
    #Logo{
        width: 100px;
        height: 65px;
        float: right;
        background: #30304A url('Images/logoarea.jpg') bottom left no-repeat;
    }
    #Menu{
        height: 30px;
        background: #30304A url('Images/nav_bg.jpg') top left repeat-x;
        white-space: nowrap;
        margin-right: 100px;
    }
    #Heading{
        height: 35px;
        background: #8F93C3 url('Images/heading_bg.jpg') repeat-x;
        padding-left: 13px;
        margin-right: 100px;
    }
}

My problem is that in IE there is a gap(approx 2px) between "Logo" and
the other two DIVs.

How can I fix this?

Reply to this Message

John Hosking - 19 Jul 2006 02:47 GMT

> I have part of my website that has to be laid out with 3 DIVs like
> this:
[quoted text clipped - 7 lines]
> |
> |---------------------------------------------------------||--------------------|

Maybe you can see that your "diagram" is not so useful. Did you use tabs
at the end of some lines?

> here is the html:

An actual URL would have been better than pasting some fake HTML and
fake CSS.

> <div id="Logo"></div>
> <div id="Menu">...</div>
[quoted text clipped - 21 lines]
> }
> }

CSS does not nest like this. I think you're lucky that anything comes
out of your browser at all (assuming it does, but without an URL, I
can't really tell).

CSS is case sensitive, so "heading" is not the same as "Heading".

Next time, try validating your page first, before posting. Then provide
an URL.

Signature

John

Reply to this Message

Johannes Koch - 19 Jul 2006 08:41 GMT

> CSS is case sensitive, so "heading" is not the same as "Heading".

^^^^^^^^^^^^^^^^^^^^^

In general, this is wrong.

<blockquote cite="http://www.w3.org/TR/REC-CSS2/syndata.html#q4">
All CSS style sheets are case-insensitive, except for parts that are not
under the control of CSS. For example, the case-sensitivity of values of
the HTML attributes "id" and "class", of font names, and of URIs lies
outside the scope of this specification. Note in particular that element
names are case-insensitive in HTML, but case-sensitive in XML.
</blockquote>

The same says <http://www.w3.org/TR/CSS21/syndata.html#q6>.

Signature

Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Reply to this Message

John Hosking - 19 Jul 2006 17:44 GMT

>> CSS is case sensitive, so "heading" is not the same as "Heading".
>
> ^^^^^^^^^^^^^^^^^^^^^
>
> In general, this is wrong.

> The same says <http://www.w3.org/TR/CSS21/syndata.html#q6>.

Hmm, that what the W3C says, all right. I had not read that before. Now
I've read it, but maybe not understood it completely.

What I get now is, CSS itself (the stylesheet) is not case sensitive
(nor is HTML itself), but as soon as I try to *connect* one with the
other, I have to pay attention to case.

This matches my experience, where my HTML includes <span class="Blurb">,
and all my tweaking to .blurb {color:#0000FF;} fails to change the
color, until I notice the differences in capitalization.

So CSS *isn't* case sensitive, until I try to use it...

Reply to this Message

Michael Vilain - 19 Jul 2006 19:21 GMT

> >> CSS is case sensitive, so "heading" is not the same as "Heading".
> >
[quoted text clipped - 16 lines]
>
> So CSS *isn't* case sensitive, until I try to use it...

Yes, I like that distinction. Sorta like saying "Yeah, the concert was
Ok, except for when it really sucked dead bunnies..."

Signature

DeeDee, don't press that button! DeeDee! NO! Dee...

Reply to this Message

hiazle - 26 Jul 2006 21:34 GMT

> Maybe you can see that your "diagram" is not so useful. Did you use tabs
> at the end of some lines?
> Next time, try validating your page first, before posting. Then provide
> an URL.

Ok, I made a mistake on the HTML and CSS that I provided but you really
have to burn me for it? Unfortunately I do not have a url to provide at
that moment so I have to improvise in order to give you a visual of
what I'm trying to accomplish

The diagram was meant to look like this:

|-----------------------------------||--------------------|
| || |
|-----------------------------------|| |
| || |
|-----------------------------------||--------------------|

And the html was supposed to look like this:

<div id="main">
<div id="logo"></div>
<div id="menu">...</div>
<div id="heading">.....</div>
</div>

And the CSS:

#main{
    margin: 0;
    padding: 0;
}
#logo{
    width: 100px;
    height: 65px;
    float: right;
    background: #30304A url('Images/logoarea.jpg') bottom left no-repeat;
}
#menu{
    height: 30px;
    background: #30304A url('Images/nav_bg.jpg') top left repeat-x;
    white-space: nowrap;
    margin-right: 100px;
}
#heading{
    height: 35px;
    background: #8F93C3 url('Images/heading_bg.jpg') repeat-x;
    padding-left: 13px;
    margin-right: 100px;
}

Basically, what I'm trying to achieve here is to have two divs on the
left and one on the right (The same effect you get when you do
rowspan="2" in a table). In the end, the total height of the two divs
on the left equals the height of the div on the right.

All this works fine in Firefox and Opera, but in IE there is a white
space between the two divs on the left and the one on the right

Reply to this Message

John Hosking - 28 Jul 2006 03:07 GMT

> Ok, I made a mistake on the HTML and CSS that I provided but you really
> have to burn me for it?

Sorry, but I didn't mean to "burn" you; I was just pointing out a
problem. It was hindering my understanding of this problem (and could
get in the way for other people and in other posts you might make in the
future). I tried to phrase it as best I could. (I also wasn't sure if
your diagram looked hunky-dory in your newsreader; maybe everything
looked fine yo you, even in my reply. At least I'm not crazy. ;-)

> Unfortunately I do not have a url to provide at
> that moment so I have to improvise in order to give you a visual of
[quoted text clipped - 7 lines]
> | || |
> |-----------------------------------||--------------------|

Yay! Much better.

> And the html was supposed to look like this:

<snipped; see below>

> And the CSS:

<snipped; see below>

> All this works fine in Firefox and Opera, but in IE there is a white
> space between the two divs on the left and the one on the right

Well, I don't know the answer to your problem, but I spent some time
looking at it, and maybe somebody else (or you!) can figure it out from
here.

First, I've taken your HTML and CSS and posted it on a server to which I
have access: http://www.zugerfechtclub.ch/MM/Junk/hiazle.htm

Second, I modified your styles to provide contrasting (ugly) colors and
some visible texts. Doesn't change your problem at all. This gives your
"white space" an ugly orangey color; the space is from div#main.

Third, I added a second (tweaked) instance of your code, separated from
your otherwise unchanged code by a clear and some <HR>s.

I see by trial and error that your backgrounds, margin-rights, and
padding-left are all irrelevant to your problem. If this had been *my*
problem I was posting, I would have left all that stuff out.

What does seem to make a difference, although it doesn't solve your
problem, is removing the heights for the two left-hand DIVs (menu and
heading). For some reason I don't know, this eliminates the space in IE.
Of course, then your DIVs are the wrong size...

I had rather suspected the 3-pixel jog, but as I tried to understand the
explanation at
<http://www.positioniseverything.net/explorer/threepxtest.html> and
played with the code, I came to think it must be something else. But
maybe somebody else here knows.

Signature

John

Reply to this Message

hiazle - 30 Jul 2006 04:47 GMT

> What does seem to make a difference, although it doesn't solve your
> problem, is removing the heights for the two left-hand DIVs (menu and
[quoted text clipped - 3 lines]
> --
> John

Thanks a lot John... I'll give that a try. If I really have to do away
with the heights, then I'll try specifying a height in a div inside.
hopefully that does the trick

Hiazle

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2006

Fluid layout breaks in IE