1 reply [Last post]
EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 16 years 13 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

Using a span I'm applying the following style to a link

.linkreadmore {
	background: #FF9999;
}

.linkreadmore a:link{
	background: #FF9999 url(images/Steve1.jpg) no-repeat 0px 0px;
	text-indent: 25px;
	width: 192px;
}
.linkreadmore a:hover{
	background: #FF9999 url(images/Steve2.jpg) no-repeat 0px 0px;
	text-indent: 25px;
	width: 192px;
}
.linkreadmore a:active{
	background: #FF9999 url(images/Steve1.jpg) no-repeat 0px 0px;
	text-indent: 25px;
	width: 192px;
}
.linkreadmore a:visited{
	background: #FF9999 url(images/Steve1.jpg) no-repeat 0px 0px;
	text-indent: 25px;
	width: 192px;
}

I've attached an example of how it actually renders.

I can't figure out why:

1 : Text indent doesn't work in Netscape

2 : The background change doesn't work on mouseover with internet Explorer

Cheers in advance

John

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 16 years 13 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

Dodgy "Bullet Style" links using background on a:l

Okay, so I solved half of it.

I found an interesting way of doing bg image swaps using positioning of the background as demonstrated on this fantastic page :

http://css.maxdesign.com.au/listamatic/horizontal18.htm

So cool.

So, I made the bullets into one image and shifted the backdrop, now giving me the code :

.linkreadmore a{
	width: 192px;
	padding-left: 18px;
	background: #FF9999 url(images/Steve3.jpg) no-repeat 0px -15px;
}


.linkreadmore a:hover{
	background: #FF9999 url(images/Steve3.jpg) no-repeat 0px 0px;
	color: #FFFFFF;
}

Very clean now, the only issue with it is trying to get consistency between IE and the dreaded netscape. Tongue

So far netscape seems to understand the in padding perfectly well, whereas IE seems to shove in an exrta 20 pixels of spacing. Shock