July 2, 201016 yr Hi experts, I hope someone can advise me how do I make IE display my website the same look (display at the center) of the page just like firefox. Currently, IE would just shift everything to the left......no matter how I change the CSS code, it will just do that.......hope someone can advise me how to make it at the center just like firefox....Many thanks.
July 2, 201016 yr Make sure that you have a correct doctype as the first item in your html page code from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html You must include the link to w3.org in the doctype. either HTML 4.01 Strict or XHTML 1.0 Strict according to how you have coded your page. Use transitional doctypes if you have a problem validating with Strict. Use this validator to check for errors:- http://validator.w3.org/ To center in any browser window width it's usual to create a div wrapper containing all the page code. The wrapper needs a width, margin: auto (and position: relative if there are position: absolute divs in the code):- #wrap { position: relative; width: ???px; margin: auto; } <body> <div id="wrap"> All page code </div> </body>
July 4, 201016 yr Author Make sure that you have a correct doctype as the first item in your html page code from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html You must include the link to w3.org in the doctype. either HTML 4.01 Strict or XHTML 1.0 Strict according to how you have coded your page. Use transitional doctypes if you have a problem validating with Strict. Use this validator to check for errors:- http://validator.w3.org/ To center in any browser window width it's usual to create a div wrapper containing all the page code. The wrapper needs a width, margin: auto (and position: relative if there are position: absolute divs in the code):- #wrap { position: relative; width: ???px; margin: auto; } <body> <div id="wrap"> All page code </div> </body> What do you mean by absolute divs ? Anyway, I tried out putting back the transitional doctype but it's just not working I think the problem is that I have 2 style sheets - copying here and there and mixing them together......resulting in IE not able to center my page... Could you kindly look at my style sheet at www.hi5tutors.com and advise me how to ? Many thanks....
July 4, 201016 yr You html page hasn't got a doctype and it hasn't got a html tag and it needs closing tags:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<link rel="stylesheet" type="text/css" href="tanstylesheet100704.css" media="screen,projection" /> you have a second link lower down--> <script src="function.js" type="text/javascript"></script> <head> <title>Best Tuition.............. ............ </body> </html> You have two links to the same stylesheet.css file so delete the first one (although it doesn't make any difference as they are both links to the same file). Your page now centers in my IE7. If you have position: absolute divs in your code, they will take top and left positions from the top left corner of the window and be fixed it those positions, but if you want to center the page content with a width and margin: auto like you have done, (which means a different position from the left side depending on the window width) then you want the position: absolute divs to move according to the window width. Giving the wrapper position: relative means that any position: absolute divs inside take their top and left positions from the top left corner of the position: relative div and will move with it in different window widths. You haven't got any position: absolute divs, so don't need to add position: relative to #wrapper style.
July 5, 201016 yr Author You html page hasn't got a doctype and it hasn't got a html tag and it needs closing tags:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<link rel="stylesheet" type="text/css" href="tanstylesheet100704.css" media="screen,projection" /> you have a second link lower down--> <script src="function.js" type="text/javascript"></script> <head> <title>Best Tuition.............. ............ </body> </html> You have two links to the same stylesheet.css file so delete the first one (although it doesn't make any difference as they are both links to the same file). Your page now centers in my IE7. Dear Wickham, You are truly good. It works perfectly ! Thank you so much. My next problem is that under my article page, the gray area doesn't fit nicely to the center page....I've been trying to adjust here and there but to no avail....could you point out to me what's the cause and the solution ? Hoping to hear from you soon. Thanks again.
Create an account or sign in to comment