Member Avatar for 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!).

Edited by shalikas because: n/a
  • 2 Contributors
  • 5 Replies
  • 718 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by shalikas
Member Avatar for 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

Member Avatar for 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;
}
Edited by Nick Evan because: Fixed formatting
Member Avatar for stultuske

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

Member Avatar for 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. :)

Edited by shalikas because: n/a
Member Avatar for 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. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.