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
  • 738 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by shalikas

Dani AI

Generated

Good outcome: the culprit was malformed anchor markup in the footer. As later found, a mistyped/incorrect closing of an <a> element caused the rest of that column to be treated as part of the link; WebKit/Gecko/Chrome silently tolerated the error but Internet Explorer’s parser produced the visible layout break. ’s nudge to show the actual markup was the right troubleshooting direction.

Why this often shows up only in one browser: HTML parsers recover from malformed markup differently. An unclosed inline tag can effectively wrap following block content and change the document flow. HTML5 relaxed some content-model rules (anchors may now contain block content), but older UAs and legacy document modes do not behave the same way, so small markup errors can produce browser-specific layout problems. See the element reference for background: MDN: a element.

Practical troubleshooting checklist (use as a repeatable workflow):

  • Validate the raw server output with the W3C validator to catch missing/mismatched tags: W3C Validator.
  • Compare "View Source" (raw HTML) with the DOM inspector output — the parser may have silently altered the DOM.
  • Grep/search the project or template fragments for stray or mismatched anchor tags and for server-side includes that might inject partial markup.
  • Run an automatic fixer/linter (for example, HTML Tidy or a build-step linter) to catch regressions before deploy: HTML Tidy.

Preventive notes: fixing the markup is preferable to CSS hacks; add validation to the development workflow and be conservative about relying on HTML5 permissive wrapping when supporting legacy IE/document modes. These steps tend to eliminate similar “works everywhere except IE” surprises.

Recommended Answers

All 5 Replies

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.