Hi all,

I am new to the website developing side of things and trying to learn to build my own website for Graphic Design.

I have mocked up a front page using CSS and <div> codes using Dreamweaver CS4 on a Mac. This can be viewed at http://www.fresh-apple.co.uk/website/index.php

If I view the the site in Firefox 2 then the site looks exactly as I want it to. However when I view it in IE5 the page looks messed up.

Would someone be able to tell me why this is happening and how I can fix it please?

Below is the CSS coding I have used:
@charset "UTF-8";
/* CSS Document */

#body {
background-color:#7AAE4A;
text-align:center;
}


#content
{
background-color: #FFFFFF;
text-align: center;
margin-left: auto ;
margin-right: auto ;
margin-top: 30px;
width: 925px;
height: 590px;
visibility: visible;
}

#logo
{
float:right;
padding-right:5px;
padding-top:17px;
}

#menu
{
width:150;
list-style-type: none;
text-align: left;
font-size:18px;
font-family: Arial Black;
line-height:45px;
padding-top: 62px;
position:absolute;
margin-left:15px;
}

a:link
{
color:
#999;
text-decoration:none;
font-family: Arial Black;
}

a:visited {
color: #999;
text-decoration: none;
font-family: Arial Black;
}

a:hover {
color: #7AAE4A;
text-decoration: none;
font-family: Arial Black;
}

#rightapple
{
float:left;
margin-left:15px;
position:absolute;
margin-top:432px;
}

#homemainpic
{
float: right;
margin-top:23px;
margin-left:150px;
padding-right:20px;
}

greentext
{
font-family: Arial Black;
color: #7AAE4A;
font-size:18px;
}

greytext
{
font-family: Arial;
color: #999;
font-size:14px;
}

#copyright
{
text-align:center;
font-size:13px;
color:#FFF;
margin-top:5px;
}

Why are you bothering with IE5 at all, it's a dinosaur, and the usage for it is almost zero. It is completely UNsupported on a MAC, and most people on a Mac are going to be using Safari or other standards-compliant browser anyway. I wouldn't worry about anything less than IE6 these days. Most people using Firefox, even on a Mac, will keep up with the updates, and that means Firefox 3.

You can read up on IE's many bugs and how to squash them here:
www.positioniseverything.net

The first thing I noticed in your code, was that #rightapple uses float and absolute position. Those are conflicting values. If something is absolute, it can't be floated. That is probably why it is not showing in IE 6.

Also, I would review the IE box model bug. That is the problem with your items moving around depending on which browser you are in. A great way to fix the IE box model problem is to avoid left and right padding when possible.

Here is a like on the IE Box Model Bug: http://en.wikipedia.org/wiki/Interne..._box_model_bug

Also, I agree with LadynRed, IE 5.0 is used by less than .5% of people on the internet. Don't bother with 5.5. Focus on IE 6+.

IF a user has a fully-updated/patched version of IE6 (pc), then the box model was fixed in an update almost 2 years ago. The remaining bugs tend to be related to that stupid "hasLayout" nonsense.

Personally I don't know why you're testing all the way back to MSIE5, cause it is ancient, and vastly un-supporting of CSS.

Are you using a reset.css? They are very helpful in sorting out a lot of issues first of all.
http://meyerweb.com/eric/tools/css/reset/

I'm a CSS nit-pick cause I like my CSS spotless... Just a warning.

First of all, you don't really need to specify your @charset if you already saved your document as a utf-8. It is generally the default if you're using a web IDE.

You don't need # when you're clarifying body.

also, when you use this:
margin-left: auto ;
margin-right: auto ;

it is more simple if you use:
margin:0 auto;

Using font-size in px is not all to great. It is much better if you use pt.

instead of using padding-top and to avoid issues. I use a good practice, where I auto-clarify this:

div { padding:0; text-align:left; position:relative; }

if solves a lot of my problems. So instead of padding-top, just use top.

Using position:absolute, is not all to great for multi-dimensions unless you're using percentage.

I would not reccomend using these:

greentext
{
font-family: Arial Black;
color: #7AAE4A;
font-size:18px;
}

greytext
{
font-family: Arial;
color: #999;
font-size:14px;
}


In your CSS, I noticed some repetition of statements. Try and get it as slim as possible to avoid possibility of error.

Oh, your float:right; in green apple. Not a good idea, it is conflicting with your placement on the page.

As for your XHTML side, you are putting div around everything, which is no bueno.

you can take this:

<div id="homemainpic"><img src="images/Untitled-1.jpg" /></div>
<div id="rightapple"><img src="images/rightapple.jpg" alt="Fresh Apple Graphic Design" /></div>
</div>

and make it into:

<img src="images/Untitled-1.jpg" alt="" id="homemainpic" />
<img src="images/rightapple.jpg" alt="Fresh Apple Graphic Design"
id="rightmainpic" />

and this:

<div id="logo"><a href="index.php"><img src="images/Logo.jpg" border="0" alt="Fresh Apple Graphic Design" /></a></div>

into:

<a href="index.php"><img src="images/Logo.jpg" alt="Fresh Apple Graphic Design" id="logo" /></a>


Try and learn how to do initial CSS hiearchy, you can speed up your code, and also make less hassles. Doing things like
div#idname table tr td {}.

sorry for the wall of text ^^; Only trying to help.

Thanks guys for all your help. I am going to have a play around and take a look at the links this weekend and see if I can sort out the issues. Will also take note not to check IE5 and concentrate on IE6 and above.

Thanks again all.

Originally Posted by freshapple

Thanks guys for all your help. I am going to have a play around and take a look at the links this weekend and see if I can sort out the issues. Will also take note not to check IE5 and concentrate on IE6 and above.

Thanks again all.

no problem ^^ good luck with your site building!