Border issues on text-link in IE7

[Alphawolf]

Hello chaps,
I have a class set up on a website which should give specified links a background colour, with a border on all four sides, both of which change on rollover. This is the class definition in my style sheet:

.boxlink {
font: verdana 12px normal;
text-decoration: none;
background-color: #9C6E63;
padding: 1px 5px 2px 5px;
color: #D4CDCB;
border-top: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 1px black;
border-right: solid 1px black;
}


.boxlink:hover {
font: verdana 12px;
text-decoration: none;
background-color: #6E463C;
padding: 1px 5px 2px 5px;
color: #241C21;
border-top: solid 1px white;
border-bottom: solid 1px white;
border-left: solid 1px white;
border-right: solid 1px white;
}

And here is the instruction to apply the class:

<a href="javascript://" onclick="swapLayers('indexlyr2'); return false" class="boxlink">2</a>

The javascript in the link is for a Layer Swap effect. I don't think it's causing my problem, but maybe someone can tell me more about that.

This all works brilliantly well in Safari for mac, as well as Firefox on mac. In IE7 on PC, however, the border only shows up on the right- and left-hand sides, and not on the top and bottom. Why?

I have another class set up, which is a static version of the above (ie: no hover state), and the same thing is happening, which is what makes me think it's NOT to do with the javascript instruction in the link.

Please help, it's driving me mad!

Many thanks,
Nathan

[Medyman]

Post your entire CSS file.

There must be some other CSS decleration that is taking precendence over the boxlink class.

The fact that you say that this is happening to another link with the another class is a clear indiciation of that

Though I would clean up your CSS like what I've posted below, there is nothing wrong with it.

a.boxlink {
font: verdana 12px normal;
text-decoration: none;
background-color: #9C6E63;
padding: 1px 5px 2px 5px;
color: #D4CDCB;
border:1px solid #000;
}

a:hover.boxlink {
background-color: #6E463C;
color: #241C21;
border:1px solid #fff;
}

[Alphawolf]

Thanks for getting back to me. Here is my entire stylesheet as you asked. Looking at your advice, I wonder if it is something to do with the line-height instruction for the body and td tags? I don't know.
Mayber you can see something that I'm missing...

body, td
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #D4CDCB;
text-align: justify;
line-height: 15px;
}


.pale
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #D4CDCB;
font-weight: normal;
}



.heading{
font-family: Arial, sans-serif;
font-size: 18px;
color: #D4CDCB;
}


.link
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #D4CDCB;
text-decoration: underline;
font-weight: normal;
}

.link:hover
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #9C6E63;
text-decoration: none;
font-weight: normal;
}

.gallerylink
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #D4CDCB;
text-decoration: underline;
font-weight: normal;
}

.gallerylink:hover
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #9C6E63;
text-decoration: none;
font-weight: normal;
}


.contactlink
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #241C21;
text-decoration: underline;
font-weight: bold;
}

.contactlink:hover
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #5D3328;
text-decoration: none;
font-weight: bold;
}



.box {
font: verdana 12px;
text-decoration: none;
background-color: #9C6E63;
padding: 1px 5px 2px 5px;
color: #D4CDCB;
border: solid 1px black;
}

.boxon {
font: verdana 12px;
text-decoration: none;
background-color: #6E463C;
padding: 1px 5px 2px 5px;
color: #241C21;
border: solid 1px white;
}


.boxlink {
font: verdana 12px normal;
text-decoration: none;
background-color: #9C6E63;
padding: 1px 5px 2px 5px;
color: #D4CDCB;
border-top: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 1px black;
border-right: solid 1px black;
}


.boxlink:hover {
font: verdana 12px;
text-decoration: none;
background-color: #6E463C;
padding: 1px 5px 2px 5px;
color: #241C21;
border-top: solid 1px white;
border-bottom: solid 1px white;
border-left: solid 1px white;
border-right: solid 1px white;
}



.img {
border: 1px solid black;
}



#indexlyr1, #indexlyr2, #indexlyr3, #indexlyr4, #indexlyr5 {
left:480px;
top:100px;
width:250;
height:300px;
}

#contactlyr1 {
left:460px;
top:90px;
width:270;
height:300px;
color: #241C21;
text-align: right;
}

#gallerylyr1, #gallerylyr3, #gallerylyr4, #gallerylyr5, #gallerylyr6, #gallerylyr7, #gallerylyr8, #gallerylyr9, #gallerylyr10, #gallerylyr11, #gallerylyr12 {
left:470px;
top:100px;
width:250;
height:300px;

}

#gallerybutton {
position: absolute;
left:3px;
top:464px;
width:110;
height:39px;
}

#contactbutton {
position: absolute;
left:109px;
top:464px;
width:110;
height:39px;
}

#homebutton {
position: absolute;
left:213px;
top:464px;
width:110;
height:39px;
}

I'll try to tidy up my css as you suggested. I'm not totally up to date with all of the correct structures!

Many thanks for getting back to me.
Regards, Nathan

[Medyman]

Hmm...nothing jumps out at me from looking at the stylesheet.

Do you have a sample page online where I can see the problem?

Also, try this...

Add border-width:1px!important; to the .boxlink class def.
If it works, that will confirm that it is indeed a confliction with something and not any other problem.

[Alphawolf]

Hey there,
thanks for staying on this...

I've tried adding your !important! element to the css, with AND without the border: 1px... instruction in the .boxlink class. To no avail.,

the link to the page is here.

I'm looking at it on the latest version of IE7, as well as on an older version (7.0.5730.11) on WinXP. You'll see the links in question - on the index page, they are the numbers 1, 2 and 3 in the bottom right of the page, but there are others dotted around the site.

I hope you can help, it's driving me crazy!
Many thanks again,
Nathan

[Medyman]

Hmmm....this one has me stumped. I have no idea what's causing it. Maybe it's just that I've had my eyes in code all day and I can't decipher one thing from another at this point (have 2 new sites launching over the next few days so there are a lot of odds and ends to fix).

Anyway, I do have a solution for you.

.boxon {
font: verdana 12px;
text-decoration: none;
background-color: #6E463C;
padding: 1px 5px 2px 5px;
color: #241C21;
border: solid 1px white;
position:relative;
top:-1px;
}


.boxlink {
font: verdana 12px normal;
text-decoration: none;
background-color: #9C6E63;
padding: 1px 5px 2px 5px;
color: #D4CDCB;
border:1px solid black;
position:relative;
top:-1px;
}

The addition is highlighted. This moves the links up 1 pixel on the page and shows the border. Again, not really sure what was clipping it before.

That should fix it.

Just some other basic tips, you're redeclaring a lot of CSS properties that you don't need to be. For example, a lot of the values you have for the body, td tag are then inherited throughout the markup. So you don't need to keep declaring font-family, font-size, font-weight, etc... unless they change for the body values. It'll save you some CSS work and better your performance a little bit.

[Alphawolf]

Thank you so much, medyman, for your work-around. It's done the trick. I don't know how you ever thought of it, but thank you.

Thanks also for the tips on tidying up my css. I'll take your advice whenever I'm building new sites.

If you do ever figure out what was causing the problem in the first place, I'd be interested to know, but in the meantime, good luck with your two new sites, and thanks again,
Regards,
Nathan

[alexjewell]

The original problem could've been fixed by displaying the links as block, then floating them.

[Alphawolf]

Thanks for that - I'll give that a go as well. With my current work-around, I'm getting a bit of a placement issue with some of the links. Yours might avoid that.
Do I have to specify the width of each and every block element for it to appear the correct size, or will that all be handled by the padding in the css?
I only ask, because I would prefer to just be able to specify the class for each link, rather than have to work out the correct width for each separate link inline. If so, then so be it, but I'm still baffled as to why it was happening in the first place, when it was doing exactly what I expected (and wanted) in Safari and FF.
Any ideas what was causing the problem in the first place?
Thanks again,
Regards, Nathan