css fine in firefox, but distore totally in ie

xiaodao · 01-17-2008, 06:31 PM

my webpage is here

http://www.yanmin.net/help/index.html

this page is fine in firefox, but distore in IE, cannot center in the screen, cannot display properly, please help me if you free by right click and view source, all style sheet are there, if you can point out my mistake, i will be very appreciate

_Aerospace_Eng_ · 01-17-2008, 06:39 PM

This is partially your fault. You NEED a doctype or IE goes into quirks mode.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Add that to the top of your page. BTW there is also a WHOLE sticky about doctypes.

Excavator · 01-17-2008, 06:56 PM

Yes xiaodao, you need both a DocType and Character encoding.
You should make the beginning of your markup read like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body{
	background-color:#333;
	font-family:tahoma;
	font-size:12px;

Then you should run it through the validator. See my sig below.

One thing I noticed right off, you're using clear:both; a lot... it seems like maybe you want to clear your floats with it? In #main you have several floats that are not being wrapped by #main. Change that CSS to this:

Code:

#main{
	overflow: auto;
	width:745px;
	padding:0px;
	position:relative;
	margin:0 auto;
}

overflow:auto; is clearing your floats now. To see the difference (view it in FF), put a background color on #main and look at it with and without the overflow setting.

Overflow:auto; explained.

... one more thing, you may want to experiment with that character encoding. I have no experience with the language your using on your webpage.

xiaodao · 01-17-2008, 06:57 PM

thanks, very thank you