Design breaks - box model problem

Question

Hello all, again
I've got an additional problem in that my CSS design breaks
in IE6 but is
okay in FF. I know it's got to be something to do with the
box model but I
can't for the life of me figure out what's wrong.
My numbers add up - the main container is 819px, there are 4
divs, the first
is 610 px wide (top left), the second 209 (top right), the
third 610 (bottom
left) and the fourth 206 (bottom right) - this one smaller
for aesthetic
reasons.
The first div, has a 10px margin on the left but I've taken
this off the
total div width so the div width is 600px + 10px margin-left.
This is where
the problem is - when I reduce the div width to 590px, it
displays fine in
IE6 but is slightly out of whack in FF. I hope this is making
sense....
There's no doubt some glaring error here - I just can't see
it.
URL: www.patriotsarms.co.uk/headerMain.php
Thanks again
Judi

Answer 1

Thanks all
Murray: Your solution worked perfectly. So quick and simple.
Oh dear.
>The solution is to make each such element display:inline.
Nadia: You must get some pretty interesting colour
combinations.....
Thanks for pointing that out.
>I just wanted to point out that you need to declare a
background color to
>your pages - I'm seeing my
browsers' hotpink background instead of your intended white
Excavatorak: Thanks for your suggestions - would have worked
as well, I am
sure.
Cheers
Judi
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> Here's the problem in IE -
>
> DIV.headLogo_ {
> MARGIN-TOP: 8px;
> FLOAT: left;
> MARGIN-LEFT: 10px;
>
>
> Any time you have a margin on the same side as the
float, IE doubles the
> margin. The solution is to make each such element
display:inline. It
> will have no effect on other browsers, since it's a
floated element
> anyhow, but it keeps IE from doing its nasty deed.
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.dreamweavermx-templates.com
- Template Triage!
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> ==================
>
>
> "Excavatorak" <[email protected]> wrote in
message
> news:[email protected]...
>> #table_01 is 819px wide
>>
>> headlogo is 600px with 10px marginleft ... headlinks
is 209px wide
>>
>> That adds up to 819 which is fine for most browsers
but IE6 adds an extra
>> 3px
>> (only 3??? Pretty sure...) to each float...
>> Try this CSS and see if it works for you:
>>
>>
>>
>> div.Table_01 {
>> width:819px;
>> height:287px;
>> }
>>
>> div.headLogo_ {
>> width:500px;
>> height:44px;
>> margin-left:10px;
>> margin-top:8px;
>> float: left;
>> }
>>
>> div.headLinks_ {
>> float:right;
>> width:209px;
>> height:52px;
>> text-align:center;
>>
>> }
>>
>
>