I thought i had cracked it with the debugging on my website. Built it on firefox. Fine no problems. Checked in ie7 and ie8. No problems. And i thought chrome wouldbe no problems. but no at the bottom of the page my link “View add-ons here” sits lower than it should.
<div class="addons">
<table align="center" style="padding:10px;" width="489" border="0" cellpadding="5">
<tr>
<td height="78" colspan="3" style="padding-top:10px;"><div align="center"><img src="myimages/addOns.gif" alt="Add ons" width="208" height="63" /></div></td>
</tr>
<tr>
<td height="59" colspan="3"><span style="color:#666666; font-size:14px; ">In our Add-on section we offer programmes to enhance the hosting package you have chosen. Most of the hosting features can be ordered singularly so if its an individual application you fancy you do not have to upgrade to a more costly package!</span> </td>
</tr>
<tr>
<td width="140" height="115"><div align="center"><a href="http://www.the-bee-scene.com/hostpay/more_info_addons.htm#webbuilder" target="_blank"><img src="public_html/hostpay/theme-images/brushes1.jpg" alt="Upgrade to Web BuilderPlus!" width="109" height="81" border="0" /></a></div></td>
<td width="142"><div align="center"><a href="http://www.the-bee-scene.com/hostpay/more_info_addons.htm#market" target="_blank"><img src="public_html/hostpay/theme-images/megaphone1.jpg" alt="Marketing bundle" width="105" height="105" border="0" /></div></td>
<td width="161"><div align="center"><a href="http://www.the-bee-scene.com/hostpay/more_info_addons.htm#submit" target="_blank"><img src="public_html/hostpay/theme-images/magnifying1.jpg" alt="Advanced submission to Search engines" width="107" height="98" border="0" /></div></td>
</tr>
<tr>
<td height="47"><div align="center"><span style="color:#666666; font-size:14px; ">Upgrade to WebBuilder Plus! </span></div></td>
<td><div align="center"><span style="color:#666666; font-size:14px; ">Our Marketing Bundle to help your Website get seen! </span></div></td>
<td><div align="center"><span style="color:#666666; font-size:14px; ">Submit your site to the search Engines! </span></div></td>
</tr>
<tr >
<td align="center" colspan="3"><span style="color:#666666; font-size:24px; "><a href="http://www.the-bee-scene.com/hostpay/more_info_addons.htm">View all our add ons here!</a> </span></td>
</tr>
<tr><td> </td></tr>
</table>
</div><!--addons-->
Hi, the problem is that you have relied on the size of the text and the margin and padding on those elements to give you the height of the box.
I’d use css3 for the round corners - If it’s not the end of the world that IE gets square corners something like this should work for you.
You want to keep the HTML as clean as possible and remove all the inline styling, it’s much easier to manage this way.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<style type="text/css" media="screen">
.addons {
border: 5px ridge #FF6666;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
padding: 10px 30px;
width: 550px;
text-align: center;
color: #666;
font-size: .9em;
}
.intro {
text-align: left;
}
.viewAll {
font-size: 1.8em;
}
</style>
</head>
<body>
<div class="addons">
<p><img src="http://www.the-bee-scene.com/myimages/addOns.gif"></p>
<p class="intro">In our Add-on section we offer programmes to enhance the hosting package you have chosen. Most of the hosting features can be ordered singularly so if its an individual application you fancy you do not have to upgrade to a more costly package!</p>
<table>
<tr>
<td><a href="#"><img height="81" width="109" border="0" alt="Upgrade to Web BuilderPlus!" src="http://www.the-bee-scene.com/public_html/hostpay/theme-images/brushes1.jpg"></a></td>
<td><a href="#"><img height="105" width="105" border="0" alt="Marketing bundle" src="http://www.the-bee-scene.com/public_html/hostpay/theme-images/megaphone1.jpg"></a></td>
<td><a href="#"><img height="98" width="107" border="0" alt="Advanced submission to Search engines" src="http://www.the-bee-scene.com/public_html/hostpay/theme-images/magnifying1.jpg"></a></td>
</tr>
<tr>
<td>Upgrade to WebBuilder Plus!</td>
<td>Our Marketing Bundle to help your Website get seen! </td>
<td>Submit your site to the search Engines! </td>
</tr>
</table>
<p class="viewAll"><a href="#">View all our add ons here!</a></p>
</div>
</body>
</html>
If you really must have IE showing the same corners then there are a million and five different rounded box tutorials on the web that don’t require a fixed height.
Hi, the problem is that you have relied on the size of the text and the margin and padding on those elements to give you the height of the box.
I’d use css3 for the round corners - If it’s not the end of the world that IE gets square corners something like this should work for you.
You want to keep the HTML as clean as possible and remove all the inline styling, it’s much easier to manage this way.
you are right i get really lazy with my inline html. Knowing how it can make matters difficult when debugging I shall strive to make everything in css.
I am now more of aware css3 . however has Ie caught up with it yet? Are most of the goodies unavailable in IE? Are there any good tutorials out there on css3?
Not at all though IE9 will implement many I predict.
css3 makes many common design elements easier to achieve with css - things like rounded borders, drop shadows, columns etc… You’ll need to be careful if you want to use the new selectors as they won’t be backwards compatible - But the other things that just visual elements you can use if it’s not mandatory that they appear the same everywhere.
though IE9 will implement many I predict.