WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Firefox/IE7 and IE6 display differently. Please help. (10 posts)

  1. Kieranpenrice
    Member
    Posted 6 years ago #

    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 http://www.championspoker.co.uk/blog.php and the .css file at http://www.championspoker.co.uk/wp-content/themes/default/style.css

    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.

  2. NeXXor
    Member
    Posted 6 years ago #

    #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?

  3. Kieranpenrice
    Member
    Posted 6 years ago #

    Unfortunately no, it's nothing to do with that border. Removing it does nothing at all. the filename is http://www.championspoker.co.uk/wp-content/themes/default/images/kubrickbg-ltr.jpg

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

  4. NeXXor
    Member
    Posted 6 years ago #

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

  5. Kieranpenrice
    Member
    Posted 6 years ago #

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

  6. NeXXor
    Member
    Posted 6 years ago #

    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;
    	}
  7. Kieranpenrice
    Member
    Posted 6 years ago #

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

  8. NeXXor
    Member
    Posted 6 years ago #

    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.

  9. Kieranpenrice
    Member
    Posted 6 years ago #

    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.

  10. Kieranpenrice
    Member
    Posted 6 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic