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="healthy dining restaurants organic grocers farmers market eating out calories nutrition database kilorie">
<meta name="description" content="Kilorie 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.css" 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_restaurants.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">Forum </a>
</ul>
</div>
<div class="container">
<a href="home.php">Home></a>
<!div id="box">
<div id="box2">
<div id="content"><br>
<b> Kilor ie. 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>
<img src="images/line.gif" width="300" height="3"><br><br>
Agnes and Muriels<br>
“This place has some great/ creative salads…" <a style="text-decoration:none" href="home.php">More...</a><br><br>
American Roadhouse<br>
“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>
<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>
<img align="center" src="images/homeimg2.gif" width="60" height="60"> Figo Pasta<br><br>
Cuisine:Italian<br>
Food : <img src="images/5stars.gif"><br>
Service : <img src="images/5stars.gif"><br>
Cleanliness : <img src="images/5stars.gif"><br><br>
<p align="center" >Recommandations: "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>
<img 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
-
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.jpg') 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:#DAE0D2 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.gif") 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("images/norm_left_on.gif");
-
-
}
-
-
#header #current a {
-
-
background-image:url("images/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;*/
-
-
}
