Forum Moderators: not2easy
I am working on CSS and Xhtml and I have prepared one template. It is working on Mozilla firefor but when I have use Internet Explorer it is different in looks.
Please see following code which I have created for XHTML and CSS and please let me know is there something wrong!
Thank you in Advance.
XHTML code:
<?xml version="1.0" encoding="utf-8"?>
<!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 runat="server">
<title>Untitled Page</title>
<link href="Sheetal.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div style="width: 825px;">
<div id="header" >
<div id="header11">
Project demo
</div>
<div id="slidebar" >
<div class="LogoMargin" >****** Header Logo ******<br/><br/> margin-left:20px; margin-right:20px; margin-top:20px; margin-bottom:10px; </div>
</div>
<div id="LeftPan" >
<div class="neviagtion">margin-left:3px; margin-right:3px; </div>
</div>
<div id="sidebar1" >
<div class="LeftNevigation">margin-top:20px; margin-bottom:20px; margin-left:10px; margin-right:5px; </div>
</div>
<div id="LeftPan1" >
<div class="bodyFrame">margin-bottom:10px; margin-left:20px; </div>
</div>
<br />
<div id="footer" >*********** Document author : Sheetal Gaikwad *********</div>
</div>
</form>
</body>
</html>
CSS code:
body
{
margin-bottom: 20px;
margin-left: 70px;
margin-right: 70px;
margin-top: 20px;
background-color: Black;
font-size: 12pt;
font-family: Verdana;
}
#header {
padding: 0 0px 0 0px;
background-image: url(images/head_1.bmp);
background-repeat: repeat-x;
width :825;
height:85;
}
#header11 {
font-size: 25pt;
margin-left: 10px;
margin-bottom: 10px;
padding: 10px 0 0 0;
margin: 10px 0 0 0px;
}
#slidebar {
float:left;
background-image: url(images/LH2.bmp);
width: 243px;
height:210px;
border-bottom : 2px solid black;
BORDER-RIGHT: 0px solid;
}
.LogoMargin
{
margin-bottom:10px;
margin-left:20px;
margin-right:20px;
margin-top:20px;
}
.LogoMarginbody
{
margin-bottom: 20px;
margin-left: 70px;
margin-right: 70px;
margin-top: 20px;
background-color: Black;
font-size: 12pt;
font-family: Verdana;
}
#LeftPan
{
float:right;
background-image: url(images/RH1.bmp);
background-position:right top;
border-bottom : 2px solid black;
border-left: 0px solid;
width:582px;
height:210px;
}
.Navigation
{
margin-left:3px;
margin-right:3px;
}
#LeftPan
{
float:right;
background-image: url(images/RH1.bmp);
background-position:right top;
border-bottom : 2px solid black;
border-left: 0px solid;
width:582px;
height:210px;
}
#sidebar1 {
float:left;
border-right:2px solid black;
width: 242px;
height:411px;
background-color:White;
}
.LeftNevigation
{
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:5px;
}
#LeftPan1
{
float:right;
background-color:white;
width:582px;
height:411px;
}
.bodyFrame
{
margin-bottom:10px;
margin-left:20px;
}
/*#footer
{
float: left;
background-color: #bccfb3;
width: 825px;
height: 55px;
}*/
#sidebar1 {
float:left;
border-right:2px solid black;
width: 242px;
height:411px;
background-color:White;
}
.LeftNevigation
{
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:5px;
}
#LeftPan1
{
float:right;
background-color:White;
width:581px;
height:411px;
}
.bodyFrame
{
margin-bottom:10px;
margin-left:20px;
}
#footer
{
float: left;
background-color: #bccfb3;
width: 824px;
height: 85px;
background-color: #bccfb3;
font-weight: bold;
}
You have problems with the xhtml: the runat attibute, the missing action on the form aren't all that likely to cause trouble with layout, but ... the missing close of the div will much more likely cause trouble.
Try this checker unless you have a favorite one:
[validator.w3.org...]
CSS can be validated here:
[jigsaw.w3.org...]
Next your CSS seems more complex than needed, minimize it to what you need, it'll be easier to see what's going on.
E.g.
