View Full Version : Opera and CSS trouble

12-24-2003, 04:05 AM
Well, I finally got my site converted to valid XHTML and CSS... works fine in all browsers except for Opera. Here's a page:


and here's the style sheet:


What's basically happening is the "menu" div is being offset by 5px, and the bottom border properties aren't being displayed. I moved it with a negative margin, but then the border props still don't show. All of the pages, including the home page, have the same layout, with the same problem (I'm assuming the 5px margin shift is happening on all divs because the home page doesn't have a "menu" div.

There are no problems with IE or Moz, only Opera. My Javascript doesn't work, either, but that's different post :)

So, any Opera fan with ideas?


12-24-2003, 08:06 PM
Opera has a list of what it supports (css wise) and is available at

that may explain why it doesn't look the same.


12-24-2003, 08:15 PM
I don't like Opera with their ads on the top of the browser..... :rolleyes:

- ZYPHER :thumbsup:

12-26-2003, 12:56 AM
Yeah, Zypher, I'm not too crazy about the banners, either, but they're a pretty small company and have to pay the bills, right? You could always get the registered version for a few bucks minus the banners...

Scroots, thanks for the link... I checked it out but Opera seems to support everything I've got there and nothing I don't, so it's got to be from a different interpretation of the specs, right?

Still appreciate any ideas anyone has...


P.S. I did notice that Opera doesn't support the <script> tags in certain forms of XHTML. Is javascript supposed to be phased out or something?

12-26-2003, 04:01 AM
Not exactly, well as far as I know it's not. You can use javascript in xhtml 1.1 strict even. You have to have the type attribute I think -

<script type="text/javascript"> /* YOUR SCRIPT HERE */</script>

Also to get your page right (which seems only to be the menu that's the prob) in opera use -

#menu ul li {
padding: 0px;

12-26-2003, 11:52 AM
Thanks Mhtml... you know, when I was debugging the CSS I made sure to throw "#menu ul {padding:0px}" in there and didn't think to use that for the list item, too. It turns out that Opera 7 on my Mac doesn't respond to the padding for the list, but the margin (i.e., #menu ul li {margin:0px}).

As far as the <script> tag, I was just surprised when I read this on the Opera spec site:

XHTML 1.1 support

Opera version 7 supports XHTML 1.1 with these exceptions:

* Event attributes are not supported for the option element
* The table cell attributes char and charoff are not supported.
* The bidirectional override element bdo and the dir attribute. The lang attribute is not supported.
* The script element is not supported
* Ruby annotations

Maybe I'm misreading it, it just kind of threw me for a loop...


12-27-2003, 01:24 AM
Just whent and read all opera xhtml stuff I could find. Sure makes development harder in some cases with opera because it's supports less than I thought.

It's supports ruby, I've never seen anyone actually use it though. I used it to test once but never seen it anywhere but in w3c demo.

12-29-2003, 12:18 AM
Opera 7.2 doesn't support <script> in XHTML mode - so that's only when you're serving as application/xhtml+xml - if you're serving XHTML as HTML then it will still work as normal.

However if you are serving as XHTML it's worth being aware of - personally, I sniff for Opera versions earlier than 7.3 and don't serve them XHTML, even if they accept it - http://www.codingforums.com/showthread.php?s=&postid=157483#post157483 has an example of doing that in PHP.

But it's only 7.2 that has this problem - 7.1 and earlier didn't support XHTML anyway, and in the forthcoming 7.5 scripting works as expected.

btw - you can't be using Opera 7 for mac - there is no Opera 7 for mac.

12-29-2003, 08:51 AM
yeah, my bad, it's actually 6.03...

so, this is because I'm mostly a hack at the programming thing, but could you briefly explain serving up XHTML as an XML or HTML application? (or recommend a resource...) This isn't something I'm too familiar with. Thanks for the help...


12-29-2003, 11:01 AM
Originally posted by rmedek
so, this is because I'm mostly a hack at the programming thing, but could you briefly explain serving up XHTML as an XML or HTML application? (or recommend a resource...) This isn't something I'm too familiar with. Thanks for the help...

-Rich Technically, you should include this MIME type in your header when coding in XHTML:
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />which is often called 'serving up' a page as a MIME type. The support for application/xhtml+xml isn't great with older browsers, but it shouldn't have a detrimental effect.

12-29-2003, 05:10 PM
It will have a detrimental effect - if you serve as application/xhtml+xml IE will try to download the page instead of viewing it. What you have to do is get the server to find out what the browser accepts, and serve that.

There are two ways of doing it that I know of - one is with .htaccess and the other is with PHP. This thread shows both options - http://www.codingforums.com/showthread.php?s=&threadid=19775

I generally do it in PHP, and store a $mimeName variable as well, which can be used to write the content-type meta-tag:

//serve as HTML by default
$mime = "html";

//mime name used to write meta Content-Type element
$mimeName = "text/html";

//set private cache control
header("Cache-Control: private");

//if the UA accepts application/xhtml+xml
if (
//and it's either Opera 7.3 or greater
eregi("opera[ \/]7\.[^012]",$_SERVER["HTTP_USER_AGENT"])
//or not Opera at all
//serve as XML
$mime = "xml";

//override var
$mime = $_GET["mime"];

//if we're serving as XML
if($mime == "xml")
//content type header
header("Content-Type: application/xhtml+xml");

//xml processing instruction
echo("<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n");

//set mime name
$mimeName = "application/xhtml+xml";
//if we're serving as HTML
//content type header
header("Content-Type: text/html");


<meta http-equiv="Content-Type" content="<?php echo($mimeName); ?>; charset=ISO-8859-1" />

NB - meta Content-Type headers are a last resort - they should reflect the content-type rather than setting it - document headers should do that.

But of course the main question is why you'd want to do this at all, and that's a bit more difficult to explain.

The bottom line is that XHTML is not text, it's nodes, and if you serve it as text you've serialised the document such that it isn't XML anymore. Whether that matters to you depends on what you;re doing - if you want to embed other XML applications, or you want to future-proof yourself by becoming familiar with scripting in the XML DOM, then it's worth doing. Or if you just wanna do it for the sake of it, because it is technically the correct way with XHTML, then that's fair as well. Or if you like the way it gets parsed - mozilla will not attempt to render malformed XHTML if it's served as XML, it'll throw a parsing exception and stop. Opera will attempt to render it, but it will print-out the source and show you the error as well.

But it's like getting married - if you can't think of a good reason to do it, and you can think of a good reason not to, don't.

12-29-2003, 05:17 PM
Just one question &mdash why give the option to override the mime type with $_GET?

12-29-2003, 05:45 PM
Originally it was a quick way of testing - if a method or proerty isn't working as expected, one thing to check is whether the DOM makes a difference.

But I left it in for fun :D

12-29-2003, 05:47 PM
Originally posted by brothercake
But I left it in for fun :D lol, fair enough :p

12-30-2003, 08:10 AM
ahhh... slowly but surely XHTML and XML are beginning to make sense. Thanks for the help....