Start Free Trial

asked on

CSS Gradient text

I have been working on adding a gradient background to a Wordpress linked h1 tag. It is the top right title at http://lab.imagewize.net/wp/ stating Imagewize . I have followed the tutorial at http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/ . But as my theme structure is different it doesn't work. I have been trying to work on the positioning (relative/absolute/floating) of the <span> and <h1> tag. No success yet. Please help me create a title with a gradient using a gradient png as a background and CSS.

h1 {
	font-size: 4em; /* 3.8 */
	line-height: 1.4em; /*0.9*/
	}	
	
#header h1 {
	display: block;
	width: 269px;
	height: 160px;
	float:right;
	margin: 0;	
	padding: 0;		
	}	
	
#header h1 span {position:absolute;
				 display:block; 
				 background: url(http://lab.imagewize.net/wp/wp-content/themes/doede.net/images/gradient-white.png) repeat-x;
				 height:180px;
				 }

Open in new window

Hi.
I used the Web Developer toolbar in Firefox and a quick Inspect Element found:

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

I guess that might be the reason! See if that helps, otherwise post back and will do some more digging.

Hemal

ASKER

No, that is not the issue. The span tag is added to put the gradient image behind the tag to give the title a gradient. FB just only displays one closing span tag, not the opening one. Maybe because it contains no content, but is used for syling only. In the source you will find: <h1><a href="http://lab.imagewize.net/wp">Imagewize</a><span></span></h1>
Please see: http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/ and let me know what adjustments you think are needed Hema. I have been at this for a while now....

ASKER

Well, so far no response from any experts yet. I guess it is hard for everyone :-) . I have been able to get the gradient to work in Firefox. The title text has a gradient now in Fireox 3.
Its position in Internet Explorer 7 is not correct yet. I basically added a divider and wrapped that one around the h1 I want to give a gradient. The divider floats right and the h1 is relative. The span is absolute. Somehow IE 7 positions it in the top of the added divider id title and not in the span..

ASKER

Well I will wait for some more advice from you guys.. I am stuck right now and will take a break from this to clear my mind.

I too have been able to get it working partially in FF3.
I agree, its quite difficult to manage this CSS part, especially with IE & FF rendering it differently. Here is what I have so far.

Will surely work on this more later in the evening, after office hours.

Hemal

.gradient2 h1
{ margin: 30px 0 50px; position: relative;}
 
.gradient2 span 
{ background: transparent url(gradient-white.png) repeat-x scroll 0 0; display: block; height: 180px; position: absolute; 
 
width: 80%;}
 
.gradient2 a 
{ color:#008E5B; text-decoration:none; }
 
<div class="gradient2">
			<h1><a href="http://lab.imagewize.net/wp"><span></span>Imagewize</a></h1>
		</div>

Open in new window

One minor update in the above code.

The gradient part on hover looks weird in yellow background. I'm sure its not what you want, right?

Hemal


.gradient2 span 
{ background: transparent url(gradient-white.png) repeat-x scroll 0 0; display: block; height: 180px; position: absolute; 
 
width: 75%; left:13%; top:49%; }

Open in new window

ASKER

No I don't Hemal. I only wnat the gradient for the text a not a:hover. If your css adjustments work in IE and FF I will give them a try. Just let me know...

ASKER

Well, I added al your code. Now I see no gradient and the title is positioned underneath the menu...

ASKER

Well I add justed your css code somewhat (path to image was incorrect) and added the id title to the divider around the h1 with a float:right. Now the image shows, but a different locations in IE and FF:

.gradient2 h1
{ margin: 30px 0 50px; position: relative;}

.gradient2 span {
            background: transparent url(images/gradient-white.png) repeat-x scroll 0 0;
            display: block;
            height: 180px;
            position: absolute;
            width: 75%;
            left:13%;
            top:49%; }

.gradient2 a {
            color:#008E5B;
            text-decoration:none;
             }

#title {float:right;}

ASKER

Well, I changed it back again. Not working for IE and FF yet.....

ASKER

Well I add #header a:hover span {background: none;} and now the gradient works perfectly in FF! Now there is only IE left...

Hi.
you say its working in IE now? I had a look at it and it doesnt seem right. I have attached the screenshots, taken both from IE6 & FF3.0.5

So at my end its working fine in FF and not IE!

Also wanted to point out that the IE 7 hack suggested by the author is not included in your code.

Hemal

ASKER

Not working yet in IE, no. I said only IE is left. Meaning I still need to solve that one. I know that the IE code is not included in my code. Will try that today.

sorry for the misunderstanding!

You've got a collapsing margin (http://www.dynamicsitesolutions.com/css/layout-techniques/#collapsing_margins) which is part of the problem. Give #header margin:0 and then some top padding, if you want.

It looks like IE is doubling the bottom offset you set. I recommend you remove that and give it top:0, then increase the height of the <span> to the height of the <h1> and then use background-position:center

#header h1 a span {
  background: url(images/gradient-white.png) repeat-x 50% 50%;
  display: block;
  height: 120px;
  left: 0;
  position: absolute;
  top: 0;
  width: 269px;
}

Open in new window

ASKER

@ Hemal No problems
@ Kravimir What is the 50% 50% for in the background?
Why are my margins collapsing? I mean, I don't display the header as a block.. Is it displayed like that by default?
I copied your code into my stylesheet. I still see no gradient in IE7 though. Maybe I missed something..

ASKER

@ Kravimir I understand the 50-50% now. That is for putting the image in the center. But please have a look at the site and tell me me what I am missing to get the gradient to work in IE 7

ASKER

Kravimir, any bright ideas ye?

ASKER

Still haven't found a solution to display the gradient properly in IE 7. I hope there is still someone awake out there who can gve me a hand.

> I mean, I don't display the header as a block.. Is it displayed like that by default?

Many elements have display:block by default. <div>s and header elements (e.g. <h1>, <h2>) are just a few of them.

The top margin on "#header h1 a" is also collapsing. Give "#header h1" the top margin instead. You might also want to increase the height on #header, as 150px plus 30px is more than 160px.

ASKER

Thanks for the explanation Kravimir. I added your changes and I think the css code is more cleaned up now. Hovers are the same in IE and FF now as far is I can see. I think the gradnient not displaying well has something to do with an IE png bug... But I haven't quite figured that out yet.

ASKER

Well, it is not a png issue for IE 7. This is an IE6 bug I think. So I don't know yet why it doesn't display in IE 7 yet...

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Kravimir, it works!! Brilliant!! No I can finally sleep and work on some more web 2.0 improvements later on!! Thanks a billions!

ASKER

Kravimir you are amazing! Thanks for helping to clean up the code and gettint the gradient to work!!