Firefox and IE display issues.

[hyperdude]

http://www.servicesfirstltd.co.uk

I have been redesigning this website, this is my first attempt at doing some serious css editing, I am now happy with the design, however the site displays slightly differently in firefox and ie. the top and bottom images seem to be 1 pixel out, I can adjust it to look good in one one of the browsers by editing the margin settings, at present it looks fine in Internet Explorer, but I would like it to look the same in both IE and firefox, I can't work this one out.

/* structure */
.inner-container {
background: #FFF;
font-size: 1.2em;
margin-left: 230px; margin-right: auto;
padding: 0px 10px;
width: 780px;
}

[Centauri]

Use the outer container to set the width, and centre this :

.inner-container {
	background: #FFF;
	font-size: 1.2em;
        padding: 0px 10px;
}

.outer-container {
	background: url('img/bottombar.jpg') no-repeat center bottom;
        padding-bottom: 37px;
        width: 800px;
        margin: 0 auto;
}

[jonhurlock]

Read this, it will fix your problem. Its due to browsers not agree-ing to stick to standards issued by W3C. Basically you just have to make an additional IE only CSS file which will override the properties of the FF style sheet, if IE is loaded.

[Centauri]

an additional IE only CSS file which will override the properties of the FF style sheet, if IE is loaded.

Which is totally not needed in this case.

[jonhurlock]

Sorry indeed Centauri is correct, i misread the original post. I quickly modified the CSS file, on my local machine and change the following elements & classes. Looks a bit different to Centauri's but essentially yields the same results.

.inner-container {
	background: #FFF;
	font-size: 1.2em;
	margin: auto;       
	padding: 0px 10px;
	width: 780px;
}

.outer-container {
		background: url('img/bottombar.jpg') no-repeat bottom;
        padding-bottom: 37px;
}

[hyperdude]

thanks both, it looks perfect in firefox, however in ie, the top image is now out of line, the bottom image lines up ok.

body {
background: #4E4E50 url('img/topbar.jpg') no-repeat center top;
padding-top: 26px;
width: 800px;
margin: 0 auto;
color: #444;
font: normal 62.5% Tahoma,sans-serif;

[Centauri]

The is a problem in IE that at certain resolutions a centred background image is 1px out of line with a centred container. Try moving the top background image from the body to .inner-container.

[hyperdude]

That did the trick, thank you for your help.