Forum Moderators: not2easy
Here is the case. I wanted to make some kind of logo consisted of text only, in which some text parts (span elements) slightly overlap, with individual modifications in font size, color and relative positioning. Firefox, IE, Safari and Sea Monkey display it the way I want. Only Opera (Version 9.27) forces all overlapping elements' background color to white, even if everything is set to be transparent, and even if Opera's display preferences are all set to "Author mode" to avoid user mode interference.
I suppose this is the way Opera authors wanted to ensure "readability" where elements overlap, but is there a way to override it (if I take care of "readability")?
Code is something like this. What else should be done?
<html>
<head>
<style type="text/css">
#logo h1 span {
position: relative;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 67px;
}
*, body, #logo, #logo h1, #logo h1 span{ background-color: transparent ! important;
}
</style>
</head>
<body>
<div id="logo"><h1><span style="color: #6b0; top:0px; left:0px">L</span><span style="color: #f40; top:3px; left:-4px">o</span><span style="color: #7b2; top: -3px; left:-11px">g</span><span style="color: #2b0; top:2px; left:-16px">o</span> <span style="font-size:74px; color: #390; top:50px; left:-116px">c</span><span style="font-size:86px; color: #646; top:52px; left:-127px">s</span><span style="font-size:64px; color: #320; top:47px; left:-137px">s</span></h1>
</div>
</body>
</html>
*, body, #logo, #logo h1, #logo h1 span { background-color: transparent [b]!important[/b]; }You have a space between the exclamation mark and the important. Try removing it and seeing if Opera actually renders that property.
I'm just hazarding a guess but I think Opera may just be disregarding that rule because it's not written right.
So I tried it with and without spaces and it doesn't matter. Maybe they put that space accidentaly, they make errors too.
Well, I just copied your test case word for word into a new HTML document and it didn't have any background colours for the text.
I removed the embedded style rule entirely and still, Opera 9.27 displayed it fine. I'm using Win Opera 9.27 here.
Sure there's nothing else that could possibly be overriding it? It would have to be another important rule somewhere else...
Or a user style sheet?
[edited by: Setek at 7:43 am (utc) on June 19, 2008]
So I found out that you can restore defaults in Opera by deleting opera6.ini file in your profile directory. That solved the problem.
So, here are my two contributions to Webmasterworld knowledge base:
1. if you are not the person who installs browsers at your work, at least find how you restore all settings to defaults, in order to see pages like most of people
2. particularily in Opera you do that thing by deleting opera6.ini file in your profile directory
