|
|
Posted by Desmond on 04/21/07 11:48
On 21 Apr, 12:35, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
> 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. Visithttp://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
Thanks John. I am copied this code from an authour on the website
without fully understanding blocks and floats. I take it
1 em = about 16 px. Will test site using other browsers first as IE
seems to be more forgiving.
Thanks. Desmond.
Navigation:
[Reply to this message]
|