CSS - Help Me Customize My Valid Css For $2

Originally, I used <DIV> as containers for background images which swap when you hover over them. I enclosed the <DIV> tags with <A> tags to make them 'links'. Older versions of IE didn't want to work with this though and I found it this is invalid CSS, so I explored some more...

The best solution I have found so far is to use <A> itself as a container. This solved the IE5 problems, but now IE4 SP2 doesn't show them at all. I'm okay with leaving IE4 behind, but I discovered that using <A> tags as containers was an invalid technique.

If I can't use <A><DIV> and I can't use <A>, then what can I use to make valid, preloaded CSS image rollovers that work? I'm not considering Javascript an option. Is it possible?

Here's a random, simliar example of what I've done with the <A> tags.
http:// www. findmotive. com /2006/10/31/simple-css-image-rollover/

Hi all

I'm working with Firefox and Firebug plugin. I want to check if the CSS I use is valid *the way browsers interpret it*.

Example:

Code:

/* Valid: */
div.my {
  position: relative;
  z-index: 10;
}

/* Invalid: */
div.my {
  z-index: 10; /* The attribute is not applied to the div, because it's not positioned! These sort of errors I want to get to know somehow! */
}

/* Valid: */
div.my {
  z-index: 10; /* At this point the CSS isn't valid yet... */
}

div.my {
  position: relative; /* Now it is valid (I guess, because I guess the browser first parses all CSS available and only after this it assigns the attributes?) */
}

I hope you see what I mean. I came upon this because I had some problems with z-indexes and then remembered that every z-positioned element needs to be positioned. If I had a cool Firefox plugin that would have checked the CSS every time before it were applied to the document and warned me this wouldn't have been a big problem. ;-)

Thanks a lot for help
Josh

The following script has been validated and is working fine (not in IE/Win):

body {
margin-top:5px;
margin-bottom:5px;
padding:0;
background:#ccffff;
}

a { text-decoration: none; }
a:link { color: #0000ff; }
a:visited { color: #33cc00; }
t{line-height:36px;}

#wrap {
width:613px;
left:50%;
margin-left:-336px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
}

#sidebar {
position:absolute;
float:left;
width:150px;
border: 1px solid #000033;
padding:15px;
background:#ffffff;
height:650px;
z-index:1;
}

#main {
float:right;
width:390px;
border: 1px solid #000033;
overflow: auto;
font-family: "Times New Roman", serif;
font-size:13px;
text-align:left;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
background:#ffffff;
background-repeat:no-repeat;
background-position:66% 540px;
background-image:url(smalljester.jpg);
height:750px;
overflow:auto;
z-index:2;
}

I'm still trying to figure out why it works. In particular, there are two margin-left tags in the #wrap div, one is -336 px and the other auto. I seem to remember this had to do with centering the layout (the negative margin) but how is it valid with two margin-left properties? TIA [I'd post the html from the dozen or so pages this is working on but there are too many urls.]

Are there any? I am using the 'body:nth-of-type' hack at the moment and it is the one error when i validate my css. Any help much appreciated! I triedThis one aswell but again the css won't validate. I know there must be more i haven't tried but i was wondering if someone would be so kind and save me the effort of finding one that validates??
p.s. i am new at this... be kind!!

I have a search box/button I want to keep on a single line in a tool bar on my page in strict XHTML/CSS. The <form> tag produces a line break beforehand.

In old HTML I could put the <form> tag outside of the table row or data tags, but XHTML does not allow that (bad nesting). I found in devshed here to use style="display:inline;" which works! But the page does not validate as strict XHTML/CSS (using validator.w3.org).

<table><tr><td> <!-- simplified to illustrate!! -->
<form method="get" action="..." style="display:inline;">
<input type="text" name="q" size="10" maxlength="255" value="" />
<input type="submit" name="sa" value="go" />
</form>
</td></tr></table>

The Error and reason given is below. It seems that you can not have a block-level element (<input>) within in inline-level element (<form>).

***
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
***

Does anyone know how to code this to not have the linebreak and still maintain strict XHTML/CSS code?