Anchor inherit / Hover prob in Opera 5

socoolbrewster · November 23rd, 2005, 01:10 PM

I'm currently developing a personal home page themed website for a local charity and am having problems with some CSS.

Basically, I have a set of anchors that I have declared their display as BLOCK level within a DIV container. When I hover over the links they work fine in Firefox and IE etc..

But for some reason on Opera the hover freezes and basically doesn't do anything. Is their a bug in Opera I should be aware of? or it's more likely to be my CSS?

You can view my problem at http://www.mediamole.net/safe-fin/index.html

The other problem I have, which I believe is related in some way is a link heritance problem. I have a link at the very top of the page which is meant to take the font-size of the DIV container. However, you'll notice it seems to be getting it's font size from another declaration and not sure which.

Can anyone advise?

The CSS code I'm using is as follows:

Code:

body { font-family: "Lucida Grande", Arial, sans-serif; 
        font-size:100%; 
        color:#4D6E8E;
        margin-top:0; }

div { width:650px; }

a:link { background-color:#4D6E8E; font-size:.92em; text-decoration:none; color:#fff;}
a:visited { color:#fff; text-decoration:none; font-size:.92em; background-color:#4D6E8E; }
a:hover { background-color:#CC0066; color:#fff; text-decoration:underline;}
a:active {background-color:#4D6E8E; font-size:.92em; text-decoration:none; color:#fff;}

div#header { font-size:.66em; background-color:#fff; color:#4D6E8E; }
div#header div#page_link { font-size:inherit; width:325px; float:left; text-align:left; padding-bottom:5px;}
div#header div#page_link a { background-color:#fff; color:#4D6E8E; text-decoration:none;}
div#header div#page_date {width:325px; font-size:inherit; float:right; text-align:right; padding-bottom:5px;}

ul#globalnav { margin:0; padding: 5px 0; background-color:#4D6E8E; width:650px; text-align:center; }
ul#globalnav li { margin:0; padding:0; display: inline; list-style:none; color:#fff; padding:0 3px; }

#container { width:650px; padding-top:15px;}
#leftcol { width:160px; float:left; }
#rightcol { width:460px; float:right; padding-left:30px; }

div#sidenav { width:160px; }
div#sidenav a { font-size:1.2em; background-color:#cff; color:#4D6E8E; display:block; border-style:solid; border-color:#fff; border-width:2px; }
div#sidenav a:hover { font-size:1.2em; background-color:#C06; color:#fff; border-style:solid; border-color:#fff; border-width:2px; text-decoration:none; }

div#leftcol a { font-size:1em; background-color:#cff; color:#4D6E8E; border-style:solid; border-color:#fff; border-width:2px; }
div#leftcol a:hover { font-size:1em; background-color:#c06; color:#fff; border-style:solid; border-color:#fff; border-width:2px; text-decoration:none; }

li { list-style-type:square; margin:10px; }

h1 { color: #C06; font-size: 1.8em; margin:0; letter-spacing:1pt;}
h2 { font-size:1.8em; background-color:#fff; color:#C06; margin:0; }
h3 { font-size:1em; background-color:#fff; color:#C06; margin:0; }
h1, h2, h3 { vertical-align:top; }
strong { color:#C06; font-size:1.2em; font-weight:bold; }

.fixclear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

* html .fixclear { height:1%;}
.fixclear { display:block; }

Gaz

meow · November 23rd, 2005, 01:31 PM

Quote:

quote:Originally posted by socoolbrewster
I'm currently developing a personal home page themed website for a local charity and am having problems with some CSS.

Basically, I have a set of anchors that I have declared their display as BLOCK level within a DIV container. When I hover over the links they work fine in Firefox and IE etc..

But for some reason on Opera the hover freezes and basically doesn't do anything. Is their a bug in Opera I should be aware of? or it's more likely to be my CSS?

Hi! :)
I would worry about such an old version as 5, but the hover doesn't do anything in newer Opera either. Not sure of the hows and whys, but Opera doesn't like the .fixclear {display: inline-block; } in justmac.css. Did you mean that style sheet to be read by all browsers?

--
http://yupapa.com

meow · November 23rd, 2005, 01:59 PM

Quote:

quote:
The other problem I have, which I believe is related in some way is a link heritance problem. I have a link at the very top of the page which is meant to take the font-size of the DIV container. However, you'll notice it seems to be getting it's font size from another declaration and not sure which.

The font size in div#header and div#page_link is .66em (you don't need the inherit there, really). You've said that a:link should be 0.92em. So that specific a:link is (0.92*0.66)em.

--
http://yupapa.com

socoolbrewster · November 23rd, 2005, 03:56 PM

Thanks for the advise about link. I thought that might be the case regarding the anchor inherit prob.

As for Opera I'm using version 8.5 not sure why I said 5 lol

Anyways problem still there. The just mac external style sheet is only intended for MACs. Was trying to avoid using JavaScript to do browser checks.

Are you saying that it's the just macs CSS part it doesn't like? Kinda odd actually as that CSS declaration was taken from a CSS book which recommended it to resolve the Float height issue in IE for mac. Yet when I go to the W3C website to validate CSS, that part of the CSS was invalid. Which was why I placed it separate CSS file.

Gaz

meow · November 23rd, 2005, 04:19 PM

Quote:

quote:
Are you saying that it's the just macs CSS part it doesn't like?

Looks that way. Removing onlymac.css fixes the problem.

Quote:

quote:Kinda odd actually as that CSS declaration was taken from a CSS book which recommended it to resolve the Float height issue in IE for mac.

But all browsers get the value from justmac.css.

First you have this in safeline_style.css:
.fixclear { display:block; }

Then, later, in justmac.css:
.fixclear {display: inline-block; }

So inline-block it is.

Quote:

quote:Yet when I go to the W3C website to validate CSS, that part of the CSS was invalid. Which was why I placed it separate CSS file.

IIRC inline-block is CSS 3, so validate to that.

--
http://yupapa.com

richard.york · November 26th, 2005, 04:35 PM

> IIRC inline-block is CSS 3, so validate to that.

It's in CSS 2.1. It was a MS-proprietary value before its introduction in the specification. I think Opera supports it, but Firefox doesn't, can't recall whether Safari supports it.

http://www.w3.org/TR/CSS21/changes.html#q3

I wouldn't worry too much about the validator, personally.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design