Internet Explorer shows the web page different to other browsers?

I have been using the Browsers Shots website to see if my client’s web page, is going appear the way it is suppose to, most browsers show that it will appear normally, but Internet Explorer 6 on Windows XP, shows what is in the image here. Can someone please have a look at my html and css, and tell me how I can fix it?

(http://blueguminteractive.biz/ozzy-cranes/)

[CSS](http://blueguminteractive.biz/ozzy-cranes/images/style.css)

Thanks in advance.

Problem solved.

deathshadow60, my client would prefer their logo (Ozzy Cranes) along with the header, which I created for them, so I have had to change that part. Can you please have a look at the html and css, as when the web page is displayed in IE 6 and 7 in Windows XP, there is a gap underneath the header?

(http://blueguminteractive.biz/ozzy-cranes/)

[CSS](http://blueguminteractive.biz/ozzy-cranes/screen.css)

Was it interlaced? I only noticed it was 360+k, in other words three times larger by itself than I’d allow a normal page on a website to be TOTAL.

Here’s what I came up with:
http://www.cutcodedown.com/for_others/cturner01/ozzy/template.html

Which works all the way back to IE 5.5 - BUT

There are a bunch of design elements in there I wouldn’t even be DOING - like the uber-spaced side menu next to the banner image, or the giant honking banner image pushing the content clear off the screens at lower resolution - of course I wouldn’t be doing a fixed width layout EITHER so…

I did add back in two wrapping div mostly for clearing behaviors but also because of that disastrous idea for a sidebar next to the banner, I put the background on that.

I ditched the idea of that slashed background being different on all your corners since that would NEVER line up and looked like a rendering error, and instead just put a wrapper behind the content, padded it, and tiled a single slash pattern on it. Much simpler, much more uniform.

The menu only uses CSS for IE7/newer and alternative browsers, and throw csshover3.htc at IE6 to make it work there. To get the depth sorting to work right in IE6 I had to throw some z-indexes in there, and fix the width of the flyouts since you end up in float hell there. (IE does NOT like turning off float behaviors and will give you back the forced side padding on a UL otherwise)

There’s a whole bunch of clear:both since with the flyouts you can’t use overflow:hidden to wrap the floats; thankfully float:left; width:100%; gives you much the same behavior.

The menu, hover states and bottom border I condensed into a SINGLE image file.

Because you need to absolute position the flyouts on the main menu (and can’t trust EM thanks to FF being a retard about rounding off values) and because there’s a fixed height image behind the menus - and because that side menu needs to stay the same height as the image it’s next to we’re forced to use PX fonts on them. The footer on the other hand has no such extra elements, so I kept that the default font size and positioned the roundedBorders image bottom right - so it can expand in height without problems.

With the big banner image I upped the encoding to 15% which really didn’t add any visible at normal zoom artifacting due to how ‘busy’ the original picture was. I’d seriously consider axing that as a waste of bandwidth and space. The design is chewing up almost 700 pixels height before you get to ACTUAL content - that’s bad.

Also I padded the top and bottom so that the rounded corners weren’t flush :wink:

Between the re-encodings and code reductions the whole thing is a fraction the size of your original, and goes from 390k in ten images to 104k in 4 images. The reduction in the number of files reduces the total to six handshakes with the server, under the 8 simultaneous connect limit in most browsers!

Hope this helps.

P.S. You’ll notice I axed the ‘welcome’ heading. I hate that crap. Doesn’t add anything to the user experience, doesn’t do anything to help with SEO, usually doesn’t add any meaningful structure - it’s a wasted element and way too ‘friendly’ for a business.

If this thread isn’t moved to the css forum within the next 24 hours, I will have to repost this thread into the css forum, sorry but I am urgently needing an answer to this thread asap. I have a deadline to meet.

I now think this should be in the css forum, so can someone please move this thread to the css forum?

Well, lucky for you I’m in the neighborhood :wink: Question though, did you hit ‘flag’ (still say it should say report) so the moderators are aware of your desire to have it moved?

That said being I’m once again seeing four different appearances in four different browsers means the problems likely run deeper than you think… but let’s go down the list to see what we can see.

The five validation errors are actually only caused by one thing - an unclosed IMG tag. That’s not a deal breaker in terms of rendering, but it’s something you should fix.

Peeking under the hood… First thing that stands out is targeting IE specifically with that conditional comment crap. break-word is safe to send to all browsers, so just put that in the markup where it will be cached… NOT that I see why you’d need it… like-wise I’ve no idea what drop-down.js is, though if that’s for your menus you shouldn’t be wasting your time sending javascript to EVERY browser, just load a htc file in the CSS and be done with it.

Though the first big thing I really see that could cause IE6 rendering issues is the comment placement. Comments that land between floats can cause rendering errors, which is why as a rule I put the closing comment BEFORE the closing tag, not after - and I use meaningful classnames so crap like “start of navigation” is completely pointless.

Digging deeper, you seem to have a lot of wrapping div for no good reason, paragraph around a non-paragraph element and double-breaks on what SHOULD be paragraphs! Inlined style is a major /FAIL/ as is the lack of images off degradation, and use of dynamic fonts next to a fixed height image resulting in a broken layout on large font/120dpi systems.

So your first order of business would be cleaning up the markup… clearing out all the unneccessary junk, we come up with this:


<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Home - Ozzy Cranes
</title>

</head><body>

<div id="pageWrapper">
	<ul id="mainMenu">
		<li><a href="index.htm">Home</a></li>
		<li><a href="about.htm">About Us</a></li>
		<li><a href="services.htm">Services &amp; Support</a></li>
		<li><a href="product-range.htm">Product Range</a>
			<ul>
				<li><a href="#">Crane Erector Borer's</a></li>
				<li><a href="#">Self Loading Cable Trailers</a></li>
				<li><a href="#">Cable Drum Stands</a></li>
				<li><a href="#">Bull Wheel Tensioning Units</a></li>
				<li><a href="#">Pole Jinker Trailers</a></li> 				 
			</ul>
		</li>
		<li><a href="contact.htm">Contact</a></li>
		<li><a href="sitemap.htm">Sitemap</a></li>  
	</ul>
	
	<h1>
		Ozzy Cranes<br />
		<small>Australia's Leading Crane Borer Manufacturer</small>
		<span></span>
	</h1>
	
	<ul id="sideMenu">
		<li>
			<a href="#">Crane Erector Borer's</a>
			<ul> 
				<li><a href="#">Crane 1</a></li> 
				<li><a href="#">Crane 2</a></li> 
				<li><a href="#">Crane 3</a></li> 
			</ul> 
		</li><li>
			<a href="#">Self Loading Cable Trailers</a> 
			<ul> 
				<li><a href="#">Self 1</a></li> 
				<li><a href="#">Self 2</a></li> 
				<li><a href="#">Self 3</a></li> 
			</ul> 
		</li><li>
			<a href="#">Cable Drum Stands</a> 
			<ul> 
				<li><a href="#">Cable 1</a></li> 
				<li><a href="#">Cable 2</a></li> 
				<li><a href="#">Cable 3</a></li> 
			</ul> 
		</li><li>
			<a href="#">Bull Wheel Tensioning Units</a> 
			<ul> 
				<li><a href="#">Bull 1</a></li> 
				<li><a href="#">Bull 2</a></li> 
				<li><a href="#">Bull 3</a></li> 
			</ul> 
		</li><li>
			<a href="#">Pole Jinker Trailers</a>
			<ul> 
				<li><a href="#">Pole 1</a></li> 
				<li><a href="#">Pole 2</a></li> 
				<li><a href="#">Pole 3</a></li> 
			</ul> 
		</li>
	</ul>
	
	<img
		src="images/home-photo1.jpg"
		alt="Some of our trucks"
		width="666" height="367"
		class="homeBanner"
	/>
	
	<div id="content">
		<p>
			Ozzy Cranes is Australia&#8217;s leading manufacturer specialising in Earth Boring / Pole Erecting truck mounted Cranes designed and manufactured to meet the requirements of all electricity utilities and private contractors throughout Australia.
		</p><p>
			With over 30 years of experience in the industry Ozzy Cranes has gained a solid reputation for manufacturing equipment to the highest standards and to suit the harshest of Australian conditions with a strong commitment to satisfying our customers requirements.
		</p><p>
			We are able to offer you the most extensive range of build configurations, models and options tailored to suit your
			individual needs.
		</p><p>
			Complimenting our range of Crane Borer models is a wide range of other equipment such as Self loading cable trailers, cable tensioning and recovery stands, bull wheel units and pole jinker trailers.
		</p><p>
			Our products continue to perform in the harshest of environments and under the most extreme conditions throughout Australia with designs tried and proven to stand the test of time.
		</p><p>
			Ozzy Cranes is Proudly and Australian owned and operated company.
		</p>
	<!-- #content --></div>
	
	<div id="footer">
		Copyright Ozzy Cranes. All rights reserved. Website by 
	<!-- #footer --></div>
	
	<ul id="bottomMenu">
		<li><a href="index.htm">Home</a></li>
		<li class="last"><a href="about.htm">About</a></li>
	</ul>

<!-- #pageWrapper --></div>

</body></html>

Which cleans it up shaving 1k off it - which might not seem like a big deal until you realize that’s 25% of the markup on the cutting room floor.

Of course, new markup means it needs new CSS - gimme time to get breakfast down my gullet and I’ll show you how I’d approach that.

Obviously your code wasn’t working out for me, deathshadow60. So please explain how I can display the header image in the web page, without the text appearing.

Actually I do have 5 years experience using html and css, with award winning websites.

I assume Crusty is also going to undo the interlacing in that photo? : )

Thanks for your help, deathshadow60. I will look into the help you have given me.

I didn’t know that flagging a thread means that moderators can move the thread.

  1. breaks the heading order.
  2. should not be an image tag
  3. it WAS in a header, or should I say HEADING
  4. Image is an inline-level tag, so it defaults to display inline so whitespace after the tag is treated as a line of text - display:block will clear up that gap.
  5. It shouldn’t be an IMG tag.
  6. It shouldn’t be in the markup without a CSS off/images off graceful degradation either.
  7. even if using a IMG tag, there’s no reason to be WASTING a DIV around it.

Is there some retarded reason they want to ignore semantics, document structure, accessibility AND SEO? Lemme guess, they hired some SEO scam artist ‘expert’ who doesn’t actually understand HTML?