Right I designed a new layout today for a lyrics site in the works.

Perfectly cross-browser compatible, except: The padding-bottom of the alphabet navigation links doesn't work in IE.

What would your work around to this be? I would rather not give them display:block; and set a specific height, but that's all I can think of currently.

Please also give me your review of the general layout. Ignore the logo that's temporary.

Can I see a comparison image of these? Tried IE6 (in wine) but couldn't see much difference in the two.

In IE hover over a letter of the alphabet. Then do it in FF or anything else.

using IE6 and than tryed over my FF... result is the same :/ i really don't see any diferences...

Really? This is promising news.

This is what I get in FF and everything else:


This is what I get in IE:

Yeah, doesn't look like that in my IE6 (but like I said, going through wine so possibly not the most accurate of representation of the rendering engine).

Unless this is an IE7 issue?

well, this is what i get over my IE6 :



and this is what i get over my FF :



they really do look alike ....

Alex just posted a second before me.... for the IE7 i mostly think it is... im runing 6 and it works perfectly just like FF.... IE7 just makes some weird stuff... :/ i always need to creat an if IE 7 line on my site and creat a new style sheet for the IE7 ...

Wow yes it must be an IE 7 issue. Any ideas for fixing it?

this ?

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

put it on your HEAD tags... create a new .css

and now try to find other variables for your :



and put it in your new .css ... my css name was ie7.css ...

donno if it will work.. but WORTH a try ?

Yes I am aware how to use browser specific stylesheets (thanks though), what I am looking for is the actual CSS that I should put in this stylesheet!

I have IE 7 on Vista here's what I got... hmm I think it is an IE 7 problem... I had something like that before trying to make this [1] <-- and the padding was a little off on IE... i'm pretty sure there is a fix to that problem... just keep messing w/ it.


Click to view attachment

well can't you just make the bottom-line 1 or 2 px longer ? ONLY inside the new CSS :/

What do you mean?

well you made a css right ?



you assigned pixels inside your .css to define the litle mouseover box we see inside the alphabet ?
well IE7 doestn read these pixeles correctly, and more specificly the BOTTOM pixels... right ?

well inside the <--- IF IE 7.... make the pixel +1 or +2 :/ just make it higher so IE 7 will read it correctly... well read it his way... if you still don't understand, ill code it for you.