By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,114 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

Problem with firefox and IE

P: 21
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
Share this Question
Share on Google+
4 Replies


just a feeling
P: 87
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

P: 21
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
P: 87
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

P: 21
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.