Firefox - width

**steven** · Nov 16 '06, 12:17 PM

Can we see the code in question please?

**drhowarddrfine** · Nov 16 '06, 04:04 PM

Yes, need the code to see specifics but the problem is not Firefox. It's an IE bug that causes it to extend elements to contain floated or absolutely positioned content. Firefox is performing correctly. Chances are, adding overflow:auto; to the containing elements CSS will do what you want.

Just remember the mantra: if it works in old, buggy non-standard IE but not other browsers then the code is wrong.

**wr657** · Nov 16 '06, 09:57 PM

Here's the code:

.box {
background-color: #FFE4C4;
width: 780px;
}

**wr657** · Nov 16 '06, 10:18 PM

I've added, as recommended, overflow: auto to the code.
It worked to a certain extent, but not completely.

**drhowarddrfine** · Nov 17 '06, 03:00 AM

The code you showed is like reading one sentence of a book. We need the whole thing or, preferably, a link.

**wr657** · Nov 17 '06, 08:47 AM

The address is http://www.bomloveven.com/test.html

Here follows the css-code. I have omitted code wich I don't consider having
consequenses for the problem. The code is mainly norwegian words, but I have
added some english explanation in the html-code. If it would
be easier for you to get the perspective I will translate them.

[#aktiv {
PADDING-LEFT: 2em;
PADDING-RIGHT: 2em;
PADDING-TOP: 0.4em;
PADDING-BOTTOM: 0.4em;
BORDER-RIGHT: #3399cc 1px solid;
BORDER-TOP: #3399cc 1px solid;
BORDER-LEFT: #3399cc 1px solid;
BORDER-BOTTOM: #3399cc 1px solid;
TEXT-DECORATION: none;
background-color: #FFE4C4;
COLOR: Black;
MARGIN-RIGHT: 1em;}

.boks {
background-color: #FFE4C4;
width: 780px;
overflow: auto;}

div.container {
width: 100%;
line-height: 100%;}

div.venstre {
text-align: left;
background-color: #FFE4C4;
font-size: 1em;
float:left;
width:10em;
margin:0em;
padding-top:1em;
padding-left: 0.5em;
padding-bottom: 1em;}

#meny {
BORDER-RIGHT: #3399cc 1px solid;
BORDER-TOP: #3399cc 1px solid;
BORDER-LEFT: #3399cc 1px solid;
BORDER-BOTTOM: #3399cc 1px solid;
BACKGROUND: #cc9999;
padding-RIGHT: 0px;
padding-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
FONT: 70% Verdana, Helvetica, sans-serif;
WIDTH: 13em;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
LETTER-SPACING: 0.1em;
DISPLAY: block;
HEIGHT: 100%;
TEXT-DECORATION: none:
text-align: left;}

#meny LI {
MARGIN-BOTTOM: 0.25em;}

#meny A {
BORDER-RIGHT: #996666 1px solid;
PADDING-RIGHT: 0.25em;
BORDER-TOP: #996666 1px solid;
DISPLAY: block;
PADDING-LEFT: 0.25em;
BACKGROUND: #FF9F9F;
PADDING-BOTTOM: 0.25em;
BORDER-LEFT: #996666 1px solid;
WIDTH: auto;
PADDING-TOP: 0.25em;
BORDER-BOTTOM: #996666 1px solid;
HEIGHT: 100%;
TEXT-DECORATION: none:}

#menycontainer UL {
MARGIN: 2em;
FONT: 70% Verdana, Helvetica, sans-serif;
TEXT-ALIGN: center;}

#menycontainer LI {
DISPLAY: inline;
LIST-STYLE-TYPE: none;}

#menycontainer LI A {
PADDING-LEFT: 2em;
PADDING-RIGHT: 2em;
PADDING-TOP: 0.4em;
PADDING-BOTTOM: 0.4em;
BORDER-RIGHT: #3399cc 1px solid;
BORDER-TOP: #3399cc 1px solid;
BORDER-LEFT: #3399cc 1px solid;
BORDER-BOTTOM: #3399cc 1px solid;
BACKGROUND: #FF9F9F;
MARGIN-RIGHT: 1em;
TEXT-DECORATION: none;
COLOR: Black;}

.undertopp {
width: 780px;
background: Black;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.1em;
padding-top: 0.1em;
text-align: center;}]

**drhowarddrfine** · Nov 17 '06, 03:47 PM

Add overflow:auto; to .box and that solves the problem.

You have another issue. Your doctype is incorrect. New pages should be created using this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Also, you should get in the habit of using lower case in your tags. HTML doesn't care but XHTML does. CSS does, too.

Changing to a strict doctype may change the appearance of your page forcing you to recode something but you should be coding in strict anyway.

In addition, you are using the xml declaration: <?xml version="1.0" encoding="iso-8859-1"?> but you aren't using XML. It should be the first line of your code but you aren't using XML anyway so you should remove it. On top of that, only modern browsers handle it properly while IE will choke on it and go into 'quirks' mode.

Also, because you are not using XML, you should not try using XML Namespaces. Change this: <html xmlns="http://www.w3.org/1999/xhtml"> to <html>

After all that, validate your html and css to check for other errors.

**wr657** · Nov 24 '06, 08:50 AM

I have added overflow : auto to the code. That is helping a bit but not enough.
I have made a page called test.html. When I open this file in Firefox, there are
still some pixels to fill with the right background colour; as far as to the end
of the black top.

If uou visit http://www.bomloveven. com/test.html you may
see what I mean.

I have removed the xml declaration, but I wonder it there's a xhtml declaration to
use?

**drhowarddrfine** · Nov 24 '06, 01:15 PM

No, there is no xhtml declaration like the xml one. Also, IE does not even support xhtml served as xhtml.

I don't see where you changed any of the other things I mentioned above and you only moved the xml declaration to an illegal place.

Firefox - width

Firefox - width

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment