CSS Problem

[johnstires]

Can someone help me figure out why this button works in FF but not in IE...

button: VIDEO - take yoga now, for free!

http://www.prenatalyogacenter.com/cm....php?page=test

Here is the code and css I am using.

Code:

<tr>
<td class="$getbgrow">
<div class="pycbutton"><a href="http://www.prenatalyogacenter.com"><h2>VIDEO - take yoga now, for free!</h2></a></div>
<td>
<tr>

CSS

.pycbutton {
height:32px;
width:390px;
background:url(http://www.prenatalyogacenter.com/forums/images/buttons/pyc_button.gif) no-repeat scroll 0%
}

.pycbutton h2 {
height:32px;
width:390px;
background-repeat:no-repeat;
font-size:14px;
font-weight:bold;
letter-spacing:normal;
line-height:32px;
padding-left:10px;
position:relative;
color:#9766C3; 
}

can you point what is not working exactly?!

and actually, to make it XHTML compliant, the <a have to be inside the <h2, not the opposite!

[RedTyger]

Your background CSS is pretty badly borked, don't know if that'd be catastropic but it's not good form.

Replace:
background:url(http://www.prenatalyogacenter.com/fo...pyc_button.gif) no-repeat scroll 0%

With:

background:transparent url(http://www.prenatalyogacenter.com/forums/images/buttons/pyc_button.gif) center center no-repeat;

Note I added the missing closing ; as well.

Originally Posted by RedTyger

Note I added the missing closing ; as well.

the last element of a css entity does not require a closing... even on W3C they don't apply it... anyway it is always cleaner to add everything into place, so you never miss a thing..

[johnstires]

Originally Posted by RedTyger

Replace:
background:url(http://www.prenatalyogacenter.com/fo...pyc_button.gif) no-repeat scroll 0%

With:

background:transparent url(http://www.prenatalyogacenter.com/forums/images/buttons/pyc_button.gif) center center no-repeat;

Note I added the missing closing ; as well.

Thanks for the responses. As you can see I'm a bit of a hack. Your fix did not work. SHould center be there twice?

I use firebug addon to help troubleshoot css problems in FF. What can I use to help troubleshoot in IE. I wish more people used FF...

[Princeton]

I see 2 links with "VIDEO - take yoga now, for free!" ...

the top link has some javascript in the following form:

<a href="javascript<b></b>:var target=window.open('http://link.brightcove.com/services/player/bcpid823619092','PrenatalYogaAlleviatingBackPain',  'scrollbars=no,resizable=no,status=no,width=510,he  ight=610');">

notice the <b></b>? .. it shouldn't be there

the second link works in FF and IE

I recommend closing all tags .. otherwise, your html may not degrade well in other browsers. It's best to play it safe.

FYI: Over 50% of vbulletin.org visitors use FireFox.

[Princeton]

By the way, Firebug is an excellent tool. :up: I use it everyday.

I highly recommend it as a must-have tool for web developers.

[johnstires]

Originally Posted by Princeton

I see 2 links with "VIDEO - take yoga now, for free!" ...

the top link has some javascript in the following form:

<a href="javascript<b></b>:var target=window.open('http://link.brightcove.com/services/player/bcpid823619092','PrenatalYogaAlleviatingBackPain',  'scrollbars=no,resizable=no,status=no,width=510,he  ight=610');">

notice the <b></b>? .. it shouldn't be there

the second link works in FF and IE

I recommend closing all tags .. otherwise, your html may not degrade well in other browsers. It's best to play it safe.

FYI: Over 50% of vbulletin.org visitors use FireFox.

I have 2 links in there as it is just a test page. That's wierd bold tags are being added there, probably because I placed the brightcove script inside bbcode. I'll make it a template.