3 replies to this topic

[Nightscream]

Hi i got a problem in ie but looks fine in FF
i can't find the problem.

I added the html file cause it was big


here is the css

/* CSS Document */
body {
	padding: 0;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	background: #B43C3E url(images/background.gif) repeat-x top;
}
.leftbutton a {
	color: #;
	text-decoration: none;
}
.leftbutton a:hover {
	color: #D72D2E;
}
.rightnav a {
	color: #;
	text-decoration: none;
}
.rightnav a:hover {
	color: #DBFF77;
}
.release a {
	color: #;
	text-decoration: none;
}
.release a:hover {
	color: #DBFF77;
}

#main {
	width: 778px;
	text-align: left;
	border: 1px solid #;
	background-color: #;
}

/* LEFT NAVIGATION */
#leftnav {
	width: 173px;
	background-image: url(images/nav_foot.gif);
	background-repeat: repeat-y;
	background-position: bottom;
}
.leftbutton {
	padding: 1px 0 0 10px;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 11px;
	color: #;
	display: block;
	width: 173px;
	height: 20px;
}
#leftnav ul {
	width: 173px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#leftnav li {
	list-style: none;
	width: 173px;
	height: 20px;
	display: block;
	background-image: url(images/nav_but.gif);
	overflow: hidden;
}

/* RELEASES */
#release {
	background-image: url(images/releases_back.gif);
	background-repeat: no-repeat;
	height: 140px;
	margin: 0;
	padding: 0;
	margin: 0 0 1px 1px;
}
.package {
	width: 188px;
	margin: 10px 0 0 10px;
	overflow: hidden;
}
#release ul {
	width: 188px;
	height: 102px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-image: url(images/latest_back.gif);
}
.release {
	padding: 5px 0 0 10px;
	text-align: left;
	width: 188px;
	font-family: Arial, Tahoma, Helvetica, sans-serif;
	font-size: 11px;
	color: #;	
}
/* CONTENT */
#content {
	width: 476px;
	margin: 0 1px 0 1px;
}
.content {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	padding: 4px 10px 4px 10px;
}
.advertise {
	width: 468px;
	height: 60px;
	padding: 4px 4px 4px 4px;
}
/* RIGHT NAVIGATION */
#right_nav {
	width: 127px;
	overflow: visible;
}
#right_nav ul {
	list-style-type: none;
	width: 127px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
#right_nav li {
	list-style: none;
	display: block;
	width: 127px;
	height: 20px;
	background-image: url(images/navr_but.gif);
	overflow: hidden;

}
.head {
	height: 23px;
	background-image: url(images/navr_title.gif);
	background-repeat: no-repeat;
	margin: 0;
}
.top {
	color: #;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 0 0px 20px;
	display: block;
}
.rightnav {
	padding: 1px 0 0 10px;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 11px;
	display: block;
	width: 127px;
	height: 20px;
}
/* FOOTER */
#footer {
	background-image: url(images/footer.gif);
	width: 778px;
	height: 52px;
}
.footer_right {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #;
	font-weight: bold;
	text-decoration: none;
	padding: 4px 10px;
	text-align: right;
}
.footer_right  a {
	color: #;
	text-decoration: none;
}
.footer_right  a:hover {
	color: #D72D2E;
	text-decoration: none;
}
.footer_left {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #;
	font-weight: bold;
	text-decoration: none;
	padding: 4px 0 0 10px;
	text-align: left;
}
.footer_left  a {
	color: #;
	text-decoration: none;
}
.footer_left  a:hover {
	color: #D72D2E;
	text-decoration: none;
}
/* SPECIAL */
.dots {
	background-image: url(images/black_dot.gif);
	background-repeat: repeat-x;
	margin: 0px 4px 0px 4px;
	width: 468px;
	height: 1px;
}
input, textarea {
	background: none;
	border: #666666 1px solid;
	font-family: tahoma;
	font-size: 7pt;
	color: #;
}
button, submit {
	background: #666666;
	font-weight: bold;
	color: #;
	border: none;
	font-family: Arial;
	font-size: 11pt;
}
a img {
	border: 0px solid #666666;
}
a:hover img {
	border: 0px solid #000000;
}

Edited by Nightscream, 20 December 2006 - 07:55 PM.

[signature16]

Use this tool.

http://validator.w3.org/


Your HTML file has like a billion problems. Validate your CSS and that should fix the problem. If it doesn't come back.

[Nightscream]

i know
I just editted the file above, it's almost validated
only marquee & some javascript & php couldn't get trough

Edited by Nightscream, 20 December 2006 - 07:53 PM.

[uday]

I see that you're using padding all over the place. IE does not render padding (or the border-box model) anywhere close to properly, not even IE7 from what I can tell.

I don't know how you have content structured, but you may want to make a child element that uses margin. So, if you have:

#container {
padding: 10px 0 5px;
width:300px;
}

<div id="container">(content)</div>


You might want to change it to:

#container {
width:315px;
}
.content{
margin: 10px 0 5px;
}

<div id="container">
<div class="content">(content goes here)</div>
</div>

IE and Firefox will render the margin properly so you can have space between the edge of the block and your content and the defined width will keep everything the right size.