Hi, I have a problem that I have been working on for several days and would appreciate some help.
I have a website that shows up centered when viewing in IE at any resolution. However, when viewing the site in Google Chrome it is not centered, but rather aligned to the left of the screen. I would like it to be centered in Chrome as well.
Here is what I am currently doing, and I'm sure the problem is in here somewhere.
It would be much easier to help you if you enclosed the code in an "html" box when you post so that it gets formatted nicely here. It would also help if we could see all of your code. For example, what <!DOCTYPE> are you using?
You've got the 'width' attribute on the <table> tag set to "1003", but it's nested in the #container <div> whose CSS rules set the width at 900px. That should be resolved by matching the two settings, setting the <table> to 100%, or (best of all) removing all of those attributes from the <table> tag and do everything in the stylesheet.
03-19-2014, 06:21 AM
Height and width 100% will solved your issued
03-19-2014, 12:30 PM
Ok, thanks for the help. I changed the table width to 1003 in my style.css but that didn't change anything. Ditalgarden - are you saying to change the height and width in the syle.css to 100%? Thanks for all the help.
03-19-2014, 01:29 PM
cjkorf, I think you might have gotten confused with what rtrethewey was telling you. In terms of your CSS, he was suggesting that you define all of your style rules in your style.css file, not directly in the <table> tag itself. Secondly, your <table> should have a width of 100%, not 1003 pixels. There is a <div> outside of the table (#container) that has a width of 900 pixels. Thus it makes little sense for the table to have a width of 1003 pixels given the container is smaller.
Once you update that your last problem lies in your CSS for the #container <div>. You set the margin-left and margin-right properties with a value of '0 auto', which is invalid. If you are wanting to center a block element you should simply use:
margin: 0 auto;
03-19-2014, 03:40 PM
Thanks for all the help. I tried your suggestions but still not working. Not sure what is wrong.
03-19-2014, 08:13 PM
Would you mind posting your updated HTML and CSS here just so we can verify?
03-19-2014, 11:44 PM
For centering the web page we can use the div tag that align the webpage to center and set the height and width of the web page.....
03-20-2014, 09:54 AM
You can use <div align="center"> YOUR CONTENT </div>
03-20-2014, 12:16 PM
Ok, thanks for all the help. Now that I've made some changes, my webpage is centered when viewing in google chrome, but not in IE, where before it was the opposite. Still can't get it centered in both browsers.
Oh boy... Your HTML is pretty messy. You have 2 <body> tags as well as the <div id="container"> inside of your <head> tag (which is a no-no). I also see some use of the <font> tag, which is no longer supported in HTML5. Which, on a similar note I feel I should mention to Samphywii that the align attribute of the <div> element is also deprecated in HTML5.
Moving on, I also see a <link> tag that is in the <body> of the page. <link> tags should only be found in the <head> of a page. Frankly it's a bit hard to fix your centering problem because the HTML itself is malformed. You have several tags that are opened but never properly closed and vice versa. I don't want to seem rude here but I do think if you want your page to work properly in all browsers you're going to need to rebuild your HTML code properly.
Maybe someone here can help you reform your code. If anything I'll give it a look when I get home tonight.
At a minimum your current errors include having 2 <body> tags and having <link> tags within the body instead in the <head>. Lots of other errors, many of which can mess with your layout.
EDIT: Got distracted and ended up posting well after Sup3rkirby. But "Oh boy..." was also my reaction to the code. ;)
03-21-2014, 11:30 AM
Thanks for all the help guys. I know the code is pretty outdated. I use a very old program to create my site and I guess it's days are over. I will probably just move my site over to another program such as wordpress. Thanks again.