CSS and Firefox

Question

When I use the folowing CSS code on Firefox, I get a gap between the banner and the top of the screen. How can I avoid this?

#container1
{
position:absolute;
left: 0px;
right: 0px;
width: 1000px;
height: 255px;
margin:  0;


}
#logo1 {   
 background:#FFFFFF; 
  margin: 0;    
  border: 1px solid red; 
   position:absolute;   
    left: 0px;   
     top: 0px;    
     width: 200px;  
       height: 250px;

       }
#Banner1 {    
background: #1071A6;    
position:absolute;    
left: 200px;    
top: 0px;   
 width: 789px;    
 height: 250px;
 vertical-align:top;
  margin:  0;    border:  1px solid red;
 }

Answer 1

a gap between the banner and the top of the screen

Have you set the body's margin and padding to 0 as well?

Answer 2

I would recommend using a reset stylesheet like this for every design you do. It guarantees a clean slate on every browser. Any changes you make will look pretty much the same in every browser after using a reset, so you can avoid problems like these.

Answer 3

Use a reset stylesheet to set all default values to 0 in all browser. Make sure this is the first stylesheet in order, if you have problems after applying the stylesheet then it'll make it much easier to fix.

Answer 4

body{margin:0 padding:0;}

should do the trick.