7 replies [Last post]
Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 50 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Hi,

I have a funny issue concerning a bottom-border.

I have a div #header which contains 2 div #header_top and #header_bottom. To losen it up a bit and visually seperate the sub menu from the main menu I wanted to divide the 2 div with a colored border.

IE 7.0 shows perfectly. But FF 2.0 shows the border in top position of the top div. It does not make any difference whether I set border-bottom or border-bottom-width/-style/-color for the top div, or border-top/border-top-width/-style/-color for the bottom div.

Setting the background color for the header div and leaving a 2px margin between the containing top and bottom div shows perfect in IE, but FF does not display the 2px margin, but makes the complete header in the color.

Any suggestions?

The CSS

body { background-color: #FFFFFF; margin: 0; padding: 0; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; }

#page
{
width: 999px;
margin: 0 auto;
text-align: left;
background-color: #007788;
}

#header
{
width: 999px;
height: 110px;
margin: 0;
padding: 0;
background-color: #FFFFCC;
}

#header_top
{
width: 999px;
background-color: #C7DEFA;
border-bottom: 2px solid #FFFFCC;
}

#header_bottom
{
clear: both;
width: 999px;
background-color: #C7DEFA;
vertical-align: bottom;
}

The HTML

..

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 46 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

do you have a doctype? do

do you have a doctype? do you have any content in the divs?

A link to a test page, or all your code would prove very helpful here.

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 50 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

I sure do

Hi, thank you for taking your time

I uploaded it here:
Test Page

Have a great evening!

Stephan

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 46 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

The strange thing is that

The strange thing is that Firefox is correct - and so should IE7. IE7 is in standards mode (with the full doctype) and should not expand a container to enclose floats. All the children of #header_top are floats and are taken out of the normal document flow. The parent is not to contain said floats unless directed to do so. There are many ways (search for containing floats) but the simplest here is to add overflow: hidden; to #header_top. As to why IE7 is auto enclosing the floats, I'm baffled. Maybe someone else can shed some light...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It has a width, which sets

It has a width, which sets hasLayout. IE7 is still "blessed" with that abomination.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE7 was an absolute fudge

IE7 was an absolute fudge :shrug: We have a beta IE8 here at the office which makes us giggle a lot Smile we also have Vista which makes us roll on the floor in hysterics...that is if it wasn't such an issue, apparently it can't network correctly; oops off on a tangent!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 46 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

gary.turner wrote:It has a

gary.turner wrote:
It has a width, which sets hasLayout. IE7 is still "blessed" with that abomination.

cheers,

gary
Ahhh, should have known that...

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 50 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Thank you!

Great, it works fine with the overflow: hidden. Thank you very much