I cant figure it out why there is a space above my banner so there is a space between top of the website and browser like 10 px. In IE there is not space but in firefox there is.

I set the body and html to margin padding 0 and that does not do the trick

I am just posting my css and html here please help

html,body {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #444;
    text-align: center;
    background-color: #bcd4a1;
}

/*input {width: 140px;}*/

#container {
    width: 1000px;
    margin: auto;
    text-align: left;
    background-color: #fff;
    border-left: 2px solid #3F6A3F;
    border-right: 2px solid #3F6A3F;
}

#header {
    height: 126px;
    width: 1000px;
    border-bottom: 2px solid #3F6A3F;
    background-image: url(images/fruitheader.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
}

#sidemenu {
    min-height: 400px;
    width: 180px;
    float: left;
    /*clear: right;*/
}

#content {
    min-height: 1100px;
    width: 750px;
    padding-top: 10px;
    /*padding-left: 20px;*/
    margin-left: 30px;
    float: left;
    border-left: 2px solid #3F6A3F;

}

#footer {
    height: 50px;
    width: 1000px;
    border-top: 2px solid #3F6A3F;
    clear: both;
}

#footer ul {
    margin-left: 190px;
}

ul.menu, ul.menufooter {
    padding-left: 0px;
    margin-left: 0px;
    margin-top: 0px;
}

ul.menu li {
    margin: 10px;
    padding: 5px;
    list-style-type: none;
    background-image: url(images/gradient_bg.jpg);
    background-repeat: repeat-y;
    width: 100%;
    border: 1px solid #609126;
}

ul.menu li:hover {
    color: #CBDD87;
}

ul.menu a:link, ul.menu a:visited {
    color: #3e5f14;
    text-decoration: none;
    padding: 15px;
    padding-left: 0px;
    margin-left: 0px;
}

ul.menu a:hover, ul.menu a:active {
    color: #609126;
    text-decoration: none;
    padding: 5px;
    padding-bottom: 2px;
    padding-left: 0px;
    margin-left: 0px;
}

ul.menufooter li {
    display: inline;
    padding-left: 20px;
    font-size: 0.9em;
}

ul.menufooter li a:link {
    color: #333;
    text-decoration: none;
}

ul.menufooter li a:hover {
    color: #ccc;
    text-decoration: none;
}

p, table {
    /*margin-left: 25px;*/
    padding-top: 0px;
    color: #444;
    line-height: 1.3em;
    text-align: justify;
    
}

table.stories td {
    padding: 5px;
}

tr.heading {
    color: #963A40;
    font-weight: normal;
    font-size: 1.3em;
    border-bottom: 1px solid #ccc;
}

#content p {margin-top: 10px; margin-bottom: 20px;}

ul,li {
    line-height: 1.5em;
}

a:link, a:visited {
    color: #3e5f14;
}

a:hover, a:active {
    color: #609126;
}

h1 {
    font-size: 2.2em;
    font-family: 'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif;
    color: #D39D5C;
    font-weight: lighter;
    padding-left: -15px;
}

h2 {
    font-size: 1.7em;
    font-family: 'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif;
    color: #3F6A3F;
    font-weight: lighter;
    /*padding-left: 15px;*/
}

h3 {
    font-size: 1.5em;
    font-family: 'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif;
    color: #963A40;
    font-weight: lighter;
    padding-left: 15px;
    margin-top: 20px;
}

h4 {
    font-size: 1.3em;
    font-family: 'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif;
    color: #D39D5C;
    font-weight: lighter;
    padding-left: 10px;
}


p.newsletterquote {
    margin: 40px;
    color: #D39D5C;
    border: 1px dotted #ccc;
    padding: 5px;
}

p i {
    color: #848484;
}

img.right {
    float: right;
    padding: 5px;
    border: 1px solid #eee;
    margin-right:15px;
}

img.left {
    float: left;
    padding: 5px;
    border: 1px solid #eee;
    margin-right:10px;
    margin-top:30px
    margin-bottom: 10px;
    margin-left: 15px;
}

#sidemenu p {
    margin-left: 15px;
    margin-right: 5px;
    text-align: center;
    line-height: 1.2em;
}




li.leaf {
    list-style-type: none;
    list-style-image: none!important;
    
}

li.collapsed  {

    list-style-type: none;
    list-style-image: none;
}



.node, .nodePage {

      border-top:1px solid #fff;
      margin:0 0 1.5em;
      padding:10px 10px 0;

}



.nodePage {
    padding:4px 10px 0px 10px;
}

#navbar {
    border-bottom: 2px solid #3F6A3F;
    }
    
#navbar a{
    text-decoration: none;
    }    

.content img {
    padding: 5px 10px 0 0;
    }

    
 #header .siteName a {
    text-decoration: none;
}


 * Admin Styles

 */

div.admin-panel,

div.admin-panel .description,

div.admin-panel .body,

div.admin,

div.admin .left,

div.admin .right,

div.admin .expert-link,

div.item-list,

.menu

{

  margin: 0;

  padding: 0;

}



div.admin .left

{

  float: left;

  width: 48%;

}

div.admin .right

{

  float: right;

  width: 48%;

}



div.admin-panel

{

  padding: 1em 1em 1.5em;

}



div.admin-panel .description

{

  margin-bottom: 1.5em;

}



div.admin-panel dl

{

  margin: 0;

}



div.admin-panel dd

{

  color: #898989;

  font-size: 0.92em;

  line-height: 1.3em;

  margin-top: -.2em;

  margin-bottom: .65em;

}

This is a drupal page code with php hooks so you can easily see what is wrong

<!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" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>">
  <head>

    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>

  </head>
  <body>

   <div id="container">
    <div id="header">
           <?php if ($site_name) { ?><h1 class='siteName'><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
          <?php if ($site_slogan) { ?><h2 class='siteSlogan'><?php print $site_slogan ?></h2><?php } ?>
    </div>
    
    
    
    
        <!-- begin navbar -->
        <div id="navbar">
          <div class="wrapper">

            <?php if (isset($primary_links)) : ?>
              <?php print theme('links', $primary_links, array('class' =>'links', 'id' => 'navtabs')) ?>
            <?php endif; ?>

          </div><!-- end navbar wrapper -->
        </div><!-- end navbar -->
    
    

    <div id="sidemenu">
        <ul class="menu">
            
            
            
              <?php print $sidebar; ?>
            
            
        </ul>
    
    
        
</div>



    <div id="content">
    
    
      <?php if ($mission): print '<div class="mission">'. $mission .'</div>'; endif; ?>
              <?php if ($breadcrumb): print '<div class="breadcrumb">'. $breadcrumb . '</div>'; endif; ?>
              <?php if ($title) : print '<h1 class="pageTitle">' . $title . '</h1>'; endif; ?>
              <?php if ($tabs) : print '<div class="tabs">' . $tabs . '</div>'; endif; ?>
              <?php if ($help) : print '<div class="help">' . $help . '</div>'; endif; ?>
              <?php if ($messages) : print '<div class="messages">' .$messages . '</div>'; endif; ?>
              <?php print $content_top; ?><br><br>
              <?php print $content; ?><br><br>
              <?php print $content_bottom; ?>
              <?php print $feed_icons; ?>    
    
    
  </div>

    <div id="footer">

        <ul class="menufooter">
            <li><a href="http://www.optimizacijadesign.com/index.php">Design</a></li>
            <li><a href="http://www.numerologija.org">Numerologija</a></li>
            <li><a href="http://www.radiestezija.com">Radiestezija</a></li>
            

            
        </ul>
</div>

</div>
    <?php print $closure ?>
  </body>
</html>

can you post the link to the site so that i can see what you mean?

yes sure link http://alternativnakomplementarnamedicina.com/

Also the whole design moves when switching from IE to firefox
is it because or borders?

That extra space at the top is caused by margin collapse, which is NOT a bug. Put padding-top: 1px on your #header and it will go away.

The only 'movement' I see between FF and IE is due to the extra toolbars I have in FF that I do not have on IE. The extra toolbars reduces the viewport size.

wow it really works thank you, I reall don't understand why this is happening, why do I have to ad 1 px to header?

Do you use IE 7, because in ie 6 the left menu is wider than in firefox

why do I have to ad 1 px to header?

To uncollapse the margins. Read up on the whys of it here:

http://www.complexspiral.com/publica...psing-margins/
http://www.andybudd.com/archives/200...gin_for_error/

I use IE6. In Firefox, your #sidemenu isn't wide enough to contain those buttons you have. Whereas IE's behavior is to 'wrap' around the content with a div, regardless of the specified heights or widths.

By the way, IE6 doesn't support min/max width/height. You need to feed IE6 and below a fixed width/height.

The way I think of this is that I simply remember that when margins don't do what it seems that they should be, they probably need something to "push" against. The only thing a margin can push against is something with a "solid edge", either padding, a border, or the area immediately after where margins are done collapsing. Margins always collapse against each other, which is partly why they are so useful, but sometimes this is confusing to the casual observer.

Negative margins also collapse, so be careful about them!

Originally Posted by seola

yes sure link http://alternativnakomplementarnamedicina.com/

Also the whole design moves when switching from IE to firefox
is it because or borders?

woahhhhhhhhhhhhhhhhhhhhhhhhhhh thats a long a$$ name!!!