amberfrances
06-19-2007, 02:37 PM
can somebody look at my source and tell me why the links at the bottom of the page aren't working? They work in IE7 but not on browsers for macs...thanks
applies to page:
lonepineprairiepillows.com/floral_pillows.html
franny.
tracknut
06-19-2007, 02:50 PM
The links I see as "not working" at the bottom of the page are "About Us" "Contact Us" etc. They have no <A HREF... around them, so they're not linked to anything.
Dave
WebJoel
06-19-2007, 06:51 PM
Instead of :
<table class="products_page" border="0" cellpadding="0" cellspacing="0" width="800">
<tr height="198">
<td class="upper_nav" valign="bottom">
<a href="index.html">Home</a> |
<span style="color:gray">About Us</span> |
<span style="color:gray">Contact Us</span> |
<span style="color:gray">Shipping Information</span> |
<span style="color:gray">Return Policy</span> |
<span style="color:gray">Privacy Policy</span> |
<span style="color:gray">View Cart</span> |
</td>
</tr>
</table>
Try this:
CSS:
<style>
ul.floral_bottom_nav {background-color:#d5ded9; width:670px; height:20px; padding:3px 0 0 8px;}
ul.floral_bottom_nav li {display:inline; margin-right:10px; border-right:2px solid gray; text-align:center;}
ul.floral_bottom_nav li a {color:gray; text-align:center; text-decoration:none;padding:0 5px 0 5px;}
ul.floral_bottom_nav li a:hover {border-bottom:2px solid gray;}
</style>
HTML:
<ul class="floral_bottom_nav">
<li><a title="Home" href="#">Home</a></li>
<li><a title="About Us" href="#">About Us</a></li>
<li><a title="Contact Us" href="#">Contact Us</a></li>
<li><a title="Shipping Information" href="#">Shipping Information</a></li>
<li><a title="Return Policy" href="#">Return Policy</a></li>
<li><a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li style="border:0 none;"><a title="View Cart" href="#">View Cart</a></li>
</ul>
Not only valid, but highly stylable, looks the same in IE as Firefox, and since it is a CLASS, you can re-use it on the same page (top of page, bottom of page, wherever etc). This SAVES bandwidth since the STYLE will be re-used.
This is a 'list' of navigation links, ergo, it requires a(n) unordered list. You don't need to use "<span="color:gray;">~</span>" to wastefully 'color' every link, if they are links, take advantage of this and just use ul.floral_bottom_nav li a {color:gray; text-align:center; text-decoration:none;padding:0 5px 0 5px;} once, and right there I have colored all your navigation links gray, and saved your page several KB of unnecessary repeated "<span~ ~/span>". :)