Welcome to WebmasterWorld Guest from 54.196.233.239

Forum Moderators: not2easy

Message Too Old, No Replies

Setting width of ye olde hyperlinke

Works in IE. Fails in everything else. ;-)

     

richmc

6:17 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



I'm trying to get some rollovers to work evenly in a CSS pull down menu and while setting the width value of the
<A>
tag works fine for IE6 it fails to work in NN7, Opera 7.11 and 7.23, Firebird 0.7 and Mozilla 1.5

I appear to be relying on either an IE bug or extra feature (i wonder which? ;-) )

Anyone know a work around for this that won't increase my HTML (it should therefore be based in the CSS only)?

I will apply extra DIV's to the code only as a last resort...

TIA :-)

garann

6:22 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



Have you set the display property of your hyperlink to block? If you've left it set to inline, that could be your problem..

richmc

6:25 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



Aye tis a BLOCK alrighty! Arr!

richmc

6:27 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



Hmm...strange lapse into pirate..heres the code:


#nav a { padding : 3px 0px 3px 0px; text-decoration : none; display : block; margin : 0 0 0 0; background-color : #313063; height : 18px; }
#nav a:link {color : #FFF; }
#nav a:visited {color : #FFF; }
#nav a:active {color : #FFF;}
#nav a:hover { background-color : #444288; color : #9F9FFF; width: 100%}


#nav a.gimp { padding : 0px 0px 0px 0px; margin: 0px 10px 0px 10px; text-decoration : none; display : inline; background-color : #313063; color : #FFF }
#nav a.gimp:link {color : #FFF }
#nav a.gimp:visited {color : #FFF }
#nav a.gimp:active {color : #FFF }
#nav a.gimp:hover { background-color : #313063; color : #9F9FFF }

Where

gimp
is the style for links at the top of my menu system which do not want the same effects as the background rollover ones.

Reflection

6:47 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



You can trim that css quite a bit.

margin:0 0 0 0; why not margin:0;
padding:0px 0px 0px 0px; == padding:0;
You dont really need to include :link, :visited, :active, just to set the color to white. Just set it in the #nav a{}. The only exception is :active, if you want the link text to be white onclick rather than the hover color.

Also you shouldnt specify a width on the hover psuedo class unless you want to make the <a> wider only on hover, otherwise set the width on just a{}

#nav a {display:block; width:100%; margin:0; padding:3px 0px 3px 0px; text-decoration:none; background-color:#313063; height:18px;}
#nav a:hover{background-color:#444288; color:#9F9FFF;}

#nav a.gimp{padding:0; margin: 0px 10px 0px 10px; text-decoration:none; display:inline; background-color:#313063; color:#FFF}
#nav a.gimp:hover {background-color:#313063; color:#9F9FFF;}

garann

7:44 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



richmc, your CSS is working for me in both IE6 and NS7. I tried changing it so that the width becomes 50% on hover, and it still behaves as expected.

I wonder why you're setting the width to 100%? A block level element's width ought to be 100% automatically..

richmc

10:13 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



'cause i'm an idiot? ;-)

i'm cobbling together two css menu systems, one of which worked really well cross browser and one that didn't but did 2nd level menu drop downs. its a spiderable replacement to a nasty JavaScript IE only one that blocked all spiders.

its been kinduva trial and error thing but i'm learning as i go and picking up quite a bit though also missing some facts. i guess i need a book!

but thanks you guys cos its all being crammed into my skull as i go :-)

i still don't know why i can't get the

<a>
rollover to stretch to the width of the containing LI thing. i think i'll do up a mockup without any branding and post the URL if thats ok with the TOS?

richmc

10:17 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



Also you shouldnt specify a width on the hover psuedo class unless you want to make the <a> wider only on hover, otherwise set the width on just a{}

sorta where i'm going but the width of the anchor is only apparent on rollover as its the color of the dropdown menu thing overwise which is based on the background color of the containing UL and LI.

when its rolled over in IE the background color of the anchor stretched to the end of the visible UL/LI but in all other browsers it stretches to the end of the anchor and leaves the rest of the UL/LI bit the normal color.

does that make any sense? i'm clueless due to journey out of work via pub... :-)

garann

10:49 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



...the background color of the containing UL and LI.

Hmmm.. How are your elements nested? Is nav a DIV? Or the UL? Or something else? I get it to work when nav is a DIV holding a UL holding one LI holding an anchor, and when nav is the UL in the same structure, sans DIV.

(I don't think they like you posting personal URL's, branding or no. Something about the link becoming irrelevant once the issue's solved?)

Reflection

11:00 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



does that make any sense?

Not really, but...

sorta where i'm going but the width of the anchor is only apparent...

It may only be apparent then but the width should still be set on the a{} not on the hover, the anchor is the same width regardless of the background color.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month