I’ve just finished designing a webpage and I’ve tested it on IE and Firefox, the result has left me confused the webpage is behaving strangely in IE the textual content squashes itself from the right side of the page. I’m uploading images to explain the issue better. Any suggestions anyone?
-
-
IE is the worst browser on the planet. We won't be able to help with your problem with images. We need either a link (preferred) or the complete markup. -
thanks for coming back. Havent got the URL as yet!
here is the markup for the page!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcom e to k-arts</title>
<style type="text/css">
<!--
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
padding-left: 20px;
}
.leftmenu {
padding-left: 20px;
font-size: 16px;
color: #FFFFFF;
padding-top: 10px;
}
.style3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 20px;
text-decoration: underline;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; padding-left: 20px; color: #FFFFFF; }
a:hover {
color: #000000;
}
a:visited {
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
}
a:active {
color: #FFFFFF;
}
.matter {
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
-->
</style>
</head>
<body>
<table width="900" border="0" align="center" cellspacing="0" >
<tr>
<td><table width="900" border="0" cellspacing="0" >
<tr>
<td><img src="file:///C|/Documents and Settings/Admin/My Documents/www/css/banner.jpg" width="900" height="150" /></td>
</tr>
<tr>
<td><table width="900" border="0" cellspacing="0" >
<tr>
<td width="224" height="400" valign="top" background="ima ges/menu.jpg" bgcolor="#99010 0"><div class="leftmenu ">
<p class="style3"> <a href="index.htm l">Home</a><br />
<br />
<a href="aboutus.h tml">About Us</a><br />
<br />
<a href="services. html">Services</a><br />
<br />
<a href="gallery.h tml">Gallery</a><br />
<br />
<a href="contact.h tml">Contact Us</a></p>
</div></td>
<td width="666" valign="top"><t able width="672" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="32" valign="top" bgcolor="#99010 0"><img src="images/services.jpg" width="212" height="32" align="right" /></td>
</tr>
<tr>
<td width="460" height="130" valign="top"><d iv class="matter">
<p align="justify" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at eros risus. Mauris lectus mauris, pulvinar eu imperdiet eu, cursus quis nisi. Nullam neque massa, viverra non eleifend ac, gravida eget nulla. Sed mollis accumsan nisi nec tristique. Curabitur adipiscing tincidunt tristique. Vestibulum blandit, eros ut mattis pulvinar, quam neque pellentesque est, in bibendum velit eros eget arcu. Morbi a justo lobortis massa accumsan commodo at non elit. Nam porttitor nisi fermentum lectus venenatis auctor. Nullam nunc lacus, ornare ac aliquet sed, cursus vel ante. Ut vehicula odio sit amet arcu consectetur convallis. Nunc interdum ligula vitae velit venenatis vitae dignissim ante aliquam. Nulla at quam sem, at porttitor nibh. Duis augue nisl, fringilla id commodo ac, dignissim in augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id metus non orci scelerisque lobortis. </p>
<p align="justify" >Integer faucibus, ipsum tincidunt tempus imperdiet, neque lorem feugiat ligula, luctus pulvinar mi mauris sed mauris. Nulla aliquam turpis ut tellus faucibus et molestie elit luctus. Morbi non lectus ante. Vivamus ac dui at magna scelerisque ornare sit amet vel ligula. Duis eu volutpat velit. Vivamus mattis rutrum diam, at fermentum magna sodales a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu dolor a nisl tempor imperdiet et sit amet justo. Nam scelerisque posuere porttitor. Fusce fringilla lacus a leo semper quis luctus neque condimentum. In nulla nisi, cursus vitae suscipit accumsan, convallis id felis. </p>
<p align="justify" >Nunc nisi lorem, eleifend sit amet aliquet rhoncus, consectetur eu turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla et nulla vel metus commodo pulvinar vitae sed nunc. Vestibulum suscipit vulputate tristique. Donec nec velit eget massa tincidunt condimentum. Pellentesque a lacus augue, faucibus consequat enim. Vestibulum congue justo et tellus malesuada eget aliquam turpis consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo nisl, pulvinar eu pulvinar eget, elementum et sem. Donec eu dolor lacus. Cras ut eleifend turpis. </p>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
</table></td>
</tr>
</table>
</body>
</html>Comment
-
Never, ever use tables for layout. Tables are hard enough to follow without having multiple nested tables as in this case. The best advice I will give beyond that is to validate your html for that list of errors and see if that fixes it.Comment
-
Thank you for your input.
What do you suggest i must use to replace Tables?Comment
-
Just use the natural flow of the elements to layout the structure and use CSS to style those elements. The following HTML does exactly the same thing all your tables do but notice how much simpler it is to read:
The CSS would look this:Code:<body> <ul> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Services</a></li> </ul> <div> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> </div> </body>
The CSS wouldn't be exactly that and obviously needs more to duplicate what you have with tables, but not much more.Code:html,body{height:100%} ul { float:left; height:100%; background-color:#980000; color:#fff; list-style:none; width:300px }Comment
Comment