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.
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!!
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.
Tried it but still has the same problem
I tried that but it still looks the same.
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.
here they are
Below is the link the CSS styles being used.
Thank you for helping me out with this problem. I really appreciate it.
Thats fine I'm here to help.
I will try and get it working now.
Ok I think the fix is to.....
I think you have to change the line:
<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.
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.
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.
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?
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.
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.
What doctype should I use
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.
<!-- VAR SecurePage IS NOT
<!-- VAR SecurePage IS NOT DEFINED --> <!-- VAR SECUREPAGE IS NOT DEFINED --> <!-- VAR SECUREPAGE IS NOT DEFINED --> <!-- VAR SECUREPAGE IS NOT DEFINED -->
I removed that but....
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.
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.
How would I do that
What are the next steps I'd have to do to do that?
Post above was being edited
Post above was being edited as you replied.