Jump to content

Arghhh, i don't know wat to do!!


bujutsu
 Share

Recommended Posts

ok, here's the problem: i made a site without tables, and it works just fine in firefox and netscape. but when i tried to use it in opera and ie, it screws up. in opera, the div width changes and theres some hole around 5px above. in ie, the divs wont go to the center, and it displace some picture. could u tell me what's goin on?here's the html coding

<html><head><title>::Stuphed Room::</title><link rel="stylesheet" href="style.css" type="text/css"></head><body><div id=website><div id=container><div id=header> </div><div id=welcome> </div>	<div id=left>	<div class=link id=box>  <div id=head>  <h1> Link</h1>  </div>  <p><a href=www.a.c>Link here</a></p>  <div id=foot> </div>	</div>	<div class=link id=box>  <div id=head>  <h1> Link</h1>  </div>  <p><a href=www.a.c>Link here</a></p>  <div id=foot> </div>	</div>	</div>	<div id=right>	<h1>CONTENT</h1>	<div class=content id=box>  <div id=head>   </div>  	<div class=ava> </div>  	<h2>Some News Title Here</h2>  	<h3>Some day and date</h3>  	<h4>Posted By someone</h4>  	<p>Content here</p>  <div id=foot> </div>	</div>	<div class=content id=box>  <div id=head>   </div>  	<div class=ava> </div>  	<h2>Some News Title Here</h2>  	<h3>Some day and date</h3>  	<h4>Posted by someone</h4>  	<p>Content here</p>  <div id=foot> </div>	</div>	</div></div></div></body></html>

here's the css

body, html {	font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;	background: #fff;	height:100%;	margin-top:0px;	}h1 {	font-weight:bold;	font-size:16px;	letter-spacing:10px;	margin:0px;	margin-bottom:5px;	color:#767777;	filter:progid:dximagetransform.microsoft.alpha (opacity=70);	-moz-opacity:0.7;	}h2, h3 {	font-weight:bold;	font-size:14px;	margin:0px;	margin-bottom:5px;	color:#767777;	}h3 {	font-size:12px;	color:#767777;	}h4 {	font-weight:normal;	font-style:italic;	font-size:10px;	margin:0px;	margin-bottom:15px;	color:#767777;	}p {	padding: 0px 8px 0px 8px;	color:#8a8a8a;	}#container {	margin: 0px auto 0px;	padding: 0px;	width: 740px;	height:100%;	position:relative;	}#website {	background:url(bg.gif) repeat-y #fff;	width:760px;	margin:0px auto 0px;	height:100%;	position:relative;	}#header {	background: url(banner.gif) no-repeat center;	height: 155px;	width: 740px;	}#welcome {	width:740px;	height:45px;	background: #fff url(welcome.gif) no-repeat;	}#right {	width: 523px;	float:right;	padding:0px 16px 0px 0px;	}#left {	width: 163px;	float:left;	padding: 0px 0px 0px 10px;	}#box {	border: 1px solid #98adb6;	padding:0px;	}#padding {	padding: 4px 8px;	}#head {	background: #fff url(head.gif) repeat-x;	height: 15px;	}#foot {	background: #fff repeat-x url(foot.gif);	height:20px;	}.content {	text-align:justify;	margin-bottom:10px;	}.link {	text-align:center;	background:#fff;	margin-bottom: 10px;	}.ava {	border:1px dashed #bfc6cc;	background:url(avatar.jpg) no-repeat;	height:48px;	width:48px;	float:left;	margin-right:18px;	margin-top:4px;	position:relative;	left:8px;	}a:link, a:visited, a:active{	text-decoration: none;	color: #4c7ca9;	font-weight:bold;	}a:hover {	text-decoration: underline;	font-weight:bold;	color: #ed9906;	}.fade img {	filter: progid: dximagetransform.microsoft.alpha (opacity=50);	-moz-opacity: 0.5;	{.fade:hover img {	filter: progid: dximagetransform.microsoft.alpha (opacity=100);	-moz-opacity: 1;	}

thx for advance!--------------------Changed

 to [codebox] to save us the trouble of an awful amount of scrolling...[/i]
Edited by Jonas
Link to comment
Share on other sites

well i think its the classes thats not supported in Opera in your code. When i make classes on my page and i check with the inbuild help to check browser supports in Macromedia Dreamweaver MX.Its about 80% of my errors are involved with opera and it dont like the following tags either.scriptsCSSclassstylesIframesMetathe browser help goes up to Opera 6.0 but just a few errors are displayed over 3.0. :)

Link to comment
Share on other sites

well i checked you code in MX (not the css file codes) andID/classes anything related to css are not supported in Opera 3.0 and lower what i know. You might need to upgrade opera if you got an old one. but then again in the linking to the css file ( type="text/css" ) are not supported in Opera 6.0 and lower :) if you want to center in IE use text-align: center;think someone with higher experiance in this might give better answer

Link to comment
Share on other sites

nope, i hav the latest opera version. the css works just fine in my opera, its just tat theres some space on the very top of the page. which is about 5px. tat thing happened in firefox too, but after i inserted height:100% to the web container, the space dissapeared. anybody hav some experience about case like this? thx for the advice tho mimika ^^.

Link to comment
Share on other sites

sory for double posting. after i followed mimika's advice which is to use text-align:center, it works and centered my layout in ie. but now i have 2 problems. the first one is tat in ie, at the very bottom of the layout, there's a space about 10px high showed up and tats irritating me. the second is in opera, there r 2 spaces appeared on above and bottom of the layout, the height is approximately 5px each. thx in advance!

Link to comment
Share on other sites

mmh dunno if this works but put in these codes

margin: 0px;	margin-top: 0px;

it should work in IE. Opera I dunno

Link to comment
Share on other sites

IE doesn't render the W3C box modal correctly, but FF does. The problems you are having is not your code... its just that FF is rendering the HTML and CSS the way it was intended and IE is Bill Gatesing you.Just google IE box modal fixes, there are a ton of tutorials related to it... espessially when talking about liquid, tableless, div based sites using css.as far as your centering problem, use the negative margin theory:set the left of an element at 50%set that elements left margin at its negative halfexample:#container {position:absolute;width:500px;left:50%;margin-left:-250px;}that center the mess out of anything. =) enjoy

Link to comment
Share on other sites

  • 1 month later...

grrr..... sory to bother u guys again, but this is another problem i came to when i use ie. behind the .png pictures, its not transparent, but theres some kind of green background. and it looks like in ie the size of my layout shrinks A LOT. maybe something wrong with my code?

body, html {	font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;	background: transparent;	height:100%;	margin:0;	padding:0;	margin-top:0px;	text-align:center;	min-height:100%;	}a {	text-decoration: none;	color: #0f7ccf;	}a:hover {	text-decoration: none;	color: #ed9906;	}h2, h3 {	font-weight:bold;	font-size:14px;	margin-top:5px;	margin-bottom:5px;	color:#708288;	}h3 {	font-size:12px;	}h4 {	font-weight:normal;	font-style:italic;	font-size:10px;	margin:0px;	margin-bottom:15px;	color:#708288;	}h1 {	font-weight:normal;	font-size:10px;	margin:0px;	color:#708288;	}p {	padding: 0px 8px 0px 8px;	color:#708288;	background:white;	font: 10px;	}#container {	margin: 0px auto 0px;	padding: 0px;	width: 740px;	}#website {	background:url(bg.png) repeat-y transparent;	width:760px;	margin:auto;	}#header {	background: url(banner.gif) no-repeat center;	height: 155px;	width: 735px;	margin:0px;	margin: 0px 2px 20px 3px;	padding-top:5px;	border-top:1px solid #98adb6;	border-bottom:1px solid #98adb6;	}#right {	width: 523px;	float:right;	margin-right:15px;	}#left {	width: 163px;	float:left;	margin-left:5px;	padding: 0px 12px 0px 10px;	border-right:1px solid #bdc8d1;	}#box {	border: 1px solid #98adb6;	padding:0px;	background:transparent;	margin-bottom:2px;	}#head, #head2 {	background: #fff url(head.gif);	height: 15px;	}#head2 {	background: url(head2.gif);	}#foot {	background: #fff repeat-x url(foot.gif);	height:20px;	}.content {	text-align:justify;	margin-bottom:10px;	}.link {	text-align:center;	background:#fff;	}.avains {	border:1px solid #bfc6cc;	height: 60px;	width:60px;	float:left;	margin-right:18px;	margin-top:4px;	position:relative;	left:8px;	}.ava {	border:1px solid #bfc6cc;	background:url(avatar.jpg) no-repeat;	height:48px;	width:48px;	margin: 5px;	padding:0px;	}.nav ul {	width:87%;	margin:0;	padding:0;	left:10px;	position:relative;	}.nav li, li:hover {	list-style-image: url(ul1.gif);	list-style-position:inside;	border-bottom:1px #829599 dashed;	text-decoration:none;	color: #4c7ca9;	text-align:left;	}.nav li:hover {	list-style-image: url(ul2.gif);	}.nav a {	color:#0f7ccf;	text-decoration:none;	}.nav a:hover {	color: #ed9906;	}#copy {	clear:both;	width: 741px;	background: transparent url(copy.gif);	text-align:center;	}.roll a {	filter: progid: dximagetransform.microsoft.alpha (opacity=50);	-moz-opacity: 0.5;	}.roll a:hover {	filter: progid: dximagetransform.microsoft.alpha (opacity=100);	-moz-opacity: 1;	}	

<html><head><title>Sanmar Is Over</title><link rel="stylesheet" href="style.css" type="text/css"></head><body><div id=website><div id=container><div id=header></div>	<div id=left>  <div class=link id=box>  	<div id=head>    <img src=nav.png>  	</div>  </div>  <div class=link id=box>  	<div id=head2></div>    	<div class=nav>    	<ul>    	<li><a href=#>Home</a></li>    	<li><a href=#>Articles</a></li>    	<li><a href=#>Staff</a></li>    	<li><a href=#>Forum</a></li>    	</ul>    	</div>	  	<div id=foot></div>  </div>  <br>		<div class=link id=box>  <div id=head>  	<img src=link.png>  </div>	</div>	<div class=link id=box>  <div id=head2></div>  	<p><a href=www.http://www.mozilla.com/firefox/><img src=get.gif border=0></a></p>  <div id=foot></div>	</div>  <br>	<div class=link id=box>  <div id=head>  	<img src=link.png>  </div>	</div>	<div class=link id=box>  <div id=head2></div>  	<p><img src=linktous.gif></p>  <div id=foot></div>	</div>  <br>	</div>	<div id=right>	<div class=content id=box>  <div id=head>  </div>	</div>	<div class=content id=box>  <div id=head2></div>    <div class=avains><div class=ava></div></div>        	<h2>Congratz!</h2>    	<h3>Thursday, 8 December 2005</h3>    	<h4>Posted by Bujutsu</h4>    	<p>Content here <a href=dl.html>dladhafsl</a> adfa sdfasf sadfa sdfsa fasd fasdf asdfasdf asdf asdfas df asdf asdf sdf sadf asdf sdf asdf sad fasf sadf asdf asdf asdfasd fasdfa sdfasdf asdf asdfsadf sadf asdf sdf asdfsadf asdf sdfasdf sdf asdfasdf asdfasdf sadf</p>  <div id=foot></div>	</div>	</div>	<div id=copy>  <h1>    All content on this site is the property of and copyright their respective owners.<br>    Web coding & design by <a href="mailto:blockword@gmail.com">Bujutsu</a>  </h1>	</div></div></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...