Background image problem in #page

  • Hi, I’ve trawled the forums for a solution to this problem and have come up stumped.

    I have two seperate integrated wordpress/gallery blogs.
    1) https://www.eospix.com
    2) https://www.eos-images.com

    Both are styled identically apart from sidebar(s) content. They also have identical styleshheets.

    Both display perfectly in IE6, but under firefox the background image (#page) does not appear on https://www.eospix.com, but it does on https://www.eos-images.com.

    I’ve cut and pasted the css from one site to the other and cannot get it to display. Ironically, the same background image is displayed correctly behind gallery.

    I’ve compared code, checked for div tag discrepancies, refreshed caches and finally resulted in posting here. If anyone can help out it would be appreciated.

    Thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Yes, I see the problem. You are calling twice the same stylesheet with the tag “link” and “style” (with the import command). Plus, you give extra options to #page in the “style” tag. And in this tag for #page, you say border:none, whereas in the style.css, border is 1 pix and a colour. So, there is a conflict.
    I strongly suggest you put everything in the style.css file and erase the “style” tag in your index.php or header.php file.

    Thread Starter john_n

    (@john_n)

    Thanks, I’ve removed the conflict in the style.css for the border and colour for now (and will move everything across from the header.php to the style.css later).

    I’m not too sure that I follow you on the calling twice issue, as surely it would throw both IE6 and FF. Equally, why does the same css conflict affect both sites differently? Its got to be something else.

    >>I’m not too sure that I follow you on the calling twice issue, as surely it would throw both IE6 and FF.<<

    Never compare Internet Explorer to any other browser out there. Almost every other browser that’s available (Firefox, Konqueror, Safari – to name but a few) are based on web standards and comply to them. Internet Explorer is in it’s own little world, and does whatever the hell it wants to do. IE7 is a ray of hope on the dim IE horizon, but most of us designer’s aren’t really holding our breath on it.

    IE just renders CSS and html differently. It always has. That’s why any designer worth his salt will tell you to always code for Firefox first, and worry about IE later on. It’s much easier to fix if you appraoch it that way.

    >>Equally, why does the same css conflict affect both sites differently? Its got to be something else.<<

    Another good method to discover problems like this is to run it through a validator. This will not only uncover problems you may have missed, but validating your document also helps fix IE issues that come up – if the page isn’t validated, it’ll throw IE into what’s calle d”quirks mode”, which makes IE “guess” what you want to have done, rather than just doing things right and following the code.

    Site 1 – has 144 errors.

    Site 2 only has 43 errors. So it looks like your second site has cleaner code – if you compare the two pages you may find where the problem lies.

    Hope that gets you started!

    Save your CSS/Index.PHP for both sites and compare them using CSDiff:

    https://www.componentsoftware.com/products/csdiff/

    It should notify you of any differences between the code.

    Thread Starter john_n

    (@john_n)

    Thanks, i’ll work through the errors, I suppose this is what happens when your forced to put site togther quickly following the plug being pulled by a previous host provider!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Background image problem in #page’ is closed to new replies.