Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Css Problems with ie & ff / opera

Started by Mr. Jay, Mar 21 2007 12:54 AM

You cannot reply to this topic
Go to first unread post

2 replies to this topic

#1 Mr. Jay

Young Padawan

Members
81 posts

Posted 21 March 2007 - 12:54 AM

In FireFox & opera my css is a lil differen, but in ie its right

Pic of it in IE: http://img406.images.../7669/iexb8.jpg
Pic of it in FF or Opera: http://img406.images.../5461/ffpl4.jpg

Css Code

body {
	background-color: #009933;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	text-align: center;
	color: #000000;
}
#container {
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	background-color: #B0B0B0;
	margin: auto 0 auto;
	text-align: left;
	width: 800px;
	height: 100%;
	padding: 0px;
}
#header {
	border: 1px solid #000000;
	width: 752px;
	margin: 10px 0 0 25px;
	background-color: #898989;
	height: 117px;
	background-image: url(logo.jpg);
	background-repeat: no-repeat;
}
#guest {
	border: 1px solid #000000;
	width: 752px;
	background-color: #898989;
	margin: 10px 0 0 25px;
	padding: 0 5px 0 5px;
}
#guest p.pcen{
	text-align: center;
}
#guest{ 
	background: #898989;
	border: 1px solid #000000;
}
#guest p{
	background: transparent !important;
	border: 0 !important;
	font-size: 10px;
	font-weight: bold; 
	letter-spacing: 1px;
	margin: 0 !important;
	padding: 7px 0 7px 0; 
	text-align: right;
}
#guest p{
	font-weight: normal;
	letter-spacing: 0;
}
#navigation {
	height: 400px;
	border: 1px solid #000000;
	margin: 10px 0 0 25px;
	width: 150px;
	float: left;
	background-color: #898989;
}
#navigation-menu {
	height: 15px;
	border-bottom: 1px solid #000000;
	margin: 0;
	width: 150px;
	background-color: #009933;
	text-align: center;
}
#content {
	height: 400px;
	border: 1px solid #000000;
	width: 588px;
	margin: 10px 0 0 10px;
	float: left;
	background-color: #898989;
}
#content-menu {
	height: 15px;
	border-bottom: 1px solid #000000;
	margin: 0;
	width: 588px;
	background-color: #009933;
	text-align: center;
}
.end {
	clear: both;
}

Website Code

<html>
  <head>
	<title>test</title>
	<style type="text/css" media="screen" title="StyleSheet">@import "style.css";</style>
  </head>
  <body>
	<div id="container">
	  <div id="header"></div>
	  <div id="guest">
		<p class="pcen"><b>Welcome Guest</b> ( Log In | Register )</p>
	  </div>
	  <div id="navigation">
		<div id="navigation-menu">
		  .: Navigation :. 
		</div>
	  </div>
	  <div id="content">
		<div id="content-menu">
		  .: Content :.
		</div>
	  </div>
	<div class="end"></div>
	</div>
  </body>
</html>

Thanks, Jon

Edited by Jonpopnycorn, 21 March 2007 - 12:57 AM.

Back to top

#2 Brandonador

Young Padawan

Members
238 posts

Gender:Male
Location:Michigan
Interests:I really love computers. Especially the internet, and discovering new people's ideas, and designs. Love to look at different layouts and coded designs that people come up with. And Flickr, one of my favorite sites...

Posted 21 March 2007 - 05:52 PM

I would suggest try using percents instead of pixels, as Mozilla Firefox will definatly support this too, as well as of course Opera and IE I believe, pretty sure. But to use percents I would suggest doing something like this to all of your CSS:

#header {
	border: 1px solid #000000;
	width: 752px; //Try using percents here. Such as say.. 45%.  (You can change it and play around with it if needed)
	margin: 10px 0 0 25px;
	background-color: #898989;
	height: 117px; //Try using percents here, also.
	background-image: url(logo.jpg);
	background-repeat: no-repeat;
}

And I believe this should fix your problem possibly. But am not sure, so don't kill me. :flowers:

But if it does not work, try validating your css:

http://jigsaw.w3.org/css-validator/

This should help you find problems with your CSS code, like possibly the percents and maybe even other things. Hope I have helped in some way! :tiphat: