CSS Icon Help

Thread Tools

Rate Thread

Display Modes

03-15-2005, 07:26 PM

ResaleBroker ResaleBroker is offline

SEO Almost

Join Date: Jul 2004

Location: Arizona, USA

Posts: 113 ResaleBroker is on a distinguished road

CSS Icon Help

I was trying to put together some CSS icons and ran into a snag. The icons display fine in IE but not Mozilla. Can anyone help get this to display properly?

Here is the code:

Code:

<div>
<span style="border:1px solid;border-color:#663 #663 #663 #663;padding:0px;font: 0px color:#FFF;background:#663;"><span style="border:1px solid;border-color:#fff #fff #fff #fff;padding:0px;">
<a title="VALID CSS" href="/"><span style="border:1px solid;border-color:#F60 #fff #F60 #F60;padding:0px 3px;font: 7px sans-serif;color:#FFF;background:#F60;text-decoration:none;margin:0px;">V A L I D</span></a><a title="VALID CSS" href="/"><span style="border:1px solid;border-color:#663 #663 #663 #663;padding:0px 3px;font: 7px sans-serif;color:#FFF;background:#663;text-decoration:none;margin:0px;">C S S</span></a></span></span>
</div>

Here is a demo for IE6: Demo

__________________
Jeff Blackwell

03-15-2005, 11:32 PM

Paz

SEO GUY Moderator

Join Date: Sep 2004

Location: Antalya, Turkey

Posts: 4,238 Paz has a spectacular aura about

Your CSS looks non-standard to me...

I'm sure "padding:0px 3px;" is causing the problem:

It should be (say)
padding:0px 1px 2px 3px; or
padding-left:0px; padding-top:1px; etc.

similarly for the borders.
I prefer
border-left:1px solid #000000 for example

Cheers,
Paz.

__________________
10.3 million entries for Hotels in Turkey but I'm still chipping away.

03-16-2005, 05:33 AM

Mano70

SEO

Join Date: Feb 2005

Location: C:\Norway

Posts: 122 Mano70 will become famous soon enough

Quote:

Originally Posted by Paz

I agree that padding probably is causing the problem since IE isn't threating padding correct (but gives the correct look this time), I will take a look at the problem later just to see if I can learn something. padding:0px 3px isn't a problem, it's just a shortening of the code, it's the same as padding: 0 3px 0 3px. (And you don't have to write 0px, if something is zero, well than you don't have to add which value it's zero).

__________________
Strictly CSS - directory for CSS designed web sites | Katalog og firmasøk

03-16-2005, 06:25 AM