Avatar of rhandalthor
rhandalthorFlag for Russian Federation

asked on 

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 BrowsersWordPressCSS

Avatar of undefined
Last Comment
rhandalthor
ASKER CERTIFIED SOLUTION
Avatar of gwkg
gwkg
Flag of United States of America image

Blurred text
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
Avatar of rhandalthor
rhandalthor
Flag of Russian Federation image

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.
Avatar of rhandalthor
rhandalthor
Flag of Russian Federation image

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.
Avatar of gwkg
gwkg
Flag of United States of America image

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; }
Avatar of gwkg
gwkg
Flag of United States of America image

By "it" I meant
<h1><a href="http://lab.imagewize.net/wp">Imagewize</a><span></span></h1>
Avatar of rhandalthor
rhandalthor
Flag of Russian Federation image

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...
Avatar of gwkg
gwkg
Flag of United States of America image

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.
Avatar of gwkg
gwkg
Flag of United States of America image

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.
Avatar of rhandalthor
rhandalthor
Flag of Russian Federation image

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...
Avatar of rhandalthor
rhandalthor
Flag of Russian Federation image

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...
Avatar of gwkg
gwkg
Flag of United States of America image

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
Avatar of rhandalthor
rhandalthor
Flag of Russian Federation image

ASKER

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

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo