The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Website is shown terrible on Internet explorer Great on Firefox, Help will be rewarded with pay-pal donation :)
Conoco
post May 11 2010, 03:41 PM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 11-May 10
Member No.: 11,837
Hello i have made a webpage but it keeps on showing terrible on internet explorer it works perfectly on firefox, chrome, opera.
The main problem with it is the table in the website starts at where the sidebar1 ends or about there, here is the code:
(If someone helps me with this to get it fixed i will donate via pay-pal) Thank you for your help.

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>Untitled Document</title>
<script type="text/javascript" src="swfobject.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
<!--
body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #000000;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
}
.twoColFixRtHdr #container {
    width: 980px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColFixRtHdr #header {
    background: #000000;
    padding: 0 10px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.twoColFixRtHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 10px 5px;
    text-align:center;
    font-size:10px;
    font:Arial, Helvetica, sans-serif;
    font-size:12px;
}
.twoColFixRtHdr #mainContent {
    margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 1.5% 0% 3% 0%; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    font:Arial, Helvetica, sans-serif;
    font-size:10px;
}
.twoColFixRtHdr #footer {
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
    font:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;
}
.twoColFixRtHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0 10px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="twoColFixRtHdr">
<div id="container">
  <div id="header">
    <h1><img src="logo023b.jpg" alt="http://www.kafto.com"/></h1>
    <div id="FlashMenuLabs">
        You need to upgrade your Flash Player or to allow javascript to enable Website menu.<br>
        <a href="http://www.adobe.com/go/getflashplayer">Get Flash Player</a>            
    </div>
    <script type="text/javascript">
    // <![CDATA[
        var so = new SWFObject("menu.swf", "menu", "980", "60", "8", "#000000");
        
        so.addParam("wmode", "transparent");
        so.addParam("scale", "noscale");
        so.addParam("salign", "TL");    
        so.write("FlashMenuLabs");
    // ]]>
    </script>
  <!-- end #header --></div>
  <div id="sidebar1">
     Διαφημιστικά
    <p><img src="7732.jpg" alt="banner1" width="195" align="middle"/>
    </p>
    <p>
    <img src="bd1.jpg" width="195" alt="ad3" align="middle" /></p>
    <p>
    <img src="f104-banner1.gif" alt="ad2" width="195" align="middle" /></p>
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
<table width="165" border="0" cellspacing="23">
  <tr>
    <td><a href="http://www.google.com/"><img src="1212.jpg" border="1" width="160" height="120"/>
     World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 ></span>   <img src="stars.png" /></td>
    <!-- First Video End -->
    
    <!-- Second Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Second Video End -->
    
    <!-- Third Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Third Video End -->
    
    <!-- Fourth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Fourth Video End -->
    
    <!-- Fifth Video Start -->
    
    <!-- Fifth Video End -->
  </tr>
  <tr>
  <!-- Sixth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Sixth Video End -->
    
    <!-- Sevventh Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Sevventh Video End -->
    
    <!-- Eighth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Eighth Video End -->
    
    <!-- Nineth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Nineth Video End -->
    
    <!-- Tenth Video Start -->
    
    <!-- Tenth Video End -->
  </tr>
  <tr>
  <!-- Eleventh Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Eleventh Video End -->
    
    <!-- Twelveth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Twelveth Video End -->
    
    <!-- Thirteenth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Thirteenth Video End -->
    
    <!-- Fourteenth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Fourteenth Video End -->
    
    <!-- Fifteenth Video Start -->
    
    <!-- Fifteenth Video End -->
  </tr>
  <tr>
  <!-- Sixteenth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Sixteenth Video End -->
    
    <!-- Seventeenth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Seventeenth Video End -->
    
    <!-- Eightteenth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Eightteenth Video End -->
    
    <!-- Nineteenth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Nineteenth Video End -->
    
    <!-- Twoentith Video Start -->
    <!-- Twoentith Video End -->
  </tr>
  <tr>
  <!-- Twoentryfirst Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Twoentyfirst Video End -->
    
    <!-- Twoentrysecond Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Twoentysecond Video End -->
    
    <!-- Twoentythird Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Twoentythird Video End -->
    
    <!-- Twoentyfourth Video Start -->
    <td><a href="http://www.google.com/"><img src="thumbnail.jpg" border="1" width="160" height="120"/>
    World Of Warcraft PvP Video</a>
      3.94
    <span>  /5.00 </span>   <img src="stars.png" /></td>
    <!-- Twoentyfourth Video End -->
    
    <!-- Twoentyfifth Video Start -->
    <!-- Twoentyfifth Video End -->
  </tr>
</table>

    <!-- end #mainContent -->
    </div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  <div id="footer">
    <p><a href="http://www.kafto.com/">Kafto.com Copyright 2010. All rights reserved.</a>     <a href="http://www.kafto.com/support/">Επικοινωνία</a>      <a href="http://www.kafto.com/upload/">Ανεβάστε δικά σας βίντεο στο site</a>      <a href="http://www.kafto.com/advertising/">Διαφημιστήτε στο Kafto.com</a></p>
     Το Kafto.com είναι το μεγαλύτερο δωρεάν Ελληνικό site με καθημερινή ενημέρωση με καινούργια βίντεο για την δική σας ευχαρίστηση!
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 11 2010, 04:02 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
You're feeding MSIE something different from other browsers. Are you sure that isn't the problem?
CODE
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Conoco
post May 11 2010, 04:17 PM
Post #3


Newbie
*

Group: Members
Posts: 14
Joined: 11-May 10
Member No.: 11,837
Is there a way to have it work with both browsers? Cause on internet explorer it is completely terrible look. sad.gif
Thank you for your reply.

This post has been edited by Conoco: May 11 2010, 04:44 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tinimic
post May 12 2010, 01:22 AM
Post #4





Group: Members
Posts: 9
Joined: 12-May 10
Member No.: 11,840
Too much padding for container width. Make the changes to your CSS .twoColFixRtHdr #sidebar class.

CODE
.twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB;
    text-align:center;
    font-size:10px;
    font:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
}


Good luck with the site!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Conoco
post May 12 2010, 04:21 AM
Post #5


Newbie
*

Group: Members
Posts: 14
Joined: 11-May 10
Member No.: 11,837
I'm sorry to have no understood but what changes I must make for the site to work well on IE also?
I need to have the padding to have it show how its supposed to be.
Should I add the padding somewhere else or what should I do? Im a bit a beginner in web developing, also thank you for all your great support here on the forum.
wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 12 2010, 08:10 AM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
I believe tinimic's suggestion is that you replace your existing
CODE
.twoColFixRtHdr #sidebar1 { ... }
rules with the rule
CODE
.twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB;
    text-align:center;
    font-size:10px;
    font:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Conoco
post May 12 2010, 08:30 AM
Post #7


Newbie
*

Group: Members
Posts: 14
Joined: 11-May 10
Member No.: 11,837
OmG!! It worked thank you very very much for your help Tinimic and Darin !!! WOW im so happy!!! God bless you all and have a great day!!

This post has been edited by Conoco: May 12 2010, 08:44 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 02:39 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC