View Full Version : IE sidebar problem

01-23-2008, 01:34 AM

Could some one please look at this at tell me why the side bars don't sit right in IE7 please?


Thanks very much


01-23-2008, 02:23 AM
the text-align property on the div is interpreted by ie as the positioning of the div itself. Why is it not centered then? The unset width of the div is interpreted to mean 0, the left edge of the div is centered. Give the container div an id, set the style to position:absolute and use a script to position it. The one i've included as an example is cross platform, just put it in the body onload event.

<script type="text/javascript">
function on_loadhandler()
if (window.innerWidth) {
w = window.innerWidth;
h = window.innerHeight;
elseif (document.documentElement && document.documentElement.clientWidth) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
elseif (document.body) {
w = document.body.clientWidth;
h = document.body.clientHeight;
document.getElementById("rightBar").style.left = (w-widthOfRightDiv-someMarginFromRight) + "px";
document.getElementById("rightBar").style.top = "0px";
//You can stretch the bar with the value in "h" as well if you really want to.

01-23-2008, 10:14 AM
Hi Mike,

Thanks for that, won't have a chance to try that out until tonight but thought I'd say thanks in advance. I'll let you know how I get on!


01-23-2008, 08:50 PM

I've been playing around with that code for an hour now on my locally hosted version and can't get it to work. It just sticks everything to the left of the screen and reduces my footer whatever i set the box width to. Thank for the suggestion but I know nothing about js so i'm sure i'm implementing it wrong

is there any way i could just use a different style sheet for IE with something like

<!--[if IE]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->


I found that on a site and have no idea how to implement it so any help would be great, i tried it once but it didn't appear to don anything

sorry to be a pain

Thanks again


01-23-2008, 09:08 PM
You need to make another css page called IE-override.css and place your IE rules in it.

in your head when you call in the css files, put it AFTER the main css file so IE will "override" any previous rules:


<link href="layout.css" rel="stylesheet" type="text/css" media="screen">

<!--[if lte IE 6]>
<link href="layout-ie.css" rel="stylesheet" type="text/css" media="screen">

If you need to specify various editions of IE you can easily.


01-23-2008, 09:52 PM
Thanks for the quick reply, i'm still having issues though. I've implemented this in my wordpress header file as follows:

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
<!--[if IE]>
@import url( <?php bloginfo('stylesheet_directory'); ?>/iehack.css" );

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

I have changed it to a
@import as the other one didn't work so I thought I'd copy how wordpress does it on the line above. When i view the source in FF the iehack.css import link shows up correctly.

The iehack.css file is there and is how i want it, it shouldn't show the website logo and the side bars should be floated left and right (naughty i know but i'm just trying to get it to work at the moment) but when loaded in IE nothing changes at all

Any more ideas and help would be great

Thanks again


01-24-2008, 12:11 AM
All sorted with some php

thanks for the help