Jump to content

FireFox browser compatible, others arn't

sinan92

By sinan92
in CSS

Recommended Posts

sinan92 Newbie

sinan92

Posted
Posted

Well this is what it is supposed to look like.Firefox:Firefox.pngAnd this is what it looks like at Internet explorer.Internet Explorer:InternetExplorer.pngSo how can I solve this?My HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"><html><header><link rel="stylesheet" type="text/css" href="style.css" /><title>Neurotic FlyFF</title></header><body><div id="top-banner"><img src="img/top-banner.png" /></div><div id="nav"><ul><li><a href="index.html">Home</a></li><li><a href="downloads.html">Downloads</a></li><li><a href="chat.html">Chat</a></li><li><a href="#forums">Forums</a></li><li><a href="donate.html">Donate</a></li><li><a href="support.html">Support</a></li></ul></div><div id="banner"><img src="img/banner.jpg" width="1000" height="146" border="0" /></div><div id="wrapper"><div id="left"><div id="upper-left-box-header"><p>TEST</p></div><div id="upper-left-box"><p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p></div><div id="bottom-left-box-header"><p>TEST</p></div><div id="bottom-left-box"><p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p></div></div><div id="right"><div id="upper-right-box-header"><p>TEST</p></div><div id="upper-right-box"><p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p></div><div id="bottom-right-box-header"><p>TEST</p></div><div id="bottom-right-box"><p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p></div></div><div id="center"><div id="center-top"><p>News</p><hr /></div><div id="center-index">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div></div></div><div id="footer"><p>Coding by Sinan & Design by Gabriel</p></div></body></html>

My CSS:

body {	z-index: 0; 	background: #000000 url(img/background.jpg) no-repeat center top;	padding:0;	margin-top:210px;	margin-left:auto;	margin-right:auto;	font:80%/180% Verdana, Geneva, sans-serif;	width:1000px;	height:1000px;	}	/*This is the banner at the top*/#top-banner {	margin-top:-200px;	margin-bottom:-13px;	padding:0;	}/*This is the navigation*/#nav {	}	#nav ul {	list-style-type:none;	padding:10px;	border-image:url(img/nav.jpg) 3 5 0.1 5;	-moz-border-image:url(img/nav.jpg) 3 5 0.1 5;	-webkit-border-image:url(img/nav.jpg) 3 5 0.1 5;	}#nav ul li {	display:inline-block;	width:140px;	height:41px;	text-align:center;	line-height:40px;	}#nav ul li a {	margin-left:65px;	display:block;	text-decoration:none;	color:#CCCCCC;		height:41px;	width:83px;	}	#nav ul li a:hover {	background:url(img/nav-hover.jpg) no-repeat;	text-align:center;	height:41px;	width:83px;	}	/*This is the banner*/#banner {	margin-top:-20px;	margin-bottom:15px;	padding:0;	}	#wrapper {	margin-top:-15px;	background:#0e0f07 url(img/logo.png) no-repeat center;	width:1000px;	color:white;	height:500px;	}	/*This is the left side of the boxes.*/#left {	float:left;	overflow:hidden;	}#upper-left-box-header {	width:220px;	height:35px;	border-image:url(img/box-header.jpg) 3 5 5 5;	-moz-border-image:url(img/box-header.jpg) 3 5 5 5;	-webkit-border-image:url(img/box-header.jpg) 3 5 5 5;	}	#upper-left-box-header p {	margin-top:6px;	font-family:Comic Sans MS, Comic Sans MS5, cursive;	font-size:17px;	text-align:center;	}	#upper-left-box {	width:220px;	height:155px;	font-size:13px;	border-image:url(img/box.jpg) 3 5 5 5;	-moz-border-image:url(img/box.jpg) 3 5 5 5;	-webkit-border-image:url(img/box.jpg) 3 5 5 5;	}	#upper-left-box p {	margin:15px;	}	#bottom-left-box-header {	width:220px;	height:35px;	border-image:url(img/box-header.jpg) 3 5 5 5;	-moz-border-image:url(img/box-header.jpg) 3 5 5 5;	-webkit-border-image:url(img/box-header.jpg) 3 5 5 5;	}	#bottom-left-box-header p {	margin-top:6px;	font-family:Comic Sans MS, Comic Sans MS5, cursive;	font-size:17px;	text-align:center;	}	#bottom-left-box {	width:220px;	height:250px;	font-size:13px;	border-image:url(img/lower-box.jpg) 3 5 5 5;	-moz-border-image:url(img/lower-box.jpg) 3 5 5 5;	-webkit-border-image:url(img/lower-box.jpg) 3 5 5 5;	}	#bottom-left-box p {	margin:15px;	}	/*This is the center*/#center {	overflow:hidden;	height:500px;	border-image:url(img/midde-box.jpg) 3 5 5 5;	-moz-border-image:url(img/middle-box.jpg) 3 5 5 5;	-webkit-border-image:url(middle-box.jpg) 3 5 5 5;	}	#center-top {	margin-top:80px;	margin-left:20px;	margin-right:220px;	font-family:Comic Sans MS, Comic Sans MS5, cursive;	text-align:center;	width:500px;	font-size:20px;	}		#center-index {	margin-left:20px;	margin-right:220px;	text-align:center;	width:500px;	}	#chat {	margin-left:0;	margin-right:0;	text-align:center;	width:500px;	}/*This is the right side of the boxes*/#right {	overflow:hidden;	float:right;	}	#upper-right-box-header {	width:220px;	height:35px;	border-image:url(img/box-header.jpg) 3 5 5 5;	-moz-border-image:url(img/box-header.jpg) 3 5 5 5;	-webkit-border-image:url(img/box-header.jpg) 3 5 5 5;	}	#upper-right-box-header p {	margin-top:6px;	font-family:Comic Sans MS, Comic Sans MS5, cursive;	font-size:17px;	text-align:center;	}	#upper-right-box {	width:220px;	height:155px;	font-size:13px;	border-image:url(img/box.jpg) 3 5 5 5;	-moz-border-image:url(img/box.jpg) 3 5 5 5;	-webkit-border-image:url(img/box.jpg) 3 5 5 5;	}	#upper-right-box p {	margin:15px;	}	#bottom-right-box-header {	width:220px;	height:35px;	border-image:url(img/box-header.jpg) 3 5 5 5;	-moz-border-image:url(img/box-header.jpg) 3 5 5 5;	-webkit-border-image:url(img/box-header.jpg) 3 5 5 5;	}	#bottom-right-box-header p {	margin-top:6px;	font-family:Comic Sans MS, Comic Sans MS5, cursive;	font-size:17px;	text-align:center;	}	#bottom-right-box {	width:220px;	height:250px;	font-size:13px;	border-image:url(img/lower-box.jpg) 3 5 5 5;	-moz-border-image:url(img/lower-box.jpg) 3 5 5 5;	-webkit-border-image:url(img/lower-box-header.jpg) 3 5 5 5;	}	#bottom-right-box p {	margin:15px;	}	/*This is the footer*/#footer {	text-align:center;	color:gray;	font:100%/200% Verdana, Geneva, sans-serif;	border-image:url(img/footer.jpg) 3 5 5 5;	-moz-border-image:url(img/footer.jpg) 3 5 5 5;	-webkit-border-image:url(img/footer.jpg) 3 5 5 5;	}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

You have to remember it has taken MS several years to get present IE browser, to ALMOST achieve the same result what other browsers display, so they are several years behind in making css3 features fully supported for current IE browser.This is the problem you are experiencing, border-image feature WHAT? never heard of it! is what IE is saying.google for 'ie-css3.htc' it will allow many css3 feature to run in IE, but has limitations, for example - you can have round borders on all edges only, you can't pick and choose where to place a rounded corner, like you can with other browsers.

Link to comment
Share on other sites
sinan92 Newbie

sinan92

Posted
  • Author
Posted

Is there another way to do it so it will work in older IE versions too?These websites did manage to do it somehow:http://flyff.mystical-network.com/Andhttp://www.eclipseflyff.com/Is it possible to do it using background-image?And somehow on older versions of IE it doesnt show the navigation links inlineIt is positioned in a vertical way instead of horizontalAlso in Google Chrome for example it doesnt show the navigation image.It does show the other border images though.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Using the original method of using background-image will work in all browsers , but IE6 will show a pale blue background instead of transparent background if transparency is used in the png image.IT will involve more thought and work though in bringing this all together, to produce the result you want to achieve.

Link to comment
Share on other sites
sinan92 Newbie

sinan92

Posted
  • Author
Posted
Using the original method of using background-image will work in all browsers , but IE6 will show a pale blue background instead of transparent background if transparency is used in the png image.IT will involve more thought and work though in bringing this all together, to produce the result you want to achieve.
background-image worked fine for the navigation. But it doesnt work for example the header boxes. Weberror.pngIf I use margin, it shows it wrong in firefox. Also when I use margin on <p> so like #upper-left-box-header p {} it moves the whole background with it.
#upper-left-box-header {	width:220px;	height:35px;	margin:0;	padding:0;	background-image:url(img/box-header.jpg);	border-image:url(img/box-header.jpg) 3 5 5 5;	-moz-border-image:url(img/box-header.jpg) 3 5 5 5;	-webkit-border-image:url(img/box-header.jpg) 3 5 5 5;	}	#upper-left-box-header p {	margin-top:6px;	font-family:Comic Sans MS, Comic Sans MS5, cursive;	font-size:17px;	text-align:center;	}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

This looks like a collapsing margin issue, because the margin of the paragraph element is larger than the outer container, the margin is transfered through to the parent container. It is usually fixed by assigning overflow: hidden; or 1px padding, or a border along the top of the parent container itself.

Link to comment
Share on other sites
sinan92 Newbie

sinan92

Posted
  • Author
Posted
This looks like a collapsing margin issue, because the margin of the paragraph element is larger than the outer container, the margin is transfered through to the parent container. It is usually fixed by assigning overflow: hidden; or 1px padding, or a border along the top of the parent container itself.
padding:1px; worked I am now trying to finish it.Hopefully I wont face other problems lol.Thanks a lot dsonesuk.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...