|
|
Posted by Gιrard Talbot on 11/12/41 11:35
Len Philpot a Γ©crit :
> 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?
You are not posting an url which is always better for this kind of post.
No doctype declaration. I recommend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
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.
> <html>
> <head>
> <style type="text/css">
> <!--
Commenting the style declarations is no longer needed.
> .menu
> {
> position: absolute;
> height: 6em;
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?
> 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;
> */
> }
> /*
> .menu_item
> {
> color: black;
> text-decoration: none;
> padding-left: 5px;
> padding-right: 5px;
> }
>
> .menu_item:hover
> {
> color: yellow;
> background-color: rgb(0,0,196);
> }
> */
> -->
Commenting the style declaration is unneeded.
> </style>
> </head>
> <body>
> <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>
> </p>
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>
</ul>
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:
http://developer.mozilla.org/en/docs/Consistent_List_Indentation
> </body>
> </html>
>
> Thanks!
Post an url.
GΓ©rard
--
remove blah to email me
Navigation:
[Reply to this message]
|