homepage Welcome to WebmasterWorld Guest from 54.227.20.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS - Error in opera
Something weird is happening
chris_f

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 5:38 pm on Apr 14, 2003 (gmt 0)

Hi All,

I've got a weird problem with my site in Opera. It seem fine when you visit the first page for the first time. However, from then, if you click on the nav bar it has a weird cascading effect. I'm guessing it's something incompatible in the stylesheet but I can't find it. Can anyone help?

Chris

HTML



<table id="TblBackColor" cellpadding="0" cellspacing="0"><tr><td><table cellspacing="1" cellpadding="1" width="150">
<tr><td id="TblHead">&nbsp; Heading &nbsp;</td></tr>
<tr><td id="TblCell">&nbsp;</td></tr>
<tr><td id="TblCell"><a href="link.asp" class="navmenu">Link</a></td></tr>
<tr><td id="TblCell"><a href="link.asp" class="navmenu">Link</a></td></tr>
<tr><td id="TblCell">&nbsp;</td></tr>
<tr><td id="TblHead">&nbsp; Heading &nbsp;</td></tr>
<tr><td id="TblCell">&nbsp;</td></tr>
<tr><td id="TblCell"><a href="link.asp" class="navmenu">Link</a></td></tr>
<tr><td id="TblCell">&nbsp;</td></tr>
</table></td></tr></table>

CSS



TABLE{margin: 0px; padding: 0px;}
#TblBackColor{background-color: black; margin: 3px;}
#TblHead{background-color: #4682b4; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; color: white; font-weight: bold; display: block; padding: 2px; text-align: center;}
#TblCell{background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: black; display: block; text-align: center;}
A:Link.navmenu, A:Visited.navmenu, A:Active.navmenu{background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: black; text-decoration: none; font-weight: normal; display: block; width: 100%;}
A:Hover.navmenu{background-color: maroon; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: white; text-decoration: none; font-weight: normal; display: block;}

[edited by: chris_f at 5:53 pm (utc) on April 14, 2003]

 

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 5:43 pm on Apr 14, 2003 (gmt 0)

Hello Chris,

You can only call a unique id once on a document. If you change them to classes, you should have your problem solved.

Birdman

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 5:47 pm on Apr 14, 2003 (gmt 0)

<table
class="TblBackColor" cellpadding="0" cellspacing="0"><tr><td><table cellspacing="1" cellpadding="1" width="150">
<tr><td
class="TblHead">&nbsp; Heading &nbsp;</td></tr>
<tr><td
class="TblCell">&nbsp;</td></tr>
<tr><td
class="TblCell"><a href="link.asp" class="navmenu">Link</a></td></tr>
<tr><td
class="TblCell"><a href="link.asp" class="navmenu">Link</a></td></tr>
<tr><td
class="TblCell">&nbsp;</td></tr>
<tr><td
class="TblHead">&nbsp; Heading &nbsp;</td></tr>
<tr><td
class="TblCell">&nbsp;</td></tr>
<tr><td
class="TblCell"><a href="link.asp" class="navmenu">Link</a></td></tr>
<tr><td
class="TblCell">&nbsp;</td></tr>
</table></td></tr></table>

CSS

TABLE{margin: 0px; padding: 0px;}
table.TblBackColor{background-color: black; margin: 3px;}
td.TblHead{background-color: #4682b4; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; color: white; font-weight: bold; display: block; padding: 2px; text-align: center;}
td.TblCell{background-color: white; font-family: Arial, Helvetica, sans-serif; font- size: 8pt; color: black; display: block; text-align: center;}
A:Link.navmenu, A:Visited.navmenu, A:Active.navmenu{background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: black; text- decoration: none; font-weight: normal; display: block; width: 100%;}
A:Hover.navmenu{background-color: maroon; font-family: Arial, Helvetica, sans- serif; font-size: 8pt; color: white; text-decoration: none; font-weight: normal; display: block;}

chris_f

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 5:55 pm on Apr 14, 2003 (gmt 0)

Really?!?!?

It's works fine in IE and NN. Only Opera throws up the problem and I'm sure I've seen id's called more than once before.

Chris

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 6:00 pm on Apr 14, 2003 (gmt 0)

[w3.org...]

5.9 ID selectors

Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id"; XML applications may name ID attributes differently, but the same restriction applies.

The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value.


chris_f

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 6:06 pm on Apr 14, 2003 (gmt 0)

Thanks Birdman,

I just needed confirmation.

Chris

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 6:09 pm on Apr 14, 2003 (gmt 0)

No prob, I ran into the same issue once until someone here clued me in.

chris_f

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 6:12 pm on Apr 14, 2003 (gmt 0)

Just changed to classes. The opera issue remains. I quite pin it down.

Chris

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 6:19 pm on Apr 14, 2003 (gmt 0)

I don't see the problem in Opera 6.04. What version are you using?

grahamstewart

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 10:39 pm on Apr 14, 2003 (gmt 0)

I've seen some browsers have problems with case in CSS selectors (though I would have thought Opera would be okay).

Try changing all your selectors to lower case.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 877 posted 11:26 pm on Apr 14, 2003 (gmt 0)

Chris_f

try: remove the display: block from the table cells/rows...
they are already displaying as block (tables do!) and by specifying you are saying display "block" within a "block" therefore Opera (admittedly a bit literally!) is taking you seriously, hence the "cascade"

but that's tables for you, a law unto themselves!

Suzy
:)

chris_f

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 8:24 am on Apr 15, 2003 (gmt 0)

I will try you suggestions ASAP.

I don't see the problem in Opera 6.04. What version are you using?

Opera 7.

Chris

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 11:48 am on Apr 15, 2003 (gmt 0)

Hello again,

I believe I found your problem.

Change:

A:Link.navmenu

to

A.navmenu

However, in Opera 6.04 it seems to add an overline above the link but the block works properly.

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 1:34 pm on Apr 15, 2003 (gmt 0)

Just to clarify, I only have 6.04 but I hadn't mentioned before that that the menu was not displaying properly in it either.

It was not the same cascading problem, though. The problem in my browser was the background color only changed on the text, rather than the whole block.

Anyway, I don't know if my last post will solve your initial problem but it did make the background display as a block in 6.04.

chris_f

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 4:05 pm on Apr 15, 2003 (gmt 0)

Thanks Birdman,

I'm playing now :)

Chris

chris_f

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 877 posted 4:23 pm on Apr 15, 2003 (gmt 0)

This problem is really beginning to <non polite way of saying anger me>. I'm leaving Opera for now. Once I have finished with my next major client, and a site that I'm building at current, I'll go back to it.

Thanks for your help all and sorry for the headache Nick.
Chris

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved