asked on 1/6/2009

IE7 display problem of Wordpress theme

I am working on a modified Wordpress theme. The site is temporarily located here: lab.imagewize.net/wp. The title in the top right corner is not displayed completely in Internet Explorer 7. #header h1 a chops of a piece. Any ideas how to resolve this and display it well in FF and IE?
Second, I would like to ad an image behind the title to give the text a gradient (gradient-white.png)? A quick CSS/HTML tip to do that would be greatly appreciated. So far I have only been able to give h1 a background that is gradient, but I only want to give the text a gradient. Not the entire box...

Web Browsers WordPress CSS

Last Comment

rhandalthor

1/6/2009

ASKER CERTIFIED SOLUTION

gwkg

1/6/2009

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

rhandalthor

1/6/2009

ASKER

Line-height worked! Great! Thanks a lot! I know the site you mentioned. That's where I get a lot of information from. It is just hard to implement because they say I need to make the header relative and the span absolute. But it doesn't seem to work. I will implement it and let you know the result gwkg.

rhandalthor

1/6/2009

ASKER

See http://lab.imagewize.net/wp/. I have added some adjustment following their instructions. But because of position conflicts the title is know located to the left. Please put me into the right direction gwkg.

gwkg

1/6/2009

Try putting it ahead of your <ul> list in your html code and then add
float:right;
to your h1 tag in the css.
Make sure you only use 1 h1 tag in the document or all your <h1> will be affected. Otherwise, add an id to the h1 and style the id
<h1 id="logo">
h1#logo { float:right; }

gwkg

1/6/2009

By "it" I meant
<h1><a href="http://lab.imagewize.net/wp">Imagewize</a><span></span></h1>

rhandalthor

1/6/2009

ASKER

Done. It was float:right; before. I restored that now. But the background image (#header h1 span {background...}) does not make the text to display in a gradient way...

gwkg

1/6/2009

Try using the absolute path to the .png image. It's tricky finding images using relative paths in your css file when everything isn't in the same directory.
#header h1 span {
position:absolute;
display:block;
background: url('http://lab.imagewize.net/wp/images/gradient-white.png') repeat-x;
}
You should move the styles you have up in h1 down to #header h1 to avoid any confusion.
You also have two listings for #header h1 a that you should combine. Syles later in your stylesheet will override earlier declared styles and cause major dubugging headaches.

gwkg

1/6/2009

You probably know that the path I used for your gradient-white.png is incorrect. I don't know where that image is, I just picked any url as an example.

rhandalthor

1/6/2009

ASKER

Did all that. Cleaned up the css a bit as well. All the #header a code combined now. Added the absolute path too (correct one). Still no gradient though...

rhandalthor

1/6/2009

ASKER

When I remove position absolute in the h1 span I can see the gradient covering the orange box.. But I still don't see how I can get it to cover the text and keep position absolute...

gwkg

1/6/2009

You might want to close this question and open a new one in the CSS zone with a better title for this specific issue.
Something like text gradient with css and transparent png

rhandalthor

1/6/2009

ASKER

Will post a new question for the gradient issue. Thanks gwkg!