Welcome to WebmasterWorld Guest from 54.160.221.82

Forum Moderators: not2easy

Message Too Old, No Replies

CSS - Error in opera

Something weird is happening

     
5:38 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 5, 2002
posts:1510
votes: 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]

5:43 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 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

5:47 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 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;}

5:55 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 5, 2002
posts:1510
votes: 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

6:00 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 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.

6:06 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 5, 2002
posts:1510
votes: 0


Thanks Birdman,

I just needed confirmation.

Chris

6:09 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


No prob, I ran into the same issue once until someone here clued me in.
6:12 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 5, 2002
posts:1510
votes: 0


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

Chris

6:19 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


I don't see the problem in Opera 6.04. What version are you using?
10:39 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 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.

11:26 pm on Apr 14, 2003 (gmt 0)

Senior Member

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

joined:Oct 1, 2002
posts:5199
votes: 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
:)

8:24 am on Apr 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 5, 2002
posts:1510
votes: 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

11:48 am on Apr 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 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.

1:34 pm on Apr 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 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.

4:05 pm on Apr 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 5, 2002
posts:1510
votes: 0


Thanks Birdman,

I'm playing now :)

Chris

4:23 pm on Apr 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 5, 2002
posts:1510
votes: 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