IE 6.0 / Firefox 1.07 and CSS positioning differences

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I'm very new to CSS (just experimenting) and this may well just be an
unavoidable difference between the two browsers, but I'd like to know
for sure. I have no others here at home to test with. At work I have
Opera, Konqueror, Galeon, etc., etc. but not here.

Anyway, the following code just creates a scrolling menu (complete with
dummy links ;-)  I've commented out all but basically the essentials and
still it happens : In Firefox it automatically adjusts the width
properly and doesn't generate a horizontal scrollbar (just the
vertical). While in IE it /always/ makes it too narrow and thus adds one
there. The commented stuff is obviously just visual candy, but it
happens regardless.

I'm more than wide open to the distinct possibility I'm going astray
somehow, but if so, what am I doing wrong?

        <style type="text/css">
                position: absolute;
                height: 6em;
                overflow: auto;
                border-color: black;
                border-style: solid;
                border-width: 1px;
                left: 10px;
                top: 10px;
                background-color: rgb(220,220,220);
                padding: 15px;
                padding-top: 5px;
                padding-bottom: 5px;
                font-weight: bold;
                font-size: 10pt;
                color: black;
                text-decoration: none;
                padding-left: 5px;
                padding-right: 5px;

                color: yellow;
                background-color: rgb(0,0,196);
        <p class="menu">
            <a href="dummy" class="menu_item">Menu choice one</a><br>
            <a href="dummy" class="menu_item">Menu choice two</a><br>
            <a href="dummy" class="menu_item">Menu choice three</a><br>
            <a href="dummy" class="menu_item">Menu choice four</a><br>
            <a href="dummy" class="menu_item">Menu choice five</a><br>
            <a href="dummy" class="menu_item">Menu choice six</a><br>
            <a href="dummy" class="menu_item">Menu choice seven</a><br>
            <a href="dummy" class="menu_item">Menu choice eight</a><br>
            <a href="dummy" class="menu_item">Menu choice nine</a><br>
            <a href="dummy" class="menu_item">Menu choice ten</a><br>


 -- Len Philpot ->     <--
 ------ ><> -----> <--

Re: IE 6.0 / Firefox 1.07 and CSS positioning differences

Len Philpot a écrit :
Quoted text here. Click to load it

You are not posting an url which is always better for this kind of post.

No doctype declaration. I recommend

" ">

so that you make sure you trigger all modern/web standards compliant
browsers (including MSIE 6) into standards compliant rendering mode.
When triggered in standards compliant rendering mode, MSIE 6 implements
correctly the CSS1 box model.

Quoted text here. Click to load it

Commenting the style declarations is no longer needed.

Quoted text here. Click to load it

The height is supposed to be for the whole paragraph which has 10 links
with forced wrapping. What's wrong with not setting the height at all?
... thus letting the content set the box height?

Quoted text here. Click to load it

Commenting the style declaration is unneeded.

Quoted text here. Click to load it

I disagree with your semantic markup. Better is to use a real list for
your navigation menu.

     <ul id="MenuNav">
        <li><a href="dummy">Menu choice one</a></li>
        <li><a href="dummy">Menu choice two</a></li>
        <li><a href="dummy">Menu choice three</a></li>
        <li><a href="dummy">Menu choice four</a></li>
        <li><a href="dummy">Menu choice five</a></li>
        <li><a href="dummy">Menu choice six</a></li>
        <li><a href="dummy">Menu choice seven</a></li>
        <li><a href="dummy">Menu choice eight</a></li>
        <li><a href="dummy">Menu choice nine</a></li>
        <li><a href="dummy">Menu choice ten</a></li>

That way, your navigation menu of 10 links will degrade gracefully in
user agents not supporting CSS.

You can style the list item for that <ul> like this:

ul#MenuNav li

Here, it's better to use id and not class for the list because such list
is likely to be only once used in your page. Class is used for elements
which can be grouped logically in style declarations.

Note that <ul> and <li> have different margin and padding values from
browser (version) to browser (version).

Consistent List Indentation:

Quoted text here. Click to load it

Post an url.

remove blah to email me

Re: IE 6.0 / Firefox 1.07 and CSS positioning differences

Quoted text here. Click to load it

It's not published anywhere - Just on a PC. It was just a page I had
created while reading some stuff online, trying various things. In fact,
I don't even have access to it right now, but I'll save your reply for
when I can sit down with it (thanks!).

Quoted text here. Click to load it

Partially (and misguidely) intentional on my part - I was trying to
strip it down to the bare essentials, but I guess removing influential
code is going a bit too far, eh? ISTR I was using 4.01 transitional.

Quoted text here. Click to load it

That's good to know, although other things I wrote don't seem to work as
expected once quirks mode is gone (obviously). The last time I wrote any
HTML was using Netscape 2 era code, so it's been a while and obviously I
have a lot to (re)learn.

Quoted text here. Click to load it

Well, I had other content below below it that I wanted to remain
onscreen, IIRC.

Quoted text here. Click to load it

See the answer before last - Obviously I need to rethink things. :-)
Thanks for the tip.

Quoted text here. Click to load it

Bookmarked for future reference.

Thanks again and Merry Christmas.


 -- Len Philpot ->     <--
 ------ ><> -----> <--

Site Timeline