Member Avatar for adcgv

Hi,

I have started a site . The theme I picked looks great in all browsers but the sidebar is severely distorted in internet explorer. Also the categories tab below the headline is not properly highlighted as in other browsers. Since the site is in wordpress, I cannot figure out exactly what to edit - the css or index.php. Can someone please help me with this. I can give you access to the server in a private mail if you are ready to help me. I need this fixed pretty badly since I have some advetisements/partnerships on the way....

  • 3 Contributors
  • 2 Replies
  • 221 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by bdoga

Dani AI

Generated

Short summary and plan of attack for : the theme rendering differences you see in Internet Explorer are almost always caused by one or more of these things — the browser using a different rendering mode, HTML5 elements not being recognized, subtle box-model/float rounding differences, or an element that isn’t containing its floats. was right to suspect the sidebar area; below are targeted checks and fixes that avoid changing the theme markup wholesale.

Use IE’s developer tools (F12) first: check Document Mode and Browser Mode, inspect the computed width/box model of the sidebar and its parent containers, and temporarily add visible outlines (e.g., outline:1px solid red;) to see which box is overflowing. If IE is running in a legacy mode, force the latest engine with a meta header:

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

If the theme uses HTML5 structural elements (header, nav, section), make sure older IEs create those elements (html5shiv) so they can be styled.

Try these non-destructive CSS fixes (add to an IE-targeted stylesheet if you prefer):

/* clearfix that works in old and new browsers */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* predictable sizing across browsers */
*, *::before, *::after {
  box-sizing: border-box;
}

/* trigger hasLayout in old IE if a container refuses to contain floats */
#featured { zoom: 1; }

Deployment/testing notes: apply fixes in a separate IE-only CSS via conditional comments so other browsers stay untouched. Test with real IE installs or a VM/BrowserStack since IE’s compatibility modes can hide the true culprit. Because you have ads/partners, give ad containers explicit max-widths and test with actual ad HTML to see how they affect layout. Finally, build on ’s diagnosis rather than blocking visitors — rejecting IE users (as suggested elsewhere in this thread) will harm traffic and partnerships; fix the render where practical and provide graceful fallbacks where not.

Recommended Answers

All 2 Replies

Member Avatar for Arkinder

First, validate your HTML and CSS.

You have listed this CSS rule twice with two values. Use only one - the second one.

.clearfloat { display: inline-block;}
.clearfloat { display: block;}

The featured side bar doesn't have enough width in IE, which is what's pushing the text down.

#featured .info {
    float: right;
    margin-top: 5px;
    padding-top: 5px;
    width: 180px; /* Increase this, and use dynamic unit (%/em) */
}

Mess with those a little bit and see where that gets you.

Regards
Arkinder

Member Avatar for bdoga

I was having a similar problem the other day, so I decided that whatever the browser is, the site owner should have a little more control over what visits their website.. so I built the Browser Blocker Plugin. Select the Browsers that you don't want to view your site... IE 6, 7, 8, 9, Chrome, Firefox, Android, iphone, ice weasel. You name it, Browser and specific versions, and the users of that web browser will get a nice splash screen with new browser download options that you choose.

Let the browser wars intensify...

Browser Blocker Wordpress Plugin Homepage

Browser Blocker Download from Wordpress.org

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.