firefox and internet explorer problems

Martin_Man

Martin_Man

Martin_Man

Associate
Joined
2 Jun 2004
Posts
754
Location
Space
i can't match the css style in Firefox and internet explorer. if you click here in both browsers you will see what i mean. how do i fix this problem?

here is my css code... what do i need to put right?

Code: 
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #262626;
}

A:visited  {color: #FFFFFF; text-decoration: none}
A:link  {color: #FFFFFF; text-decoration: none}
A:active  {color: #FFFFFF; text-decoration: none}
A:hover   {color: gray; text-decoration: none}

img.video {
	border: thin dashed #FFFFFF;
}

/* Banner Top and Bottom Page*/

#banner {
	margin-bottom: 15px;
	padding: 0;
	width: 468px;
	height: 120px;
	background-image: url(images/banner.jpg);
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
	background-position: top;
}

#bottom {
	margin: 0 auto;
	margin-bottom: 15px;
	padding: 0;
	width: 468px;
	height: 30px;
	background-image: url(images/bottom.jpg);
}

/* Content stuff */

#content {
	margin-bottom: 15px  auto;
	padding: 0;
	width: 700px;
	margin-top: 0  auto;
	overflow: hidden;
}

#text {
	width: 350px;
	height: 200px;
	text-align: left;
	float: left;

}

#image {
	width: 350px;
	height: 200px;
	vertical-align: middle;
	float: right;
	text-align: center;

}

#center {
	margin-bottom: 15px  auto;
	padding: 0;
	width: 700px;
	margin-top: 0  auto;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	text-align: center;
}

/* News Content*/

p.news {
	letter-spacing: 2px;
	font-size: 9px;
	color: #FFFFFF;
	background-position: center;
	text-align: left;
	display: inline;
}

p.date {
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	color: #864DFD;
}

h4 {
	letter-spacing: 2px;
	font-size: 12px;
	color: #FFFFFF;
	background-position: left;
	text-align: center;
	display: inline;
}

h5 {
	letter-spacing: 2px;
	font-size: 12px;
	color: #864DFD;
	background-position: left;
	text-align: center;
	display: inline;
}

#news2 {
	margin-bottom: 15px  auto;
	padding: 0;
	width: 468px;
	margin-top: 0  auto;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	text-align: left;
	background-color: #262626;
}



#news {
	margin-bottom: 15px  auto;
	padding: 0;
	width: 468px;
	margin-top: 0  auto;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	text-align: left;
	background-color: #313131;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: dashed;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: none;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}

#news3 {
	margin-bottom: 15px  auto;
	padding: 0;
	width: 468px;
	margin-top: 0  auto;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	text-align: right;
	background-color: #262626;
}
 
I don't know what it's doing, but you haven't specified an opening <html> tag or a doctype. That will cause errors between browsers.
 
Martin_Man said:
what do you mean by this?
Click to expand...

this is your html:

Code: 
<head>

<link href="style.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<!-- Banner Here -->
<div id="banner">
 <br /><br>
    <br>
    <br>
    <br>

    <h3><a href="home.php">ENTER</a></h3>


</div>
<!-- Banner ended -->
<!-- Contant Start -->
<div id="bottom"></div>
<!-- Content ended -->
</body>
</html>

this is what it should be:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<link href="style.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<!-- Banner Here -->
<div id="banner">
 <br /><br>
    <br>
    <br>
    <br>

    <h3><a href="home.php">ENTER</a></h3>


</div>
<!-- Banner ended -->
<!-- Contant Start -->
<div id="bottom"></div>
<!-- Content ended -->
</body>
</html>
 
so far so good i put this code in

Code: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<link href="style.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

and it works.

how comes this small change work?
 
omitting a doctype is one of the things that can throw browsers into quirks mode, where it interprets CSS in unexpected and sometimes annoying ways. Notably, margin: 0 auto doesn't work when IE6 is in quirks mode.
 
You must log in or register to reply here.
Back
Top Bottom