Example Number 1 - Looks GREAT in IE!!! :p~

OK, if you're looking at this page in an Internet Explorer version 5 through 6 the css rendered link buttons at right look and behave exactly as intended but naturally, there's problems in Mozilla (Netscape 6.2+) and Opera.

In Mozilla and Opera the width property:value is ignore for the buttons so they'll be all different sizes depending on the text inside the link. They're also handling the padding and margin issues in similar ways to each other: overlapping the buttons, it's a mess.

Below is the offending code and the beginnings of the discussion on how to fix it, and whatever else comes up...

a:link, a:visited, a:active {
	width : 170px;
	padding : 3px;
	margin : 3px 0px 0px 0px;
	border-top : 1px #CED5E3 solid;
	border-left : 1px #CED5E3 solid;
	border-bottom : 1px #069 solid;
	border-right : 1px #069 solid;
	background-color : transparent;
	font : 10px verdana, arial, helvetica, sans serif;
	color : #069;
	text-decoration : none;
	}
a:hover {
	color : #00f;
	border-top : 1px #069 solid;
	border-left : 1px #069 solid;
	border-bottom : 1px #CED5E3 solid;
	border-right : 1px #CED5E3 solid;
	background-color : #EBEBFF;
	}
	
the links...

<a href="#">example</a><br />
<a href="#">example links</a><br />

can anyone tell me why mozilla and opera treat these the way they do, when they behave exactly as I'd like them to in IE? Opera doesn't appear to like the width specification, understandable. Mozilla stacks em weirdly.

Is there any hope for making these behave the same as they do in IE?

Jason

Could we see a sample of the HTML you're using this on? (Preferably an active html page?)

My first suspicion is that you're giving the <a> element block-level-ish properties (width, borders, margins, padding) without setting it to display:block (because it's display:inline by default).

Slime

Aha! >> next? >>
w00t!
summary page

Example