Mozilla and Width?

[Samuël van Laere]

Currently i have the following in my stylesheet:

..menu{
background-color: #FFFFFF;
background-image: none;
color: #336699;
font-family: sans-serif;
font-size: 100%;
margin: 10px;
width: 100%;
text-align: left;
border: 1px solid #DCDCDC;
}

Now the "Width" element works in IE, it fills to the full width available.
But under Mozilla the "Width" element seems to be ignored.
Haven't tested it under Netscape but i asume its the same there.
What is it i need to add?

I don't have a url right now, its still under development.
But perhaps someone could provide me with a possible solution?

 

[David Dorward]

.menu{
margin: 10px;
width: 100%;

Now the "Width" element works in IE, it fills to the full width available.
But under Mozilla the "Width" element seems to be ignored.

Its difficult to tell what the problem is without seeing the HTML, but two
possibilities suggest themselves.

(1) A bug in MSIE means that unless in Standards mode, it will make an
element with the above 20px narrower then it should be (width is width of
content, not width of content + padding + border + margin).

(2) Another bug in MSIE means that it will apply the width property to
inline elements (it shouldn't).

 

[brucie]

.menu{
background-color: #FFFFFF;
background-image: none;
color: #336699;
font-family: sans-serif;
font-size: 100%;
margin: 10px;
width: 100%;
text-align: left;
border: 1px solid #DCDCDC;
}

Now the "Width" element works in IE, it fills to the full width available.
But under Mozilla the "Width" element seems to be ignored.

assuming the menu class applies to something like a div then
IE6,moz1.4 opera7.2 will all make the div 100% in width plus another
20px for the margin which obviously causes scrollbars.

my guess is that you're trying to apply width to an inline element
where moz and opera correctly ignores it and IE does its own thing.
but behavior is also dependent on the doctype you've specified.

I don't have a url right now,

get one

But perhaps someone could provide me with a possible solution?

with what has been posted you have my best guess.

 

[Samuël van Laere]

get one

Ok here are the url's for the page and the stylesheet:
http://samuel.phpindex.nl/test.htm
http://samuel.phpindex.nl/test/style.css

I'm not sure what the problem could be, its not a massive page
it validates, as does the css file and its really a simple.


Thanks in advance for any suggestions.

 

[brucie]

In post <[email protected]>
Samuël van Laere said...

Ok here are the url's for the page and the stylesheet:
http://samuel.phpindex.nl/test.htm
http://samuel.phpindex.nl/test/style.css

I'm not sure what the problem could be, its not a massive page
it validates, as does the css file and its really a simple.

this is what i see with IE6:
http://usenet.alt-html.org/screencap111.png [21k]

 

[Steve Pugh]

Ok here are the url's for the page and the stylesheet:
http://samuel.phpindex.nl/test.htm
http://samuel.phpindex.nl/test/style.css

I'm not sure what the problem could be, its not a massive page
it validates, as does the css file and its really a simple.

<div class="menu"> may have width of 100%, but as they are inside <div
id="rightcontent"> that 100% means 100% of the width of rightcontent.
But...
rightcontent has width: auto, which means it's width is defined as the
width of its contents, which is menu. And so it goes round and round
in circles.

Steve

 

[David Dorward]

<div id="rightcontent"> that 100% means 100% of the width of rightcontent.
But... rightcontent has width: auto, which means it's width is defined as
the width of its contents

rightcontent is a block not a table. width: auto means "whatever is left in
the parent container after you've done the margins, padding and border"
(kinda, RTFM for the long and more accurate version).

 

[Steve Pugh]

rightcontent is a block not a table. width: auto means "whatever is left in
the parent container after you've done the margins, padding and border"
(kinda, RTFM for the long and more accurate version).

rightcontent is floated. That makes a difference.

Hence:
http://www.w3.org/TR/CSS2/visudet.html#propdef-width

10.3.5 Floating, non-replaced elements

If 'left', 'right', 'width', 'margin-left', or 'margin-right' are
specified as 'auto', their computed value is '0'.

I think, but I may well be wrong, that with a computed value of 0 the
actual width will be width of the content.

Steve

 

[David Dorward]

rightcontent is floated. That makes a difference.

Ah! So it does...

http://www.w3.org/TR/CSS2/visuren.html#floats

| A floated box must have an explicit width (assigned via the 'width'
| property, or its intrinsic width in the case of replaced elements).

As the page doesn't specify a width, and as its a div (which is not a
replaced element) then the CSS deviates from the standard so what should
actually happen is undefined and browsers run in to error correction.

 

[Samuël van Laere]

In post <[email protected]>
Samuël van Laere said...

Ok here are the url's for the page and the stylesheet:
http://samuel.phpindex.nl/test.htm
http://samuel.phpindex.nl/test/style.css

I'm not sure what the problem could be, its not a massive page
it validates, as does the css file and its really a simple.

this is what i see with IE6:
http://usenet.alt-html.org/screencap111.png [21k]

I do not have IE6 so i can't test it, i asumed that it would work anyway
since it works on IE5.5.
But it is ok now since i just started a fresh page:
http://samuel.phpindex.nl/test2.htm

That one should work fine with IE6.
It works on Mozilla, later i will test it on Opera and Netscape
but for now i asume it works on those to.


Thanks for your help Brucie and Steve.

 

[brucie]

this is what i see with IE6:
http://usenet.alt-html.org/screencap111.png [21k]

I do not have IE6 so i can't test it, i asumed that it would work anyway
since it works on IE5.5

i suspected you were on IE5x so i didn't bother offering a solution as
i cant test with it. you really should upgrade.

But it is ok now since i just started a fresh page:
http://samuel.phpindex.nl/test2.htm
That one should work fine with IE6.

yep
http://usenet.alt-html.org/screencap112.png [25k]

It works on Mozilla, later i will test it on Opera and Netscape
but for now i asume it works on those to.

opera7.2 (win) likes it

 

[Samuël van Laere]

this is what i see with IE6:
http://usenet.alt-html.org/screencap111.png [21k]

I do not have IE6 so i can't test it, i asumed that it would work anyway
since it works on IE5.5

i suspected you were on IE5x so i didn't bother offering a solution as
i cant test with it. you really should upgrade.

I'm still running old but stable 98SE though i'm happy with it.
It makes sence to upgrade, but then i'll loose my beloved win98 icons for IE
and Outlook.
The new icons look horrible on 98SE.

But perhaps i should upgrade and then use Reshack to add my favorite icon.

 

[Samuël van Laere]

Ah! So it does...

http://www.w3.org/TR/CSS2/visuren.html#floats

| A floated box must have an explicit width (assigned via the 'width'
| property, or its intrinsic width in the case of replaced elements).

As the page doesn't specify a width, and as its a div (which is not a
replaced element) then the CSS deviates from the standard so what should
actually happen is undefined and browsers run in to error correction.

So just adding a value for width would do the trick?
Haven't tried it yet but i will do so later.
I'm just "building" multiple pages to see what is does and how it works on
browsers.
Best way to learn is to try? (and read offcourse)