Browser Compatibility Issue

stopandstare

Hi All,

I have just put together a website - I am a novice at it - using a template. I am getting one browser compatibility issue report:

The BACKGROUND attribute of the TD tag is no supported. in relation to the following line of code:

<TD background="file:///C|/Website/18/images/buttonmiddle.gif" class="tabs" width="100" valign="middle"><A href="../contactus.htm" class="tabs">Contact
Us</A></TD>


I have googled the problem and it seems whatever the template designer used to create the background is not supported in any browser other than IE7.

Can anyone help me get around this or is the template unworkable?

All help is much appreciated,
Cheers,
Orla

onemorechance

Use the css style sheet to put in your background image.

.tabs td {
background: url(///C|/Website/18/images/buttonmiddle.gif) no-repeat;
}

Hoku

The proper way to do this is to use CSS. Go to your stylesheet and find .tabs {...} and edit it like so:

.tabs td {
  background: url('images/buttonmiddle.gif');
  width: 100px;
  vertical-align: middle;
}

And then change the HTML code to:

<td class="tabs"><a href="../contactus.htm">Contact us</a></td>

stopandstare

Thank you so much for your help. When I make the changes to the CSS the background image disappears completely and the formatting of the text also changes. This is the way I have configured the CSS code - maybe I have not done it correctly as I have no experience with CSS:

a.tabs:link {color: #FFFFFF; text-decoration: none}
a.tabs:visited {color: #FFFFFF; text-decoration: none }
a.tabs:hover {color: #CCCCCC; text-decoration: none }
.tabs {color: #FFFFFF; padding-right: 5px; padding-left: 5px; text-align: center; font-weight: bold}
.tabs td {
background: url('images/buttonmiddle.gif');
width: 100px;
vertical-align: middle;
}
.small {font-size: 10px;}
#designed a {
color: #CCCCCC;
text-decoration: none;
font-size: 11px;
}

I will definatley be doing a few tutorials on CSS after this!

Many thanks,
Orla

onemorechance

stopandstare wrote: »

Thank you so much for your help. When I make the changes to the CSS the background image disappears completely and the formatting of the text also changes. This is the way I have configured the CSS code - maybe I have not done it correctly as I have no experience with CSS:

a.tabs:link {color: #FFFFFF; text-decoration: none}
a.tabs:visited {color: #FFFFFF; text-decoration: none }
a.tabs:hover {color: #CCCCCC; text-decoration: none }
.tabs {color: #FFFFFF; padding-right: 5px; padding-left: 5px; text-align: center; font-weight: bold}
.tabs td {
background: url('images/buttonmiddle.gif');
width: 100px;
vertical-align: middle;
}
.small {font-size: 10px;}
#designed a {
color: #CCCCCC;
text-decoration: none;
font-size: 11px;
}

I will definatley be doing a few tutorials on CSS after this!

Many thanks,
Orla

It could be to do with where folder the image is stored in relative to the folder the css file in.

background: url('images/buttonmiddle.gif');

This means the images folder and the css folder are both in the same folder.

If you want to go up one folder, put:

background: url('../images/buttonmiddle.gif');

up two folders:

background: url('../../images/buttonmiddle.gif');

EDIT: You're welcome Orla!

Hoku

Ah just re-arrange it a little and remove the class property on the link..

.tabs a:link, a:visited {color: #FFFFFF; text-decoration: none}
.tabs a:hover {color: #CCCCCC; text-decoration: none }
.tabs {
background: url('images/buttonmiddle.gif');
width: 100px;
vertical-align: middle;
color: #FFFFFF; 
padding-right: 5px; 
padding-left: 5px; 
text-align: center; 
font-weight: bold;
}
.small { font-size: 10px;}
#designed a {
color: #CCCCCC;
text-decoration: none;
font-size: 11px;
}

Use the HTML bit, as I posted previously.

stopandstare

Ok - when I preview it, it is working perfectly but when I look at it in Firefox the background image is still missing and the writing for the tabs when not selected has changed colour (they should be grey but are the normal hyperlink blue now)

The CSS seems to be having a problem with 'vertical-align: middle;' although I don't think that should affect much? It says that ' Support for the top, text-tip, middle, bottom, and text-bottom values of the CSS property vertical-align is incomplete; these values may not produce the intended effect.'

So far this is what the code looks like:

In the CSS:


.tabs a:link, a:visited {color: #FFFFFF; text-decoration: none}
.tabs a:hover {color: #CCCCCC; text-decoration: none }
.tabs {
background: url('../images/buttonmiddle.gif');
width: 100px;
vertical-align: middle;
color: #FFFFFF;
padding-right: 5px;
padding-left: 5px;
text-align: center;
font-weight: bold;
}
.small { font-size: 10px;}
#designed a {
color: #CCCCCC;
text-decoration: none;
font-size: 11px;
}

In the template:

<TR>
<TD>
<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD><IMG src="../images/buttonleft.gif" alt="" width="9" height="30"></TD>
<td class="tabs"><a href="../index.htm">Home</a></td>
<TD valign="middle"><IMG src="../images/buttonright.gif" alt="" width="10" height="30"></TD>
<TD valign="middle"><IMG src="../images/buttonleft.gif" alt="" width="9" height="30"></TD>
<td class="tabs"><a href="../services.htm">Services</a></td>
<TD valign="middle"><IMG src="../images/buttonright.gif" alt="" width="10" height="30"></TD>
<TD valign="middle"><IMG src="../images/buttonleft.gif" alt="" width="9" height="30"></TD>
<td class="tabs"><a href="../projects.htm">Projects</a></td>
<TD valign="middle"><IMG src="../images/buttonright.gif" alt="" width="10" height="30"></TD>
<TD valign="middle"><IMG src="../images/buttonleft.gif" alt="" width="9" height="30"></TD>
<td class="tabs"><a href="../safety.htm">Safety</a></td>
<TD valign="middle"><IMG src="../images/buttonright.gif" alt="" width="10" height="30"></TD>
<TD valign="middle"><IMG src="../images/buttonleft.gif" alt="" width="9" height="30"></TD>
<td class="tabs"><a href="../contactus.htm">Contact us</a></td>
<TD><IMG src="../images/buttonright.gif" alt="" width="10" height="30"></TD>
</TR>

onemorechance

Hi Orla!

.tabs {
background: url('../images/buttonmiddle.gif');
width: 100px;
height: 100%;
vertical-align: middle;
color: #FFFFFF;
padding-right: 5px;
padding-left: 5px;
text-align: center;
font-weight: bold;
}

Try putting in height. Think FireFox reduces it to zero.

Hoku

Also, you need to add another pseudo class there:

.tabs a:link, a:visited {color: #FFFFFF; text-decoration: none; }
.tabs a:hover {color: #CCCCCC; text-decoration: none; }
.tabs a:active {color: #FFFFFF; text-decoration: none; }
...

That could also be why the link is a different colour...

stopandstare

You guys are geniuses :D:D! It is up an running perfectly now on IE 6&7, Netscape 6&9 and Firefox (my arch nemisis lol)

Thanks a million for all ye'r help! I'm gonna have to get into some serious CSS learning... :rolleyes:

Orla

Hoku

After you get the hang of CSS is tableless design. Now THAT's a real pain to get working perfectly in all browsers, especially IE6.

Good luck with the website.

murari1011

hello

tabs are not working when i am trying to open in firefox.. wer as in IE it was perfectly alright......
template is
<td id="mainTabStripHeaderTable_td_text1" nowrap class="tabsTabStrip_on">
<a id="mainTabStrip_TabLinkElt_1" onClick=";changeTabSize('mainTabStrip','815','445');make_tabVisible('mainTabStrip','tabs','1','ReferenciesTab');moveButtons('445','0');focusOn('contractNbre');"href="#" class="tabsTabStripLink_on">Facts</a>
</td>



css is

.tabsTabStripLast_on
{
background-image: url(../images/components/tabs/tabStripLast_on.png);
height:31px;
width:8px;
}