Website compatability question.. IE/Safari

P

polochick

Messages
229
Name
Liz
Edit My Images
Yes
Hiya,
It's been a while since I did any HTML, and I'm new to XHTML, and am in need of help! I have some basic code (work in progress) for my homepage and whilst it looks as it should in Safari (& Dreamweaver) but it doesn't load properly in IE. Any idea as to what I have done wrong / need to change?
Many thanks
Liz


http://www.bluebookba.com

<!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" />
<style type="text/css">
body{background-color:#ffffff;}
div.title {width:auto;padding:5px;border:0px;margin:0px;text-align:center}
p.padding {padding-top:50px;}
p.main {text-align:center}
div.img {margin: 10px;border: 0px solid #0000ff;height: auto;width: auto;text-align: center;}
div.img img{display: inline;margin: 20px;border: 1px solid #ffffff;}
a:link {color:#FFFFFF}
a:visited {color:#FFFFFF}
</style>

<title>Blue Book BA - The Best of Buenos Aires</title>
</head>

<body>
<div class="title">
<p class="padding">
<a href="http://www.bluebookba.com/"><img src="logo2.jpg" width="400" height="auto" alt="BlueBookBA - The Best of Buenos Aires" /></a>
</p>
</div>

<div class="img">
<p class="main">
<a href="http://www.bluebookba.com/blog/"><img src="Logoblog6.jpg" width="200" height="auto" alt="The Miles Better Blog" padding="50px" /></a>
<a href="http://www.bluebookba.com/comingsoon.html"><img src="Logoreviews6.jpg" width="200" height="auto" alt="Reviews of The Best of Buenos Aires" padding="50px" /></a>
<a href="http://www.bluebookba.com/comingsoon.html"><img src="Logopolopony3.jpg" width="200" height="auto" alt="Polo Ponies for Sale" padding="50px" /></a>
</p>
</div>

</body>
</html>
 
I rewrote some of your code if that's ok.

Let me know if this works. I don't have IE here so can't test quickly...

<!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" />
<style type="text/css">

#contentcontainer {
width: 950px;
margin: 0 auto;
}

.title {
text-align: center;
margin-top:90px;
margin-bottom:70px;
}

#primarynavigation {
text-align:center;
}

.navigationImage {
margin-right:45px;
}

.last {
margin-right:0 !important;
}

</style>
<title>Blue Book BA - The Best of Buenos Aires</title>
</head>
<body>
<div id="contentcontainer">
<div class="title">
<a href="http://www.bluebookba.com/"><img src="http://www.bluebookba.com/logo2.jpg" width="400" height="auto" alt="BlueBookBA - The Best of Buenos Aires" /></a>
</div>
<div id="primarynavigation">
<a href="http://www.bluebookba.com/blog/"><img class="navigationImage" src="Logoblog6.jpg" width="200" height="auto" alt="The Miles Better Blog" padding="50px" /></a><a href="http://www.bluebookba.com/comingsoon.html"><img class="navigationImage" src="Logoreviews6.jpg" width="200" height="auto" alt="Reviews of The Best of Buenos Aires" padding="50px" /></a><a href="http://www.bluebookba.com/comingsoon.html"><img class="navigationImage last" src="Logopolopony3.jpg" width="200" height="auto" alt="Polo Ponies for Sale" padding="50px" /></a>
</div>
</div>
</body>
</html>

You should also consider creating a seperate folder for your images... and a seperate stylesheet file for all your css rules.
 
It would also help if you tell us exactly what the problem is and perhaps include a screen grab ;)
 
Yeah IE6,7, and 8 does not parse height:auto properly (within the images) as it has not loaded the items at that point so it has no idea what the size of the picture is.

Tip, ditch the height:auto and allow the browser to display the images without control. If you set the width the height will follow.
 
I'd also not include the image width to be honest. You're images should be the correct width anyway. If they're not then you're going to get nasty image resizing in browser, which is not what you want.
 
A good rule is to try and not use any commands that use pixels for size, try and use percentages of the page, that way it should display much better larger/smaller monitors.

(For things like padding and margin it's not as bad)
 
KayJay said:
I'd also not include the image width to be honest. You're images should be the correct width anyway. If they're not then you're going to get nasty image resizing in browser, which is not what you want.
Click to expand...

+1

In addition to the above, the browser will still load the picture from the source at its full resolution. If you must resize photos then I would create thumbnails / banners of the original image to reduce the footprint of the page.
 
KayJay said:
It would also help if you tell us exactly what the problem is and perhaps include a screen grab ;)
Click to expand...

Oops sorry! The problem was that the top image loaded and the 3 other images in the other section showed up as dotted lines.
 
razor777 said:
Yeah IE6,7, and 8 does not parse height:auto properly (within the images) as it has not loaded the items at that point so it has no idea what the size of the picture is.

Tip, ditch the height:auto and allow the browser to display the images without control. If you set the width the height will follow.
Click to expand...

Thanks, this is really useful
 
KayJay said:
I rewrote some of your code if that's ok.

Let me know if this works. I don't have IE here so can't test quickly...

<!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" />
<style type="text/css">

#contentcontainer {
width: 950px;
margin: 0 auto;
}

.title {
text-align: center;
margin-top:90px;
margin-bottom:70px;
}

#primarynavigation {
text-align:center;
}

.navigationImage {
margin-right:45px;
}

.last {
margin-right:0 !important;
}

</style>
<title>Blue Book BA - The Best of Buenos Aires</title>
</head>
<body>
<div id="contentcontainer">
<div class="title">
<a href="http://www.bluebookba.com/"><img src="http://www.bluebookba.com/logo2.jpg" width="400" height="auto" alt="BlueBookBA - The Best of Buenos Aires" /></a>
</div>
<div id="primarynavigation">
<a href="http://www.bluebookba.com/blog/"><img class="navigationImage" src="Logoblog6.jpg" width="200" height="auto" alt="The Miles Better Blog" padding="50px" /></a><a href="http://www.bluebookba.com/comingsoon.html"><img class="navigationImage" src="Logoreviews6.jpg" width="200" height="auto" alt="Reviews of The Best of Buenos Aires" padding="50px" /></a><a href="http://www.bluebookba.com/comingsoon.html"><img class="navigationImage last" src="Logopolopony3.jpg" width="200" height="auto" alt="Polo Ponies for Sale" padding="50px" /></a>
</div>
</div>
</body>
</html>

You should also consider creating a seperate folder for your images... and a seperate stylesheet file for all your css rules.
Click to expand...


Wow this is so much neater than my code. Thanks
 
razor777 said:
+1

In addition to the above, the browser will still load the picture from the source at its full resolution. If you must resize photos then I would create thumbnails / banners of the original image to reduce the footprint of the page.
Click to expand...

That was what I was hoping. I read somewhere that I should have larger images at source and make them smaller on the page and they will look better, so I made them 300px wide and set them to display at 200px? I'm guessing this was on old wives tale and I should just save at 200px wide?
 
polochick said:
That was what I was hoping. I read somewhere that I should have larger images at source and make them smaller on the page and they will look better, so I made them 300px wide and set them to display at 200px? I'm guessing this was on old wives tale and I should just save at 200px wide?
Click to expand...

Yes, try and save your images correct dimensions. If you need multiple image sizes then use something like phpthumb to create different sized versions of your images for different areas of your website. In this case it would make sense to have the source image as good a quality as possible, but always try and keep file sizes to a minimum.
 
Well.....
If we are being picky then the spacing in the above examples should be in 'em' and not 'px'. Reason if that the browser font size is changed then all the gaps change proportionally and you get a much better looking page.

The example also specifies a width as "200", this is not cross browser, units must be specified unless the value is 0.

Also - it's a good idea where possible to avoid using margin and use padding instead. Reason is some older versions of IE have very weird ideas about the box model and you get your screens very differently laid out in different browsers.

And - good practice is for the page to contain exactly one H1 - your title is in base font, wrap it in an H1. Base font is bad practice as again it is not very cross browser, reason is browser differences cascading into table cells. I recommend only applying font sizes to the lowest level block element.

I could go on but I think I've said far far too much for the spirit of the OP - so please accept my apologies.
For those who know what they are looking at - here's one I prepared earlier......
 
You must log in or register to reply here.
Back
Top