Hogwarts Radio - IE Messup

[ColinM]

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!

 

[angelwatt]

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.

display: block;

Another note. In the style.css file you have,

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

 

[ColinM]

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.

display: block;

Another note. In the style.css file you have,

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

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.

 

[angelwatt]

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.

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.

 

[ColinM]

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

 

[angelwatt]

I tried it another way. Is this what you were thinking of?

Nope, it needs to be applied to the image, not body. I had assumed you knew CSS. In your HTML, you have,

<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,

<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,

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

 

[ColinM]

Nope, it needs to be applied to the image, not body. I had assumed you knew CSS. In your HTML, you have,

<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,

<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,

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

Thank you SO MUCH! You are absolutely amazing. The entire Hogwarts Radio crew thanks you immensely.

 

[angelwatt]

Thank you SO MUCH! You are absolutely amazing. The entire Hogwarts Radio crew thanks you immensely.

Not a problem. I'm a fellow Harry Potter fan. I might check out the site more.