Question : Page borders vary by width in different browsers - CSS

Hi experts

Let me start by saying that I have a reasonable understanding of what the styles in a fairly standard CSS file will do, but I am far from experienced in this area.  I "inherited" a website shortly after the professional web designer started it with a few pages but then had to quit.  It's a site for charitable purposes, so it's not an issue that is disrupting a business, but a few things are bugging me that I am not sure how to fix.

I chose to leave the overall page layout as had been started because I liked the general appearance.  The problem is that I think the pro had been using some fancy web editing software while I am more used to just banging out pages in Microsoft FrontPage 2003, so often when I change or delete something it screws another bit of the existing HTML code up behind the scenes without always making it immediately apparent.  I've ended up writing quite a lot of the content in a text editor to avoid this.

Anyway, I have the site functional and just about as complete as it needs to be.  I know there are some areas that could be a whole lot better, it's probably far from compliant code, but in general it looks OK to me.  I don't really have the time to fix any niggles or try to make it wholly compliant and load exactly the same in all browsers.

The main thing that is really annoying me, and is all I really want to try and fix, is that the page borders I inherited with the site are different widths in IE than they are in the other browsers I have tested the site with.

http://www.c2cr2c.com

Behaviour is much the same in IE7 and IE8, but as you will see from the screenshot of the layered browsers with the same page open, the borders in IE are significantly narrower than they are in Firefox, Chrome, and Opera.  I like the width as it shows in IE, and in fact the wider borders in the other browsers messes up the layout of a number of elements in several pages like images that hang out the right onto the border.

Note that I did reduce the window sizes of the browsers to get the screenshots down to a manageable size for here, so the logo at the top left and changing image at the top right look as though they are banging against each other.  In the proper sized windows the separation distance is file.

 
IE-Page-Border-Difference.jpg (316 KB) (File Type Details) 
Page in IE7 (back) has border widths I want to show in other browsers
327527
 


The pages all use the same CSS file which applies styles to the whole page area, the header, the navigation buttons, the body, the content, and the footer.  No doubt you will have a look at the actual code in the index.html file and the CSS file that loads from the site, but I have attached a skeleton HTML file and a CSS file containing the relevant styles used.

Generic HTML Code:
 
Example-HTML-Code.txt (3 KB) (File Type Details) 
The site's index.html with extraneous content stripped out and generic image names, etc
 


Relevant Styles in CSS file:
 
Relevant-CSS.txt (1 KB) (File Type Details) 
The CSS file with unused and/or repeated styles removed
 


I am hoping that there is something glaringly obvious that can be quickly changed in the CSS file to make the other browsers show the page borders the same width as they do in IE, and I would be very grateful if someone can tell me what to change.

Thanks

Bill

Answer : Page borders vary by width in different browsers - CSS

The first thing is to get rid of the "width:85%;" in the 'body' css.  I hope you're not using Frontpage to edit this.  

Also, this part of your <body> tag :

onLoad="startPix()";"MM_preloadImages

Should be:

onLoad="startPix();MM_preloadImages

The extra double-quotes make the second part not work.
Random Solutions  
 
programming4us programming4us