wmguk Posted June 25, 2008 Share Posted June 25, 2008 Hey guys, I'm using a CSS containing: .im { position: relative; } .image { padding: 0; position: absolute; right: 0px; bottom: 0px; } and then my page, generating an image overlay using the position information. <?php $result = mysql_query("SELECT * FROM products WHERE colour = '$colour' && clear = 'off' ORDER BY $orderby"); $i = 0; //set $i to 1 outside the loop while ($row=mysql_fetch_assoc($result)) { //ERROR RELATES TO THIS ERROR echo '<td align="center" width="180"><table width="168" border="0" cellspacing="0" cellpadding="0">'; echo '<tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td>'; echo '<td><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="152" height="11" /></td>'; echo '<td align="left" valign="top"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td></tr>'; echo '<tr>'; echo '<td background="images/tables/tiles4u_table_left.gif"> </td>'; echo '<td width="152" class="leftmenu"><span class="leftmenuheader">'; echo $row['name']; echo '</span><br /><a href="detail.php?id='; echo $row['refnum']; echo '">'; if ($row['special'] == "off" && $row['clear'] == "off") { echo '<img border="0" src="/images/tiles/'; echo $row['pic']; echo '" width="150px" height="150px" alt="TILES 4 U" />'; } elseif ($row['special'] == "on") { //SHOW THE SPECIAL OFFER IMAGE echo '<img border="0" src="/images/tiles/'; echo $row['pic']; echo '" width="150px" height="150px" alt="TILES 4 U" /><span class="im"><img border="0" src="images/tiles/special.gif" alt="TILES 4 U" class="image" /></span>'; } else { //SHOW THE CLEARANCE IMAGE echo '<img border="0" src="/images/tiles/'; echo $row['pic']; echo '" width="150px" height="150px" alt="TILES 4 U" /><span class="im"><img border="0" src="images/tiles/clear.gif" alt="TILES 4 U" class="image" /></span>'; } echo '</a><br />From £'; echo $row['price']; echo ' per sq/m</td><td background="images/tables/tiles4u_table_right.gif"> </td></tr><tr>'; echo '<td align="left" valign="top"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td>'; echo '<td><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td>'; echo '<td align="left" valign="top"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td></tr></table></td>'; $i = $i + 1; //add 1 to $i if ($i == 3) { //when you have echoed 3 <td>'s echo '</tr><tr>'; //echo a new row $i = 0; //reset $i } //close the if }//close the while loop ?> when you use IE7 it looks fine, however, when you use firefox it is in the wrong position, and drops down by about 17px... any thoughts how i can fix this? demo: http://tiles4u.wicked-websites.co.uk/ Quote Link to comment Share on other sites More sharing options...
scottybwoy Posted June 25, 2008 Share Posted June 25, 2008 try using relative instead of absolute. Also I would use firefox to develop your .css and then use a conditional .css file for ie7. Google it to find out more. Quote Link to comment Share on other sites More sharing options...
wmguk Posted June 25, 2008 Author Share Posted June 25, 2008 try using relative instead of absolute. Also I would use firefox to develop your .css and then use a conditional .css file for ie7. Google it to find out more. hey, I tried absolute, however it places the special / clearance image underneath the main image, not on top... Quote Link to comment Share on other sites More sharing options...
kenrbnsn Posted June 25, 2008 Share Posted June 25, 2008 This is not a PHP issue, but a CSS issue, so I'm moving this to the CSS area. Ken Quote Link to comment Share on other sites More sharing options...
wmguk Posted June 25, 2008 Author Share Posted June 25, 2008 hey, thats cool, so does anyone have any ideas about this? thanks Drew Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 25, 2008 Share Posted June 25, 2008 It is not validating. You are using pretty old deprecated HTML 3 and 4.0 code. If you must use xhtml, then make sure you use it with proper html tags. Otherwise you are better off using HTML 4.0 transitional doctype. The way it is coded now, I wouldn't expect it to work in anything but IE. Quote Link to comment Share on other sites More sharing options...
wmguk Posted June 25, 2008 Author Share Posted June 25, 2008 It is not validating. You are using pretty old deprecated HTML 3 and 4.0 code. If you must use xhtml, then make sure you use it with proper html tags. Otherwise you are better off using HTML 4.0 transitional doctype. The way it is coded now, I wouldn't expect it to work in anything but IE. It actually works properly in everything except IE..... im currently using <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted June 26, 2008 Share Posted June 26, 2008 It is not validating. You are using pretty old deprecated HTML 3 and 4.0 code. If you must use xhtml, then make sure you use it with proper html tags. Otherwise you are better off using HTML 4.0 transitional doctype. The way it is coded now, I wouldn't expect it to work in anything but IE. lol. *********** On a more serious note: It has already been noted that this is not a php issue. This is because PHP DOES NOT AFFECT CSS/HTML "looks". (presentation output). It is annoying that people just dump their whole code and hope we would go through it all. Come on. Be more sympathetic. Therefore, please post only the parsed php code. NO PHP. Thank you, Quote Link to comment Share on other sites More sharing options...
haku Posted June 26, 2008 Share Posted June 26, 2008 I was about to say the same thing. When you have your page in the browser, choose 'view source', then paste that source here (after formatting it so it's visually easy to look at, and not just a couple long lines). Quote Link to comment Share on other sites More sharing options...
wmguk Posted June 26, 2008 Author Share Posted June 26, 2008 Sorry guys, its my mistake, I thought it was a php issue, so i originally posted in the PHP Help section, however its now obvious its a CSS issue, i use dreamweaver and just follow it, so im still learning. view source: <!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"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>Tiles 4 U - Your one stop shop for all your tile needs</title> <!-- InstanceEndEditable --> <link href="tiles4u.css" rel="stylesheet" type="text/css" /> <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --> </head> <body> <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="122" align="left" valign="top"><img src="images/tiles4u_topleftlogo.gif" width="122" height="96" alt="Tiles 4 U - Your one stop shop for all your tile needs" /></td> <td valign="top"><img src="images/tiles4u_top.gif" alt="" width="538" height="96" hspace="0" vspace="0" border="0" /></td> <td width="140" align="right" valign="top"><img src="images/tiles4u_toprightlogo.gif" alt="Tiles 4 U - Your one stop shop for all your tile needs" width="140" height="96" /></td> </tr> <tr> <td rowspan="2" valign="top" background="images/tiles4u_left.gif"> <p class="leftmenuheader">Tiles:<br /> <span class="leftmenu"> <a href="show_tile.php?colour=beige">Beige</a><br /> <a href="show_tile.php?colour=black">Black</a><br /> <a href="show_tile.php?colour=blue">Blue</a><br /> <a href="show_tile.php?colour=green">Green</a><br /> <a href="show_tile.php?colour=grey">Grey</a><br /> <a href="show_tile.php?colour=orange">Orange</a><br /> <a href="show_tile.php?colour=red">Red / Terracotta</a><br /> <a href="show_tile.php?colour=white">White</a><br /> <a href="show_tile.php?colour=yellow">Yellow</a><br /> <a href="show_tile.php?colour=others">Others</a><br /> </span></p> <p class="leftmenu"><span class="leftmenuheader">Borders:</span><br /> <a href="showborder.php?colour=beige">Beige</a><br /> <a href="showborder.php?colour=black">Black</a><br /> <a href="showborder.php?colour=blue">Blue</a><br /> <a href="showborder.php?colour=green">Green</a><br /> <a href="showborder.php?colour=grey">Grey</a><br /> <a href="showborder.php?colour=orange">Orange</a><br /> <a href="showborder.php?colour=red">Red / Terracotta</a><br /> <a href="showborder.php?colour=white">White</a><br /> <a href="showborder.php?colour=yellow">Yellow</a><br /> <a href="showborder.php?colour=others">Others</a></p> <p class="leftmenu"><span class="leftmenuheader">Installation:</span><br /> <a href="showproduct.php?cat=trim" target="_self">Trim</a><br /> <a href="showproduct.php?cat=grout" target="_self">Adhesive & Grout</a><br /> <a href="measure.html" target="_self">Measuring Service</a><br /><br /> </p></td> <td rowspan="2" valign="top"><table width="538" height="550" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="11" align="left" valign="top" background="images/tables/tiles4u_table_left.gif"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td> <td height="11" colspan="7" valign="top"><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="100%" height="11" /></td> <td height="11" align="left" valign="top" background="images/tables/tiles4u_table_right.gif"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td> </tr> <tr> <td background="images/tables/tiles4u_table_left.gif"> </td> <td height="19" align="left" valign="top"> <!-- InstanceBeginEditable name="header" --><span class="leftmenuheader">Catalogue : blue Tiles</span><!-- InstanceEndEditable --></td> <td align="left" valign="top" class="leftmenu">Search by: Name</td> <td align="left" valign="top" class="leftmenu"><form action="show_tile.php" method="post" name="search"> <input type="image" name="image" src="images/asc.gif" /> <input type="hidden" name="orderby" value="name ASC" /> <input type="hidden" name="colour" value="blue" /> </form></td> <td align="left" valign="top" class="leftmenu"><form action="show_tile.php" method="post" name="search"> <input type="image" name="image" src="images/desc.gif" /> <input type="hidden" name="orderby" value="name DESC" /> <input type="hidden" name="colour" value="blue" /> </form></td> <td align="left" valign="top" class="leftmenu">Price</td> <td align="left" valign="top" class="leftmenu"><form action="show_tile.php" method="post" name="search"> <input type="image" name="image" src="images/asc.gif" /> <input type="hidden" name="orderby" value="price ASC" /> <input type="hidden" name="colour" value="blue" /> </form></td> <td align="left" valign="top" class="leftmenu"><form action="show_tile.php" method="post" name="search"> <input type="image" name="image" src="images/desc.gif" /> <input type="hidden" name="orderby" value="price DESC" /> <input type="hidden" name="colour" value="blue" /> </form></td> <td background="images/tables/tiles4u_table_right.gif"> </td> </tr> <tr> <td align="left" valign="top" background="images/tables/tiles4u_table_left.gif"> </td> <td colspan="7" align="left" valign="top"> <!-- InstanceBeginEditable name="maintext" --> <table width="520" border="0" cellpadding="0" cellspacing="0" class="leftmenu"> <tr> <td align="center" width="180"><table width="168" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="152" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td></tr><tr><td background="images/tables/tiles4u_table_left.gif"> </td><td width="152" class="leftmenu"><span class="leftmenuheader">bumpy</span><br /><a href="detail.php?id=3"><img border="0" src="/images/tiles/2.jpg" width="150px" height="150px" alt="TILES 4 U" /><span class="im"><img border="0" src="images/tiles/special.gif" alt="TILES 4 U" class="image" /></span></a><br />From £19.99 per sq/m</td><td background="images/tables/tiles4u_table_right.gif"> </td></tr><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td></tr></table></td><td align="center" width="180"><table width="168" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="152" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td></tr><tr><td background="images/tables/tiles4u_table_left.gif"> </td><td width="152" class="leftmenu"><span class="leftmenuheader">forme alpe</span><br /><a href="detail.php?id=5"><img border="0" src="/images/tiles/2.jpg" width="150px" height="150px" alt="TILES 4 U" /></a><br />From £100.00 per sq/m</td><td background="images/tables/tiles4u_table_right.gif"> </td></tr><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td></tr></table></td><td align="center" width="180"><table width="168" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="152" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td></tr><tr><td background="images/tables/tiles4u_table_left.gif"> </td><td width="152" class="leftmenu"><span class="leftmenuheader">modus</span><br /><a href="detail.php?id=8"><img border="0" src="/images/tiles/1.jpg" width="150px" height="150px" alt="TILES 4 U" /></a><br />From £3.00 per sq/m</td><td background="images/tables/tiles4u_table_right.gif"> </td></tr><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td></tr></table></td></tr><tr><td align="center" width="180"><table width="168" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="152" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td></tr><tr><td background="images/tables/tiles4u_table_left.gif"> </td><td width="152" class="leftmenu"><span class="leftmenuheader">padova</span><br /><a href="detail.php?id=1"><img border="0" src="/images/tiles/1.jpg" width="150px" height="150px" alt="TILES 4 U" /></a><br />From £99.99 per sq/m</td><td background="images/tables/tiles4u_table_right.gif"> </td></tr><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td></tr></table></td><td align="center" width="180"><table width="168" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="152" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td></tr><tr><td background="images/tables/tiles4u_table_left.gif"> </td><td width="152" class="leftmenu"><span class="leftmenuheader">sienna</span><br /><a href="detail.php?id=6"><img border="0" src="/images/tiles/2.jpg" width="150px" height="150px" alt="TILES 4 U" /><span class="im"><img border="0" src="images/tiles/special.gif" alt="TILES 4 U" class="image" /></span></a><br />From £26.00 per sq/m</td><td background="images/tables/tiles4u_table_right.gif"> </td></tr><tr><td align="left" valign="top"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td><td><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td><td align="left" valign="top"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td></tr></table></td> </tr> </table> <!-- InstanceEndEditable --></td> <td align="left" valign="top" background="images/tables/tiles4u_table_right.gif"> </td> </tr> <tr> <td align="left" valign="bottom" background="images/tables/tiles4u_table_left.gif"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td> <td height="8" colspan="7" valign="bottom"><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td> <td align="left" valign="bottom" background="images/tables/tiles4u_table_right.gif"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td> </tr> </table></td> <td align="right" valign="top" background="images/tiles4u_right.gif"> <p class="rightmenuheader"><br /> Bathrooms:<br /> <span class="rightmenu"><a href="bathroomacc.php" target="_self">Furniture</a><br /> <a href="bathroomacc.php" target="_self">Toilet & Cisterns</a><br /> <a href="bathroomacc.php" target="_self">Basin & Pedestal</a><br /> <a href="bathroomfix.php" target="_self">Fixtures & Fixings</a><br /> <a href="bathroomacc.php" target="_self">Taps & Accessories</a><br /> <a href="bathroomacc.php" target="_self">Full Bathroom Systems</a></span></p> <p class="rightmenu"><span class="rightmenuheader">Kitchens:</span><span class="rightmenu"><br /> <a href="kitchenacc.php" target="_self">Accessories</a><br /> <a href="kitchenfix.php" target="_self">Fixtures & Fixings</a></span><br /> <br /> </p></td> </tr> <tr> <td align="right" valign="bottom"><table width="135" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td> <td><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="100%" height="11" /></td> <td align="left" valign="top"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td> </tr> <tr> <td background="images/tables/tiles4u_table_left.gif"> </td> <td width="119" align="center" valign="middle" class="leftmenu"><p align="center"> </p> <p align="center"><a href="clearance.php">Click Here For Clearance Stock</a></p> <p align="center"> </p></td> <td background="images/tables/tiles4u_table_right.gif"> </td> </tr> <tr> <td align="left" valign="top"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td> <td><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td> <td align="left" valign="top"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td> </tr> </table> <table width="135" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top"><img src="images/tables/tiles4u_table_lefttop.gif" alt="TILES 4 U" width="8" height="11" /></td> <td><img src="images/tables/tiles4u_table_top.gif" alt="TILES 4 U" width="100%" height="11" /></td> <td align="left" valign="top"><img src="images/tables/tiles4u_table_righttop.gif" alt="TILES 4 U" width="8" height="11" /></td> </tr> <tr> <td background="images/tables/tiles4u_table_left.gif"> </td> <td width="119" align="center" valign="middle" class="leftmenu"><p align="center"> </p> <p align="center">Click Here For Special Offers</p> <p align="center"> </p></td> <td background="images/tables/tiles4u_table_right.gif"> </td> </tr> <tr> <td align="left" valign="top"><img src="images/tables/tiles4u_table_leftbottom.gif" alt="TILES 4 U" width="8" height="11" /></td> <td><img src="images/tables/tiles4u_table_bottom.gif" alt="TILES 4 U" width="100%" height="11" /></td> <td align="left" valign="top"><img src="images/tables/tiles4u_table_rightbottom.gif" alt="TILES 4 U" width="8" height="11" /></td> </tr> </table> </td> </tr> <tr> <td colspan="3" bgcolor="#CC3333" class="wfooter"><strong>TILES 4 U</strong> and <strong>SplashOut Bathrooms</strong> are trading names of<strong> A.R. & D.A. Adcock Limited</strong>.</td> </tr> <tr> <td colspan="3" class="bfooter"><strong>Company Number:</strong> 6130145. <strong>Registered Office:</strong> Unit 7 & 8 Astra Court, Greens Road, Dereham, Norfolk, NR20 3TG</td> </tr> </table> <br /> </body> <!-- InstanceEnd --></html> Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 26, 2008 Share Posted June 26, 2008 when you use IE7 it looks fine, however, when you use firefox it is in the wrong position, and drops down by about 17px... I must have read that wrong. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> I know, and that's partly why it isn't validating - the php tags are causing invalidation. The other reason is because xhtml transitional or strict is still based on html 4.01. And in html 4.01 you cannot use deprecated table styling tags and html 3.0 inline style tags like "background="images/tiles4u_top.gif", and you must have an alt for any img tag. You are using an utf-8 charset, but not using html special characters for some of your your unescaped php tags like & or <? ?>. This can be REAL annoying when trying to make a php file using xhtml and utf-8 valid. The whole point to what I am saying is that if your code isn't valid, all bets are off for guaranteed cross-browser compatibility. Get it validating, try converting it to an html 4.01 trans doctype and use an ISO charset. Quote Link to comment Share on other sites More sharing options...
wmguk Posted June 26, 2008 Author Share Posted June 26, 2008 I have found <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> Is that the sort of doctype i need? I'm really sorry but this is the first time i've ever had to think about this information... Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 27, 2008 Share Posted June 27, 2008 Yes. Just so you understand why, if you use an XHTML doctype, but are not actually parsing any xml or "serving" the page to the browser as an "xml/xhtml application", browsers treat it as html 4 (with closing slashes) anyway. You will also want to change "charset=utf-8" to "charset=ISO-8859-1". Because under xhtml and utf-8, all instances of ampersands, quotes and a few other tags or characters need to be coded as "spcial characters" like "&:" for "&". But remember, if you change from xhtml to html, you will need to remove any closing slashes on meta tags, img tags, br tags and any other "self-closing tags". In Dreamweaver, click on code view, then right click/find and replace enter find " />" replace with ">" press "replace all". Also, it is crucial for any business site to use the meta tags for search engine bots - description, keywords, robots. And this is where you will learn how bad it is to use graphics in place of text. Looking at your site, it was indeed rich in good keywords. But it was worthless for a good description. The best description was the title tag. So when I tried to google "tiles4u" your site didn't show in the results. I had to type your full domain name to get this: Tiles 4 U - Your one stop shop for all your tile needs Bathrooms: Furniture · Toilet & Cisterns · Basin & Pedestal · Fixtures & Fixings · Taps & Accessories · Full Bathroom Systems. Kitchens: ... tiles4u.wicked-websites.co.uk/ - 10k - Cached - Similar pages See what the google bot did? It simply grabbed whatever text it could find on the page in order to create some kind of description. And since the only text with any proper block level tag was in paragraphs, that's what it grabbed. THIS is why using headers (h1, h2, h3, h4) paragraphs and lists are so important. Because it shows the bot that YOU are telling it the "hierarchy of text importance". Descriptions should not be long, keywords should ONLY include single words or word groups WITHOUT REPEATED ANY WORD. The bots that still use keywords will "get it" if you only have tile once in the keyword, but many times in the body text. Next, the robots tag. This is to let the bots know if they should index the page in their database and follow the links on the page. Actually if no robot tag is included, it will use "index, follow" by default. But there are instances where you don't want it to index the page or follow the links, so it is good practice to include it. Most of us put a "robots.txt" file on our servers, as well, that tell the bot specifically which directories or files it should NOT index. Here is how your should revise your head section. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <head> <title>Tiles 4 U - Your one stop shop for all your tile needs</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="description" content="Tiles 4 U - Your one stop shop for all your tile needs"> <meta name="keywords" content="tiles, splashout, bathrooms, furniture, toilet and cisterns, basin and pedestal, fixtures, fixings, taps, accessories, full bathroom systems, kitchens"> <meta name="robots" content="index, follow"> <link href="tiles4u.css" rel="stylesheet" type="text/css"> </head> [code] If you can, lose the Dreamweaver template tags. They just bulk up the page weight. You want to trim down any and all unnecessary "browser side" tags or code - which is why the css file takes the place of markup level styling tags. Good luck [/code] Quote Link to comment Share on other sites More sharing options...
wmguk Posted June 27, 2008 Author Share Posted June 27, 2008 Yes. Just so you understand why, if you use an XHTML doctype, but are not actually parsing any xml or "serving" the page to the browser as an "xml/xhtml application", browsers treat it as html 4 (with closing slashes) anyway. You will also want to change "charset=utf-8" to "charset=ISO-8859-1". Because under xhtml and utf-8, all instances of ampersands, quotes and a few other tags or characters need to be coded as "spcial characters" like "&:" for "&". But remember, if you change from xhtml to html, you will need to remove any closing slashes on meta tags, img tags, br tags and any other "self-closing tags". In Dreamweaver, click on code view, then right click/find and replace enter find " />" replace with ">" press "replace all". Also, it is crucial for any business site to use the meta tags for search engine bots - description, keywords, robots. And this is where you will learn how bad it is to use graphics in place of text. Looking at your site, it was indeed rich in good keywords. But it was worthless for a good description. The best description was the title tag. So when I tried to google "tiles4u" your site didn't show in the results. I had to type your full domain name to get this: Tiles 4 U - Your one stop shop for all your tile needs Bathrooms: Furniture · Toilet & Cisterns · Basin & Pedestal · Fixtures & Fixings · Taps & Accessories · Full Bathroom Systems. Kitchens: ... tiles4u.wicked-websites.co.uk/ - 10k - Cached - Similar pages See what the google bot did? It simply grabbed whatever text it could find on the page in order to create some kind of description. And since the only text with any proper block level tag was in paragraphs, that's what it grabbed. THIS is why using headers (h1, h2, h3, h4) paragraphs and lists are so important. Because it shows the bot that YOU are telling it the "hierarchy of text importance". Descriptions should not be long, keywords should ONLY include single words or word groups WITHOUT REPEATED ANY WORD. The bots that still use keywords will "get it" if you only have tile once in the keyword, but many times in the body text. Next, the robots tag. This is to let the bots know if they should index the page in their database and follow the links on the page. Actually if no robot tag is included, it will use "index, follow" by default. But there are instances where you don't want it to index the page or follow the links, so it is good practice to include it. Most of us put a "robots.txt" file on our servers, as well, that tell the bot specifically which directories or files it should NOT index. Here is how your should revise your head section. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <head> <title>Tiles 4 U - Your one stop shop for all your tile needs</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="description" content="Tiles 4 U - Your one stop shop for all your tile needs"> <meta name="keywords" content="tiles, splashout, bathrooms, furniture, toilet and cisterns, basin and pedestal, fixtures, fixings, taps, accessories, full bathroom systems, kitchens"> <meta name="robots" content="index, follow"> <link href="tiles4u.css" rel="stylesheet" type="text/css"> </head> [code] If you can, lose the Dreamweaver template tags. They just bulk up the page weight. You want to trim down any and all unnecessary "browser side" tags or code - which is why the css file takes the place of markup level styling tags. Good luck [/code] Hey, wow, thank you for the guidance ive been doing site design for about 6 years however always trusted dreamweaver to do a good job with the coding... - lazy really as for the google results, this site isnt actually live yet, as the clients .co.uk is changing IPS tags. im currently just getting the site to work correctly, rather than doing any SEO on it just yet, - until the site is ready to go live i dont want it being crawled etc... I'm now getting this message W3C CSS Validator results for http://tiles4u.wicked-websites.co.uk/ (CSS level 2.1) Congratulations! No Error Found. so im assuming my pages are now ok, thank you so much... my only issue is whilst it displays brilliantly in FF it still sucks in IE. The overlayed image is showing up about 50px to the right and about 25px lower than it should... so now my pages are passing the CSS tests, how do you think i could fix this IE error? Quote Link to comment Share on other sites More sharing options...
haku Posted June 28, 2008 Share Posted June 28, 2008 You want conditional coments (click the link). They allow you to specify stylesheets for IE and IE only. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 30, 2008 Share Posted June 30, 2008 until the site is ready to go live i dont want it being crawled etc... Change the robots meta tag to: noindex, nofollow It still isn't validating. line 64: width="405" height="19" /> ... remove the closing slash (I warned you when switching from xhtml that these may slip in, most likely dynamic coded in your php echo). The "height=" tag in tables is not supported in html 4, it does nothing when there, and doesn't hurt when you remove it. Why are you using position:absolute to position the img? This is very hard to pull off cross-browser. Since you are using tables anyway, just drop the img in the TD. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.