On 10/06/07, Robert Tilley <[EMAIL PROTECTED]> wrote:
> Before, the code block came from the button builder at grsites.com. I was
> using it to build the graphics for custom buttons. The code it generated can
> be improved it seems. The new code uses an onClick event.
Lots of room for improvement...
> I thought the only reason the DIV was inside the A block was if a browser
> didn't understand CSS, the div inside a hyperlink <a> block would still work.
A browser could quite happily error correct it away as "Div not
allowed inside A, terminate A now" too.
> With trust, I used the automagically generated code from the site without
> thought. Here is the re-written code with the same error; the divs are
> stacked vertically instead of in one line.
> <div class="menu">
>
> <!-- Home button div -->
> <div id='button-home'
> style='height: 30; width: 150;
Invalid. Lengths (other than 0) require units. 30 what? 150 what?
> background: url(images/button-home.jpg);
> background-position: 0px 0px; position: inline;'
Invalid. 'inline' is not a value accepted by the position property.
I'm guessing you mean display: inline in an attempt to stop the div
elements generating line breaks - but that prevents them from
accepting height and width, so they'll collapse away to nothing.
> onmouseover
> = 'document.getElementById("button-home").style.backgroundPosition = "-150px
> 0px"; '
Ugly and slow. Use 'this' instead of 'document.getElementById("button-home")'.
> onmouseout
> = 'document.getElementById("button-home").style.backgroundPosition = "0px
> 0px"; '
Ditto, with a splash of irony since you have units on these lengths,
but here they are optional
> onClick="parent.location='http://www.tropicwaveradio.net/'">
parent? You're using frames? Oh dear.
Also, the div has no content whatsoever. How are people supposed to
know where the link is going? Perhaps they are supposed to read the
text on the background image... which isn't going to work well if they
have a browser which doesn't support, or has turned off, images, or
CSS, or backgrounds (and they might be using a screen reader or
braille output device as well).
Take a look at http://css.maxdesign.com.au/listamatic/ for some nice
approaches to horizontal navbars, with rollover effects.
If you really want to use pictures of text (and I suggest you don't as
they are harder to read in general), then you'll probably be better
off with <img> elements inside the anchors that are equipped with alt
text and some JavaScript to toggle the src in response to mouse
events.
--
David Dorward <http://dorward.me.uk><http://blog.dorward.me.uk>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
