Topic: why opera and mozilla act the way they do? Pages that link to <a href="https://ozoneasylum.com/backlink?for=10868" title="Pages that link to Topic: why opera and mozilla act the way they do?" rel="nofollow" >Topic: why opera and mozilla act the way they do?\

 
Author Thread
JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 12-04-2002 06:03 Edit Quote

I have this:

code:
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).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 12-04-2002 06:15 Edit Quote

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

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 12-04-2002 20:50 Edit Quote

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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 12-04-2002 21:52 Edit Quote

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

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 12-04-2002 22:59 Edit Quote
code:
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).]

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 12-05-2002 09:04 Edit Quote

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

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 12-05-2002 14:47 Edit Quote

That works in Opera 6.05 for me.

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 12-05-2002 17:19 Edit Quote

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

Jason

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 12-05-2002 18:04 Edit Quote

Yup, doesn't it work for you?

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

IP logged posted posted 12-05-2002 21:39 Edit Quote

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

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 12-06-2002 14:47 Edit Quote

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

MIDI
Paranoid (IV) Inmate

From: Georgia
Insane since: Dec 2002

IP logged posted posted 12-06-2002 21:34 Edit Quote

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

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

IP logged posted posted 12-08-2002 03:14 Edit Quote

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

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

IP logged posted posted 12-08-2002 06:02 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu