homepage Welcome to WebmasterWorld Guest from 23.21.9.44
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Setting width of ye olde hyperlinke
Works in IE. Fails in everything else. ;-)
richmc




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

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




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

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




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

Aye tis a BLOCK alrighty! Arr!

richmc




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

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




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

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




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

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




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

'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




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

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




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

...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




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

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.

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