Hi.

I have been using <ifIE> tags to specify different stylesheets for IE.

Is there a similar way to use separate stylesheets for Opera and Safari?

<if Opera> & [if Safari] don't seem to work. The one method I have come across on the web uses php, but I'd like to do it with html if possible.

Chris

I'm pretty sure conditional comments are IE only. But, this typically isn't too much of a problem since most other big browsers (FF, Opera, Safari) are relatively well behaved and standards compliant.

What is it that you don't like about the PHP approach? Also, what problem(s) are you experiencing that's requiring you to use a different style sheet for both Opera and Safari?

www.haywire-media.com

The top graphic was suddenly showing up 1 pixel out in IE and FF (it was fine a couple of months ago!)

So I shifted a container div 1 px to compensate. Problem is Opera and Safari were okay and now they are out by 1 pixel.

As for php, I'd prefer a html workaround - it would be simpler if I don't have to view things over a server. Probably my code is not perfect, but I thought there might be an [ifIE] sort of thing for those other browsers so I could do a quick patch up job.

The quickest workaround you could find would be to actually just fix the DIV, I don't have opera or safari so I can't recreate it myself, they generally work fine with anything that firefox is compatible with.. in my experience.

you would be better posting this in the CSS forum and asking for help in sorting out your positioning.
Thanks,
Andy

First, use a better doctype than the sloppy HTML 4.01 transitional - at least go for HTML 4.01 STRICT.

Second, put the image dimensions on the images in your HTML, it's not a good practice to force the browser to calculate your image dimensions.

I would also recommend NOT using positioning that way. The position:relative for your overall container is ok, all the rest is just asking for headaches - and I don't see that you need it for that layout. Use the normal document flow, use margins, padding and floats to put things where you want them.

You can target Safari (and Chrome) within a stylesheet like this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .special-styles {
         font-size: 20px;
    }
}

This used to work for Opera also, but it no longer does. There's no sign that any of the other browsers will start to support this type of selector in the future, though I can't think of any reason that you will ever actually need to use it.