Welcome to WebmasterWorld Guest from 107.20.104.161

Forum Moderators: not2easy

Message Too Old, No Replies

CSS - Error in opera

Something weird is happening

     

chris_f

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



<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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



[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

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

WebmasterWorld Senior Member 10+ Year Member



Thanks Birdman,

I just needed confirmation.

Chris

Birdman

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

WebmasterWorld Senior Member 10+ Year Member



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

chris_f

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

WebmasterWorld Senior Member 10+ Year Member



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

Chris

Birdman

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

WebmasterWorld Senior Member 10+ Year Member



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

grahamstewart

10:39 pm on Apr 14, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

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

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



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



Thanks Birdman,

I'm playing now :)

Chris

chris_f

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

WebmasterWorld Senior Member 10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month