1,105,226 Community Members

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

Member Avatar
shalikas
Newbie Poster
5 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
stultuske
Posting Expert
5,291 posts since Jan 2007
Reputation Points: 935 [?]
Q&As Helped to Solve: 774 [?]
Skill Endorsements: 35 [?]
Featured
 
0
 

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
shalikas
Newbie Poster
5 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 
<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;
}
Member Avatar
stultuske
Posting Expert
5,291 posts since Jan 2007
Reputation Points: 935 [?]
Q&As Helped to Solve: 774 [?]
Skill Endorsements: 35 [?]
Featured
 
0
 

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

Member Avatar
shalikas
Newbie Poster
5 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Question Answered as of 2 Years Ago by stultuske
Member Avatar
shalikas
Newbie Poster
5 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: