473,394 Members | 1,828 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Browser Compatibility Help

7
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?
Attached Images
File Type: jpg ie.jpg (39.4 KB, 123 views)
File Type: jpg firefox.jpg (45.3 KB, 132 views)
Mar 30 '10 #1
5 1580
drhowarddrfine
7,435 Expert 4TB
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.
Mar 30 '10 #2
av10
7
@drhowarddrfine
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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome 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="images/menu.jpg" bgcolor="#990100"><div class="leftmenu">
<p class="style3"><a href="index.html">Home</a><br />
<br />

<a href="aboutus.html">About Us</a><br />
<br />
<a href="services.html">Services</a><br />
<br />
<a href="gallery.html">Gallery</a><br />
<br />
<a href="contact.html">Contact Us</a></p>

</div></td>
<td width="666" valign="top"><table width="672" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="32" valign="top" bgcolor="#990100"><img src="images/services.jpg" width="212" height="32" align="right" /></td>
</tr>
<tr>
<td width="460" height="130" valign="top"><div 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>
Mar 31 '10 #3
drhowarddrfine
7,435 Expert 4TB
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.
Mar 31 '10 #4
av10
7
Thank you for your input.
What do you suggest i must use to replace Tables?
Mar 31 '10 #5
drhowarddrfine
7,435 Expert 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <ul>
  3. <li><a href="">Home</a></li>
  4. <li><a href="">About Us</a></li>
  5. <li><a href="">Services</a></li>
  6. </ul>
  7. <div>
  8. <p>Lorem Ipsum</p>
  9. <p>Lorem Ipsum</p>
  10. <p>Lorem Ipsum</p>
  11. </div>
  12. </body>
  13.  
The CSS would look this:
Expand|Select|Wrap|Line Numbers
  1. html,body{height:100%}
  2. ul {
  3. float:left; height:100%; 
  4. background-color:#980000;
  5. color:#fff;
  6. list-style:none;
  7. width:300px
  8. }
  9.  
The CSS wouldn't be exactly that and obviously needs more to duplicate what you have with tables, but not much more.
Mar 31 '10 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

4
by: Jez Naisbitt | last post by:
Hi Guys, After a break of 2 years I'm now re-visiting the world of java. I recall on my last foray that I had to stick to java 1.1 so I could deploy applets from a server and obtain maximum...
2
by: Eddy Stone | last post by:
Apologies in advance... I am sure this question will have been asked before in some form or another - please don't flame me ! I am new to creating webpages - is there a website where I can "view"...
3
by: Rob Oldfield | last post by:
Just a quick and hopefully straightforward question.... are there any issues with web sites based on .Net not working correctly (or at all) for clients using non IE browsers (Mozilla and Firefox...
4
by: George Hester | last post by:
http://pages.ebay.com/help/new/browser-recommendations.html The reason being that other browsers are just plain buggy. Netscape 6+ surely is. Opera I do not know much about but I hear it can...
5
by: Trenqo 0 | last post by:
Instead of doing repetitive checks throughout my code, or defining new methods that won't work unless they are included, I have taken the approach of redefining existing methods in order to make...
2
by: G2 | last post by:
Hi We are dealing with significant browser compatibility issues with Netscape 5.x+ browsers and Mac IE. I am sure most web developers have faced similar issues in the past. Can anyone give me their...
3
by: ms | last post by:
Hi Everyone, You all would be aware of the fact that we boast about .net supporting multiple web browsers. I hope we have all experienced that our screen layouts look different in every other...
4
by: Maxwell2006 | last post by:
Hi, I am struggling with making my website compatible with multiple browsers and versions. Is there any tool that shows me how my pages look like in different browsers
27
by: David Golightly | last post by:
This is just a quick poll for all you web devs out there: What browsers do you test on/are concerned about compatibility with? Obviously, you're going to test on current-generation browsers such...
2
by: dwair | last post by:
Hi, I have been having browser compatibility issues and was wondering if anyone could help. I have been using a JavaScript array to populate marker data using ASP JS in a google Maps project. For...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.