Support » Fixing WordPress » Firefox/IE7 and IE6 display differently. Please help.

  • Resolved Kieranpenrice


    I am currently trying to create a blog for the poker league I work for in the UK using wordpress.

    I had quite an easy time customising the blog to look like the rest of the site and was very happy with how it looked. Then I opened it in Firefox to use the web development tools I have installed in it to check the validation and before I started I noticed that the background image (a big black space with two grey bars running vertically down it) was about one pixel to the left of where it should have been. This makes the whole page look sort of broken.

    I have tried everything I can think of to fix this problem. I have experimented with the .css, changing margins, padding, column widths and everything else. The only solution I have found so far to fix firefox’s display of the page screwed up IE6’s display something rotten.

    I don’t have access to IE7 here, but I have asked a friend who has vista and they have confirmed that the website looks the same in IE7 as it does in firefox, with the background one pixel out.

    Please help me, the website’s blog can be found at and the .css file at

    I have been told that one way to fix this would be to use javascript to detect which browser is viewing the page and make two seperate .css files, one for each browser, but I am not too familiar with javascript and cannot see where to input this.

    If there is any other stuff I could post that could help please tell me.

Viewing 9 replies - 1 through 9 (of 9 total)
  • #page {
    	background-color: black;
    	border: 1px solid #959596;
    	text-align: left;

    Maybe it has something to do with the 1px border of #page?

    What is the filename of the background-image?

    Unfortunately no, it’s nothing to do with that border. Removing it does nothing at all. the filename is

    kubrickbg-rtl.jpg and kubrickbgwide.jpg are identical to kubrickbg-ltr.jpg

    none of these files are listed somewhere in your stylesheet!?!

    no, sorry, they’re listed in header.php in the same folder as the style.css

    Try to remove the #page-style information from your header.php an modify the #page-section of yur style.css like this:

    #page {
    	background: #000 url('images/kubrickbg-ltr.jpg');
    	background-repeat: y-repeat;
    	background-position: top center;
    	border: 0;
    	text-align: left;

    Well I tried it, but it didn’t help. All that happened is a 1px grey border round the whole page appeared.

    it seems that something extends the size of your #page-div container, so that its width is about 2px bigger in firefox.

    You can try to give all the divs inside #page an overflow: hidden attribute, which causes them to cut all content which is wider than the specific width.

    I tried it but nothing happened. Do I just insert overflow: hidden into the <div> tags? I tried it in the .css as well.

    Sorry, I am kind of new to php. I am uncertain where to put an overflow attribute.

    I found a get around. I changed the width in #page, which aligned the header and the body, but moved the footer right, then changed the footer image, as it’s not that important.

    Thanks for highlighting where the problem was! Cheers NeXXor!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Firefox/IE7 and IE6 display differently. Please help.’ is closed to new replies.