PDA

View Full Version : ie6 bug need help to fix



char
Sep 18th, 2009, 10:18 AM
hi there guys for some reason i cant seem to fix this ie6 bug on this website
any ideas what would fix it
http://www.dartmoortearooms.co.uk/

anyone got any ideas works on all the other browers just not ie6

abduraooft
Sep 18th, 2009, 10:41 AM
Please explain the issue rather than letting us to guess it.

char
Sep 18th, 2009, 11:25 AM
http://img188.imageshack.us/img188/2034/screenshot20090918at101.png

http://img268.imageshack.us/img268/2034/screenshot20090918at101.png

http://img9.imageshack.us/img9/2034/screenshot20090918at101.png

ps an great tool to check your website in all versions of ie

http://www.my-debugbar.com/wiki/IETester/HomePage

abduraooft
Sep 18th, 2009, 11:36 AM
Umm...Fix the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dartmoortearooms.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

char
Sep 18th, 2009, 11:51 AM
i dont see any there that i think going to make an real bug in just ie6?

SB65
Sep 18th, 2009, 02:01 PM
Hi char

As abduraoft says, there are a lot of errors in your markup. I've been looking at the code for a little while and cannot see any easy fix for IE6. A lot of your code is invalid - divs inside spans etc, which is likely to produce some unpredictable results.

You have so many different styles and spans applied that the code is rather confusing. I'm guessing this was built in Dreamweaver which may be partly to blame.

I'm inclined to think a rewrite might be necessary...

SB65
Sep 18th, 2009, 04:26 PM
...like this, maybe:


<!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>Dartmoor Tearooms, AA rated 'not to be missed' tearoom in Moretonhampstead, Devon, UK</title>
<meta name="description" content="Dartmoor tearoom at Moretonhampstead within the Dartmoor National Park, AA top rated cafe with homemade scones and teacakes. Devon cream teas and over 30 different teas and infusions on offer."/>
<meta name="keywords" content="Devon tearoom, Devon cafe, Dartmoor home made scones, teacakes, Moretonhampstead, carrot cake, Dartmoor national Park, Devon cream teas, home made cakes, Devonshire tearoom"/>
<style type="text/css">
*{margin:0px;padding:0px;}

body{
background-color:#808080;
font-family: "Times New Roman", Times, serif;
font-size:18px;
font-weight:bold;
color:#000099
}

#main{
width:900px;
height:auto;
background-color:#e9e9e9;
text-align:center;
margin:20px auto;
padding:10px;
}

img{border:none}

.left{float:left}
.right{float:right}

#header{margin-bottom:15px;overflow:auto;height:1%}/*clear the float*/
#header h1{font-size:40px;margin-right:115px}
#header p{margin-right:115px;margin-bottom:0;}
#header img{float:right}


#top{overflow:auto;padding-left:20px;margin-bottom:25px;height:1%}
#top p{margin-bottom:20px;width:355px;margin-left:455px}
#top span{color:#D50035}

#aa{overflow:auto;margin-top:20px;margin-bottom:20px;height:1%}/* height for IE6 to set hasLayout */
#aa p{margin:20px auto;font-style:italic;width:530px}
#aa span{font-size:22px;color:#D50035}
#aa a{clear:right;margin-top:5px}

#location{overflow:auto;height:1%}
#location iframe{margin-left:180px;display:inline}
#location p {margin:10px 100px 15px 0px}

p#welcome{margin: 20px 150px}

#rightbar{float:right;width:225px;background-color:#CCCCCC;margin-top:0px;display:inline;margin-right:-10px}
#rightbar p{width:190px;margin:10px auto}

#maintxt{width:680px; background-color: #E9E9E9; }
#maintxt p{margin:0px 20px 15px}

#links a{margin:0 5px}


</style>
</head>
<body>
<div id="main">

<div id="header">
<img src="http://www.dartmoortearooms.co.uk/images/tea_guild.png" alt="the tea guild UK" width="105" height="100" />
<h1>DARTMOOR TEAROOMS &amp; CAFÉ</h1>
<p>A fine English tearoom serving fine English fare. </p>
<p>3 Cross Street, Moretonhampstead, Devon TQ13 8NL Tel. 01647 441116</p>
</div><!-- end header -->

<div id="top">
<img class="left" id="toppic" src="http://www.dartmoortearooms.co.uk/images/frontagebest.jpg" alt="Dartmoor Tearooms, Moretonhampstead" width="400" height="300" />
<p><span>September Opening Times</span></p>
<p>We shall be open Wednesdays to Sundays as usual for the weeks commencing 7th &amp; 14th. Opening hours 10.30 to 5pm and Sundays <u>11am</u> to 5pm.</p>
<p><span>Please note from Saturday 26th to Sunday 1st November we shall be open at weekends only.</span></p>
<p>We shall be <span>CLOSING</span> for the Winter from 2nd November to March 3rd and welcoming you back in for more of George's good cooking on Wednesday 3rd March.</p>
</div>

<img src="http://www.dartmoortearooms.co.uk/images/till.jpg" alt="waitress at the till in the Dartmoor Tearooms" width="404" height="270" />
<img src="http://www.dartmoortearooms.co.uk/images/waitress_yellow_apron.jpg" alt="waitress at the Dartmoor Tearooms" width="186" height="270" />
<img src="http://www.dartmoortearooms.co.uk/images/nottingham_man.jpg" alt="Happy customer" width="202" height="270" />

<div id="aa">
<img class="left" src="http://www.dartmoortearooms.co.uk/images/taste_of_the_west.jpg" alt="taste of the west" width="120" height="165" />
<img class="right" src="http://www.dartmoortearooms.co.uk/images/aa_logo.jpg" alt="AA logo" width="58" height="57"/>
<a class="right" href="http://www.amazon.co.uk/gp/product/0749560606?ie=UTF8&amp;tag=dartmoor04-21&amp;linkCode=as2&amp;camp=1634&amp;creative=6738&amp;creativeASIN=0749560606"><img src="http://www.dartmoortearooms.co.uk/images/51HlXBUMIOL._SL160_.jpg" alt="Afternoon tea gude" width="100" height="100" border="0" /></a>
<p><span>&quot;This cosy 17th century tearoom is not to be missed&quot;</span></p>
<p>Says AA Afternoon Tea Perfect places for afternoon tea guide 2009. Click on the book to order it online through Amazon at just £6.49 and read the full review.</p>
</div>

<div id="location">
<iframe class="left" width="150" height="75" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;ll=50.660741,-3.764645&amp;spn=18.409311,39.506836&amp;msid=117301067872210189164.00047339364df1411839d&amp;output=embed"></iframe>
<p>View Dartmoor Tearooms in a <a href="http://maps.google.co.uk/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;ll=50.660741,-3.764645&amp;spn=18.409311,39.506836&amp;msid=117301067872210189164.00047339364df1411839d&amp;source=embed" >larger Google map </a></p>
<p>Click to find us in <a href="http://www.multimap.com/maps/?qs=TQ13+8NL&amp;countryCode=GB"><img src="http://www.dartmoortearooms.co.uk/images/multimaptiny.jpg" alt="multimap logo" width="70" height="18" /></a></p>
</div><!-- end location -->

<p id="welcome">Welcome to the best cream tea on Dartmoor - home made scones, good fruit jam and gloriously rich golden clotted cream with a huge choice of top teas.</p>

<div id="rightbar">
<img src="http://www.dartmoortearooms.co.uk/images/stickytoffee.jpg" alt="ginger cake and clotted cream" width="195" height="130" />
<img src="http://www.dartmoortearooms.co.uk/images/selectioncakes.jpg" alt="apple puddings with buns" />
<img src="http://www.dartmoortearooms.co.uk/images/carrotcake.jpg" alt="carrot cake" width="195" height="192" />
<img src="http://www.dartmoortearooms.co.uk/images/boybestsize.jpg" alt="boy enjoying a cream scone" width="180" height="269" />
<p>Children are most welcome and smaller meals with children's choices are on offer.</p>
<img src="http://www.dartmoortearooms.co.uk/images/nichola.jpg" alt="happy waitress smiling" width="195" height="292" />
</div><!-- end rightbar-->

<div id="maintxt">
<img src="http://www.dartmoortearooms.co.uk/images/ollie.jpg" alt="boy with fruit smoothie at the tearooms" width="180" height="269" />
<img src="http://www.dartmoortearooms.co.uk/images/room2.jpg" alt="overflow area at the tearoom" width="186" height="270" />
<img src="http://www.dartmoortearooms.co.uk/images/ourtable.jpg" alt="interior of the tearoom" width="202" height="269" />
<img src="http://www.dartmoortearooms.co.uk/images/bottles_bear.jpg" alt="bottles chilling in the fridge" width="202" height="269" />
<img src="http://www.dartmoortearooms.co.uk/images/teatable.jpg" alt="cake and fork on a doilly" width="187" height="250" />
<img src="http://www.dartmoortearooms.co.uk/images/cream_teatime.jpg" alt="girl enjoying a Devon Cream Tea" width="183" height="270" />
<p> Want to taste some real Dartmoor cooking along with warm friendly hospitality?
Then call into Dartmoor Tearooms &amp; Café in Moretonhampstead - in the heart of Devon.
You won't find fresher scones or a more yummy carrot cake.
All our meals, scones, puddings and cakes are homemade even our yummy teacakes.</p>
<p>Walkers, weight-watchers and WI ladies are all welcome to come and taste our fare.
The blackboard menu changes daily along with our everyday favourites.</p>
<img src="http://www.dartmoortearooms.co.uk/images/chutney.jpg" alt="7 jars of chutney by the till" width="209" height="279" />
<img src="http://www.dartmoortearooms.co.uk/images/coffeebeans.jpg" alt="" width="360" height="279" />
<p id="links"><a href="dartmoortearoomsmenu.html">See our menu</a>
<a href="tealisting.html">See our range of 30+ teas</a>
<a href="suppliers.html">See our suppliers</a></p>
<p>We are licensed, proud members of 'Taste of the West', and offer a wide range of top quality coffees and teas.
We source premium top quality ingredients, including free range chicken and eggs, and local Devon traditionally reared meat.</p>
<p>Do get in touch by <a href="mailto:[email protected]?subject=mail from the website">e-mail</a>
See us on <a href="http://www.multimap.com/maps/?qs=TQ13+8NL&amp;countryCode=GB">
<img src="http://www.dartmoortearooms.co.uk/images/multimaptiny.jpg" alt="multimap logo" width="70" height="18" /></a> Map ref SX 754 860</p>
<img class="left" src="http://www.dartmoortearooms.co.uk/images/parkingsign.jpg" alt="Parking sign"width="50" height="63" />
<p>Parking is available in 2 nearby car parks along with some street parking.</p>
<p>Hit counter added on 10th of Sept 09 <span class="conter"> 106</span></p>
</div><!-- end maintxt -->

</div><!-- end main-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3606040-11");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>




If you want to use this you'll need to change the image references back to local. I'm fairly sure your IE6 problem was due to the use of deprecated vspace and hspace attributes. This seems OK to me in FF3, IE6/7/8, Chrome2, Safari4 and Opera9.

Mine's a large devon cream tea, by the way....:D