Forum Moderators: not2easy

Message Too Old, No Replies

Opera fix, like IE fix?

conditional styles

         

fside

6:07 am on Feb 21, 2008 (gmt 0)

10+ Year Member



People try to write a single styelsheet for various browsers, but find they must use the IE conditionals to load a few fixes for various IE versions. I do the same with Opera, 9.2 at this point. I just check for "window.opera" in javascript, and attach a new stylesheet link to the DOM, which is then loaded. Opera, for ex, flags "-moz-opacity" as an error. It clutters up the javascript console. So the Opera fix is the equivalent value but using "opacity", instead. But there are times when the rendering is also different, and different padding and margins need to be used. Does anyone else load a short Opera 'fix' css in this way?

penders

2:30 pm on Feb 21, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Opera, for ex, flags "-moz-opacity" as an error.

A bit of an aside, but do you still need "-moz-opacity" these days? 'opacity' is supported by Mozilla 1.7+ and by Firefox 1.0+

On your original query, personally I have managed to avoid an Opera only stylesheet but then I also try to avoid pixel perfect layouts. I've found Opera to be sufficently standards compliant for this to not be necessary.

What specific things need to be 'fixed' in Opera?

fside

7:19 pm on Feb 21, 2008 (gmt 0)

10+ Year Member



'fixed' in Opera?

The font size is larger. In order to show images at full size, so not to distort them, Opera at 100% shows the text almost twice as large as Firefox and IE for the same font-size. Margin and padding can be different with floated objects, as well. In the case of another floater, Opera wouldn't remove the background color, so I padded :after/content blanks to space things out, and so on.

As for pixel-for-pixel, when set up this way, all the elements stay where they should, no matter how much you zoom Opera, in or out. For ex:

#indexHdr {
position: absolute !important;
padding: 0em 0.5em 0em 0.4em !important;
margin: -1.7em -0.2em 0em 3.4em !important;
background: #333;
line-height: 1em;
font-size: 0.9em !important;
color: #fff;
}

It's a navbar, like the 'blue line', above. But in Opera, for it to stay in the same place as seen in Firefox or IE, and however Opera is zoomed, I have to fix in the Opera stylesheet:

#indexHdr {
margin-top: -2em !important;
}

You know there's a difference in css rendering, just in general, simply by looking at the acid2 test. Lie is quite proud of his Opera's ability to pass.