17 replies [Last post]
Buttercup2008
Offline
newbie
Last seen: 12 years 28 weeks ago
Joined: 2008-10-23
Posts: 7
Points: 0

Hello,

I am working on a site and in Firefox it looks perfect but when I test it in IE the content block instead of being centered it is left aligned. I have knowledge in CSS but I don't have much experience with real life IE bug issues and not sure where to start since I don't want to mess it up in FireFox as well.

http://65.18.171.161/mcproduct.html

I did noticed though if you resize your browser in FireFox the same issue does show up - but I am at a lost at what to do.

Any help would be really appreciated!! Smile

Alison

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

You could try.....

Instead of edditing your CSS file just add to the div that has the ID "content":
<div id="content" align="center">
This should fix your error.

Buttercup2008
Offline
newbie
Last seen: 12 years 28 weeks ago
Joined: 2008-10-23
Posts: 7
Points: 0

Tried it but still has the same problem

Hi Josh,

I tried that but it still looks the same.

Alison

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok.....

I will copy all of your codes and try them on all the browsers (Well known ones anyway) and try and get it to align in the center. I could get them all from your url but it would be easier if you could give me a link to your stylesheets so as I can copy them better.

Buttercup2008
Offline
newbie
Last seen: 12 years 28 weeks ago
Joined: 2008-10-23
Posts: 7
Points: 0

here they are

Hi Josh,

Below is the link the CSS styles being used.
http://65.18.171.161/css/frame.css

Thank you for helping me out with this problem. I really appreciate it.

Alison

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

No problem

Thats fine I'm here to help.

I will try and get it working now.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok I think the fix is to.....

I think you have to change the line:

<div id="content-container">

to
<div id="content-container" align="center">

This worked for IE7 and Opera i haven't as of yet tried firefox I will give that a try now.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok and this works....

Ok and I've just checked on Firefox and it works. Bearing in mind I am only doing this localy and I can hardly see the banner at the top so try it although it should go without a hitch.

Buttercup2008
Offline
newbie
Last seen: 12 years 28 weeks ago
Joined: 2008-10-23
Posts: 7
Points: 0

Tried that...

Hi Josh,

I just changed the code and uploaded it and it looks much better but still in IE the content box is indented less compared FireFox. It still looks perfect in FireFox.

http://65.18.171.161/mcproduct.html

Alison

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

I don't see it....

Sorry I don't see what you mean they all look the same to me on FF, Opera and IE7.
What exactly do you mean?

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok sorry...

Sorry I had my firefox zoomed in that was indented too. Although you do realise that it is also indented on Opera, I havent checked Safari yet.

I will see what I can do.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Take the align attribute

Take the align attribute out; it's deprecated and shouldn't be used anymore. Auto left and right margins are already in place which is what is required for centering.

Your doctype is incorrect which means IE is in quirks mode which is the likely source of your problem.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Buttercup2008
Offline
newbie
Last seen: 12 years 28 weeks ago
Joined: 2008-10-23
Posts: 7
Points: 0

What doctype should I use

Hi Tyssen,

Thanks for your post. I tried a couple of different doctype to no avail. In FireFox it always look good (except when you resized the browser) and in IE it looks bad. Do you know which one might solve my problem. For this page I removed the align="center" attribute.

http://65.18.171.161/mcblank.html

Thank you,
Alison

Triumph (not verified)
Anonymous's picture
Guru

<!-- VAR SecurePage IS NOT

<!-- VAR SecurePage IS NOT DEFINED -->
 
 
<!-- VAR SECUREPAGE IS NOT DEFINED -->
 
<!-- VAR SECUREPAGE IS NOT DEFINED -->
 
 
<!-- VAR SECUREPAGE IS NOT DEFINED -->
Get rid of the garbage before the doctype. It is causing IE to render in quirks mode whether the doctype is correct or not.

Buttercup2008
Offline
newbie
Last seen: 12 years 28 weeks ago
Joined: 2008-10-23
Posts: 7
Points: 0

I removed that but....

Hi Triumph,

I can't remove that garbage but I have moved it below the doctype - problem still remains the same. I know that isn't what is causing the problem because when I preview it locally on my computer and that code doesn't show up it still doesn't work.

Alison

Triumph (not verified)
Anonymous's picture
Guru

DOCTYPE

In regards to Tyssen's post, your doctype is still wrong. All these things are putting IE into quirks mode. The markup is also invalid. Please validate both the markup and the CSS to correct the errors.

Buttercup2008
Offline
newbie
Last seen: 12 years 28 weeks ago
Joined: 2008-10-23
Posts: 7
Points: 0

How would I do that

Hi Triumph,

What are the next steps I'd have to do to do that?

Thank you,
Alison

Triumph (not verified)
Anonymous's picture
Guru

Post above was being edited

Post above was being edited as you replied.