Adding a link (just a tag (<a></a>)) messes up layout only in IE.

[shalikas]

Hi, I was asked to help with an old website. And the css there is not optimized yet everything seemed to be working. Except for when I view it in internet explorer. I am using wordpress but the part with the problem is custom coded HTML in the footer. I have been trying to solve the problem for two days and I can't find a solution. No matter what I change - safari, Firefox, Opera and Chrome seem to be satisfied but not IE.

This is the website:
http://www.soundbranding.com/

If you go down to the footer you will see two sections (two "Office" and "More"). I have left a piece of code just for demonstration:

<a class="link">link</a>

You can see where it ended up in IE.

I can add any text to the "Office" div. Any kind of images and it's okay. If I add any kind of link - it screws up in IE. Any suggestions? I am not very skilled with this - so I apologize for taking your time.

Any help would be appreciated. (I don't want to write a separate stylesheet just for IE!).

[stultuske]

well, you may want to start with showing the actual code
(html and css)
I assume that's a bit where it goes haywire

[shalikas]

<div class="Footer_outer">


<div class="Footer_inner_left">
<img border="0" style="margin-top:25px; margin-right:20px; display:inline-block;" src="wp-content/themes/magazine-basic/images/customers/aba.png"/>
<a class="link">link</a>
</div>

<div class="Footer_inner_right"> 
</div>

</div>



CSS:

.Footer_outer{
width: 100%;

}

.Footer_inner_left{
    width:230px;
    height:330px;
    text-align: left;
    padding:10px 10px 10px 10px;
    color: #CCCCCC;
    background: url(images/wbg.png) repeat-y;
    border: 1px solid #4D4D4D;
    margin-left:50px;
    float:left;
}

.Footer_inner_right{
    height:406px;
    width:600px;
    text-align: left;
    padding:10px 10px 10px 10px;
    color: #CCCCCC;
    background: url(images/wbg.png) repeat-y;
    border: 1px solid #4D4D4D;
    margin-left:50px;
    margin-right: 50px;
    float:right;
}

[stultuske]

and you haven't set a specific css style for a link within these classes?

[shalikas]

No, i haven't. That was one of my first hunches... At anycase, even if I had, I tried specifying different properties within the html tag... So it would overwrite any link properties set within the css file. At least, as far as I understand. :)

[shalikas]

Okay, I found a problem. I have noticed in firebug that my posted text in the div is viewed as a link (<a>text</a>). It became clear that problem is not in the css and well... I found a problem in the code. The last <a href> tag was ended not </a> but <a/> which basically screwed my layout.

TOOK a day and a half to notice that - i feel like a noob now but I'm glad it's over.

The weirdest part was that it was okay in all the other browsers which confused me and led me to think that it was IE based error... Oh well. Live and learn. :)