annoying IE differences

[stu_09]

Hi there,

I've designed a very basic layout for my website. However, Internet Explorer poses a few problems which i have been unable to resolve. There are:

1. The layout is left aligned but I want it centered
2. The background image isn't visible behind the links
3. A small gap below the banner with the background image.

The website is how I want it to look in Firefox. If anyone can offer any suggestions as to how I can correct this I'd be very grateful.
The link is here (http://geocities.com/stuartlittle13/)

Many Thanks,
Stuart.

[dmetrostars10]

add this to the div wrapper in the css....

margin-left:auto;
margin-right:auto;

Delete - margin: 0 auto; and replace with what I wrote above. That should do the trick.

- Dan

[stu_09]

hmm i did think but it still doesnt seem to be doing the trick.

any reason why?
cheers,
Stu.

[GarrettW]

add this to the div wrapper in the css....

margin-left:auto;
margin-right:auto;

Delete - margin: 0 auto; and replace with what I wrote above. That should do the trick.

that won't do anything.
margin-left:auto; margin-right:auto;
and
margin: 0 auto;
are essentially the same thing. The only difference is that option #2 is also specifying a 0 margin for the top and bottom.


Found this in your CSS code:
<!--background: #fff;-->
This is not the proper way to comment out a line of CSS - what you're using are HTML comment tags. For CSS, you'd need to surround the desired text with /* */, like this:
/* background: #fff; */

As far as the centering issue - the code looks ok at first glance, although I noticed some CSS that could be an issue:
body {
align: center;
There is no CSS attribute called "align". There are "text-align" and "vertical-align", but not just "align". Try making it "text-align" and see what happens.

What happens to that gap under the banner if you remove:
height: 50px;
from your CSS for #header ?

[stu_09]

i appreciate the help. however, im still having problems.

making align: center; into a text-align: center; (although this sounds obvious) simply centres the text.

and when i remove the height: 50px; it simple creates the same gap in firefox which is found in I.E.

if anyone can offer any suggestions id appreciate it.
cheers,
Stu

[GarrettW]

making align: center; into a text-align: center; (although this sounds obvious) simply centres the text.then you might as well just take that line of code out, instead of keeping it as "align: center".

What happens if you change this line:
* { padding: 0; margin: 0; }
to:
html, body { padding: 0; margin: 0; }
?

[stu_09]

i think the first suggestion was more on the right lines

when i change it to text-align: center;
and also use the line margin-left:auto; margin-right:auto; in the css wrapper

it centres the body in IE but the text is centred in both IE and firefox but I want the text left algined.

i have made the change. can you think of a way I can align the text to the left?

[stu_09]

right i have the left left aligned
i put an extra text-align: left; in the css content
i dunno if this is semantically the best way but it works

still having trouble with the gap below the banner. the only way i can resolve this at the moment is removing the border around the banner all together but this isnt desirable. so any suggestions on that would be great.

stu

[GarrettW]

i put an extra text-align: left; in the css content
that's correct.
still having trouble with the gap below the banner.
What about replacing this:
<div id="header">
<img src="http://www.geocities.com/stuartlittle13/banner1.jpg">
</div>
with this:
<img src="/stuartlittle13/banner1.jpg" id="header">

and then in your CSS, replace this:
#header {
width: 750px;
border: 1px solid #ccc;
height: 50px;
margin: 10px 0px 0px 0px;
}
with this:
img#header {
display: block;
border: 1px solid #ccc;
margin-top: 10px;
}
Also in the CSS, under #navlist li a, #navlist li a:link, remove this line:
background-image: url(http://www.geocities.com/stuartlittle13/bg.gif);
it should work correctly without that.

[stu_09]

thats perfect. thank you very much for all your help.

stu

[GarrettW]

you're welcome :) glad to be of assistance!

[GarrettW]

Also I'd recommend removing this line under #navcontainer :
background-image: url(http://www.geocities.com/stuartlittle13/bg.gif);
that way the background lines match up.