Forum Moderators: not2easy
I have developed a website that looks exactly how I want it to look on all browsers except one.
looks fine on
Firefox
Opera
Safari
IE7
but IE6 looks like crap.
It is my first attempt on a tableless design, and I thought I had done pretty good, until one of my clients told me that IE6 was displaying the site really terribly.
Any help or suggestions would be hugly appreciated.
[edited by: encyclo at 12:43 am (utc) on April 7, 2008]
[edit reason] no links to personal sites please, see posting guidelines [/edit]
You are not allowed to post private URLs here, so that will be edited out, and you can post your page's code here.
The page looks really non-coder-friendly... not only does it seem like much of the content is done with PHP includes and contains redundant information instead of using CSS, but it seems kind of like you're emulating tables or something. Perhaps it's just me.
Right now it's a bit hard to do anything, considering how hard it is to look at the HTML, and the fact that there's 5 CSS sheets that are being used...
Strip all the crazy things off the page and go to a simple test case, and you'll be able to help yourself, and help us, solve the problem much easier.
Here is the main idea
<body>
<form id="form1" runat="server" class="maxform">
<div id="wrapper">
<div id="tab-container">
<div class="inner-tab">
...tab stuff
</div>
</div>
<div id="header">
</div>
<div id="menu">
... my menu
</div>
<div id="main">
<div style="position: relative;">
<div class="medleft">
<div class="medcontainertop">
<br />
<h1>
Contact Infinitas Advantage</h1>
</div>
<div class="medcontainerbody">
...contact form goes here
</div>
<div class="medcontainerbottom">
</div>
</div>
<div class="smlright">
<div>
...live chat button goes here
</div>
<div style="width: 250px; float: right;">
<div class="smlcontainertop">
<br />
<h2>
Mailing Address</h2>
</div>
<div class="smlcontainerbody">
<div class="smlcontainercontent">
Box 21051<br />
Prince George, British Columbia<br />
Canada<br />
V2M 7A5<br />
</div>
</div>
<div class="smlcontainerbottom">
</div>
</div>
</div>
</div>
<div id="clearfooter">
</div>
</div>
<div id="footer">
<div class="footer">
...footer stuff
</div>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</form>
</body>
Layout.css
/*
--------------------------------------------------
DO NOT EDIT THIS FILE. THIS IS A TEMPLATE
FILE FOR CENTER LAYOUT (ABSOLUTE BOTTOM FOOTER)
----------------------------------------------------------------------------------------------------
MAKE SURE TO SET THE FOLLOWING ATTRIBUTES IN THE "design.css"
--------------------------------------------------
#wrapper
{
width: \*same width as w\idth inside "outer" element*\
border-left:
border-right:
}
#outer
{
width: \*two pixels larger than "w\idth" below *\
w\idth: \*same width as width inside "wrapper" element*\
}
#footer
{
width:
height: Xpx
background:
margin: -Xpx auto 0; \*opposite px to height*\
}
#clearfooter
{
height: Xpx \*same as footer height*\
}
--------------------------------------------------
MAKE SURE TO SET THE FORM CLASS TO "maxform"
--------------------------------------------------
*/
html, body
{
height: 100%;
}
html, body
{
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.maxform
{
clear: both;
height: 100%;
}
#wrapper
{
min-height: 100%;
margin: auto;
position: relative;
text-align: left;
}
* html #outer
{
height: 100%;
}
#footer
{
position: relative;
}
#clearfooter
{
clear: both;
width: 100%;
}
Design.css
/*General Site Design*/
body
{
margin: 0;
background-image: url(Images/Background.gif);
cursor:default;
}
#wrapper
{
width: 900px; /*same width as w\idth inside "outer" element*/
background-image: url(Images/Border.gif);
w\idth: 900px; /*same width as width inside "wrapper" element - stupid little IE hack*/
}
#header
{
background-image: url(Images/Header.gif);
background-repeat: no-repeat;
height: 63px;
}
#menu
{
width: 798px;
height: 20px;
margin-left: 50px;
}
#main
{
width: 780px;
margin-left: 60px;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
min-height: 100%;
height: 100%;
background-color: #FFFFFF;
}/*Footer Layout*/
#clearfooter
{
height: 75px; /*same as footer height*/
}
#footer
{
width: 900px;
height: 75px;
background-image: url(Images/Footer_bg.gif);
margin: -75px auto 0; /*opposite px to height*/
}
.footer
{
padding-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
width: 800px;
}
.footer a
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
.footer a:hover
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: underline;
}
img
{
border-style: none;
}
/*Top Tab*/
#tab-container
{
position: relative;
}
.inner-tab
{
position: absolute;
right: 99px;
top: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
.inner-tab a
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
.inner-tab a:hover
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: underline;
}
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Advantage :: Hosting ¦ Web Design ¦ Content Managemtent ¦ Software
Development </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="App_Themes/Default/design.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Default/layout.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Default/styling.css" type="text/css" rel="stylesheet" />
<meta name="Description" content="Located in Prince George, British Columbia, Canada, Advantage offers low cost, high impact web design and hosting that really works." />
<meta name="Description" content=", Advantage, Prince George, Hosting, Web Design, Content Management, Custom Coding" />
</head>
<body>
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm" class="maxform">
<div id="tab-container">
<div class="inner-tab">
<a href="http://controlpanel.examlpe.com/">Control Panel</a> ¦ <a href="http://webmail.examlpe.com/">
Webmail</a>
</div>
</div>
<div id="header">
</div>
<div id="menu">
<!--Menu-->
</div>
<div id="main">
<div class="medright">
<!--Animated Image Stuff-->
<div class="medcontainertop">
<br />
<table style="width: 500px;">
<tr>
<td style="width: 33%;">
<h1>
Basic Hosting</h1>
</td>
<td style="width: 33%;">
<h1>
Standard Hosting</h1>
</td>
<td style="width: 33%;">
<h1>
Advanced Hosting</h1>
</td>
</tr>
</table>
</div>
<div class="medcontainerbody">
<div class="medcontainercontent">
<table style="width: 500px;">
<tr>
<td style="width: 33%;">
<h2>
$9.95/Month</h2>
1GB Storage<br />
5GB Bandwidth<br />
20 Email Addresses<br />
<a href="PersonalPlans.aspx?p=1">more...</a>
</td>
<td style="width: 33%;">
<h2>
$14.95/Month</h2>
2GB Storage<br />
10GB Bandwidth<br />
50 Email Addresses<br />
<a href="PersonalPlans.aspx?p=2">more...</a>
</td>
<td style="width: 33%;">
<h2>
$19.95/Month</h2>
5GB Storage<br />
25GB Bandwidth<br />
100 Email Addresses<br />
<a href="PersonalPlans.aspx?p=3">more...</a>
</td>
</tr>
</table>
</div>
</div>
<div class="medcontainerbottom">
</div>
<div class="medcontainertop">
<br />
<h1>
Web Design and Custom Coding</h1>
</div>
<div class="medcontainerbody">
<div class="medcontainercontent">
<img alt=" Advantage :: Web Design" src="Images/Design-Window.png" align="right" />Established
in 2005 and based out of Prince George British Columbia Canada, Advantage
is a low cost web development company that really works. Whether you need a site
"touch up" or a complete design, development, and hosting, we will work
with you in order to develop a site that fits your needs as well as your pocket
book.</div>
<div style="clear: both;">
</div>
</div>
<div class="medcontainerbottom">
</div>
</div>
<div class="smlleft">
<div>
<!--Start Live Chat Div's-->
<div id="pc_I_d" style="cursor: pointer; height: 85px;" title="Live Chat">
</div>
<div id="pc_S_d" style="display: none">
</div>
<!--End Live Chat Div's-->
<!--JavaScript for Live Chat-->
</div>
<a href="Contact.aspx">
<img alt="Contact Us By Email" src="Images/Email.png" style="width: 250px; height: 78px" />
</a>
<div class="smlcontainertop">
<br />
<h1>
News</h1>
</div>
<div class="smlcontainerbody">
<div class="smlcontainercontent">
Welcome to the new face of . Our new web site boasts many new features
including a custom support system, and easy access to all of our services.<br />
<br />
Be sure to look around at everything the site has to offer, and if you have any
comments, suggestions, or bug reports, please feel free to leave us a <a href="Contact.aspx">
message</a></div>
<br />
</div>
<div class="smlcontainerbottom">
</div>
<div class="smlcontainertop">
<br />
<h1>
Quick Links</h1>
</div>
<div class="smlcontainerbody">
<div class="smlcontainercontent">
<a href="KB.aspx">Knowledge Base</a><br />
<a href="http://controlpanel.examlpe.com">Control Panel</a><br />
<a href="http://webmail.examlpe.com">WebMail</a><br />
<a href="Support.aspx">Support</a>
</div>
</div>
<div class="smlcontainerbottom">
</div>
</div>
</div>
<div id="clearfooter">
</div>
</div>
<div id="footer">
<div class="footer">
¦ <a id="ctl00_Repeater1_ctl01_HyperLink1" href="/Default.aspx">Home</a> ¦
<a id="ctl00_Repeater1_ctl02_HyperLink1" href="/Hosting.aspx">Hosting Solutions</a> ¦
<a id="ctl00_Repeater1_ctl03_HyperLink1" href="/Software.aspx">Website Design</a> ¦
<a id="ctl00_Repeater1_ctl04_HyperLink1" href="/Support.aspx">Support</a> ¦
<a id="ctl00_Repeater1_ctl05_HyperLink1" href="/Contact.aspx">Contact Us</a> ¦
<br />
<strong>Copyright © 2005 - 2008, Advantage, All Rights Reserved.</strong>
</div>
</div>
</form>
</body>
</html>
[/code/
[edited by: jatar_k at 12:20 pm (utc) on April 8, 2008]
[edit reason] please use example.com [/edit]
sorry your post went unanswered for so long.. trouble is even with the code there is no difference in IE6 to 7, well at least not visually! I saw your previous link and I see it is all widths and heights that are out causing gaps in backgroud images and float column drops..
in your site (sorry saw it via profile) IE6 is in "Quirks mode" as a great many ASP.NET sites are. View the source of your online page and see the whitespace on the very first line?
IE6 has a bug whereby anything before the Doctype including whitespace causes it to go into back compatibility (or Quirks) mode.
Quirks Mode means that IE renders with it's broken box model, uses a quirky float model, and more..
--
in ASP.NET there is usually something in the template before the Doctype (sorry don't know what it is as I've never coded .NET but I know it's there ;)) it will usually look like:
<%...
command in here...
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"...you need to change it so it looks like this:
<%...
command in here...
[b]%><[/b]!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"...i.e. put the Doctype on the same line as the closing ASP Tag
that should close up the whitespace and make IE render in Strict compliance mode.. if you do that and still have problems then let us know, but at the minute the code you're posting does not exhibit a "problem".. I can help summarize the code if you still have need to, but please don't post company specifics as you'll not thank us when WebmasterWorld ranks higher for your terms than your site does ;)
-Suzy
If it IS a .NET issue, maybe I will try the .NET forum.
-Chase
no it's not a .Net issue as such, if you've removed that space and still have problems it is now a layout issue.. just wanted to remove the obvious first, it removes the need for a lot of IE hacks.. trying to work out out an issue while IE6 is in quirks mode is just an added complication ;)
e.g. in your CSS code above you have IE width hacks that are not doing anything:
#wrapper {
[b]width: 900px;[/b] /*same width as w\idth inside "outer" element*/
background-image: url(Images/Border.gif);
[b]w\idth: 900px;[/b] /*same width as width inside "wrapper" element - stupid little IE hack*/
}those 2 widths are the same so there's no point in the hack ;)
I'm summarising your code just now, I'm sure it is the IE6 expanding Box problem, the widths are just all wrong (try putting background colors onto some of the major elements - just can't figure out where it's happening that it's affecting IE6 yet! your image widths must be playing a part which is why the code above does not help.. bear with us!
-Suzy
-Chase
the small and medium containers (not shown in the above CSS) are too wide for their parent elements, 250px and 530px respectively..
the content containers set at 250px/530px respectively and have left padding on them.. padding adds to the width in the CSS Box Model (so does border).
The compliant browsers are overflowing the parent elements as they should, IE6 is stretching the parent elements thus making the actual columns too wide to sit side by side.
once your layout was stripped, I realise it's not exactly what I would call a stable template anyway :( being as your "boxes" are fixed widths there would be a much easier way..
anyhow just for the record as Xapti said earlier five stylesheets and monster HTML is not exactly a 'troubleshooting' exercise it's a site review/fix which is why you likely got little answers - we don't mind helping people who help themselves.. if you'd have pasted that code you left into a clean page you would have seen that your described problem was not replicated by it.
I'm having a problem actually getting your code small enough to post (without fixing it ;)) so you can visually see all the bits that are throwing IE6 out of whack
..if no-one minds I'll dump it into next post, then perhaps you can ask about the bits you're not understanding and others will be able to help you optimise the code as I've run out of playtime for now...
-Suzy
remember in the CSS Box Model:
l.border + l.padding + width + r.padding + r.border = actual width
I've also put a "ruler" at the top and bottom of the main div so you can see where the columns should be - feel free to look at it in any browser while this seems to work in compliant browsers for you it makes it harder to attach background images to elements and have them line up?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #000; /* black */
cursor:default;
text-align: center;
}
form.maxform {
clear: both;
height: 100%;
}
#wrapper {
background: #00f; /* blue */
width: 900px;
min-height: 100%;
margin: 0 auto;
text-align: left;
}
#header {
background: #666;
height: 63px;
}
#menu {
width: 798px;
margin-left: 50px;
height: 20px;
background: #eee;
}
#main {
width: 780px;
margin-left: 60px;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
min-height: 100%;
height: 100%;
background: #ff0;
}
/*Footer Layout*/
#clearfooter {
height: 75px; /*same as footer height*/
clear: both;
width: 100%;
}
#footer {
width: 900px;
height: 75px;
background-image: url(Images/Footer_bg.gif);
margin: -75px auto 0; /*opposite px to height*/
position: relative;
}
.footer {
padding-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
width: 800px;
}
/*Medium Size Container*/
.medright {
width: 530px;
float: right;
background: #abc; /* added */
}
.medcontainertop {
vertical-align: middle;
background: #abc url(images/med_container_Top.gif) no-repeat 0 0; /* added to */
padding-left: 20px;
margin: 0px auto;
height: 41px;
width: 530px;
position: relative;
}
.medcontainerbody {
background: #eee url(images/med_container_Bg.gif) repeat-y 0 0;
width: 530px;
padding-top: 10px;
padding-left: 30px;
margin: auto;
}
.medcontainerbottom {
background: #ccc url(images/med_container_Bottom.gif) no-repeat; /* color added */
height: 42px;
width: 530px;
}
.medcontainercontent {
width: 475px; /* you have tables in here that are set to be 500px wide! */
cursor: text;
background: #080;
}
/** added to highlight that the tables over extend too */
.medright table {width: 500px; border-collapse: collapse;}
.medright table td {border: 1px solid #f00;}
/*Small Size Container*/
.smlleft {
width: 250px;
float: left;
background: #dad; /* added */
}
.smlcontainertop {
vertical-align: middle;
background: #fcc url(images/sml_container_Top.gif) no-repeat 0 0; /* added to */
padding-left: 20px;
margin: 0px auto;
height: 41px;
width: 250px;
position: relative;
}
.smlcontainerbody {
background: #f00 url(images/sml_container_Bg.gif) repeat-y 0 0; /* added to */
width: 250px;
padding-top: 10px;
padding-left: 30px;
margin: auto;
}
.smlcontainerbottom {
background: #0f0 url(images/sml_container_Bottom.gif) no-repeat; /* added to */
height: 42px;
width: 250px;
padding-left: 20px;
}
.smlcontainercontent {
width: 200px;
cursor: text;
}
h1, h2, form {margin: 0; padding: 0;}
h1 {font-size: 16px;}
h2 {font-size: 14px;}
.ruler {width: 530px; border-left: 250px solid #000; background: #ddd; margin-bottom: 20px; text-indent: 40px;}
</style>
</head>
<body>
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm" class="maxform">
<div id="wrapper">
<div id="tab-container">tabcontainer</div>
<div id="header" style="color: #fff;">header</div>
<div id="menu">menu links</div><div id="main">
<div class="ruler">the ruler</div><div class="medright">
<div class="medcontainertop"><br />
<table class="mctable">
<tr>
<td style="width: 33%;"><h1>medcontainertop</h1></td>
<td style="width: 33%;"><h1>Heading</h1></td>
<td style="width: 33%;"><h1>Heading</h1></td>
</tr>
</table>
</div>
<div class="medcontainerbody">
<div class="medcontainercontent">
<table class="mctable">
<tr>
<td style="width: 33%;">
<h2>$/Month</h2>
<a href="#">more...</a>
</td>
<td style="width: 33%;">
<h2>$/Month</h2>
<a href="#">more...</a>
</td>
<td style="width: 33%;">
<h2>$/Month</h2>
<a href="#">more...</a>
</td>
</tr>
</table>
</div>
</div>
<div class="medcontainerbottom">medcontainerbottom</div><div class="medcontainertop"><h1>medcontainertop</h1></div>
<div class="medcontainerbody">
<div class="medcontainercontent">
<img alt="faux image" src="Design-Window.png" width="130" height="162" align="right" />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div style="clear: both;"></div>
</div>
<div class="medcontainerbottom">medcontainerbottom</div>
</div><div class="smlleft">
<div class="smlcontainertop"><h1>smlcontainertop</h1></div>
<div class="smlcontainerbody">
<div class="smlcontainercontent">
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="smlcontainerbottom">smlcontainerbottom</div><div class="smlcontainertop"><br /><h1>smlcontainertop</h1></div>
<div class="smlcontainerbody"><div class="smlcontainercontent">links</div></div>
<div class="smlcontainerbottom">smlcontainerbottom</div>
</div><div class="ruler" style="margin: 20px 0 0 0;">the ruler</div>
<!--/main--></div><div id="clearfooter"></div>
</div>
<div id="footer"><strong>Copyright © 2005 - 2008, All Rights Reserved.</strong></div>
</form>
</body>
</html>
-Suzy
My background image for my topcontainer is 41px high
If my class looks like this
.medcontainertop
{
background-image: url(images/med_container_Top.gif);
background-repeat: no-repeat;
padding-left: 20px;
padding-top:20px;
height: 21px;
width: 510px;
}<div class="smlcontainertop">
<h2>
My H2 Stuff</h2>
</div>Why would I get a 20px gap below my text? Is it because of the H2, and if so... how do I fix that?
h1 /*How should headings look*/
{
font-size: 16px;
margin:0px;
padding:0px;
}
