Opera 7 doesn't load styles following an '@import' command

[smartymarty]

Hello
I've struck a problem with Opera 7 loading styles correctly.

I have various child pages that are included by their parent pages using the 'iframe' element. These child pages have styles defined like so:

<style type="text/css" media="screen">
@import "styles.css";
body {margin: 1%;}
/*other style definitions that tweak styles defined in the external style sheet*/
</style>

This seems to cause problems for Opera 7 (not IE or Firefox). When a child page is first loaded, Opera does not load the styles that follow the '@import' command (it only uses the style definitions contained in the imported style sheet. However, when the page is refreshed, these styles are loaded correctly.

As a workaround, I have had to remove the extra styles from the 'style' element, and make them in-line styles (an undesirable compromise!)

Does anyone know why Opera is behaving in this way? I would prefer not to have to resort to using in-line styles.

Thank you!

[DanA]

it should - is it a cache problem? - I had the same behaviour before version 7.22
but
you may find a way there:
[centricle.com...]

[smartymarty]

Hi, thanks for replying.

I am using Opera version 7.23.
It doesn't appear to be a cache problem. I've just created a dummy parent page, child page, and stylesheet, loaded it for the first time, and the same problem happens in Opera.

I have put the dummy pages online at <Sorry, no personal URLs. See TOS [webmasterworld.com]>

In Opera, the child page inside the iframe should first have a blue background, then when you reload the page, the background colour should change to white and the margin should change too.

I have looked at [centricle.com...] but it doesn't seem to indicate any problem with Opera 7 and what I am doing.

Thank you for your help!

[edited by: tedster at 5:38 pm (utc) on April 17, 2004]

[DanA]

Did you try to import your tweaks?
I import 5 style sheets without any problem.

I tested your page online with 7.23, problem in the iframe, it isn't white unless when reloaded.
I tested locally, replacing teststyle.css with one of my stylesheets,
no problem, everything works: background-color, margin.
tested red, margin 100px...
no need to reload...

[Bondi]

Have to reload the page... Rather annoying. This reminds me of a similar problem: recently I've decided to use the @import command in an external stylesheet and I've found that I had to set the @import url("blabla.css"); line as the very first line of the sheet (/*commented lines*/ don't matter) to get the @import work... Same in Opera, IE and Mozilla. Or is it the standard way the @import supposed to work in?

[TheDoctor]

@import has to be the first line of a CSS style sheet (excluding comments). I'm not sure that it works on any browser if you put it anywhere else, since I've never tried :)

[smartymarty]

Hi, thanks to all for your help, and my apologies for forgetting about not including personal URLs!

The problem does just seem to be with the '@import command'. When I linked the external stylesheet using a <link> tag, the page loaded correctly in Opera the first time.

To summarise:
The external stylesheet contained:
body {background-color: #7BC2FD;
margin:20px;}

My first attempt at importing the stylesheet imported the stylesheet but subsequent style defintions were ignored when the page was first loaded:
<style type="text/css" media="screen">
@import "teststyle.css";
body {background-color: #FFFFFF;
margin:1px;}
</style>

When I linked the external stylesheet (instead of importing it), the styles on the page loaded correctly in Opera:
<link href="teststyle.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
body {background-color: #FFFFFF;
margin:1px;}
</style>

It's not essential for me to import the stylesheet, so I'm happy just to link it. Still a bit perplexing as to why Opera did not load the styles correctly however.