IE not displaying my widgets/sidebar properly

At first glance I would say it’s the padding you used on the left side of your sidebars. IE doesn’t display the box model correctly.

Here is the link to the exact problem:
https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Try switching your padding, to margin.

Thanks for your help but I’ve had a look into it and read the Wiki article and am none the wiser. I’ve tried changing padding to margin and it doesn’t seem to work so I’ve just changed it back to how it was. Not entirely sure exactly which of the sidebar elements I was meant to be altering so I don’t know whether I was simply doing it wrong or whether the problem lies elsewhere.

My CSS is here.

It looks okay with Mac Firefox.

Validating your code is always a good first step to deal with display issues. Browsers deal with errors differently. BTW, you need to use <br /> instead of </br>

Also, your code is faulty in your text widget, li tags need to be nested inside another tag like ul tags.

Something else that IE does that is frustrating is that it ADDS all the padding and margins to the width if the width is defined, which other browsers don’t do, so for example if you have specified a total page width of say 800 pixels, with 200 for your sidebar and 600 for your content, and then put in a 15 pixel padding to your sidebar and content, it will add up like this is IE; 15 + 600 + 15 + 15 + 200 + 15, which adds up to 860, so it will drop down your sidebar to below your content.

I am guessing that this might be part of your problem because it looks fine to me in all of my browsers on my Mac, so I can’t actually “see” your problem – maybe posting a screen shot would help those of us who think it looks okay…..

I just make sure that all of my widths, borders, margins, and padding add up to less than my specified page width….

A workaround could also be to let your content width be calculated by the browser instead of specifying it, or by using %’s instead of pixels…….you might try these as often it fixes things for me….

Good luck…

I’ve been looking at this problem again after sidelining it for a couple of months as I was busy elsewhere. Thanks, everyone, for your responses so far but I am still having the same problem…

I installed a new theme to see if the same problem would occur, and it did. With a little more investigating, I think the problem lies with PHP includes in my text widgets. I have a large number of links in various different categories and don’t want them all displayed in one dropdown list, so in a couple of places on my sidebars I used text widgets with PHP includes inside them, in order to display lists of links from a specific category only, ie:

<?php wp_list_bookmarks('title_li=&categorize=0&category=24&show_description=1&after=</br>&orderby=url'); ?>

For whatever reason, IE doesn’t display these lists properly and it’s this that messes up the layout. However, when you use a text widget containing just regular text, without the PHP include, it works fine.

Hope this makes sense! I still don’t know how I can get around this and get IE to display the links in my widgets properly, but I thought pinpointing the source a little more might help someone answer.