Who wants to make me slap my forehead and go "D'OH!"???? (or "Unwanted Margins")

[+mrcakey]

http://mrcakey.co.uk/newdd/

Even though the divs logo, menu and footer are all set to 100% width, FF
(and IE6 for that matter) insist on extending past the viewport and adding
an ugly white margin at the right hand side of the top two divs. I've got
everything I can think of set to padding/margin 0. It's been doing my head
in for almost 48 hours now. There's bound to be a simple explanation, at
which point I'll go "D'OH!", slap my forehead and buy an imaginary beer for
the first person to solve it.

CSS is here: http://mrcakey.co.uk/newdd/css.css

 

[Els]

http://mrcakey.co.uk/newdd/

Even though the divs logo, menu and footer are all set to 100% width,

100% width plus padding on the footer

There's bound to be a simple explanation, at
which point I'll go "D'OH!", slap my forehead and buy an imaginary beer for
the first person to solve it.

I'll have a rum coke if you don't mind ;-)

 

[Bergamot]

http://mrcakey.co.uk/newdd/

Even though the divs logo, menu and footer are all set to 100% width, FF
(and IE6 for that matter) insist on extending past the viewport

Besides what Els said, validating both the HTML and CSS should be one of
the first steps in debugging rendering issues.

If you can't figure out the problem from the W3C validator report, try a
View Source in Firefox.

 

[Peter]

fix your footer

 

[dorayme]

100% width plus padding on the footer


I'll have a rum coke if you don't mind ;-)

While Els is enjoying her rum and coke, consider getting rid of all
references to width: 1024px; the only things then to rethink are the
flash object at the top (allowing one to be less wide somehow or not
having one... I can't see it doing anything at all on my browsers?) so
your viewers can enjoy the benefit of having less wide browser or simply
to be able to read lines of text at a more comfortable less width...

 

[+mrcakey]

100% width plus padding on the footer


I'll have a rum coke if you don't mind ;-)

The most annoying thing is that I went over in my head several times - there
must be something different between the three 100% areas. The standard box
model is really pants though - so counter-intuitive. In real life, boxes
are as wide as they are and then you stick padding in them.

Anyway, would you like ice and a slice?

+mrcakey

 

[+mrcakey]

Besides what Els said, validating both the HTML and CSS should be one of
the first steps in debugging rendering issues.

If you can't figure out the problem from the W3C validator report, try a
View Source in Firefox.

Is there an embarrassed face smiley? It was valid, but I was adding and
taking away div's in an effort to rectify the problem and evidently I missed
off a >, D'oh!

+mrcakey

 

[Els]

The most annoying thing is that I went over in my head several times - there
must be something different between the three 100% areas.

Install Firebug. Really - I just hovered over the 3 sections in the
HTML part of the code window, and the footer was the one extending.
Also, Firebug then immediately showed big fat paddings on the element.
Too easy!

The standard box
model is really pants though - so counter-intuitive. In real life, boxes
are as wide as they are and then you stick padding in them.

Depends how you look at it. If I have a 50cm wide item and buy a box
for it, I need to take the padding into account to know how big the
box will need to be. Padding is usually used for boxes that contain
rigid sized content, not in containers that will then be filled with
flexible things like liquid.

Anyway, would you like ice and a slice?

no ice please, lemon is good, thanks