Current location: Hot Scripts Forums » General Web Coding » HTML/XHTML/XML » The Usuall IE6 Makes The Site Look Crappy


The Usuall IE6 Makes The Site Look Crappy

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 07-02-07, 02:19 PM
TheScreenSaver24's Avatar
TheScreenSaver24 TheScreenSaver24 is offline
Newbie Coder
  
Join Date: Nov 2006
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
The Usuall IE6 Makes The Site Look Crappy
I am working on a website for one of my customers, well everything has been going good until i used it in ie6, all the fonts are off and etc. How can i fix this and better question how can i improve building a website that works on all browsers. Also should i make a separate css file for ie6?

Heres the Website: http://comwareservices.com/anania

HTML:
HTML Code:
<!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>Ananias Variety</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="Container">
<div id="Header">
<ul id="nav">
   <li><a href="index.htm">Home</a></li>
   <li><a href="aboutus.htm">About Us</a></li>
   <li><a href="design.htm">Design</a></li>
   <li><a href="portfolio.htm">Portfolio</a></li>
   <li><a href="hosting.htm">Hosting</a></li>
   <li><a href="contactus.htm">Contact Us</a></li>
</ul>
</div>
<div id="Left-Bar-Holder">
<div id="Left-Bar">
  <div align="center" class="Left-Bar-Header">Open 7 Days -<br />
    Three Great Locations  </div>
  <div id="Left-Bar-White-Box">
<div id="Left-Bar-Content">
  <span class="Left-Bar-Store">1227 Congress St.<br />
  Portland, ME. 04102<br />
    Phone 774-8104 <br />
    Fax 780-6247  </span>
  <p class="Left-Bar-Hours">Monday - Thursday 4:30am - 9pm<br />
    Friday - Saturday 4:30am - 10pm<br />
    Sunday 5:30am - 9pm </p>
</div>
</div>
<div id="Left-Bar-White-Box">
  <div class="Left-Bar-Store" id="Left-Bar-Content">606 Washington Ave.<br />
    Portland, ME. 04103<br />
    Phone 774-4639 <br />
    Fax 874-1964
    <p class="Left-Bar-Hours">Monday - Thursday 4:30am - 9pm<br />
      Friday - Saturday 4:30am - 10pm<br />
      Sunday 5:30am - 9pm </p>
</div>
</div>
<div id="Left-Bar-White-Box">
<div id="Left-Bar-Content"><span class="Left-Bar-Store">323 Broadway<br />
  So. Portland, ME. 04106<br />
  Phone 347-7450<br />
  Fax 347-7451
  </span>
  <p class="Left-Bar-Hours">Monday - Thursday 4:30am - 9pm<br />
    Friday - Saturday 4:30am - 10pm<br />
    Sunday 5:30am - 9pm </p>
</div>
</div>
<div id="Left-Bar-Bottom"></div>
</div>
</div>
<div id="Main-Body">
<div id="Main-Body-Content">fgsdklhjdfl;hdfgshjkl;dfgskl;j</div>
</div>
</div>
</body>
</html>
CSS:
css Code:
  1. /* CSS Document */
  2.  
  3. /* Layout */
  4. body {
  5.     margin: 0px;
  6. }
  7. #Container {
  8.     height: 600px;
  9.     width: 800px;
  10.     margin: 0px;
  11. }
  12. #Header {
  13.     background-image: url(../images/layout/Header.gif);
  14.     height: 130px;
  15.     width: 800px;
  16. }
  17. #Left-Bar-Holder {
  18.     float: left;
  19.     width: 219px;
  20. }
  21. #Left-Bar {
  22.     background-image: url(../images/layout/Left_Bar.gif);
  23.     width: 219px;
  24.     float: left;
  25. }
  26. #Left-Bar-White-Box {
  27.     background-image: url(../images/layout/Left-Bar-White-Box.gif);
  28.     height: 173px;
  29.     width: 206px;
  30.     text-align: center;
  31.     float: left;
  32. }
  33. #Left-Bar-Content {
  34.     margin: 0px;
  35.     padding-right: 11px;
  36.     padding-left: 11px;
  37.     padding-top: 15px;
  38. }
  39. #Left-Bar-Bottom {
  40.     float: left;
  41.     background-image: url(../images/layout/Left-Bar-Bottom.gif);
  42.     height: 26px;
  43.     width: 219px;
  44. }
  45. #Main-Body {
  46.     float: left;
  47.     width: 575px;
  48. }
  49. #Main-Body-Content {
  50. }
  51. #Footer {
  52. }
  53.  
  54. /* Navigation */
  55. #nav {
  56.     font: bold medium Trebuchet MS;
  57.     margin: 0;
  58.     padding: 85px 0 0 150px;
  59.     list-style:none;
  60. }
  61. #nav li{
  62. display: inline;
  63. }
  64. #nav li a{
  65.     float: left;
  66.     color: #4E4E4E;
  67.     padding: 8px 10px;
  68.     text-decoration: none;
  69.     font-size: medium;
  70. }
  71.  
  72. #nav li a:visited{
  73.     color: #4E4E4E;
  74.     font-size: medium;
  75. }
  76.  
  77. #nav li a:hover{
  78.     color: #FFFFFF;
  79.     font-size: medium;
  80. }
  81. /* Text */
  82. .Left-Bar-Header{
  83.     font-family: Georgia, "Times New Roman", Times, serif;
  84.     font-size: 16px;
  85.     font-style: italic;
  86.     text-align: center;
  87. }
  88. .Left-Bar-Store{
  89.     font-family: Georgia, "Times New Roman", Times, serif;
  90.     font-size: 16px;
  91. }
  92. .Left-Bar-Hours{
  93.     font-family: Georgia, Times New Roman, Times, serif;
  94.     font-size: 12px;
  95. }
Last edited by Nico; 07-02-07 at 02:45 PM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 07-02-07, 03:08 PM
staticfire's Avatar
staticfire staticfire is offline
Wannabe Coder
  
Join Date: May 2007
Location: Stockton, England
Posts: 223
Thanks: 0
Thanked 1 Time in 1 Post
Well i'm using IE7 and all the text looks out of place.
__________________
Visit http://www.staticfire.co.uk
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #3 (permalink)  
Old 07-02-07, 04:49 PM
TheScreenSaver24's Avatar
TheScreenSaver24 TheScreenSaver24 is offline
Newbie Coder
  
Join Date: Nov 2006
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Well then it must be both, because everything looks fine in firefox and safari.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #4 (permalink)  
Old 07-02-07, 09:58 PM
jfulton's Avatar
jfulton jfulton is offline
Community VIP
  
Join Date: Apr 2006
Location: Los Angeles, CA
Posts: 660
Thanks: 0
Thanked 0 Times in 0 Posts
Quote:
Originally Posted by TheScreenSaver24 View Post
how can i improve building a website that works on all browsers.
Validate your pages and CSS (you have some errors in your HTML - reusing IDs.) Also, read up about some of the cross-browser issues.

Quote:
Originally Posted by TheScreenSaver24 View Post
Also should i make a separate css file for ie6?
Yes, enclose the stylesheets in a conditional comment.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #5 (permalink)  
Old 07-02-07, 10:09 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
Here try it this way, I think you will like the results.
HTML Code:
<!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>Ananias Variety</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<table border=0 cellspacing=0 cellpadding=0 style="border-collapse:collapse;margin:1px 1px;">
 <tr>
  <td id="Header" colspan=2">
   <ul id="nav">
    <li><a href="index.htm">Home</a></li>
    <li><a href="aboutus.htm">About Us</a></li>
    <li><a href="design.htm">Design</a></li>
    <li><a href="portfolio.htm">Portfolio</a></li>
    <li><a href="hosting.htm">Hosting</a></li>
    <li><a href="contactus.htm">Contact Us</a></li>
   </ul>
  </td>
 </tr>
 <tr>
  <td id="Left-Bar">
   <div id="Left-Bar-Holder">
    <div class="Left-Bar-Header">Open 7 Days -<br />Three Great Locations</div>

    <div class="Left-Bar-White-Box">
      <div class="Left-Bar-Store">1227 Congress St.<br />
       Portland, ME. 04102<br />
       Phone 774-8104<br />
       Fax 780-6247</div>
       <div class="Left-Bar-Hours">
       <span class="Left-Bar-Content">Monday - Thursday<br />4:30am - 9pm<br />
       Friday - Saturday<br />4:30am - 10pm<br />
       Sunday 5:30am - 9pm</span>
     </div>
     </div>

    <div class="Left-Bar-White-Box">
     <div class="Left-Bar-Store">606 Washington Ave.<br />
       Portland, ME. 04103<br />
       Phone 774-4639<br />
       Fax 874-1964</div>
       <div class="Left-Bar-Hours">
       <span class="Left-Bar-Content">Monday - Thursday<br />4:30am - 9pm<br />
       Friday - Saturday<br />4:30am - 10pm<br />
       Sunday 5:30am - 9pm</span>
     </div>
     </div>

    <div class="Left-Bar-White-Box">
      <div class="Left-Bar-Store">323 Broadway<br />
       So. Portland, ME. 04106<br />
       Phone 347-7450<br />
       Fax 347-7451</div>
       <div class="Left-Bar-Hours">
       <span class="Left-Bar-Content">Monday - Thursday<br />4:30am - 9pm<br />
       Friday - Saturday<br />4:30am - 10pm<br />
       Sunday 5:30am - 9pm </span>
     </div>
     </div>


    </div>
   </div>
  </td>
  <td valign="top">
   <div id="Main-Body">
    <div id="Main-Body-Content">fgsdklhjdfl;hdfgshjkl;dfgskl;j</div>
   </div>
  </td>
 </tr>
 <tr>
 <td colspan><div id="Left-Bar-Bottom"></div></td><td></td>
 </tr>
</table>
</body>
</html>
CSS:
css Code:
  1. body {
  2.     margin: 0px;
  3. }
  4. #Header {
  5.     background-image: url(images/Header.gif);
  6.     height: 130px;
  7.     width: 800px;
  8. }
  9. #Left-Bar-Holder {
  10.     text-align:center;
  11. }
  12. #Left-Bar {
  13.     width: 212px;
  14.     background-image: url([url]http://comwareservices.com/anania/images/layout/Left_Bar.gif);[/url]
  15. }
  16. .Left-Bar-White-Box {
  17.     background-image: url([url]http://comwareservices.com/anania/images/layout/Left-Bar-White-Box.gif);[/url]
  18.     background-repeat: no-repeat;
  19. }
  20. .Left-Bar-Content {
  21.     font-family: Georgia, "Times New Roman", Times, serif;
  22.     font-size: 11px;
  23.     text-align:center;
  24. }
  25. #Left-Bar-Bottom {
  26.     background-image: url([url]http://comwareservices.com/anania/images/layout/Left-Bar-Bottom.gif);[/url]
  27.     height: 26px;
  28. }
  29. #Main-Body {
  30.     background:#ffffff;
  31.     width: 575px;
  32. }
  33. #Main-Body-Content {
  34.     padding-left:10px;
  35. }
  36. #Footer {
  37. }
  38.  
  39. /* Navigation */
  40. #nav {
  41.     font: bold medium Trebuchet MS;
  42.     margin: 0;
  43.     padding: 69px 0 0 140px;
  44.     list-style:none;
  45. }
  46. #nav li{
  47. display: inline;
  48. }
  49. #nav li a{
  50.     color: #4E4E4E;
  51.     padding: 8px 10px;
  52.     text-decoration: none;
  53.     font-size: medium;
  54. }
  55.  
  56. #nav li a:visited{
  57.     color: #4E4E4E;
  58.     font-size: medium;
  59. }
  60.  
  61. #nav li a:hover{
  62.     color: #d0d0d0;
  63.     font-size: medium;
  64. }
  65. /* Text */
  66. .Left-Bar-Header{
  67.     font-family: Georgia, "Times New Roman", Times, serif;
  68.     font-size: 16px;
  69.     font-style: italic;
  70. }
  71. .Left-Bar-Store{
  72.     font-family: Georgia, "Times New Roman", Times, serif;
  73.     font-size: 14px;
  74.     padding-top:10px;
  75. }
  76. .Left-Bar-Hours{
  77.     height:100px;padding-top:8px;
  78. }
__________________
Jerry Broughton
Last edited by job0107; 07-02-07 at 10:23 PM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #6 (permalink)  
Old 07-03-07, 01:17 AM
TheScreenSaver24's Avatar
TheScreenSaver24 TheScreenSaver24 is offline
Newbie Coder
  
Join Date: Nov 2006
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
I will probably use it but why tables instead of div?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #7 (permalink)  
Old 07-03-07, 05:50 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
I still used your <div>s, some <span>s and a little CSS to manipulate the objects in the table. But in your case, using a table to organize the objects greatly simplified things. Also you can add <td>s to the right for more objects.

If you study the code you will see that the way I have it laid out I can do anything to the objects in the table without disturbing the layout. And all the objects are contained within <div>s, giving them total independence.

If you will notice I have put some of the text in side <span>s within it's <div> which adds another dimension to the possibilities of manipulation.

This way I have total control over what the objects can do.
__________________
Jerry Broughton
Last edited by job0107; 07-03-07 at 06:02 AM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks

« PHP includes resizing my page | Print CSS Webpage in IE6 »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to get Indexed in Google Quickly rorycanyon General Advertisements 3 03-21-07 10:11 AM
Help with Google sn0wy The Lounge 6 12-23-06 10:55 AM
[ADVERTISING]PR4 Gaming related script site and forum Arrelius General Advertisements 0 11-04-05 07:48 PM
Need a gaming site as a partner site TellMe Traffic Exchange 0 07-28-04 08:30 AM


All times are GMT -5. The time now is 01:24 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.