Member Avatar for takeover4444

Hi all. i'm having the prolems with my blog, when i view it in firefox or chrome, it works fine, but it in IE9, i found too many issue, first, the footer too large, and suddenly some border appear, you can see those errors in the pictures below:

____________________________________________________________________________________________________

Some border appear in a picture below

In chrome, its normal.

Myblog : http://thegioidulieu.blogspot.com/
Thank in advance for any helps :D

Edited by takeover4444
  • 3 Contributors
  • 3 Replies
  • 181 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by takeover4444

Dani AI

Generated

Short, practical follow-up based on the thread: because removing the “shadow” fixed the problem for , the rendering artifact is almost certainly tied to how the shadow was being drawn or how that element interacted with the layout in IE9. The most reliable approach is a short, methodical isolation sequence (confirm standards mode, inspect the computed box model, temporarily disable shadows) and then apply a targeted fix rather than a site-wide change.

Quick diagnostic checklist

  • Confirm the page is in standards mode (valid <!DOCTYPE html>) and that IE isn’t running in a Compatibility Mode: open F12 → Document Mode. Adding an X-UA-Compatible meta as early in <head> can force the right mode:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  • Use F12 Element Inspector to toggle box-shadow, border, and outline on the affected element to see which property produces the line. For a fast global test you can turn off shadows temporarily:

    * {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

Practical fixes that keep the look but avoid IE9 artifacts

  • Remove default image borders and inline gaps (common source of hairlines): a img, img { border:0; display:block; }

  • Contain floats in the main content so footer height doesn’t expand: either use a clearfix or ensure the footer clears floats. Example clearfix:

    .clearfix:after {
  content: "";
  display: table;
  clear: both;
}

If the shadow itself is essential but artifacts persist, render the shadow via a pseudo-element or a small baked-in PNG instead of a high-blur CSS shadow. For IE-only overrides (works up to IE9) use a conditional include to keep fixes isolated:

<!--[if IE 9]>
<link rel="stylesheet" href="ie9-fixes.css">
<![endif]-->

Note: ’s suggestion to normalize CSS across browsers is still good practice; small layout differences often come from box-sizing or leftover margins. Since confirmed removing the shadow removed the issue, reintroduce visual effects only after verifying the above steps and checking at 100% zoom and in the F12 Document Mode to avoid surprises.

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

problems with viewing blog in internet explorer 9

I don't like to click on links. In ther future post your CSS code on Daniweb then used Daniweb editor to insert the image.

Member Avatar for pixelsoul

If you're not using a css reset, I would recommend using one. It will reset the styles so there is a better chance of your site looking the same across all browser.

Here is an HTML5 css reset that works well
http://html5doctor.com/html-5-reset-stylesheet/

I would also recommend a quick read on css box model. It may help point out something you are doing that is incorrect.
http://css-tricks.com/the-css-box-model/

And if all else fails and it seems to be something that a css reset or following best practices with a box model does not resolve, try targeting IE with an IE only style sheet and fixing the problems there.

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Member Avatar for takeover4444

Well, when i removed the "shadow" elements, i didn't see that problem like before. It work fine.
Many thanks for your idea

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.