Member Avatar for a_m_rana

Hi
I am having CSS issues in my website.
http://tinyurl.com/kqcll2

It is giving good output in FF, Chrome, Safari, Opera etc but IE is driving me nuts.

You can see 2 major issue
1. Whole content sticks to the left side although fine in other browsers(there seems to be some problem with "margin: auto" which is not picked by IE(7) for some reason)
2. The right column drops down.

It will be great if someone can help me in this regard.

Thanks in advance

  • 5 Contributors
  • 6 Replies
  • 182 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Good catch by — the symptoms (wrapper stuck left, right column dropping) are classic IE quirks-mode behavior. Older IE switches rendering mode when the document doesn’t start exactly with a valid doctype (or when invisible bytes/comments precede it). That changes how margins, widths and floats are handled, so centering with margin: 0 auto and float containment can fail.

Practical checklist and fixes:

  • Confirm the doctype is the very first thing sent (no comments, no BOM, no server-side whitespace). Use view-source to inspect the first bytes.
  • Give the centered wrapper an explicit width; margin: 0 auto requires a width to work.
  • Make sure column widths + padding + borders don’t exceed the wrapper width — overflowing content forces float drops (see ’s point).
  • Look for unclosed or mismatched tags (missing </div>) which break layout in IE.
  • Contain floats: use a clearfix or set overflow on the parent. For ancient IE versions, trigger hasLayout (for example with zoom: 1) as a last-resort hack.
/* clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* hasLayout trigger for older IE */
.container { zoom: 1; }

Debugging workflow: clear the cache (as suggested), open IE’s developer tools and check Document Mode, progressively strip CSS to isolate the offending rule, and validate the HTML to catch structural errors. Conditional comments (mentioned by ) are useful for temporary, targeted fixes, but the long-term fix is standards-mode markup and sane widths. Summary: ensure a valid doctype first, validate markup, keep widths within the wrapper, and use clearfix/hasLayout only when necessary.

Recommended Answers

All 6 Replies

Member Avatar for athlon32

Hello,

Please post your CSS so we can see what's up

Member Avatar for MJ Pieterse

you will need to have a conditional comment for IE. for example it should read

body {
   text-align: -moz-center;
   text-align: -khtml-center;
}

<!--[if IE]>
body {
   text-align: center;
}
<![endif]-->
Member Avatar for almostbob

In my IE 7 8, is centred
Mozilla centered
opera centered
avant centered

clear the ie cache and try again, may be old css files in the browser cache
put the site on http://www.browsershots.org to see what it looks like on a larger number of browsers

tinyurls make everyone assume you are a spammer or malware-er

Member Avatar for MidiMagic

I think the problem is that you are seeing what happens when the page does not fit in the browser window horizontally. Different browsers react differently to unexpected errors.

The page is too wide for many computer screen resolutions.

Member Avatar for a_m_rana

Thanks for solutions. Got the real bug.

--IE is crazy and God help them or rescue developers from it--

The problem is, in IE the first line of the html code must be
<!DOCTYPE html ................................>

You cannot even write commented code before that. All the other browsers allow it but it is not accepted by IE. Its a IE special feature. Took me 2 days to sort out. Pathetic.

Thanks anyway all of you

Ahmed

Member Avatar for MidiMagic

Without a doctype, IE goes into quirks mode. Always provide a valid doctype tag.

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.