Forum Moderators: not2easy

Message Too Old, No Replies

Hyperlink display:block and width:100% not working in IE?

         

JAB Creations

1:03 am on Jul 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



For some reason my hyperlinks aren't 100% wide or in block format. I have them working fine on my own site. I must note that I tried using tables instead of DIVs though this did not fix the problem in IE. Any suggestions on how I got this working in IE on my site but not the one I'm currently working on?


a.menu:link {
background: #33f;
color: #fff;
cursor: pointer;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
text-decoration: none;
width: 85px;
}
a.menu:visited {
background: #33f;
color: #fff;
cursor: pointer;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
text-decoration: none;
width: 85px;
}
a.menu:hover {
background: #005;
color: #fff;
cursor: pointer;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
text-decoration: none;
width: 85px;
}
a.menu:active {
background: #33f;
color: #fff;
cursor: pointer;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
text-decoration: none;
width: 85px;
}

HTML


<div class="menu1c"><a href="index.html" class="menu" tabindex="1">Home</a></div>

tedster

1:22 am on Jul 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You've given rules for a class named "menu" but in the html you have class="menu1c"

D_Blackwell

1:28 am on Jul 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Unless I'm missing something, it looks ok to me. What's coming from class="menu1c"?

You can clean out a lot from the CSS though. There's a lot of duplication.

a.menu {
background: #33f;
color: #fff;
cursor: pointer;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
text-decoration: none;
width: 85px;
}
a.menu:visited {
/*background: #33f;
color: #fff;*/
cursor: pointer;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
text-decoration: none;
width: 85px;*/
}
a.menu:hover {
background: #005;
/*color: #fff;
cursor: pointer;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
text-decoration: none;
width: 85px;*/
}
a.menu:active {
/*background: #33f;
color: #fff;
cursor: pointer;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
text-decoration: none;
width: 85px;*/
}

JAB Creations

9:27 pm on Jul 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The divs have position, width, and height only.

I thought the code looked alright and I did check the class names to make sure everything was as it should be. I'm not worried about excess fat until I get the code clearly working. Then once everything is all set then I'll optimize the code a bit. Until then I'm still stuck with this problem. :-\

iamlost

11:00 pm on Jul 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I agree with D_Blackwell that it seems to work fine.

For some reason my hyperlinks aren't 100% wide or in block format.

Not sure what you mean by not 100% wide - you specify 85px and that is what I see.

The code displays as block (as opposed to inline) in all win browsers I tested. Have you confirmed uploaded code?