PDA

View Full Version : CSS faults driving me mad.


missj
05-18-2006, 11:44 AM
Hey there, again.
I really have came across this most frustrating thing yet.
ok, so I'm doing a favour for a friend of mine with her ebay auction template, however I've got the designs part settled, but not the HTML part.
So I've did the design but just need to add the link in with it.
What I am trying to achieve is a group of link in the header of the template in so everytime that someone mousesover it, it is the link stays the same, but it is underlined. because it is appearing out of no where, i have got to use layers and then convert to tables.
i applied a custom link + mouseover style to it, but it stuffs up badly in every different browsers.
when i apply a different link + mouseover style to other links on the page, it works fine.
I have got a feeling that it has something to do with the way that i changed it from layers to tables .. etc.
Please advise, ive been messing around this thing for like ages already tonight and its simply driving me mad.
I have copied and pasted the code here;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.auctiontitle {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
border-color: #E7B2D6;
border-bottom: solid;
color: #FFFFFF;
background-color: #F7CBEF;
}
.border {
font-family: "Trebuchet MS";
font-size: 12px;
border: solid;
border-color: #E7B2D6;
border-width: 1px;
}
#Layer1 {
position:absolute;
width:121px;
height:28px;
z-index:1;
left: 49px;
top: 39px;
font: "Trebuchet MS";
color: ffffff;
}
#Layer2 {
position:absolute;
width:122px;
height:31px;
z-index:2;
left: 211px;
top: 38px;
font: "Trebuchet MS";
color: ffffff;
}
#Layer3 {
position:absolute;
width:120px;
height:30px;
z-index:3;
left: 51px;
top: 85px;
font: "Trebuchet MS";
color: ffffff;
font-size: 16px;
font-weight: bold;
}
#Layer4 {
position:absolute;
width:124px;
height:33px;
z-index:4;
left: 209px;
top: 86px;
font: "Trebuchet MS";
color: ffffff;
font-size: 16px;
font-weight: bold;
}
.infobox {
border: 2px solid #E7B2D6;
background-color: #F7CBEF;
}
.textmargin {
padding-right: 30px;
padding-left: 30px;
}
.backgroundimg {
font-family: Verdana;
background-image: url(http://i57.photobucket.com/albums/g217/mixie_2006/auctionheadernew.jpg);
font-size: 16px;
background-repeat: no-repeat;
}
#Layer5 {
position:absolute;
width:106px;
height:22px;
z-index:1;
left: 58px;
top: 40px;
}
#Layer6 {
position:absolute;
width:113px;
height:26px;
z-index:1;
left: 55px;
top: 39px;
}
#Layer7 {
position:absolute;
width:112px;
height:27px;
z-index:2;
left: 213px;
top: 38px;
}
#Layer8 {
position:absolute;
width:112px;
height:27px;
z-index:3;
left: 57px;
top: 88px;
}
#Layer9 {
position:absolute;
width:113px;
height:28px;
z-index:4;
left: 214px;
top: 87px;
}
a.customlink:link {
font-family: "Trebuchet MS";
font-size: 12px;
color: #000000;
text-decoration: none;
}
a.customlink:hover {
font-family: "Trebuchet MS";
font-size: 12px;
color: #E7B2D6;
}
#Layer10 {
position:absolute;
width:114px;
height:29px;
z-index:1;
left: 56px;
top: 39px;
}
#Layer11 {
position:absolute;
width:108px;
height:31px;
z-index:2;
left: 212px;
top: 38px;
}
#Layer12 {
position:absolute;
width:114px;
height:30px;
z-index:3;
left: 58px;
top: 87px;
}
#Layer13 {
position:absolute;
width:114px;
height:31px;
z-index:4;
left: 154px;
}
a.credits:link {
font-family: "Trebuchet MS";
font-size: 12px;
color: #FF99FF;
}
a.credits:hover {
font-family: "Trebuchet MS";
font-size: 12px;
color: #FFFFFF;
background-color: #FFCCFF;
}
#Layer14 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 149px;
top: -7px;
}
#Layer15 {
position:absolute;
width:113px;
height:30px;
z-index:4;
left: 213px;
top: 88px;
}
a.auctionslink:hover {
font-family: Vedana;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a.auctionslink:link {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div align="center" class="border">

<div align="center">
<table width="755" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<td height="121" valign="top" class="backgroundimg"><table border="0" cellpadding="0" cellspacing="0" class="auctionslink">
<tr>
<td width="46" height="23" valign="top"></td>
<td width="2" height="23" valign="top"></td>
<td width="112" height="23" valign="top"></td>
<td width="2" height="23" valign="top"></td>
<td width="40" height="23" valign="top"></td>
<td width="1" height="23" valign="top"></td>
<td width="107" height="23" valign="top"></td>
<td width="6" height="23" valign="top"></td>
</tr>
<tr>
<td width="46" height="1" valign="top"></td>
<td width="2" height="1" valign="top"></td>
<td width="112" height="1" valign="top"></td>
<td width="2" height="1" valign="top"></td>
<td width="40" height="1" valign="top"></td>
<td width="108" height="49" colspan="2" rowspan="2" valign="top"><div align="center" class="auctionslink">About (http://cgi3.ebay.com.au/ws/eBayISAPI.dll?ViewUserPage&amp;userid=moopieauctions)</div></td>
<td width="6" height="1" valign="top"></td>
</tr>
<tr>
<td width="46" height="48" valign="top"></td>
<td width="114" height="48" colspan="2" valign="top"><div align="center" class="auctionslink">Home (moopieauctions.com)</div></td>
<td width="2" height="48" valign="top"></td>
<td width="40" height="48" valign="top"></td>
<td width="6" height="48" valign="top"></td>
</tr>
<tr>
<td width="46" height="1" valign="top"></td>
<td width="2" height="1" valign="top"></td>
<td width="114" height="31" colspan="2" rowspan="2" valign="top"><div align="center">FAQ's (http://stores.ebay.com.au/Moopie-Auctions/FAQs.html)</div></td>
<td width="40" height="1" valign="top"></td>
<td width="1" height="1" valign="top"></td>
<td width="107" height="1" valign="top"></td>
<td width="6" height="1" valign="top"></td>
</tr>
<tr>
<td width="46" height="30" valign="top"></td>
<td width="2" height="30" valign="top"></td>
<td width="40" height="30" valign="top"></td>
<td width="1" height="30" valign="top"></td>
<td width="113" height="30" colspan="2" valign="top"><div align="center">Contact (http://stores.ebay.com.au/Moopie-Auctions/Contact-Us.html)</div></td>
</tr>
<tr>
<td width="46" height="1" valign="top">transparent.gif</td>
<td width="2" height="1" valign="top">transparent.gif</td>
<td width="112" height="1" valign="top">transparent.gif</td>
<td width="2" height="1" valign="top">transparent.gif</td>
<td width="40" height="1" valign="top">transparent.gif</td>
<td width="1" height="1" valign="top">transparent.gif</td>
<td width="107" height="1" valign="top">transparent.gif</td>
<td width="6" height="1" valign="top">transparent.gif</td>
</tr>
</table></td>
</tr>
<tr>
<td height="22" class="auctiontitle"><div align="center">Auction Title Here </div></td>
</tr>
<tr>
<td><p class="textmargin">Enter descriptions here </p>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="infobox">
<tr>
<td><div align="left">


http://i57.photobucket.com/albums/g217/mixie_2006/policies.jpg</p>


Please click here (ebay.com) for more information regarding policies. Note that by bidding or commiting to buy, you are agreeing to all terms and conditions of ours.</p>


http://i57.photobucket.com/albums/g217/mixie_2006/postage.jpg </p>


Please click here (ebay.com) for more information regarding postage &amp; handling fees.

Please refer below for postage and handling rates for the posting of this auction. </p>


</p>


http://i57.photobucket.com/albums/g217/mixie_2006/postage.jpg</p>


Please click here (ebay.com) for more information regarding payments options &amp; methods. </p>


</p>
</div></td>
</tr>
</table>
<p align="center"> <span class="customlink">about (ebay.com) | contact (ebay.com) | faqs (ebay.com) | payments (ebay.com) | shipping (ebay.com) | policies (ebay.com)</span><br align="center" />
</p>


</p></td>
</tr>
</table>
</div>
</div>
</body>
</html>

dthomsen8
05-18-2006, 05:53 PM
There is no "align" for the
tag. Use CSS for all alignment. I don't know if "alt" missing is a serious error, but www.w3.org validation
does complain about it. Here are the results of w3 validation:


Error Line 279 column 102: required attribute "alt" not specified.
...licies.jpg" width="150" height="44" /></p>
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.



Error Line 281 column 101: required attribute "alt" not specified.
...ostage.jpg" width="147" height="42" /> </p>


Error Line 285 column 101: required attribute "alt" not specified.
...ostage.jpg" width="147" height="42" /></p>


Error Line 291 column 386: there is no attribute "align".
...omlink">policies</a></span><br align="center" />
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.
d

dthomsen8
05-18-2006, 05:59 PM
Your alignment of the links is correct in Firefox 1.5, and Netscape 5.1 (based on Firefox), but not in MSIE6 or in Opera 7.1.