IE vs FX

[tmziyad]

I am trying this CSS tutorial. I have made a page with given CSS and HTML codes.

 

http://www.how-to-build-websites.com/css_Tutorial/index.php

 

IE shows the page correctly but Firefox doesn't. In IE I can see the horizontal columns and in FX the columns are vertical.

 

What could be the reason?

[Wickham]

Please show your code (use the forum BBCode code tags if your page isn't online yet).

Edited June 20, 2009 by Wickham

[tmziyad]

This is the CSS.

 

/* Generic Selectors */

body {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

color: #333333;

background-color: #F9F9F9;

}

 

p {

width: 80%;

}

 

li {

list-style-type: none;

line-height: 150%;

list-style-image: url(../images/arrowSmall.gif);

}

 

h1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

color: #000000;

}

 

h2 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #C6EC8C;

}

 

/**************** Pseudo classes ****************/

a:link {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

 

li a:link {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

 

a:visited {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

 

li a:visited {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

 

a:hover {

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

text-decoration: underline;

}

 

li a:hover {

display: block;

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}

 

a:active {

color: rgb(255, 0, 102);

font-weight: bold;

}

 

/************************* ID's *************************/

 

#navigation {

position: absolute;

z-index: 10;

width: 210px;

height: 600px;

margin: 0;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

#centerDoc {

position: absolute;

z-index: 15;

padding: 0 0 20px 20px; /*top right bottom left*/

margin-top: 50px;

margin-left: 235px;

}

 

 

 

and the HTML

 

 

The Main navigation

The Main Heading

 

Go to the Web Designer's Killer Handbook home page and grab the

practice HTML page that we will used as the starting template for

this tutorial.

 

[Wickham]

I noticed that in IE7, if I reduced the width of the viewing window below about 1000px, the text in #centerDoc was continuing off the screen at the right and causing a scrollbar and even then I could not reach the end of a line, while Firefox was showing the text as 80% of the width of the div as you have p { width: 80%; } whatever window width I was using.

 

It's preferable with position: absolute to use top and left positions, not margins, like this:-

 

br />   "http://www.w3.org/TR/html4/strict.dtd">




Test
<br />/* Generic Selectors */ <br />body { <br />    font-family: Georgia, "Times New Roman", Times, serif; <br />    font-size: 14px; <br />    color: #333333; <br />    background-color: #F9F9F9; <br />}<br /><br />p { <br />    width: 80%; <br />} <br /><br />li { <br />    list-style-type: none; <br />    line-height: 150%; <br />    list-style-image: url(../images/arrowSmall.gif); <br />} <br /><br />h1 { <br />    font-family: Georgia, "Times New Roman", Times, serif; <br />    font-size: 18px; <br />    font-weight: bold; <br />    color: #000000; <br />} <br /><br />h2 { <br />    font-family: Georgia, "Times New Roman", Times, serif; <br />    font-size: 16px; <br />    font-weight: bold; <br />    color: #000000; <br />    border-bottom: 1px solid #C6EC8C; <br />} <br /><br />/**************** Pseudo classes ****************/ <br />a:link { <br />    color: #00CC00; <br />    text-decoration: underline; <br />    font-weight: bold; <br />} <br /><br />li a:link { <br />    color: #00CC00; <br />    text-decoration: none; <br />    font-weight: bold; <br />} <br /><br />a:visited { <br />    color: #00CC00; <br />    text-decoration: underline; <br />    font-weight: bold; <br />} <br /><br />li a:visited { <br />    color: #00CC00; <br />    text-decoration: none; <br />    font-weight: bold; <br />} <br /><br />a:hover { <br />    color: rgb(0, 96, 255); <br />    padding-bottom: 5px; <br />    font-weight: bold; <br />    text-decoration: underline; <br />} <br /><br />li a:hover { <br />    display: block; <br />    color: rgb(0, 96, 255); <br />    padding-bottom: 5px; <br />    font-weight: bold; <br />    border-bottom-width: 1px; <br />    border-bottom-style: solid; <br />    border-bottom-color: #C6EC8C; <br />} <br /><br />a:active { <br />    color: rgb(255, 0, 102); <br />    font-weight: bold; <br />} <br /><br />/************************* ID's *************************/ <br /><br />#navigation { background: pink;<br />    position: absolute; <br />    z-index: 10; <br />    width: 210px; <br />    height: 600px; <br />    margin: 0; <br />    border-right: 1px solid #C6EC8C; <br />    font-weight: normal; <br />} <br />#centerDoc { background: lime; top: 50px; left: 235px;<br />    position: absolute; <br />    z-index: 15; <br />    padding: 0 0 20px 20px; /*top right bottom left*/ <br />    /*margin-top: 50px;*/<br />    /*margin-left: 235px;  */<br />}<br /><br />




 
The Main navigation 
 
 
The Main Heading 


       Go to the Web Designer's Killer Handbook home page and grab the  practice HTML page that we will used as the starting template for  this tutorial. 
 

 

A top and left position are not necessary for the #navigation div as it assumes top: 0; left: 0;

 

Notice I have added a doctype at the top and added background-colors temporarily so that the extent of the divs can be seen. IE7 and Firefox look the same with my code for the width of the text but Firefox continues the lime green background to the full width of the div while IE7 only shows it for the 80% width of text, but that is just one of the browser differences and should not matter when you delete the colors.

Edited June 20, 2009 by Wickham

[tmziyad]

Thank you very much Sir, I got it ...

thanks a lot