21
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
Expand|Select|Wrap|Line Numbers
- 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;*/
- }
