Topic: why opera and mozilla act the way they do?

I have this:

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 : #0077FF;

	text-decoration : none;

	}

a:hover {

	color : #f60;

	border-top : 1px #069 solid;

	border-left : 1px #069 solid;

	border-bottom : 1px #CED5E3 solid;

	border-right : 1px #CED5E3 solid;

	background-color : #f90;

	}

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

edit - don't close a code tag with a quote end tag ;-)

[This message has been edited by JKMabry (edited 12-04-2002).]

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).

your live html example sir

Okee, I added the display:block and removed the <br /> tags (block-level elements have their own line breaks) after every link and that did the trick as far as the overlapping (and to some degree, width) was concerned. Thank you!

Now there is still Opera to wonder about? I'm looking at it in Opera 6.04 and it does not apply the width still, it depends on the amount of text for that. Also, which I find really weird, it's not applying the line breaks since I removed the break tags. Any idea if this tweakable? I'm not that concerned about Opera but still, for purposes of learning something... it *is* supposed to interpret things a little more strictly and correctly according to the letter of the law right?

Jason

That is one nice example page =)

display:block is definitely what you wanted for this. They are, quite obviously, blocks, and stacked on top of each other too, which is the normal block behavior. =)

The example page, I see, doesn't use display:block and still uses <br>'s. Mozilla is behaving as I would expect: the links are put one after the other as they would normally be, and then they're given outlines around the text, which naturally overlaps with the adjacent ones since the text was already laid out without the outlines taken into account. That's how borders work for inline text.

I haven't used Opera in ages, so I can't tell you what's wrong with that. I suspect that it's ignoring the display:block on anchor tags. A possible workaround would be to put <div>s around the <a>s, and make the <div>s have the outline instead of the <a>s. But that wouldn't be a great solution. (In fact, if you wanted to go that way, I would suggest using an <ul> with <li>s, since it is, after all, a list of links.)

body {

	background-color : #c0c0d0;

}

a {

        [b]display: block;

	height: 15px;[/b]

	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;

	color : #069;

	font : 10px verdana, arial, helvetica, sans serif;

	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;

}

[b]ul, li {

        margin: 0;

        padding: 0;

        list-style-type: none;

}



....



<ul>

	<li><a href="#">example link</a></li>

	<li><a href="#">example link</a></li>



        ...



</ul>[/b]

[This message has been edited by HZR (edited 12-04-2002).]

Neat suggestion (and implementation HZR) and it sorta worked. Blocked them in Opera anyhow but they still remained text width instead of 170 pixels. Bugger. Oh well.

quote:

---

The example page, I see, doesn't use display:block and still uses <br>'s.

---

oops, I linked you to page 1 in the continuing saga, sorry about that

Jason

That works in Opera 6.05 for me.

it works in Opera 6.05?! As in it makes the 'buttons' 170px wide? Same widths all the way down?

Jason

Yup, doesn't it work for you?

nope, in 6.04 they're all the width of the text contained within the tag, so in this case it looks like a wave form of buttons instead of a nive 170px wide column, in Opera 6.04 (could you verify with your version on the page linked above?)

thanks for the help man

Jason

Yes, you're right about that.
I did some experimenting though and my conclusion was that if you remove all psuedo-classes (:link, :visited, :active) from the a selector it will work (weird!). Try that.
Check this in Opera.

[This message has been edited by HZR (edited 12-06-2002).]

It seems to be working on my site http://bennieshepherd.com/newestfiles.htm
mozilla ver:1.0.1
opera ver:6.05

Now if I could only get Opera to quit showing the slice in my image map..



[This message has been edited by MIDI (edited 12-06-2002).]

Ive had an example which i noted once that had something about opera, no idea if this helps i havnt had a chance to fully go through your scripting, but ill post it anyhow incase it helps:

#navAlpha{
width: 128px;
height: 20px;

/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */

body>#navAlpha {width:128px;}

not sure if its any help, but apparently it works for the width so maybe worth a try =)

BTW i just tested this and it works, however, if you have say a width of 120px in IE, the width i opera will be less for some reason, i remember reading about this once but cant recall