IE prob w/rollovers

hi,

http://mayacove.com/dev/css/portal/test.html

actually it’s not strictly a rollover problem… the problem is the little arrow to the right of text in links (which I had t put in a separate <span> so it’s not underlined…) this little span causes the text to move upward (by just one px!!) in IE6 on rollover… (I know b/c if I comment out little arrow this problem in IE6 does not occur anymore…) elements are floated here, so I can’t push text down with positioning); I couldn’t do arrow as bg-img b/c I have icon on the left as bg-img, and of course you can’t have two bg-imgs…:wink:

other puzzling thing:

b/c that rollover did not work in IE with just CSS, had to do in jQuery for IE6
but: if for testing purposes I comment out :hover code in CSS then even the JS doesn’t work in IE6!! (i.e., arrow doesn’t show on rollover…) weird… (relevant code in CSS is at line 92 in style.css, search for “hover content in question” I mean if I comment out:

,
Content div.contracts_nav a.contr:hover span.contract_link_arrow

)

I hope this is not too confusing… would very much appreciate some help…

thank you…

Ok, I don’t know where you got that from, but that’s EXACTLY what I mean when I say too many elements, non-semantic markup, too many pointless classes, and worst of all… Jquery for NOTHING! CSS can handle that just fine without the assist from jquery – all the way back to IE 5.0!

Gimme a couple minutes and I’ll toss together a replacement for that.

Also, you should REALLY avoid using fonts that small… and that’s obviously a list (or three lists) of links, so get thos into LIST tags.

… and here it is.

Image menu demo

and the directory as always:

Index of /for_others/maya90/take2

is unlocked so you can get at it’s bits and pieces. No extra wasteful classes, no wasteful ‘clearing div’ nonsense, semantic markup for three lists, no extra span needed either… and none of that stupid malfing fat bloated jquery nonsense… pretty much gutting the core of the markup down to:


	<div id="contractMenus">

		<ul>
			<li class="swirl current"><a href="#">Contact Information</a></li>
			<li class="exclaim"><a href="#">Terms</a></li>
			<li class="check"><a href="#">Confidentiality</a></li>
		</ul>

		<ul>
			<li class="check"><a href="#">Consulting Services</a></li>
			<li class="exclaim current"><a href="#">Independent Contractor</a></li>
			<li class="swirl"><a href="#">Intellectual Property></a></li>
		</ul>

		<ul>
			<li class="check"><a href="#">Compensation</a></li>
			<li class="swirl"><a href="#"">Meals</a></li>
		</ul>

	<!-- #contractMenus --></div>

Which is a heck of a lot cleaner. IF you have a LOT of those icons, it’s POSSIBLE I’d consider using an extra span for them so you could do sprites on them… but it’s really not necessary with so few of them.

Valid XHTML 1.0 Strict, tested in the latest flavors each of the big five, and all the way back to IE 5.5.

I bumped the fonts to a ‘usable’ 14px, though I’d consider opening them up dynamic but that depends on the layout it’s going into.

Hope this helps.

AWESOME!!! thank you VERY MUCH!!

(I still forget sometimes to do those things in lists… what a jerk…)

very much appreciated… thank you and have a great weekend…

(edit: PS: one note on font-size: I totally agree with you… I’m always telling people, esp now that so many people are on laptops, which have smaller screens than desktops, fonts that small are retarded, but you know, they always know best…:wink: one would think designers would have caught on to this by now, but oh well…