Hogwarts Radio - IE Messup

Discussion in 'Web Design and Development' started by ColinM, Dec 24, 2008.

  1. ColinM macrumors member

    Joined:
    Jan 25, 2008
    Location:
    Pennsylvania
    #1
    I code for the site, Hogwartsradio.com. I've used browsershots, and it seems that there's an ongoing issue for all versions of IE (Windows) where a white line will appear right where the header image ends. It isn't a problem of the header not being long enough, I've tried that, and it just moves the white line down. Hogwarts Radio is using wordpress, and the theme was coded based off of the default Kubrick theme.

    These are the files I would think would be causing this issue.

    hogwartsradio.com/wp-content/themes/hogwartsradio/header.php

    hogwartsradio.com/wp-content/themes/hogwartsradio/style.css

    hogwartsradio.com/wp-content/themes/hogwartsradio/index.php

    Any help would really appreciated. We have a huge announcement coming up on the 2nd of Jan. which will be causing tons of traffic, and I would love it to look perfect.

    Thank you!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Add the following style to the image. I'll let you decide how to add it. Whether giving the image an id, or use an inline style on the tag. I tested it with IE6.
    Code:
    display: block;
    Another note. In the style.css file you have,
    Code:
    #page {
    	background-color: <img src="images/hogwartsradiobg.jpg">;
    which is invalid CSS. I would delete the background-color line altogether. It isn't doing anything for you, but it is negating other styles. Use the CSS validator to look at other problems.
     
  3. ColinM thread starter macrumors member

    Joined:
    Jan 25, 2008
    Location:
    Pennsylvania
    #3
    I have now validated the CSS, however it appears this problem still occurs. I also edited header.php to what you said about display: block;

    body { background: #10101a url("<?php bloginfo('stylesheet_directory'); ?>/images/hogwartsradioheader.jpg")repeat-y top left; border: none; display: block; }

    Still... blasted white line.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    I don't see any changes made. Can you be specific as to where you put it at. Also make sure you uploaded the change. I know my fix works as I can see it working. The CSS you're showing for body is not where the display: block is needed.
     
  5. ColinM thread starter macrumors member

    Joined:
    Jan 25, 2008
    Location:
    Pennsylvania
    #5
    I tried it another way. Is this what you were thinking of?

    body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color: #10101a ;
    color: #FFFFFF;
    text-align: left;
    display: block
    }

    in the style.css
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Nope, it needs to be applied to the image, not body. I had assumed you knew CSS. In your HTML, you have,
    HTML:
    <img src="http://hogwartsradio.com/wp-content/themes/hogwartsradio/images/hogwartsradioheader.jpg" width="950" height="496" border="0">
    which is what the display property needs to be applied to. An easy thing to do would be to add an id attribute to the image so you have,
    HTML:
    <img id="headerImage" src="http://hogwartsradio.com/wp-content/themes/hogwartsradio/images/hogwartsradioheader.jpg" width="950" height="496" border="0">
    Then you'll add this CSS,
    Code:
    #headerImage { display: block; }
    to one of the CSS files (like style.css) or you can put it inside the style tag that already exist in the code where there's the body selector. Hopefully this makes more sense for what you need to do.
     
  7. ColinM thread starter macrumors member

    Joined:
    Jan 25, 2008
    Location:
    Pennsylvania
    #7
    Thank you SO MUCH! You are absolutely amazing. The entire Hogwarts Radio crew thanks you immensely.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Not a problem. I'm a fellow Harry Potter fan. ;) I might check out the site more.
     

Share This Page