Stylesheets - Bloody IE!!!

Author

Bloody IE!!!

Usenet

2006-05-11, 6:58 am

OK, the hover thing was my fault, I didn't put up the javascript to
fix IE's shortcomings, but it's *still* horrible!

vowleyfarm dot co dot uk slash MagContents dot htm

(is that over-paranoid?) is a double example of the problems I'm
having.

One dropdown menu seems to have decided to show the first element of
the dropdown as well as the pad! The box has super-sized itself, is
that cause or effect? I don't know.

And then my second menu (which yous were kind enough to point me in
the right direction to fix)(just haven't had time yet) just doesn't
work at all! I can't see any difference in the stylesheet (I'll put
it at the bottom of this message), which was modified from the
suckerfish examples on the web.

I'm sure it's something startling simple that I already ought to
know, but... :-(

Regards
Mark Stanton
One small step for mankind...

/* "nav" is horizontal top menu */
#nav, #nav ul {
padding: 0;
margin: 0;
color: black;
list-style: none;
line-height: 1;
list-style-image: none;
list-style-type: none;
list-style-position: outside;
float: left;
}

#nav a {
display: block;
width: 8em;
}

#nav li {
float: left;
width: 7em;
/* color: green; */
position: relative;
line-height: 1.25em;
margin-bottom: -1px;
}

#nav li ul {
position: absolute;
width: 6.2em;
left: -999em;
color: black;
clear: left;
/* margin-left: 7.05em;
margin-top: -1.35em; */
}

#nav li ul ul {
margin: -1em 0 0 10em ;
color: black;
left: -999em;
margin-left: 7.05em;
margin-top: -1.35em;
}

#nav li a {
/* border: 1px solid green; */
padding: 0pt 0.5em;
width: 6em;
display: block;
color: black;
font-weight: bold;
text-decoration: none;
background-color: white;
}

/* "cNav" is vertical side menu */
#cNav, #cNav ul {
line-height: 1;
left-margin: 2pt;
padding: 0pt;
list-style-position: none;
list-style-type: none;
/* width: 3em;
/* border: solid;
border-width: 1; */
float: left;
clear: both;
border-color: black;
background-color: #ffffcc;
}

#cNav a {
display: block;
width: 4em;
clear: both;
background-color: #ffffcc;
border-color: black;
}

#cNav li {
float: left;
width: 4em;
position: relative;
/* line-height: 1.25em; */
margin-bottom: -1px;
border: solid;
border-width: 1;
clear: both;
}

#cNav li ul {
position: absolute;
width: 10em;
top: -0.2em;
left: -999em;
/* color: black; */
clear: both;
/* margin-left: 7.05em;
margin-top: -1.35em; */
}

#cNav li li {
width: 10em ;
position: relative ;
}

#cNav li ul ul {
margin: 0 0 0 10em ;
/* color: black; */
left: -999em;
/* margin-left: 3.05em;
margin-top: -1.35em; */
}

#cNav li a {
padding: 0pt 0.5em;
/* width: 6em; */
display: block;
font-weight: bold;
text-decoration: none;
/* background-color: white; */
}

/* hover on text in box */
#nav li a:hover {
hover: auto;
color: white;
background-color: green;
}

/* hover on text in box */
#cNav li a:hover {
hover: auto;
clear: both;
/* background-color: green; */
}

/* first flyout menu from menubar */
#cNav li:hover ul, #cNav li.sfhover ul, #cNav li li.sfhover ul,
#cNav li li li:hover ul, #cNav li li li.sfhover ul {
left: 4em;
clear: both;
}

#nav li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav
li li.sfhover ul, #nav li li li.sfhover ul {
left: -0.2em;
border: 3px solid blue;
width: 7em;
}

/* second flyout menu from menubar */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul
ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#cNav li:hover ul ul, #cNav li:hover ul ul ul, #cNav li.sfhover ul
ul, #cNav li.sfhover ul ul ul {
left: -999em;
}

/* subsequent cascaded menus */
#nav li li:hover ul, #nav li li li:hover ul #nav li.sfhover ul,
#nav li li.sfhover ul {
left: 0.1em;
}

#cNav li li:hover ul, #cNav li li li:hover ul #cNav li.sfhover ul,
#cNav li li.sfhover ul {
left: 0em;
/* width: 7em; */
}

#nav a.topdaddy {
background: #ffffcc url(../../images/dnarrow.bmp) no-repeat
scroll left center;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
}

#nav a.childdaddy {
background: #ffffcc url(../../images/rightarrow2.gif) no-
repeat scroll right center;
}

#cNav a.childdaddy, #cNav a.topdaddy {
background: #ffffcc url(../../images/rightarrow2.gif) no-
repeat scroll right;
}

Chris Sharman

2006-05-11, 6:49 pm

Usenet wrote:
> OK, the hover thing was my fault, I didn't put up the javascript to
> fix IE's shortcomings, but it's *still* horrible!
>
> vowleyfarm dot co dot uk slash MagContents dot htm
>
> (is that over-paranoid?) is a double example of the problems I'm
> having.

Yes, it's over-paranoid.
Validate, validate, validate.
Most of your problems are on or around syntactic errors in your html.
Validation can be done at http://validator.w3.org/
There's also a nice embedded validator for moz/Fx at
http://users.skynet.be/mgueury/mozilla/

Chris

> One dropdown menu seems to have decided to show the first element of
> the dropdown as well as the pad! The box has super-sized itself, is
> that cause or effect? I don't know.
>
> And then my second menu (which yous were kind enough to point me in
> the right direction to fix)(just haven't had time yet) just doesn't
> work at all! I can't see any difference in the stylesheet (I'll put
> it at the bottom of this message), which was modified from the
> suckerfish examples on the web.
>
> I'm sure it's something startling simple that I already ought to
> know, but... :-(
>
> Regards
> Mark Stanton
> One small step for mankind...
>
> /* "nav" is horizontal top menu */
> #nav, #nav ul {
> padding: 0;
> margin: 0;
> color: black;
> list-style: none;
> line-height: 1;
> list-style-image: none;
> list-style-type: none;
> list-style-position: outside;
> float: left;
> }
>
> #nav a {
> display: block;
> width: 8em;
> }
>
> #nav li {
> float: left;
> width: 7em;
> /* color: green; */
> position: relative;
> line-height: 1.25em;
> margin-bottom: -1px;
> }
>
> #nav li ul {
> position: absolute;
> width: 6.2em;
> left: -999em;
> color: black;
> clear: left;
> /* margin-left: 7.05em;
> margin-top: -1.35em; */
> }
>
> #nav li ul ul {
> margin: -1em 0 0 10em ;
> color: black;
> left: -999em;
> margin-left: 7.05em;
> margin-top: -1.35em;
> }
>
> #nav li a {
> /* border: 1px solid green; */
> padding: 0pt 0.5em;
> width: 6em;
> display: block;
> color: black;
> font-weight: bold;
> text-decoration: none;
> background-color: white;
> }
>
> /* "cNav" is vertical side menu */
> #cNav, #cNav ul {
> line-height: 1;
> left-margin: 2pt;
> padding: 0pt;
> list-style-position: none;
> list-style-type: none;
> /* width: 3em;
> /* border: solid;
> border-width: 1; */
> float: left;
> clear: both;
> border-color: black;
> background-color: #ffffcc;
> }
>
> #cNav a {
> display: block;
> width: 4em;
> clear: both;
> background-color: #ffffcc;
> border-color: black;
> }
>
> #cNav li {
> float: left;
> width: 4em;
> position: relative;
> /* line-height: 1.25em; */
> margin-bottom: -1px;
> border: solid;
> border-width: 1;
> clear: both;
> }
>
> #cNav li ul {
> position: absolute;
> width: 10em;
> top: -0.2em;
> left: -999em;
> /* color: black; */
> clear: both;
> /* margin-left: 7.05em;
> margin-top: -1.35em; */
> }
>
> #cNav li li {
> width: 10em ;
> position: relative ;
> }
>
>
> #cNav li ul ul {
> margin: 0 0 0 10em ;
> /* color: black; */
> left: -999em;
> /* margin-left: 3.05em;
> margin-top: -1.35em; */
> }
>
> #cNav li a {
> padding: 0pt 0.5em;
> /* width: 6em; */
> display: block;
> font-weight: bold;
> text-decoration: none;
> /* background-color: white; */
> }
>
> /* hover on text in box */
> #nav li a:hover {
> hover: auto;
> color: white;
> background-color: green;
> }
>
> /* hover on text in box */
> #cNav li a:hover {
> hover: auto;
> clear: both;
> /* background-color: green; */
> }
>
>
>
> /* first flyout menu from menubar */
> #cNav li:hover ul, #cNav li.sfhover ul, #cNav li li.sfhover ul,
> #cNav li li li:hover ul, #cNav li li li.sfhover ul {
> left: 4em;
> clear: both;
> }
>
> #nav li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav
> li li.sfhover ul, #nav li li li.sfhover ul {
> left: -0.2em;
> border: 3px solid blue;
> width: 7em;
> }
>
> /* second flyout menu from menubar */
> #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul
> ul, #nav li.sfhover ul ul ul {
> left: -999em;
> }
>
> #cNav li:hover ul ul, #cNav li:hover ul ul ul, #cNav li.sfhover ul
> ul, #cNav li.sfhover ul ul ul {
> left: -999em;
> }
>
> /* subsequent cascaded menus */
> #nav li li:hover ul, #nav li li li:hover ul #nav li.sfhover ul,
> #nav li li.sfhover ul {
> left: 0.1em;
> }
>
> #cNav li li:hover ul, #cNav li li li:hover ul #cNav li.sfhover ul,
> #cNav li li.sfhover ul {
> left: 0em;
> /* width: 7em; */
> }
>
> #nav a.topdaddy {
> background: #ffffcc url(../../images/dnarrow.bmp) no-repeat
> scroll left center;
> -moz-background-clip: initial;
> -moz-background-origin: initial;
> -moz-background-inline-policy: initial;
> }
>
> #nav a.childdaddy {
> background: #ffffcc url(../../images/rightarrow2.gif) no-
> repeat scroll right center;
> }
>
> #cNav a.childdaddy, #cNav a.topdaddy {
> background: #ffffcc url(../../images/rightarrow2.gif) no-
> repeat scroll right;
> }
>

Martin Jay

2006-05-12, 6:47 pm

In message <VA.00001d1b.007ef2c3@vowleyfarm.co.uk>, Usenet
<Mark@dont.spamme.invalid> writes
>OK, the hover thing was my fault, I didn't put up the javascript to
>fix IE's shortcomings, but it's *still* horrible!
>
>vowleyfarm dot co dot uk slash MagContents dot htm
>
>(is that over-paranoid?) is a double example of the problems I'm
>having.

Yes, that is being a bit paranoid. :)

>One dropdown menu seems to have decided to show the first element of
>the dropdown as well as the pad! The box has super-sized itself, is
>that cause or effect? I don't know.

If I were you I'd use another navigation method. Those drop-down menus
don't look very attractive, and as a visitor to the site I find them a
pain to use.

I think you should also resize the images before uploading them, and not
rely on web browsers to do it for you. Some of the images on the main
page look very deformed.

Oh, and your address box at the bottom of the pages is out of alignment.
:(

There's some nice content on the site.
--
Martin Jay

phil-news-nospam@ipal.net

2006-05-12, 6:47 pm

On Fri, 12 May 2006 15:58:24 +0100 Martin Jay <martin@spam-free.org.uk> wrote:
| In message <VA.00001d1b.007ef2c3@vowleyfarm.co.uk>, Usenet
| <Mark@dont.spamme.invalid> writes

|>One dropdown menu seems to have decided to show the first element of
|>the dropdown as well as the pad! The box has super-sized itself, is
|>that cause or effect? I don't know.
|
| If I were you I'd use another navigation method. Those drop-down menus
| don't look very attractive, and as a visitor to the site I find them a
| pain to use.

I somewhat agree. But what would you suggest as an alternative?

I'm considering going more with left side menus. Some sites will have
submenus appear just to the right upon hovering. Other sites will have
submenus expand below (moving the parts originally below further on
down).

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------