Welcome to WebmasterWorld Guest from 3.80.38.5

Forum Moderators: not2easy

Message Too Old, No Replies

Problems with overlapping text parts in Opera

     
9:39 am on Jun 18, 2008 (gmt 0)

New User

10+ Year Member

joined:June 18, 2008
posts: 3
votes: 0


Hello, is there any way to make Opera not to force white background color when elements slightly overlap.

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>

4:12 am on June 19, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


Shouldn't that rule be:

*, 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.

7:28 am on June 19, 2008 (gmt 0)

New User

10+ Year Member

joined:June 18, 2008
posts: 3
votes: 0


Hello Setek, thanks a lot, but removing space didn't make difference. Actually, I used to write !important rules without space, but looking for solution of this very problem I saw w3 specification (http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules), where they put it with space for "user style", and without space for "author style".

So I tried it with and without spaces and it doesn't matter. Maybe they put that space accidentaly, they make errors too.

7:40 am on June 19, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts:646
votes: 0


Hmm good point, it doesn't make a difference.

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]

11:39 am on June 19, 2008 (gmt 0)

New User

10+ Year Member

joined:June 18, 2008
posts: 3
votes: 0


No, that is all content in a file. But thanks, Setek, when you told me that you got it rendered normally, I supposed that something in my settings was different than usual (I didn't set them, network administrator at my job did).

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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members