Hi,
I am new to web development. I have designed a main page using html and css, I am working in linux OS so I am using firefox. But the problem is with IE, where the entire contents and images is re-positioned . the page looks entirely different. Please anyone can help me in this regard. Here is the css and html code
home.php
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="health y dining restaurants organic grocers farmers market eating out calories nutrition database kilorie">
<meta name="descripti on" content="Kilori e provides information on healthy dining be it eating out or in. Find information on restaurants, fast food calories, organic grocers, farmers market, and a nutrition database">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="slides1.c ss" rel="stylesheet " type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="header">
<ul>
<li id="current">< a href="index.php ">Home </a></li>
<li><a href="search_re staurants.php"> Restaurants </a></li>
<li><a href="organics. php">Organics </a></li>
<li><a href="calories. php">Calories </a></li>
<li><a href="../phpBB2/index.php">Foru m </a>
</ul>
</div>
<div class="containe r">
&nb sp; <a href="home.php" >Home></a>
<!div id="box">
<div id="box2">
<div id="content"><b r>
<b> &nb sp; Kilorie. Healthy dining and nutrition information</b><br><br>
Kilorie promotes healthy eating by providing information on local restaurants, organic grocers, and farmers' markets.<br><br >
<b>Recent reviews</b>
&nb sp; <img src="images/line.gif" width="300" height="3"><br> <br>
Agnes and Muriels<br>
&nb sp;“This place has some great/ creative salads…" < a style="text-decoration:none " href="home.php" >More...</a><br><br>
American Roadhouse<br>
&nb sp;“Agree with Barbeque, the best brunch place in Atlanta…” <a style="text-decoration:none " href="home.php" >More...</a><br><br>
<b>What’s news?</b>
&nb sp; <img src="images/line.gif" width="300" height="3"><br> <br>
<img align="right" src="images/homeimg1.gif" width="60" height="60">
<b>Good Calories, Bad Calories</b> By Gna kolata<br>
Source: NY Times, 10/07/2007
<a style="text-decoration:none " href="home.php" >More...</a><br><br>
<b>Work out naturally!</b> By The kilorie team<br>
Source: Kilorie, 10/07/2007
<a style="text-decoration:none " href="home.php" >More...</a><br><br>
<b>Fulton County Restaurant Scores: Inaccessible?</b> By Kilorie<br>
Source: Kilorie News, 09/24/2007
<a style="text-decoration:none " href="home.php" >More...</a><br><br>
<b>Culture matters in the Obesity debate</b> By Kelly D.Brownell<br>
Source: LA Times, 09/21/2007
<a style="text-decoration:none " href="home.php" >More...</a>
</div>
</div>
<div id="box1"><br>
<b> Restaurant of the week</b><br><br>
<im g align="center" src="images/homeimg2.gif" width="60" height="60">&nb sp; Figo Pasta<br><br>
Cui sine:Italian<br >
Foo d : <img src="images/5stars.gif"><br >
Ser vice : <img src="images/5stars.gif"><br >
Cle anliness : <img src="images/5stars.gif"><br ><br>
<p align="center" >Recommandation s: "Artichoke ravivioli with Siciliana Sauce..."
<a style="text-decoration:none " href="home.php" >More...</a></p>
</div>
<div id="box3"><br>
<b> Did you know?<b>
<im g align="right" src="images/homeimg3.gif" width="60" height="60">
</div>
</div>
<!/div>
<div id="footer"><b> <a style="text-decoration:none " href="home.php" >About us</a> | <a style="text-decoration:none " href="home.php" >Privacy</a> | <a style="text-decoration:none " href="home.php" >Advertise with us</a></b></div>
<?include "track.php" ;?>
</div>
</body>
</html>
[/html]
slides.css
[code=css]
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: verdana; /* helvetica, impact, sans-serif;*/
font-size: 14px;
color: #ff;
//background-color: #FF9966; /*#DDCCC2;*/
//background: url('images/image.jpg') repeat center;
}
#banner{
height: 100px;
background-image: url(images/banner_v8.jpg);
background-repeat: no-repeat;
}
#wrapper{
width: 770px;
/*background-color: #ABFF93; BEF3C0; key color */
//background: url('bggrad2.jp g') repeat-x;
margin:10px auto;
border: 1px solid #000000;
height:620px auto;
background-color: #FFFFFF;
slides.css
}
.container{
width: 770px;
height:500px auto;
float: middle;
//margin-left: 10px;
//margin-top:10px;
//background-color: #669933; /*#DDCCC2; key color*/
}
#box {
top: 0px;
left: 100px;
margin: 20px;
padding: 1px;
//border: 1px solid #000000;
width: 730px;
height: 400px;
}
#box1 {
margin: 20px;
padding: 1px;
border: 1px solid #000000;
width: 30%;
height: 55%
}
#box2 {
margin: 20px;
padding: 1px;
border: 1px solid #000000;
float: right;
width: 63%;
height: 90%;
}
#box3 {
margin: 20px;
padding: 1px;
border: 1px solid #000000;
width: 30%;
height: 31%;
}
#header {
float:left;
width:100%;
background:#DAE 0D2 url("images/bg2.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url( "images/norm_new_left.g if") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url( "images/norm_new_right. gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none ;
font-weight:bold;
color:#765;
}
#header a:hover {
color:#333;
}
#header #current {
background-image:url("imag es/norm_left_on.gi f");
}
#header #current a {
background-image:url("imag es/norm_right_on2. gif");
color:#333;
padding-bottom:5px; /* f4ebe7 is best here*/
}
#footer{
border-top: 1px solid #000000;
background-color: #ec6053;/*#208a25; #003366;*/
color: #00;
clear: both;
height:20px;
text-align:center;
width:770px;
}
#content {
margin-left: 15px;
margin-right: 15px;
//background-color: #FFF8DC; /*#60D136;*/
}[/code]
I am new to web development. I have designed a main page using html and css, I am working in linux OS so I am using firefox. But the problem is with IE, where the entire contents and images is re-positioned . the page looks entirely different. Please anyone can help me in this regard. Here is the css and html code
home.php
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="health y dining restaurants organic grocers farmers market eating out calories nutrition database kilorie">
<meta name="descripti on" content="Kilori e provides information on healthy dining be it eating out or in. Find information on restaurants, fast food calories, organic grocers, farmers market, and a nutrition database">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="slides1.c ss" rel="stylesheet " type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="header">
<ul>
<li id="current">< a href="index.php ">Home </a></li>
<li><a href="search_re staurants.php"> Restaurants </a></li>
<li><a href="organics. php">Organics </a></li>
<li><a href="calories. php">Calories </a></li>
<li><a href="../phpBB2/index.php">Foru m </a>
</ul>
</div>
<div class="containe r">
&nb sp; <a href="home.php" >Home></a>
<!div id="box">
<div id="box2">
<div id="content"><b r>
<b> &nb sp; Kilorie. Healthy dining and nutrition information</b><br><br>
Kilorie promotes healthy eating by providing information on local restaurants, organic grocers, and farmers' markets.<br><br >
<b>Recent reviews</b>
&nb sp; <img src="images/line.gif" width="300" height="3"><br> <br>
Agnes and Muriels<br>
&nb sp;“This place has some great/ creative salads…" < a style="text-decoration:none " href="home.php" >More...</a><br><br>
American Roadhouse<br>
&nb sp;“Agree with Barbeque, the best brunch place in Atlanta…” <a style="text-decoration:none " href="home.php" >More...</a><br><br>
<b>What’s news?</b>
&nb sp; <img src="images/line.gif" width="300" height="3"><br> <br>
<img align="right" src="images/homeimg1.gif" width="60" height="60">
<b>Good Calories, Bad Calories</b> By Gna kolata<br>
Source: NY Times, 10/07/2007
<a style="text-decoration:none " href="home.php" >More...</a><br><br>
<b>Work out naturally!</b> By The kilorie team<br>
Source: Kilorie, 10/07/2007
<a style="text-decoration:none " href="home.php" >More...</a><br><br>
<b>Fulton County Restaurant Scores: Inaccessible?</b> By Kilorie<br>
Source: Kilorie News, 09/24/2007
<a style="text-decoration:none " href="home.php" >More...</a><br><br>
<b>Culture matters in the Obesity debate</b> By Kelly D.Brownell<br>
Source: LA Times, 09/21/2007
<a style="text-decoration:none " href="home.php" >More...</a>
</div>
</div>
<div id="box1"><br>
<b> Restaurant of the week</b><br><br>
<im g align="center" src="images/homeimg2.gif" width="60" height="60">&nb sp; Figo Pasta<br><br>
Cui sine:Italian<br >
Foo d : <img src="images/5stars.gif"><br >
Ser vice : <img src="images/5stars.gif"><br >
Cle anliness : <img src="images/5stars.gif"><br ><br>
<p align="center" >Recommandation s: "Artichoke ravivioli with Siciliana Sauce..."
<a style="text-decoration:none " href="home.php" >More...</a></p>
</div>
<div id="box3"><br>
<b> Did you know?<b>
<im g align="right" src="images/homeimg3.gif" width="60" height="60">
</div>
</div>
<!/div>
<div id="footer"><b> <a style="text-decoration:none " href="home.php" >About us</a> | <a style="text-decoration:none " href="home.php" >Privacy</a> | <a style="text-decoration:none " href="home.php" >Advertise with us</a></b></div>
<?include "track.php" ;?>
</div>
</body>
</html>
[/html]
slides.css
[code=css]
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: verdana; /* helvetica, impact, sans-serif;*/
font-size: 14px;
color: #ff;
//background-color: #FF9966; /*#DDCCC2;*/
//background: url('images/image.jpg') repeat center;
}
#banner{
height: 100px;
background-image: url(images/banner_v8.jpg);
background-repeat: no-repeat;
}
#wrapper{
width: 770px;
/*background-color: #ABFF93; BEF3C0; key color */
//background: url('bggrad2.jp g') repeat-x;
margin:10px auto;
border: 1px solid #000000;
height:620px auto;
background-color: #FFFFFF;
slides.css
}
.container{
width: 770px;
height:500px auto;
float: middle;
//margin-left: 10px;
//margin-top:10px;
//background-color: #669933; /*#DDCCC2; key color*/
}
#box {
top: 0px;
left: 100px;
margin: 20px;
padding: 1px;
//border: 1px solid #000000;
width: 730px;
height: 400px;
}
#box1 {
margin: 20px;
padding: 1px;
border: 1px solid #000000;
width: 30%;
height: 55%
}
#box2 {
margin: 20px;
padding: 1px;
border: 1px solid #000000;
float: right;
width: 63%;
height: 90%;
}
#box3 {
margin: 20px;
padding: 1px;
border: 1px solid #000000;
width: 30%;
height: 31%;
}
#header {
float:left;
width:100%;
background:#DAE 0D2 url("images/bg2.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url( "images/norm_new_left.g if") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url( "images/norm_new_right. gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none ;
font-weight:bold;
color:#765;
}
#header a:hover {
color:#333;
}
#header #current {
background-image:url("imag es/norm_left_on.gi f");
}
#header #current a {
background-image:url("imag es/norm_right_on2. gif");
color:#333;
padding-bottom:5px; /* f4ebe7 is best here*/
}
#footer{
border-top: 1px solid #000000;
background-color: #ec6053;/*#208a25; #003366;*/
color: #00;
clear: both;
height:20px;
text-align:center;
width:770px;
}
#content {
margin-left: 15px;
margin-right: 15px;
//background-color: #FFF8DC; /*#60D136;*/
}[/code]
Comment