12 replies [Last post]
sproyd
sproyd's picture
Offline
Regular
Melbourne, Australia
Last seen: 13 years 6 weeks ago
Melbourne, Australia
Timezone: GMT+11
Joined: 2008-10-28
Posts: 19
Points: 0

Hey guys...

Developing a new website and having serious problems with older versions of MSIE (who isn't)

MSIE 7 and on displays the page perfectly

But MSIE 4 displays basically only the header

MSIE 5.5 displays the leftsidebar as too narrow

and MSIE 6.0 is pushing the second floated element in the content section below (treating it as too wide)

Obviously I'm not too concerned about MSIE4 because of the almost non-existent userbase (apart from the fact that it displays almost NO content) but 5.5 and 6 are of some concern. My reset stylesheet has magically fixed these legacy problems in the past but is not playing dice with this page.

Please helP!

Here's the code

html

<!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>Talk of the Town Catering - homestyle fresh meals</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Talk of the Town Catering offer fresh, high quality, nutritious meals delivered with friendly customer service for youths and elderly throughout Melbourne." />
<meta name="keywords" content="catering, meals on wheels, food service, fresh meals, delivered meals, hot meals, elderly meals, food, healthy, nutritious, delicious" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
 
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div id="layoutcontainer">
    <div id="innerheader"><img src="images/header1.jpg" alt="homestyle food service" /><img src="images/header2.jpg" alt="Talk of the Town Catering" width="301" height="313" /></div>
 
    <div id="contentcontainer">
      <div id="sidebarcontainer"><div id="leftsidebar">
        <center><strong>Call Us</strong> now on</center>
        <h3>1300 667 220</h3>
        <center><em>-or</em>-</center>
        <center>
          enquire using our
        </center>
        <h3><a href="contact.html"><strong>contact form</strong></a></h3>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      <ul>
        	<li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="food.html">Our Food</a></li>
            <li><a href="contact.html">Contact Us</a></li>        
        </ul>
        <p>&nbsp;</p>
        </div>
      <div id="sidebarbottom"></div></div>
 
      <div id="contentright">
        <div id="contentrighttop"><h1>Welcome</h1>
          <p>Talk of the Town Catering is a meal preparation and delivery service based out of inner Melbourne. It is our mission to provide quality homestyle fresh meals to the greater community. We specialise in catering for the unique culinary needs of both the elderly and youths. </p>
         <p> <img src="images/icons/simone.jpg" alt="Simone Clagnan" class="simone" /></p>
         <div class="floatleft" id="quote">
           <p><em>It  is our strong belief that the entire community regardless of health, age or  demographic should have the opportunity of a higher quality of health and life  by having access to real food that is affordable.</em></p>
           <p>&nbsp;</p>
           <div id="author"><strong>Simone Clagnan, Founder</strong><br />
          </div>
          </div>
      </div>
 
        <div class="contentrightbottombox"><h2>How We Can Help</h2>
        <ul>
          <li>Nutritious, high quality hot and cold meals</li>
          <li>Meals can be frozen or eaten straight away</li>
          <li>Delivered to your doorstep - we can even help you pack into your freezer!</li>
          <li>Hot meals are delivered hot and do not require reheating</li>
          <li>Fixed cost so you can budget accurately</li>
		</ul>
        </div>
        <div class="contentrightbottombox">
          <h2>Download the Menu</h2>
          <p>Our menu operates on a rotating basis - click below to download the latest</p>
          <center><img src="images/icons/menu.jpg" alt="download the menu" />
         	</center>
          <p>&nbsp;</p>
          <p>Click below to download our customer information form</p>
          <p>&nbsp;</p>
          <center><img src="images/icons/custinfoform.png" alt="download customer information form" width="64" height="64" /></center>
        </div>
        <div class="contentrightbottombox">
          <h2>Food Facts</h2>
          <ul>
          <li>food fact 1</li>
          <li>food fact 2</li>
          </ul>
        </div>
      </div>
        <div id="innerfooter">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>copyright Talk of the Town Catering 2009 | all rights reserved | ABN 90 815 102 754 | design by EMD</p>
    </div>
  </div>
</div>
</body>
</html>

Style sheet

@charset "utf-8";
/* CSS Document */
	body{
	height:100%;
	background-color: #CC00CC;
	background-color: #5f6156;
	width: 100%;
	background-image: url(images/bgtile.png);
	background-repeat: repeat-x;
	background-position: center top;
	text-align: center;
}
 
 
	#layoutcontainer {
		margin: 0 auto;
		overflow: hidden;
		background-color: #FFFFFF;
		width: 1000px;
		padding: 0;
		text-align: left;
	}
 
	#innerheader {
		float:left;
		background-color:#FFFFFF;
		height: 313px;
		width: 1000px;
		text-align: left;
	}
 
	#contentcontainer {
		float:left;
		background-color:#FFFFFF;
		width: 1000px;
		text-align:left;
	}
 
	#sidebarcontainer {
	width: 282px;
	float: left;
	overflow: hidden;
	}
 
	#leftsidebar {
		width: 220px;
		background-color: #FFFFFF;
		float: left;
		background-image: url(images/sidebartilebg.gif);
		background-repeat: repeat-y;
		min-height: 200px;
		color: #FFFFFF;
		padding-left: 32px;
		padding-right: 30px;
		border-bottom-style: groove;
	}
 
	#sidebarbottom {
		background-image: url(images/bottomsidebar.gif);
		height: 31px;
		width: 282px;
		float: left;
	}
 
 
	#contentright {
	width: 718px;
	background-color: #FFFFFF;
	float: left;
	overflow: hidden;
	}
	#contentrighttop {
		margin: 0 10px 30px 10px;
		padding: 10px;
		float: left;
		width: 678px;
	}
#innerfooter {
		background-color:#FFFFFF;
		width: 1000px;
		color: #F6F6F6;
		height: 61px;
		margin-left: auto;
		margin-right: auto;
		background-image: url(images/footer.gif);
		float: left;
	}
#innerfooter  p {
		text-align: center;
	}
 
	.floatleft {
		float: left;
	}
	h1 {
		font-size: 180%;
		color: #941341;
		line-height: 1.5em;
	}
	h3 {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		font-size: 200%;
		line-height: 1.5em;
	}
 
 
 
	center {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		font-size: 110%;
	}
	div#quote {
	background-color: #ECECEC;
	background-image: url(images/icons/quotation-marks.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 85px;
	padding-top: 6px;
	padding-right: 40px;
	color: #333333;
	margin-top: 25px;
	padding-bottom: 6px;
	margin-left: 20px;
	margin-right: 40px;
	width: 300px;
	}
	.contentrightbottombox {
	width: 199px;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	float: left;
	background-image: url(images/innerdivgradient.png);
	background-repeat: repeat-x;
	background-position: center top;
	line-height: 1.1em;
	}
 
	.simone {
	float: left;
	margin-left: 45px;
	margin-top: 20px;
	}
 
	div#author {
		text-align: right;
	}
	h2 {
	font-size: 150%;
	color: #941341;
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 6px;
	}
#leftsidebar   li   {
	color: #859605;
	line-height: 2.5em;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	border-top-color: #e69626;
	border-right-color: #e69626;
	border-bottom-color: #e69626;
	border-left-color: #e69626;
	border-bottom-width: 2px;
	}
#leftsidebar    li a:hover   {
	font-size: 145%;
	font-weight: bold;
	padding-left: 20px;
	line-height: 2.5em;
	color: #e69626;
	}
#leftsidebar  li a {
	font-size: 145%;
	font-weight: bold;
	padding-left: 20px;
	line-height: 2.5em;
	color: #859605;
}
 
	h3 a {
		color: #FFFFFF;
	}
	h3 a:hover {
		color: #E69626;
	}
.contentrightbottombox li {
	list-style-position: outside;
	list-style-image: url(images/bullet_icon.png);
	padding-left: 0px;
	margin-left: 12px;
	padding-bottom: 8px;
}
.contentrightbottombox br {
	line-height: 1px;
}

reset stylesheet

@charset "utf-8";
/* CSS Document */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 98%;
	vertical-align: baseline;
	background: transparent;
	font-family: "Trebuchet MS", Verdana, Arial;
}
a:link {
	text-decoration:none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
html, body {
	text-align:center;
}
p {
	text-align: left;
}
body {
	line-height: 1.2em;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
 
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

C'mon Stupid System! Work!

sproyd
sproyd's picture
Offline
Regular
Melbourne, Australia
Last seen: 13 years 6 weeks ago
Melbourne, Australia
Timezone: GMT+11
Joined: 2008-10-28
Posts: 19
Points: 0

oops used the MSIE6 shot for

oops used the MSIE6 shot for 5.5 and can't figure out how to edit post (these forums aren't exactly cutting edge seeing as its a webdesign forum!)

Here is the SS for 5.5

C'mon Stupid System! Work!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE5.5 uses a different box

IE5.5 uses a different box model. Padding is included in width, so leftsidebar is 62px narrower than in other browsers.

IE6 needs an extra 3px to cater for its 3px jog bug. You can get around this by applying margin-right: -3px to the first float element in either direction or with two floated elements, floating one left and the other right. IE5 should have the same bug so that is curious. IE6 and earlier will also expand an element if it feels it needs more than the specified width (when overflow is visible, the default) so maybe an image needs more space than is available.

sproyd
sproyd's picture
Offline
Regular
Melbourne, Australia
Last seen: 13 years 6 weeks ago
Melbourne, Australia
Timezone: GMT+11
Joined: 2008-10-28
Posts: 19
Points: 0

okay what do you suggest to

okay what do you suggest to fix this problem?

C'mon Stupid System! Work!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Drop the float and width

Drop the float and width from leftsidebar. Change the float on content to right.

sproyd
sproyd's picture
Offline
Regular
Melbourne, Australia
Last seen: 13 years 6 weeks ago
Melbourne, Australia
Timezone: GMT+11
Joined: 2008-10-28
Posts: 19
Points: 0

Tried this and was greeted

Tried this and was greeted with less than a modicum of success... can you be so kind (and awesome) as to let me know exactly what CSS entires I should be scrapping, changing because I unfloated the leftsidebar and removed the width as well as changing the float on content to right but it wouldn't display properly - even in Chrome.

C'mon Stupid System! Work!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Put up a link and I'll give

Put up a link and I'll give it a shot.

sproyd
sproyd's picture
Offline
Regular
Melbourne, Australia
Last seen: 13 years 6 weeks ago
Melbourne, Australia
Timezone: GMT+11
Joined: 2008-10-28
Posts: 19
Points: 0

http://www.ttcatering.com.au/

C'mon Stupid System! Work!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

What is the problem? You've

What is the problem?
You've switched #contentright to float:right, but you haven't removed the float and width from #leftsidebar. I'm not sure what is to misunderstand with them, delete those two properties from the #leftsidebar style rule.

It works fine for me in modern browsers - IE7, IE8, FF3, Chrome.

There's an issue with the .contentrightbottombox in IE6 due to the double margin bug - add "display:inline" to its styles.

Below IE6, you're on your own - I'll fix up sites for those browsers professionally (at full rates), but not in my spare time.

sproyd
sproyd's picture
Offline
Regular
Melbourne, Australia
Last seen: 13 years 6 weeks ago
Melbourne, Australia
Timezone: GMT+11
Joined: 2008-10-28
Posts: 19
Points: 0

Well tbh I didn't update

Well tbh I didn't update those CSS attributes because they made it display funky in Dreamweaver CS3. I have now removed float (changed to none) and width on all left sidebar elements (#sidebarcontainer, #leftsidebar (the content part), #sidebarbottom (the bottom curved image) and its a bit of a mess in modern broswers.

I'm not so fussy taht I want IE<6 compatibility but in IE6 its still not displaying right - what do you suggest.

Thanks for your help Chris.

C'mon Stupid System! Work!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Only remove the width from

Only remove the float & width from #leftsidebar - that is the only one I mentioned.

Ignore what stuff looks like in Dreamweaver. Its a trap. All browsers have their own foibles. Having something display right in DW is no guarantee it'll display right in real browsers and conversely having a problem in DW doesn't necessarily imply a problem in real browsers. Moral ... only test in browsers your users will use.

sproyd
sproyd's picture
Offline
Regular
Melbourne, Australia
Last seen: 13 years 6 weeks ago
Melbourne, Australia
Timezone: GMT+11
Joined: 2008-10-28
Posts: 19
Points: 0

Yeah I agree with the DW not

Yeah I agree with the DW not displaying anything correctly as a given. I noticed this especially with my homepage (www.electricmountaindesign.com) which displays near insanity on DW despite being W3C compliant and looking perfect in most browsers. I find this is especially true when using templates.

Have made the changes you suggestesd and submitted to browsershots (IE 5.5 to 8 ) so will wait and see and post results back once done.

C'mon Stupid System! Work!

sproyd
sproyd's picture
Offline
Regular
Melbourne, Australia
Last seen: 13 years 6 weeks ago
Melbourne, Australia
Timezone: GMT+11
Joined: 2008-10-28
Posts: 19
Points: 0

omg Chris you are my

omg Chris you are my favourrrrite person. Displaying sweet now in IE6, IE5.5 et al! (and W3C valid albeit with warnings for lack of width property) Thanks so much! Herre's the SS

Thanks so much Smile

C'mon Stupid System! Work!