Webpages centered in Firefox, but not in Internet Explorer..help a n00b!

Y

YouGiveMeRash!!!

Limp Gawd
Joined
Jun 21, 2006
Messages
353
I'm new to designing websites. This is my first site and I have published it for the most part, but I'm running into an annoying problem that I can't fix.

The website isn't finished yet, but if you click on the About Us page and Pictures page in both FireFox and Internet Explorer, you'll see what I mean: www.uncc.edu/msa

Basically, I want it looking in Explorer as it looks in Firefox.

Any help is appreciated :)
 
You compared it in Internet Explorer and Firefox? :$ In IE, the text and pictures in the box aren't centered.
 
Indeed I did. I'm on ff right now. Just copied the url into IE and it looks exactly the same.
 
IE 7:

ie7pictureszq7.jpg


FF:

ffpictureszs6.jpg



I'll try it out at a school computer in a couple of hours.
 
I'm getting the same results as YouGiveMeRash!!!. Firefox is fine and IE7 isn't centered. The frame is centered, but the "About Us" section is on the left side of the main frame. It looks like there should be a picture or something on the right side, with all that space. Another comparison would be that in Firefox, the text looks like word wrap is turned on, while in IE it looks like the text box doesn't completely cover the frame.
 
This could be related to a couple issues I think. First, you have the width on the containing table column set to 517px but its actually stretching to 875px in firefox. I suspect that some versions of IE are respecting the specified width and are only using 517px. Just search for this line of code and set the width to 100%:

Code: 
<td width="517">

I also noticed you were using the "align" attribute on divs -- I've never used this but I'm surprised that's working at all. You'd be better assigning it a class and then defining that class in the style sheet. If you want to work with embedded styles, try this instead:

Code: 
<div style="text-align: justify;">Stuff goes here</div>

EDIT: I forgot to mention that to center content, I will usually give the container a center alignment and the contents an auto margin. This is an example with styles included for simplicity:

Code: 
<div class="container" style="width: 500px; text-align: center;">
	<div class="content" style="width: 250px; margin: 0 auto;">Centered</div>
</div>
 
Thanks to all who replied, but JPWilson's code and comments on width fixed it! Sweet!

I'll look over the other code boxes. Once again, the help is much appreciated!
 
You must log in or register to reply here.
Back
Top