CSS and Xhtml problem

shitalg · #1 (**permalink**) Jan 21st, 2008, 09:59

Hi,

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.

HTML: Select all

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>

Code: Select all

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;
}

Lchad · #2 (**permalink**) Jan 21st, 2008, 11:35

Can you please post a link so we can see what the differences are?

Aso · #3 (**permalink**) Jan 21st, 2008, 13:52

shitalg, your number one problem is most likely this

Code: Select all

<?xml version="1.0" encoding="utf-8"?>

right at the top of your HTML. This is triggering quirks mode in IE. You don't need it, so get rid of it.

Secondly, you need to specify a character encoding in your <head> like this

Code: Select all

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Lastly, you've got two CSS errors on your #header declaration. You need to specify a measurement for your width and height, like so:

Code: Select all

width: 825px;
height: 85px;

Fix these and it might well solve your problems.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
XHTML strict, name vs. id	masonbarge	JavaScript Forum	3	Feb 27th, 2008 21:18
Xhtml 2.0, Css 3	pa007	Webforumz Cafe	3	Apr 6th, 2007 18:06
XHTML causing CSS problem	dartiss	Web Page Design	4	Oct 26th, 2006 13:31
xhtml and validation	robb	Web Page Design	27	Aug 15th, 2006 08:41
xhtml 1.0	ivyholly	Web Page Design	2	Sep 28th, 2005 14:36

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS and Xhtml problem