467,074 Members | 975 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

Problem with firefox and IE

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">
&nbsp;&nbsp;&nbsp;&nbsp;<a href="home.php">Home></a>
<!div id="box">
<div id="box2">
<div id="content"><br>
<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>
&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/line.gif" width="300" height="3"><br><br>
Agnes and Muriels<br>
&nbsp;&nbsp;&nbsp;“This place has some great/ creative salads…"&nbsp;<a style="text-decoration:none" href="home.php">More...</a><br><br>
American Roadhouse<br>
&nbsp;&nbsp;&nbsp;“Agree with Barbeque, the best brunch place in Atlanta…”&nbsp;<a style="text-decoration:none" href="home.php">More...</a><br><br>
<b>What’s news?</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;By Gna kolata<br>
Source: NY Times, 10/07/2007
&nbsp;<a style="text-decoration:none" href="home.php">More...</a><br><br>
<b>Work out naturally!</b>&nbsp;By The kilorie team<br>
Source: Kilorie, 10/07/2007
&nbsp;<a style="text-decoration:none" href="home.php">More...</a><br><br>
<b>Fulton County Restaurant Scores: Inaccessible?</b>&nbsp; By Kilorie<br>
Source: Kilorie News, 09/24/2007
&nbsp;<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
&nbsp;<a style="text-decoration:none" href="home.php">More...</a>

</div>
</div>
<div id="box1"><br>
&nbsp;&nbsp;<b>Restaurant of the week</b><br><br>
&nbsp;&nbsp;<img align="center" src="images/homeimg2.gif" width="60" height="60">&nbsp;&nbsp;Figo Pasta<br><br>
&nbsp;&nbsp;Cuisine:Italian<br>
&nbsp;&nbsp;Food : <img src="images/5stars.gif"><br>
&nbsp;&nbsp;Service : <img src="images/5stars.gif"><br>
&nbsp;&nbsp;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>
&nbsp;&nbsp;<b>Did you know?<b>
&nbsp;&nbsp;<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
  1. html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
  2.  
  3. margin: 0;
  4.  
  5. padding: 0;
  6.  
  7. border: 0;
  8.  
  9. }
  10.  
  11. body {
  12.  
  13.     font-family: verdana; /* helvetica, impact, sans-serif;*/
  14.  
  15.     font-size: 14px;
  16.  
  17.     color:  #ff;
  18.  
  19.     //background-color: #FF9966; /*#DDCCC2;*/
  20.  
  21.     //background: url('images/image.jpg') repeat center;
  22.  
  23. }
  24.  
  25. #banner{
  26.  
  27.     height: 100px;
  28.     background-image: url(images/banner_v8.jpg);
  29.  
  30.     background-repeat: no-repeat;
  31.  
  32. }
  33.  
  34. #wrapper{
  35.  
  36.     width: 770px;
  37.  
  38.     /*background-color: #ABFF93; BEF3C0; key color */
  39.  
  40.     //background: url('bggrad2.jpg') repeat-x;
  41.  
  42.     margin:10px auto;
  43.  
  44.     border: 1px solid #000000;
  45.     height:620px auto;
  46.     background-color: #FFFFFF;
  47. slides.css
  48.  
  49. }
  50.  
  51. .container{
  52.  
  53.     width: 770px;
  54.     height:500px auto;
  55.  
  56.     float: middle;
  57.  
  58.     //margin-left: 10px;
  59.  
  60.      //margin-top:10px;
  61.  
  62.     //background-color: #669933; /*#DDCCC2; key color*/
  63. }
  64.  
  65. #box {
  66.     top: 0px;
  67.     left: 100px;
  68.     margin: 20px;
  69.     padding: 1px;
  70.     //border: 1px solid #000000;
  71.     width: 730px; 
  72.         height: 400px;
  73. }
  74.  
  75. #box1 {
  76.     margin: 20px;
  77.     padding: 1px;
  78.     border: 1px solid #000000;
  79.     width: 30%; 
  80.         height: 55%
  81.     }
  82. #box2 {
  83.     margin: 20px;
  84.     padding: 1px;
  85.     border: 1px solid #000000;
  86.     float: right; 
  87.     width: 63%; 
  88.         height: 90%;
  89.     }
  90. #box3 {
  91.     margin: 20px;
  92.     padding: 1px;
  93.     border: 1px solid #000000;
  94.     width: 30%; 
  95.         height: 31%;
  96.     }
  97.  
  98.  
  99.  
  100.      #header {
  101.  
  102.       float:left;
  103.  
  104.       width:100%;
  105.  
  106.       background:#DAE0D2 url("images/bg2.gif") repeat-x bottom;
  107.  
  108.       font-size:93%;
  109.  
  110.       line-height:normal;
  111.  
  112.       }
  113.  
  114.     #header ul {
  115.  
  116.       margin:0;
  117.  
  118.       padding:10px 10px 0;
  119.  
  120.       list-style:none;
  121.  
  122.       }
  123.  
  124.     #header li {
  125.  
  126.       float:left;
  127.  
  128.       background:url("images/norm_new_left.gif") no-repeat left top;
  129.  
  130.       margin:0;
  131.  
  132.       padding:0 0 0 9px;
  133.  
  134.       }
  135.  
  136.     #header a {
  137.  
  138.       display:block;
  139.  
  140.       background:url("images/norm_new_right.gif") no-repeat right top;
  141.  
  142.       padding:5px 15px 4px 6px;
  143.  
  144.       text-decoration:none;
  145.  
  146.       font-weight:bold;
  147.  
  148.       color:#765;
  149.  
  150.       }
  151.  
  152.     #header a:hover {
  153.  
  154.       color:#333;
  155.  
  156.       }
  157.  
  158.     #header #current {
  159.  
  160.       background-image:url("images/norm_left_on.gif");
  161.  
  162.       }
  163.  
  164.     #header #current a {
  165.  
  166.       background-image:url("images/norm_right_on2.gif");
  167.  
  168.       color:#333;
  169.  
  170.       padding-bottom:5px; /* f4ebe7 is best here*/
  171.  
  172.       }
  173.  
  174.  
  175. #footer{
  176.  
  177.     border-top: 1px solid #000000;
  178.  
  179.     background-color: #ec6053;/*#208a25; #003366;*/
  180.  
  181.     color: #00;
  182.  
  183.     clear: both;
  184.  
  185.     height:20px;
  186.     text-align:center;
  187.  
  188.     width:770px;
  189. }
  190.  
  191. #content {
  192.  
  193.  
  194.  
  195. margin-left: 15px;
  196.  
  197. margin-right: 15px;
  198.  
  199. //background-color: #FFF8DC; /*#60D136;*/
  200.  
  201. }
Jan 22 '08 #1
  • viewed: 1528
Share:
4 Replies
just a feeling
Peace,
Welcome kumuda,

A missing Document Type Declaration (DDT) in ur html document causes IE to go into "quirks" mode which affects your presentation.

At the very begining, write this
[HTML]<!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">[/HTML]

Then, try to validate ur html and Css for the errors u have.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

and let us know if u still face the same problem.

Hope that help,
Rawan.
Jan 22 '08 #2
Thank u

Now the page looks similar in both the browsers,
But the problem is with arranging the boxes horizantally where box1 is of larger dimension and is to the right, box2 and box3 are of smaller dimension to the left of box1 one below the other.
The code I have used is this.

test.php

<div class="container"><br>

<!Box model starts here>

<div id="box2"> This is box1</div>
<div id="box1"> This is box2</div>
<div id="box3"> This is box3</div>




<!box model ends here>

</div>

test.css

.container{

width: 700px;

/*float: right;*/

margin-left: 10px;

margin-top:10px;
margin-right:10px;
margin-bottom:10px;

background-color: #CC33FF; /*#DDCCC2; key color*/

}

#box1 {
margin: 10px;
padding: 1px;
border: 1px solid #000000;
width: 200px;
height: 200px;
float:top

}




#box2 {
margin: 10px;
padding: 1px;
border: 1px solid #000000;
float: right;
width: 450px;
height: 550px;
}




#box3 {
margin: 10px;
padding: 1px;
border: 1px solid #000000;
width: 200px;
height: 220px;
}



The boxes are aligned properly in firefox but in IE they appear one below the other. How to solve this issue. Can u please help me out

With regards,
kumuda
Jan 23 '08 #3
just a feeling
Hi kumuda,

Just add one pixel to the width of the container (i.e change it to 701) and it should work.

Best Regards,
Rawan.
Jan 23 '08 #4
Hi Rawan,

Thank you so much, It is working fine in both firefox and IE.

With regards,
kumuda
Jan 24 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by tagdance@gmail.com | last post: by
3 posts views Thread by cwdjrxyz@yahoo.com | last post: by
1 post views Thread by tinnews@isbd.co.uk | last post: by
8 posts views Thread by Atemporal | last post: by
15 posts views Thread by Mike Driscoll | last post: by
6 posts views Thread by Dennis | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.