Member Avatar for saikishore

Hi..
anybody help plz..
diff ..between mozilla & IE.
here some pages r differ(alignment) from mozilla to IE..
plz solve this problem..how can i rectify..

Thanks in Advance..

  • 2 Contributors
  • 2 Replies
  • 109 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by saikishore

Dani AI

Generated

For : alignment differences between IE and Firefox almost always come from one of a few root causes — missing/incorrect DOCTYPE (which triggers quirks mode), different browser default styles (margins, padding, line-height), box-model differences or old-IE layout bugs, and uncontained floats. is right that an IE-specific stylesheet can mask problems, but it’s better to find the underlying mismatch first.

Start here (quick, practical checklist):

  1. Ensure a standards DOCTYPE so both browsers use standards mode:
<!DOCTYPE html>
  1. Remove reliance on browser defaults by resetting key element spacing:
html, body, h1, h2, p, ul, ol { margin: 0; padding: 0; }

  1. Use each browser’s dev tools (F12) to compare the computed box model for the element that misaligns — width, padding, border, margin and line-height. Differences you see there tell you which property to override explicitly.

  2. Common IE fixes:

  • Old IE “hasLayout” quirks can break alignment; give the container layout with zoom: 1; (IE6/7 only).
    .selector { zoom: 1; }
  • Inline-block baseline/whitespace issues: explicitly set vertical-align.
  • Floats not clearing: use a clearfix to contain them.
    .clearfix::after {
content: "";
display: table;
clear: both;
}
  1. If a quick browser-specific override is needed, use the conditional stylesheet approach @gpdrums mentioned but keep it minimal — only override the properties that differ.

Extra tips: validate your markup (W3C validator), test fonts/line-height (different font rendering can shift layout), and test in the exact IE versions you need (VMs or services like BrowserStack). Fix the root cause when possible; browser-specific CSS should be a last-resort fallback.

Member Avatar for gpdrums

Hi Kishore,

Problems between compliant and non-compliant browsers are well-known and well-documented--meaning. What this means is Mozilla follows W3 Standards while Microsoft follows Microsoft standards.

Most of the time, these glitches can be fixed by using external style sheets specific to IE browsers. In other words, you would have a default style sheet, but when IE5, 6, or 7 is encountered, that particular style sheet would be called.

Here's what the code might look like:

<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link href="style-ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="style-ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

One thing to keep in mind is you only have to change the CSS for the particular element that is not aligned properly. So, the user will always use the default style sheet, but if the user has IE6, for example, maybe the font size for the <h1> tag needs to be smaller--and that change is all you will need to include on the IE6 style sheet.

Hope this helps.

Member Avatar for saikishore

Hi..
Thank You..
now i am going to use this..

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.