Jump to content

Working Well In Ie But Error In Firefox


pcadv
 Share

Recommended Posts

Hi,I have designed a website using css and html. It works fine with IE but if it runs through Firefox, the horizontal menu height and content box shows error.style.css as in below:BODY{ margin: 0px; border: 0px; padding: 0px; text-align: center; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #6F7285; /* background-image: url('grayScienceRightBox.gif');*/ background-repeat: repeat;}H1{ position: relative; top: 0px; width: 100%; z-index: 1; font-size: 16px; margin: 0; padding: 0; }H2 { position: relative; top: 0px; width: 100%; padding: 0px; margin: 0px; FONT-SIZE: 14px; FONT-FAMILY: Times New Roman, Verdana, Arial, Helvetica, sans-serif;}H3{ float: left; top: 20px; width: 100%; FONT-SIZE: 11pt; text-align: center; FONT-FAMILY: Times New Roman, Verdana, Arial, Helvetica, sans-serif; }.contentwrapper{ text-align: center; margin-top: 17px; border-right: 15px solid white; position: relative; float: left; width: 100%; /* background-color: #C11B17; */} .rightside{ margin-left: 450px; margin-right: 15px; text-align: left;}.leftside{ float: left; width: 450px; background-color: white; font-size: 12px; text-align: justify; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}.small{ float: left; width:25%; FONT-SIZE: 11pt; line-height:150%; text-align: left; COLOR: #000000; FONT-FAMILY: Times New Roman, Verdana, Arial, Helvetica, sans-serif}#textsm{ position: relative; float: left; width: 100%; top: 25px; text-align: center; padding-bottom: 8px; border-bottom: 3px solid black;}#textbottom{ position: relative; width: 100%; top: 26px; padding-top: 7px; padding-left: 15px; FONT-SIZE: 10pt; color: #736F6E; FONT-FAMILY: Times New Roman, Verdana, Arial, Helvetica ; /* border-top: 1px solid black; */}#container{ top: 0px; position: relative; padding:0; margin:0; border:0; height:95%; background: white;}htm>body #container { zpadding-top: 0px; }.cen{ width: 700px; background-color: white; margin: 0 auto; /* This is the proper way to center an element */ text-align: left; /* corrects for IE hack */ position: relative; /* The container must be positioned in order to contain positioned elements */ padding: 0px ; height: 95%;}.indentmenu{text-align: center;height: 16px;font: bold 13px Arial;background: black url('indentbg3.gif') center center repeat-x;}.indentmenu ul{margin: 0px 5px 0px 0px;padding: 0;border: 1px solid #657383; /* #564c66; dark purple border*/border-width: 1px 0;line-height: 16px;}.indentmenu ul li{display: inline;}.indentmenu ul li a{color: white; /*text color*/padding: 5px 11px;margin: 0px -5px 0px 0px;height: 16px;text-decoration: none;border-left: 1px solid #657383; /* #564c66; dark purple divider between menu items*/}htm>body .indentmenu ul li a { padding: 6px 12px; /* This is a non-IE style */}.indentmenu ul li a:hover, .indentmenu ul li .current{color: white; /*text color of selected and active item*/padding-top: 6px; /*shift text down 1px for selected and active item*/padding-bottom: 4px; /*shift text down 1px for selected and active item*/background: black url('indentbg4.gif') center center repeat-x;}.indentmenu ul li .current{ cursor: default; }.indentmenu ul li a.last { border-right: 1px solid #657383; /*#564c66; */ }index.htm is as follows:<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><link rel="stylesheet" href="style.css" type="text/css"></head><body><div class="cen"><div class="leftside" style=" margin: 0px; padding-top: 30px; padding-left: 20px;"><img src="name1.jpg"></div><div class="rightside" style=" text-align: right;"><img src="logo_astar.jpg"></div><div id="container"><img style="border: 0; padding:0px; margin: 0px; width: 100%;" src="top_test1.jpg"><H2><div class="indentmenu"><ul><li><a style=" text-align: center;" class="current">Home</a></li><li ><a style="text-align: center;" href="research.html">Research</a></li><li ><a style="text-align: center;" href="resources.htm">Resources</a></li><li ><a style="text-align: center;" href="people.htm">People</a></li><li ><a style="text-align: center;" href="positions.htm">Openings</a></li><li ><a style="text-align: center;" href="contact.htm" class="last">Contact</a></li></ul></div></H2><div class="contentwrapper"><div class="leftside" style=" margin: 0px; padding-left: 19px; padding-right: 19px;">contents<br><br>Please check back for more information and updates. </div><div class="rightside">list will be here</div></div><div id="textsm"><img style=" text-align: center;" border="0" src="glogo.jpg"><img style=" text-align: center;" border="0" src="slogo.jpg"><img style=" text-align: center;" border="0" src="igo.jpg"></div><div id="textbottom">Copyright © 2008 gis </div></div></div></body></html>Unfortunately i cant give any link to the page as i dont have server alloted yet. It would be great if anyone can tell me what i may add to make my code compatible with firefox as well.thanks

Link to comment
Share on other sites

Hi,I have designed a website using css and html. It works fine with IE but if it runs through Firefox, the horizontal menu height and content box shows error.
You might want to put your code inside of code tags (see your menu choice) so it's not 2 miles long.The first thing you need to do is use a valid DOCTYPE. Your IE is depending on quirks mode right now and that isn't good. Once you put that in, then you can address making the page valid. This includes making your tags in lower case and adding the "alt" parameter to the image tags. You might want to add "title" to them as well. Save you some problems down the road.You can also check the css and find errors like this:FONT-FAMILY: Times New Roman, Verdana, Arial, Helvetica, sans-serif;The multi-named must be in quotes.Fix those and we can help you more.HTML Validator: http://validator.w3.org/CSS Validator: http://jigsaw.w3.org/css-validator/BTW, it looks like a good start. The only major logic error is using the <h2> tag. Think of your page as an outline. Use an <h1> to start it (and for SEO), <h2> for section heading and so on and so on. To get the styling you want for the indentmenu div, use styling on the <ul> and <li>.
Link to comment
Share on other sites

You might want to put your code inside of code tags (see your menu choice) so it's not 2 miles long.The first thing you need to do is use a valid DOCTYPE. Your IE is depending on quirks mode right now and that isn't good. Once you put that in, then you can address making the page valid. This includes making your tags in lower case and adding the "alt" parameter to the image tags. You might want to add "title" to them as well. Save you some problems down the road.You can also check the css and find errors like this:FONT-FAMILY: Times New Roman, Verdana, Arial, Helvetica, sans-serif;The multi-named must be in quotes.Fix those and we can help you more.HTML Validator: http://validator.w3.org/CSS Validator: http://jigsaw.w3.org/css-validator/BTW, it looks like a good start. The only major logic error is using the <h2> tag. Think of your page as an outline. Use an <h1> to start it (and for SEO), <h2> for section heading and so on and so on. To get the styling you want for the indentmenu div, use styling on the <ul> and <li>.
Hi,Thanks so much for your informative and very helpful response.I have validated both the css and the xhtml files, but still there remains some problem. The problem with contentwrapper has gone but the white background of the container div is not working in Firefox. Also in the menu bar of the horizontal menu list - the height of the background menu bar is somehow showing smaller than the menu items boxes in the Firefox .index file folows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title><link rel="stylesheet" href="style.css" type="text/css" /></head><body><div class="cen"><div class="leftside" style=" margin: 0px; padding-top: 30px; padding-left: 20px;"><img src="name1.jpg" alt="" /></div><div class="rightside" style=" text-align: right;"><img src="logo.jpg" alt="" /></div><div id="container"><img style="border: 0; padding:0px; margin: 0px; width: 100%;" src="top_test1.jpg" alt="" /><div class="indentmenu"><ul><li><a style=" text-align: center;" class="current">Home</a></li><li ><a style="text-align: center;" href="research.html">Research</a></li><li ><a style="text-align: center;" href="resources.htm">Resources</a></li><li ><a style="text-align: center;" href="people.htm">People</a></li><li ><a style="text-align: center;" href="positions.htm">Openings</a></li><li ><a style="text-align: center;" href="contact.htm" class="last">Contact</a></li></ul></div><div class="contentwrapper"><div class="leftside" style=" margin: 0px; padding-left: 19px; padding-right: 19px;">contents here<br /><br />Please check back for more information and updates. </div><div class="rightside">List vertical news</div></div><div id="textsm"><img style=" text-align: center;" src="slogo.jpg" alt="" /><img style=" text-align: center;" src="schlogo.jpg" alt="" /><img style=" text-align: center;" src="ilogo.jpg" alt="" /></div><div id="textbottom">Copyright © 2008 </div></div></div></body></html>

Css file follows:

 BODY{	margin: 0px; border: 0px; padding: 0px;	text-align: center; 	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 	BACKGROUND-COLOR: #6F7285; /* background-image: url('grayScienceRightBox.gif');*/	background-repeat: repeat;}H1{	position: relative;  top: 0px; width: 100%;  height: 20px;	z-index: 1;  font-size: 16px;  margin: 0; padding: 0; }H2 {	position: relative; top: 0px;  width: 100%; 	padding: 0px; margin: 0px; FONT-SIZE: 14px;  	FONT-FAMILY:  Times New Roman, Verdana, Arial, Helvetica, sans-serif;}H3{	position: relative;	float: left; top: 10px; width: 100%;	FONT-SIZE: 11pt; text-align: center; 	FONT-FAMILY: "Times New Roman, Verdana, Arial, Helvetica, sans-serif";  }H4 {	position: relative; top: 20px;  width: 100%; 	padding: 0px; margin: 0px; FONT-SIZE: 14px;  	FONT-FAMILY:  Times New Roman, Verdana, Arial, Helvetica, sans-serif;}.contentwrapper{	position: relative;	text-align: center;	margin-top: 10px;	margin-right: 15px; 	float: left;	background-color: #C11B17; } .rightside{	margin-left: 400px;	padding-left: 7px;	text-align: left;}.leftside{	float: left; width: 400px; background-color: white; 	font-size: 12px; text-align: justify; 	FONT-FAMILY: " Verdana, Times New Roman, Arial, Helvetica, sans-serif";}#textsm{	position: relative;	float: left;	width: 100%;	top: 15px;	text-align: center;	padding-bottom: 4px;	border-bottom: 2px solid black;}#textbottom{	position: relative;	float: left; 	margin-top: 24px;  	padding-top: 3px;	padding-left: 15px;	padding-bottom: 11px;	FONT-SIZE: 7pt;	color: #736F6E;	FONT-FAMILY: Verdana, Arial, Helvetica;}#container{	top: 0px;	position: relative;	padding:0;	margin:0;	border:0;	height: 100%;	background-color: white;}.cen{   	width: 700px;	background-color: white;	margin: 0 auto;  /* This is the proper way to center an element */	text-align: left;  /* corrects for IE hack */	position: relative;  /* The container must be positioned in order to contain positioned elements */	padding: 0px; }.indentmenu{text-align: center;height: 20px;background: black url('indentbg3.gif') center center repeat-x;}.indentmenu ul{margin: 0px 5px 0px 0px;padding: 0;font: bold 13px Arial;/* border: 1px solid #657383;  #564c66; dark purple border*/border-width: 1px 0;line-height: 20px;}.indentmenu ul li{display: inline;}.indentmenu ul li a{ color: white; /* text color */padding: 5px 11px;margin: 0px -5px 0px 0px;height: 20px;text-decoration: none;border-left: 1px solid #657383; /* #564c66; dark purple divider between menu items*/}html > body .indentmenu ul li a {	padding: 6px 12px;  /* This is a non-IE style */}.indentmenu ul li a:hover, .indentmenu ul li .current{color: white; /*text color of selected and active item*/padding-top: 6px; /*shift text down 1px for selected and active item*/padding-bottom: 4px; /*shift text down 1px for selected and active item*/background: black url('indentbg4.gif') repeat-x center center;}.indentmenu ul li .current{ cursor: default; }.indentmenu ul li a.last {	border-right: 1px solid #657383; /*#564c66; */ }

It wouldbe great if you can help meknow where I am doing wrongthanks

Link to comment
Share on other sites

Hi, this sure has some work still to do, first please remove the styles inline as you already have a style sheet, well i already did some of that, i also move your divs, so they are now left, container and right all with float: left, after them i put a fourth div to clear them, with this at least they show on ie and ff.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />		<title></title>		<link rel="stylesheet" href="style.css" type="text/css" />	</head>	<body>		<div class="cen">			<div class="leftside" >				<img src="name1.jpg" alt="" />			</div>			<div id="container">				<img src="top_test1.jpg" alt="" />				<div class="indentmenu">					<ul>						<li><a class="current">Home</a></li>						<li ><a href="research.html">Research</a></li>						<li ><a href="resources.htm">Resources</a></li>						<li ><a href="people.htm">People</a></li>						<li ><a href="positions.htm">Openings</a></li>						<li ><a href="contact.htm" class="last">Contact</a></li>					</ul>				</div>				<div class="contentwrapper">					<div class="leftside" >						contents here						<br /><br />						Please check back for more information and updates.					</div>					<div class="rightside">						List vertical news					</div>				</div>				<div id="textsm">					<img src="slogo.jpg" alt="" />					<img src="schlogo.jpg" alt="" />					<img src="ilogo.jpg" alt="" />				</div>				<div id="textbottom">Copyright © 2008 </div>			</div>			<div class="rightside" >				<img src="logo.jpg" alt="" />			</div>			<div class="spacer" ></div>		</div>	</body></html>

and this is the part in css i modified to affect the changes i made:

.rightside{	float: left;    margin-left: 400px;    padding-left: 7px;    text-align: left;}.leftside{    float: left; 	width: 400px; 	background-color: #FFFFFF;    font-size: 12px; text-align: justify;    font-family: " Verdana, Times New Roman, Arial, Helvetica, sans-serif";}.spacer{	clear: both;}#container{    top: 0px;/*    position: relative;*/    padding:0;    margin:0;    border:0;    height: 100%;    background-color: #FF0000;	float: left;}

the images in particular had inline styles that make them look huge on ie (or at least the space they would took as i don't have them)hope this helps but i insist, this still have a lot of work to do.

Link to comment
Share on other sites

I have fixes some of the css. You need the quotes around things that include spaces, like the font name. Not around all font-family things. I have "pretty printed" the css here:

body {	margin: 0px; border: 0px; padding: 0px;	text-align: center;	font-family: Verdana, Arial, Helvetica, sans-serif;	background-color: #6F7285; /* background-image: url('grayScienceRightBox.gif');*/	background-repeat: repeat;	}h1 {	position: relative;  top: 0px; width: 100%;  height: 20px;	z-index: 1;  	font-size: 16px;  margin: 0; padding: 0;	}	h2 {	position: relative; top: 0px;  width: 100%;	padding: 0px; margin: 0px; FONT-SIZE: 14px;  	font-family:  'Times New Roman', Verdana, Arial, Helvetica, sans-serif;	}h3 {	position: relative;	float: left; top: 10px; width: 100%;	font-size: 11pt; 	text-align: center;	font-family: "Times New Roman", Verdana, Arial, Helvetica, sans-serif;  	}h4 {	position: relative; top: 20px;  width: 100%;	padding: 0px; margin: 0px; 	font-size: 14px;  	font-family: "Times New Roman", Verdana, Arial, Helvetica, sans-serif;  	}.contentwrapper {	position: relative;	text-align: center;	margin-top: 10px;	margin-right: 15px;	float: left;	background-color: #C11B17;}.rightside {	margin-left: 400px;	padding-left: 7px;	text-align: left;	}.leftside {	float: left; width: 400px; background-color: white;	font-size: 12px; text-align: justify;	font-family: Verdana, "Times New Roman", Arial, Helvetica, sans-serif;	}#textsm {	position: relative;	float: left;	width: 100%;	top: 15px;	text-align: center;	padding-bottom: 4px;	border-bottom: 2px solid black;	}#textbottom {	position: relative;	float: left;	margin-top: 24px;  	padding-top: 3px;	padding-left: 15px;	padding-bottom: 11px;	font-size: 7pt;	color: #736F6E;	font-family: Verdana, Arial, Helvetica;	}#container {	top: 0px;	position: relative;	padding:0;	margin:0;	border:0;	height: 100%;	background-color: white;	}.cen {	width: 700px;	background-color: white;	margin: 0 auto;  /* This is the proper way to center an element */	text-align: left;  /* corrects for IE hack */	position: relative;  /* The container must be positioned in order to contain positioned elements */	padding: 0px;	}.indentmenu {	text-align: center;	height: 20px;	background: black url('indentbg3.gif') center center repeat-x;	}.indentmenu ul{	margin: 0px 5px 0px 0px;	padding: 0;	font: bold 13px Arial;	/* border: 1px solid #657383;  #564c66; dark purple border*/	border-width: 1px 0;	line-height: 20px;	}.indentmenu ul li {	display: inline;	}.indentmenu ul li a {	color: white; /* text color */	padding: 5px 11px;	margin: 0px -5px 0px 0px;	height: 20px;	text-decoration: none;	border-left: 1px solid #657383; /* #564c66; dark purple divider between menu items*/	}html > body .indentmenu ul li a {	padding: 6px 12px;  /* This is a non-IE style */	}.indentmenu ul li a:hover, .indentmenu ul li .current {	color: white; /*text color of selected and active item*/	padding-top: 6px; /*shift text down 1px for selected and active item*/	padding-bottom: 4px; /*shift text down 1px for selected and active item*/	background: black url('indentbg4.gif') repeat-x center center;	}.indentmenu ul li .current { 	cursor: default;	}.indentmenu ul li a.last {	border-right: 1px solid #657383; /*#564c66; */	}

You want only one item on a line. Everything that is a css thing should be in lower case. This includes font-family, etc. This might not apply to classes (.someclass). Haven't tested that.Both css and html validate - now we can move on to logic errors. It was correctly pointed out you don't want css on the tags in the html unless you have a real strong reason, which you don't in this case. Put them in the css, but we can work on logic at the same time. Do you have this on a page yet?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title></title>  <link rel="stylesheet" href="style.css" type="text/css" /></head><body>	<div class="cen">		<div class="leftside" style=" margin: 0px; padding-top: 30px; padding-left: 20px;">			<img src="name1.jpg" alt="" />		</div>		<div class="rightside" style=" text-align: right;">			<img src="logo.jpg" alt="" />		</div>		<div id="container">			<img style="border: 0; padding:0px; margin: 0px; width: 100%;" 			src="top_test1.jpg" alt=""/>			<div class="indentmenu">				<ul>					<li><a style=" text-align: center;" class="current">Home</a></li>					<li ><a style="text-align: center;" href="research.html">Research</a></li>					<li ><a style="text-align: center;" href="resources.htm">Resources</a></li>					<li ><a style="text-align: center;" href="people.htm">People</a></li>					<li ><a style="text-align: center;" href="positions.htm">Openings</a></li>					<li ><a style="text-align: center;" href="contact.htm" class="last">Contact</a></li>				</ul>			</div>			<div class="contentwrapper">				<div class="leftside" style=" margin: 0px; padding-left: 19px; padding-right: 19px;">					contents here					<br /><br />					Please check back for more information and updates.				</div>				<div class="rightside">					List vertical news				</div>			</div>			<div id="textsm">				<img style=" text-align: center;" src="slogo.jpg" alt="" />				<img style=" text-align: center;" src="schlogo.jpg" alt="" />				<img style=" text-align: center;" src="ilogo.jpg" alt="" />			</div>			<div id="textbottom">				Copyright © 2008			</div>		</div>	</div></body></html>

Link to comment
Share on other sites

I have fixes some of the css. You need the quotes around things that include spaces, like the font name. Not around all font-family things. I have "pretty printed" the css here:
body {	margin: 0px; border: 0px; padding: 0px;	text-align: center;	font-family: Verdana, Arial, Helvetica, sans-serif;	background-color: #6F7285; /* background-image: url('grayScienceRightBox.gif');*/	background-repeat: repeat;	}h1 {	position: relative;  top: 0px; width: 100%;  height: 20px;	z-index: 1;  	font-size: 16px;  margin: 0; padding: 0;	}	h2 {	position: relative; top: 0px;  width: 100%;	padding: 0px; margin: 0px; FONT-SIZE: 14px;  	font-family:  'Times New Roman', Verdana, Arial, Helvetica, sans-serif;	}h3 {	position: relative;	float: left; top: 10px; width: 100%;	font-size: 11pt; 	text-align: center;	font-family: "Times New Roman", Verdana, Arial, Helvetica, sans-serif;  	}h4 {	position: relative; top: 20px;  width: 100%;	padding: 0px; margin: 0px; 	font-size: 14px;  	font-family: "Times New Roman", Verdana, Arial, Helvetica, sans-serif;  	}.contentwrapper {	position: relative;	text-align: center;	margin-top: 10px;	margin-right: 15px;	float: left;	background-color: #C11B17;}.rightside {	margin-left: 400px;	padding-left: 7px;	text-align: left;	}.leftside {	float: left; width: 400px; background-color: white;	font-size: 12px; text-align: justify;	font-family: Verdana, "Times New Roman", Arial, Helvetica, sans-serif;	}#textsm {	position: relative;	float: left;	width: 100%;	top: 15px;	text-align: center;	padding-bottom: 4px;	border-bottom: 2px solid black;	}#textbottom {	position: relative;	float: left;	margin-top: 24px;  	padding-top: 3px;	padding-left: 15px;	padding-bottom: 11px;	font-size: 7pt;	color: #736F6E;	font-family: Verdana, Arial, Helvetica;	}#container {	top: 0px;	position: relative;	padding:0;	margin:0;	border:0;	height: 100%;	background-color: white;	}.cen {	width: 700px;	background-color: white;	margin: 0 auto;  /* This is the proper way to center an element */	text-align: left;  /* corrects for IE hack */	position: relative;  /* The container must be positioned in order to contain positioned elements */	padding: 0px;	}.indentmenu {	text-align: center;	height: 20px;	background: black url('indentbg3.gif') center center repeat-x;	}.indentmenu ul{	margin: 0px 5px 0px 0px;	padding: 0;	font: bold 13px Arial;	/* border: 1px solid #657383;  #564c66; dark purple border*/	border-width: 1px 0;	line-height: 20px;	}.indentmenu ul li {	display: inline;	}.indentmenu ul li a {	color: white; /* text color */	padding: 5px 11px;	margin: 0px -5px 0px 0px;	height: 20px;	text-decoration: none;	border-left: 1px solid #657383; /* #564c66; dark purple divider between menu items*/	}html > body .indentmenu ul li a {	padding: 6px 12px;  /* This is a non-IE style */	}.indentmenu ul li a:hover, .indentmenu ul li .current {	color: white; /*text color of selected and active item*/	padding-top: 6px; /*shift text down 1px for selected and active item*/	padding-bottom: 4px; /*shift text down 1px for selected and active item*/	background: black url('indentbg4.gif') repeat-x center center;	}.indentmenu ul li .current { 	cursor: default;	}.indentmenu ul li a.last {	border-right: 1px solid #657383; /*#564c66; */	}

You want only one item on a line. Everything that is a css thing should be in lower case. This includes font-family, etc. This might not apply to classes (.someclass). Haven't tested that.Both css and html validate - now we can move on to logic errors. It was correctly pointed out you don't want css on the tags in the html unless you have a real strong reason, which you don't in this case. Put them in the css, but we can work on logic at the same time. Do you have this on a page yet?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title></title>  <link rel="stylesheet" href="style.css" type="text/css" /></head><body>	<div class="cen">		<div class="leftside" style=" margin: 0px; padding-top: 30px; padding-left: 20px;">			<img src="name1.jpg" alt="" />		</div>		<div class="rightside" style=" text-align: right;">			<img src="logo.jpg" alt="" />		</div>		<div id="container">			<img style="border: 0; padding:0px; margin: 0px; width: 100%;" 			src="top_test1.jpg" alt=""/>			<div class="indentmenu">				<ul>					<li><a style=" text-align: center;" class="current">Home</a></li>					<li ><a style="text-align: center;" href="research.html">Research</a></li>					<li ><a style="text-align: center;" href="resources.htm">Resources</a></li>					<li ><a style="text-align: center;" href="people.htm">People</a></li>					<li ><a style="text-align: center;" href="positions.htm">Openings</a></li>					<li ><a style="text-align: center;" href="contact.htm" class="last">Contact</a></li>				</ul>			</div>			<div class="contentwrapper">				<div class="leftside" style=" margin: 0px; padding-left: 19px; padding-right: 19px;">					contents here					<br /><br />					Please check back for more information and updates.				</div>				<div class="rightside">					List vertical news				</div>			</div>			<div id="textsm">				<img style=" text-align: center;" src="slogo.jpg" alt="" />				<img style=" text-align: center;" src="schlogo.jpg" alt="" />				<img style=" text-align: center;" src="ilogo.jpg" alt="" />			</div>			<div id="textbottom">				Copyright © 2008			</div>		</div>	</div></body></html>

Hi,Thank you so much for your help. I have added the div in the index file below the textbottom div and as such the container problem seems to be resolved. .spacer{ clear: both;}I have also deleted all inline styles. However, I have left the inline style for .leftside because I have used that particular div twice and both have different padding.The only problem left is the menu. The menu background height in Firefox is showing less than the height of menu items. Unfortunately I am not able to load the images of the menu gifs in this forum.I will try uploading again though. I am not sure what I am missing in the menu.thanks
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...