Little probs with IE and FireFox

[wap3]

Hi everyone,

I have been trying to buld my first css layout and have just 3 little problems I cant seem to sort out.

1. In IE the white background is slightly wider than it should be, It should be flush with the header and footer.

2. In IE the three boxes on the right hand side should apear at the top of the page, but seem to be being forced down the page.

3. In IE and FieFox the top five mountain bikes list is set in from the left for some reason and I cant seem to get rid of the 'circular' bullet points.

Can anyone help me sort these problems out please. It would be much appreciated.

Thanks

Wap3 :thumbsup:

http://www.martindale.paulblackonline.co.uk

[rpgfan3233]

In your first list, your first <li> is still open. You made a typographical error by stating </i> rather than </li>.

3. In IE and FieFox the top five mountain bikes list is set in from the left for some reason and I cant seem to get rid of the 'circular' bullet points.
div#top5 { background-image: url(../images/top5.gif);
background-repeat: no-repeat;
font-family: Gill Sans MT, Verdana, Arial, Helvetica;
font-size: 15px;
font-weight: bold;
color: #333333;
height: 149px;
width: 210px;
padding-left: 0px;
padding-top: 1px;
list-style: none;
}

You don't have an entry for "div#top5 ul" or "div#top5 li". You need to apply the "list-style: none;" to either of those.

[wap3]

Hi thanks rpgfan3233 thats fixed those 2 problems.

In IE the three boxes are still being forced down the bottom of the page when they should be level with the main text at the top.

Can anyone help me sort this out ?

I would really appreciate it.

;)

[mcdougals4all]

Your div .rightcol is given a width of 200px and the div's nested within are all slightly wider. Does resizing the inner divs' widths to 200px make a difference?

[wap3]

HI mcdougals4all,

I tried what u suggested but unfortuanetly it made no difference.
So I messed around with a few other things and I now have it spot on in FF ut in IE to the right of the three boxes the white background is pushing out to far. It should line up flush with the header and footer.

Im so close yet so far !! :confused:

Can anybody help me out here ?

:)

[mcdougals4all]

What's the padding-right in the footer? Removing the lines in bold doen't seem to have any effect in Firefox, where as IE may be adding that extra padding and creating the whitespace.

div.footcol { background-image: url(../images/footer1.gif);
background-repeat: no-repeat;
height: 50px;
width: 749px;
font-family: Verdana,Arial,Helvetica;
font-size: 11px;
color: #333333;
padding-right: 27px;
padding-bottom: 30px;
float: left;
}

[mcdougals4all]

I was probably looking at the wrong area of your source, but it's still likely a left or right padding issue. For lack of anything better, I'd suggest deleting things through process of elimination until you see a difference.