Firefox/IE7 and IE6 display differently. Please help.

  • Resolved kieranpenrice

    (@kieranpenrice)


    17 years, 3 months 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 https://www.championspoker.co.uk/blog.php and the .css file at https://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.

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?

    Thread Starter kieranpenrice

    (@kieranpenrice)

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

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

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

    Thread Starter kieranpenrice

    (@kieranpenrice)

    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;
	}
    Thread Starter kieranpenrice

    (@kieranpenrice)

    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.

    Thread Starter kieranpenrice

    (@kieranpenrice)

    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.

    Thread Starter kieranpenrice

    (@kieranpenrice)

    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.