Correct me and make me more perfect

Question

vijukumar 0 Light Poster

16 Years Ago

please help me i have just started of your boost will makes me more perfect
below i have attached my index.html and css.css file
i had to desicn only using <div> tags so pleas help me in IE it some what works properly but in FF anf safari bit dragged out please correct my codes
css.css below:

BODY {
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	font: 12px/165% "Lucida Sans Unicode", Verdana, Arial, "Times New Roman", sans-serif;
	text-align: center;
} 
	
#menu
{
	margin: 2px;
	padding: 40px 250px 10px 250px;
	height: 25px;
	color: #FF6600;
}

#menu ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
}

#menu ul li
{
display: block;
font: 12px;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#title
{
	margin: 2px;
	padding: 10px 110px 10px 90px;
	height: 25px;
	color: #33FF66;
}

#title ul
{
border: 0;
margin: 0;
padding: 10px 110px 10px 110px;
list-style-type: none;
text-align: center;
}

#title ul li
{
display: block;
font: 37px  "Lucida Sans Unicode", Verdana, Arial, "Times New Roman", sans-serif;
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0;
}

#menu ul li a:link,
#menu ul li a:active,
#menu ul li a:visited
{
	border-bottom: 1px dotted #000000;
	padding: 1px;
	color: #FF6600;
	text-decoration: none;
	display: block;
	text-align: center;
	font: 17px  "Lucida Sans Unicode", Verdana, Arial, "Times New Roman", sans-serif;
}

#menu ul li a:hover
{
	border-bottom: 1px double #cccccc;
	
	padding: 1px;
	color: #cccccc;
	text-decoration: none;}

#menu li.space
{
	padding: 2px 0px 0px;
	width:32px;
}

#mainbox {
  margin: 0 auto;
  width: 950px;
  hieght: 1000px;
  text-align: left;
    background:#827B60;
	border-top: 1px none #0b0b0b;
	border-right: 1px solid #0b0b0b;
	border-bottom: 1px none #0b0b0b;
	border-left: 1px solid #0b0b0b;  
  } 

#datatable {
border: 5px solid #D6DDE6;
height: 440px;
border-collapse: collapse;
padding: 5px;
color: #FF6600;
}

#datatable td {
border: 1px solid #D6DDE6;
text-align: right;
}

#datatable1 {
border: 1px solid #153E7E;
margin:0px 700px 0px 0px;
padding: 5px;
border-collapse: collapse;
color: 	#000000;
text-align: center;
}

#datatable1 td1 {
border: 1px solid #000000;
}

#datatable2 {
border: 1px solid #153E7E;
margin: -450px 5px 10px 244px;
padding: 5px;
border-collapse: collapse;
color: 	#000000;
}

#datatable2 td2 {
border: 1px solid #D6DDE6;
text-align: right;
}

#datatable2 td21 {
border: 1px solid #FF6600;
text-align: right;
}

#datatable3 {
border: 1px solid #153E7E;
margin: 5px 5px 10px 244px;
padding: 5px;
border-collapse: collapse;
color: 	#000000;
}

#datatable3 td {
border: 1px solid #D6DDE6;
text-align: right;
}

#fieldset{
}

#legend{
background: #D6DDE6;
color: #FF6600;
}

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>resume</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
<div id="mainbox">					


	<div id="title">
	<ul>
	<li> Resume Portal </li>
	</ul>
	</div>	

	<div id="menu">
	<ul>
	<li><a href="">Home</a></li>
	<li class="space"></li>
	<li><a href="">About us </a></li>
	<li class="space"></li>
	<li><a href="">Register</a></li>
	<li class="space"></li>
	<li><a href="">Resume</a></li>
	<li class="space"></li>
	<li class="space"><a href="">Contact</a></li>	
	</ul>
	</div>



<div id="datatable">

	<div id="datatable1">
		<div id="td1"> Login </div>
		<div id="td1"> User Name <input name="textfield" type="text" class="typeforms"></div> 
		<div id="td1">  Password  <input name="textfield" type="text" class="typeforms"></div>
		<div id="td1"><input name="Submit" type="submit" class="typeforms" value="save"> </div>
		<div id="td1"><a href="#">Forgot the password?</a></div>
		<div id="td1"> </div>
		login pannel login pannel login pannel login pannel login pannel
		login pannellogin pannellogin pannellogin pannellogin pannellogin pannel login pannel
		login pannellogin pannellogin pannellogin pannellogin pannellogin pannellogin pannel
		<div id="td1"><a href="#">Sign Up New Account</a></div>
		login pannellogin pannellogin pannellogin pannellogin pannellogin pannellogin pannel
		login pannellogin pannellogin pannellogin pannellogin pannellogin pannellogin pannel
		login pannellogin pannellogin pannellogin pannellogin 
		</div>
			
		
		
		
	</div>

	<div id="datatable2">
	
		<div di="fieldset">
		<div id ="legend">Resume</div>
		<div id="td21"> Heading1</div>
		<div id="td2"> Display Board Display Board Display Board Display Board Display Board		
		Display Board Display Board Display Board Display Board Display Board
		Display Board Display Board Display Board Display Board Display Board
		Display Board Display Board Display Board </div>
		<div id="td21"> Heading2</div>
		<div id="td2"> Display Board Display Board Display Board Display Board Display Board		
		Display Board Display Board Display Board Display Board Display Board
		Display Board Display Board Display Board Display Board Display Board
		Display Board Display Board Display Board </div>
		<div id="td21"> Heading3</div>
		<div id="td2"> Display Board Display Board Display Board Display Board Display Board		
		Display Board Display Board Display Board Display Board Display Board
		Display Board Display Board Display Board Display Board Display Board
		Display Board Display Board Display Board </div>
		<div id="td21"> Heading4</div>
		<div id="td2"> Display Board Display Board Display Board Display Board Display Board		
		Display Board Display Board Display Board Display Board Display Board
		Display Board Display Board Display Board Display Board Display Board
		Display Board Display Board Display Board </div>
		</div>
	</div>
	
	<div id="datatable3">
	<div di="fieldset">
<div id ="legend">Latest Resumes</div>


	
	<div id="td3">Firstname Lastname -Softwate <a href="#">View</a></div>
	
	
	
	
		<div id="td3">Firstname Lastname -Mechanical <a href="#">View</a></div>
	</div>



</div>
</body>
</html>

javascript

2 Contributors
1 Reply
105 Views
3 Days Discussion Span
Latest Post 16 Years Ago Latest Post by MidiMagic

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MidiMagic 579 Nearly a Senior Poster · Answer 1 · 2008-03-22T08:14:45+00:00

I found it quickly.

NEVER put size styles (width, height) and surrounding styles (margin, border, padding) in the same tag, class, or id.

Firefox follows the w3c definitions, and puts the surrounding styles OUTSIDE the defined sizes.

IE does it wrong, and crams the surrounding styles INSIDE the defined sizes.

To use both on the same item, nest two tags, one with the size, and one with the surrounding styles. This way, YOU control what order they occur in.