|
|
Posted by John Hosking on 04/21/07 11:35
Desmond wrote:
> Can anyone shead some light on this. I copied some of this from a
> website
Which? A trustworthy one? (Hint: no.)
> that claimed it works in all browsers. This is not the case.
Uh huh.
> It only works in IE but not in
>
> Fire Fox 1.5.0.11
> Netscape 7.2
> Opera 8.5
>
> http://www.des-otoole.co.uk/Menu/Menu.htm
Any time you're comtemplating "browser compatibility," you
(1) can expect that if only one browser is doing something wrong, it's
IE; and
(2) make sure you're in standards mode rather than quirks mode.
Replace your doctype with e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
>
> Any ideas it passes w3c validator.
Only the HTML, not the CSS. Visit http://jigsaw.w3.org/css-validator/
and make the changes to fix the errors listed there.
Make additional changes to your CSS like the following:
#nav a
{ display: block;
width: 6.3em; /*was 50px, instead of 101px*/
}
#nav li
{ float: left;
width: 101px; /*was *50px, not 101px (images) or 6.3em (equiv text)*/
MARGIN: 0px; /*one of the validation errors. Add semi-colon */
border: 0;
padding: 0;
}
#nav li ul
{ position: absolute;
width: 6.3em; /*was 50px, instead of 101px*/
left: -999em;
border: 6; /*one of the validation errors. Remove the line */
border-left: 1px solid; /*what color border do you want? */
}
Note also that your menu will not be useful to those who can't see the
images. You could use texts instead, which would probably load faster as
well as being more accessible to more users.
You also don't need to use an image (remainder.jpg) for the gray
background. To your #menu rule, you could add background-color: #d4cbcc;
width:800px; height:25px; (where the px values should change to em
values if you swap the menu graphics for text or drop the idea of a
fixed-width site). Then you can discard the entire "menu-right" div in
the HTML and CSS.
HTH
--
John
Navigation:
[Reply to this message]
|