Rollover example with different stylesheet critique needed

Good day Girl and Boys,

Could you give me some comment / critique about the "Rollover example with
different stylesheet page".
Please tear this page apart (don't be shy).
http://www.semi-conductor.nl/test/rollover/

--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site

picayunish wrote:

http://www.semi-conductor.nl/test/rollover/

In Opera 7.2: http://www.nicoschuyt.nl/test/roll_o6_1.jpg
After reload: http://www.nicoschuyt.nl/test/roll_o6_2.jpg

BTW, still the same low page ranking (2/10) of http://www.semi-conductor.nl
I see. Try to submit to DMOZ.

Regards, Nico

"picayunish" <e_vdvaart (AT) yahoo (DOT) co.uk> wrote

Good day Girl and Boys,

Could you give me some comment / critique about the "Rollover example with
different stylesheet page".
Hi

I note that the horizontal list has a small defect in IE6 (also probably 5
and 5.5 but don't have them at the moment) in that the cursor has to be over
the text in the link before it can activate the link. This can be cured with
width: 100% and I think you can chuck in height: 100% for good measure in

a.horunord, a.horunord:visited {

display: block;
width: 100%;
height: 100%;

and also do this in the hover pseudo class (BTW - you forgot the display:
block bit in the hover rule)

bye
David

"picayunish" <e_vdvaart (AT) yahoo (DOT) co.uk> wrote in
news:9EWmb.2596$2o2.18170@amstwist00:

Good day Girl and Boys,

Could you give me some comment / critique about the "Rollover example
with different stylesheet page".
Please tear this page apart (don't be shy).
http://www.semi-conductor.nl/test/rollover/

You don't have to use class atributes at all.
For example:

<div id="navhorunord">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

And:
#navhorunord {width: 100%;}

#navhorunord ul {
list-style: none;
margin-left: 0em;
padding-left: 0em;
}

#navhorunord li {float: left;}

#navhorunord a, #navhorunord a:visited {
text-align: center;
color : #fff;
background: #ff6666;
display: block;
padding-right: 2em;
padding-left: 2em;
text-decoration: none;
border-left: #ff9966 2px solid;
border-bottom: #000 2px solid;
border-right: #000 2px solid;
border-top: #ff9966 2px solid;
}

#navhorunord a:hover {
color : #000;
background: #ffcc99;
border-top: #000 2px solid;
border-right: #ffbb99 2px solid;
border-bottom: #ffbb99 2px solid;
border-left: #000 2px solid;
}

It's much clearer now.

--
altamir

Nico Schuyt wrote in news:3f9c9144$0$2720$1b62eedf (AT) news (DOT) euronet.nl:

picayunish wrote:
http://www.semi-conductor.nl/test/rollover/

In Opera 7.2: http://www.nicoschuyt.nl/test/roll_o6_1.jpg
After reload: http://www.nicoschuyt.nl/test/roll_o6_2.jpg

That's strange. When I viewed the page with Opera 7.0 the background of the
buttons are present.
http://www.semi-conductor.nl/img/rollover.png 32.2 KB (32969 bytes)

BTW, still the same low page ranking (2/10) of
http://www.semi-conductor.nl I see. Try to submit to DMOZ.

Hmmm.
The site is in DMOZ.
http://dmoz.org/Business/Electronics...l/Directories/
Look at the nr. 45
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site

picayunish wrote:

Nico Schuyt wrote:
picayunish wrote:

BTW, still the same low page ranking (2/10) of
http://www.semi-conductor.nl I see. Try to submit to DMOZ.

Hmmm.
The site is in DMOZ.
http://dmoz.org/Business/Electronics...l/Directories/
Look at the nr. 45

Strange, DMOZ doesn't show up in your backward links nor in the Google
directory
(http://directory.google.com/Top/Busi...trical/Directo
ries/) Probably it was only recently included in DMOZ.
Nico

David Graham wrote in
news:aU7nb.4135$xS2.2461202 (AT) newsfep2-win (DOT) server.ntli.net:

"picayunish" <e_vdvaart (AT) yahoo (DOT) co.uk> wrote in message
news:9EWmb.2596$2o2.18170 (AT) amstwist00 (DOT) ..
Good day Girl and Boys,

Could you give me some comment / critique about the "Rollover example
with different stylesheet page".
Hi
I note that the horizontal list has a small defect in IE6 (also probably
5 and 5.5 but don't have them at the moment) in that the cursor has to
be over the text in the link before it can activate the link. This can
be cured with width: 100% and I think you can chuck in height: 100% for
good measure in

a.horunord, a.horunord:visited {

display: block;
width: 100%;
height: 100%;

Tried it. This is how it looks with a width of 100%
http://www.semi-conductor.nl/img/rollover2.png 26.78 KB (27422 bytes)

However when I add the width 10% in li.horunord and only the width: 100%
and display block in the a:xx, then in IE6 will show the buttons perfect.
However not in Firebird, NS 7.1 and Moz.

When I change the width of #navhorunord into 100%. Add the width of the li
(19%) and us a width of 40% for the links.
The buttons will be shown correctly in IE with a window of 800x600.

In this case I don't advice to use width = 100%.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site

"picayunish" <e_vdvaart (AT) yahoo (DOT) co.uk> wrote

Good day Girl and Boys,

Could you give me some comment / critique about the "Rollover example with
different stylesheet page".
Please tear this page apart (don't be shy).
http://www.semi-conductor.nl/test/rollover/

I like it. Simple, clear, bright, cheery -- why, why, it's perfection
itself. Who could ask for a better rollover?


--
Bonnie Granat
Granat Technical Editing and Writing
http://www.editors-writers.info

"picayunish" <e_vdvaart (AT) yahoo (DOT) co.uk> wrote

Good day Girl and Boys,

Could you give me some comment / critique about the "Rollover example with
different stylesheet page".
Please tear this page apart (don't be shy).
http://www.semi-conductor.nl/test/rollover/

--

Picky!!! You didn't say to read the page and test the examples!! Why didn't
you ask for that???

The color for the down button is not good. Wrong color.

I recommend using black letters on the orange, and use white letters on the
down button and make the button DARK.


--
Bonnie Granat
Granat Technical Editing and Writing
http://www.editors-writers.info

"picayunish" <e_vdvaart (AT) yahoo (DOT) co.uk> wrote

David Graham wrote in
news:aU7nb.4135$xS2.2461202 (AT) newsfep2-win (DOT) server.ntli.net:
"picayunish" <e_vdvaart (AT) yahoo (DOT) co.uk> wrote in message
news:9EWmb.2596$2o2.18170 (AT) amstwist00 (DOT) ..
Good day Girl and Boys,

Could you give me some comment / critique about the "Rollover example
with different stylesheet page".
Hi
I note that the horizontal list has a small defect in IE6 (also probably
5 and 5.5 but don't have them at the moment) in that the cursor has to
be over the text in the link before it can activate the link. This can
be cured with width: 100% and I think you can chuck in height: 100% for
good measure in

a.horunord, a.horunord:visited {

display: block;
width: 100%;
height: 100%;

Tried it. This is how it looks with a width of 100%
http://www.semi-conductor.nl/img/rollover2.png 26.78 KB (27422 bytes)

However when I add the width 10% in li.horunord and only the width: 100%
and display block in the a:xx, then in IE6 will show the buttons perfect.
However not in Firebird, NS 7.1 and Moz.

When I change the width of #navhorunord into 100%. Add the width of the li
(19%) and us a width of 40% for the links.
The buttons will be shown correctly in IE with a window of 800x600.

In this case I don't advice to use width = 100%.
Hi

The example I was thinking of might have been a bit different to yours. The
addition of 19% width is essential because li.horunord is a float and all
floats must have an explicit width (or implicit for things like a floated
image.) The links need to be 40% as 100% plus the padding makes them too
wide.

The link below is of interest
http://css.maxdesign.com.au/listamatic/horizontal03.htm

This gets the width: 100% in on the ul which seems to get round the problem
of only the link text activating the link on hover.

This link is to a simple horizontal list
http://css.maxdesign.com.au/listamatic/horizontal02.htm

No floats used and no widths but works fine.

David