HELP IE9 IGNORING TOP MARGIN! (WORKS IN FF & GC)

[BELOVEDboutique]

This is my website (under construction) http://thebelovedboutique.com
It looks good in Firefox and Google Chrome but is partically cut off in IE9. I'm not sure what changes to make in order fix this. Here is what the CSS looks like.

p.alert-noproducts,
p.alert-noitems {
  margin: 20px;
  }

div#error {
  display: block;
  margin-bottom: 5px;
  border-top: 1px solid #6c1010;
  border-bottom: 1px solid #6c1010;
  background: #cf3636;
  }

div#error h2,
div#error p {
  display: none;
  }

div#error ul {
  margin: 0;
  padding: 5px 20px;
  font-size: 13px;
  color: #fff;
  line-height: 25px;
  }

div#error li {
  margin: 0;
  padding: 0 20px;
  font-weight: bold;
  background: url(xxxxx) no-repeat 0 7px;
  }

.form-error {
  border: 1px solid #cf3636;
  }


/*============= Begin Base========================*/

* {
  margin: 0;
  padding: 0;
  }

body {
  {% if theme.background_image != blank %}
  background-image: url({{ theme.background_image.url }});
  background-repeat: repeat;
{% endif %}
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11px;
  font-weight: normal;
  margin: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  * {
  margin: 0;
  padding: 0;
  }
}
  
#wrap {
    margin: 0 auto 15px;
    text-align: left;
    width: 1012px;
}



ul, ol {
  margin-bottom: 1em;
  }

li {
  list-style: none;
  }

h2 {
  margin-bottom: 1em;
  font-weight: normal;
  }


h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

span {
margin:0px;
padding:0px;
}

a {
outline:none;
text-decoration:none;
}

p {
font-size:12px;
line-height:15px;
margin-bottom:1em;
color:#000000;
}


a:link, a:visited {
  color: #ff0054;
  }

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

a img  {
  border: none;
  }

img {
  -ms-interpolation-mode: bicubic;
  }

input,
textarea {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 11px;
  color: #ff0054;
  }

hr {
  margin-bottom: 10px;
  height: 1px;
  color: #000000;
  background: #ccc;
  border: none;
  }

#product-1, #product-4, #product-7, #product-10, #product-13, #product-16, #product-19, #product-22, #product-25, #product-28, #product-31, #product-34, #product-37, #product-40, #product-43, #product-46, #product-49, #product-52, #product-55, #product-58, #product-61, #product-64, #product-67, #product-70, #product-73, #product-76, #product-79, #product-82, #product-85, #product-88, #product-91, #product-94, #product-97, #product-100 {
margin:0px;
padding:0px;
}

#product-2, #product-5, #product-8, #product-11, #product-14, #product-17, #product-20, #product-23, #product-26, #product-29, #product-32, #product-35, #product-38, #product-41, #product-44, #product-47, #product-50, #product-53, #product-56, #product-59, #product-62, #product-65, #product-68, #product-71, #product-74, #product-77, #product-80, #product-83, #product-86, #product-89, #product-92, #product-95, #product-98 {
margin:0px;
padding:0px;
}

#product-3, #product-6, #product-9, #product-12, #product-15, #product-18, #product-21, #product-24, #product-27, #product-30, #product-33, #product-36, #product-39, #product-42, #product-45, #product-48, #product-51, #product-54, #product-57, #product-60, #product-63, #product-66, #product-69, #product-72, #product-75, #product-78, #product-81, #product-84, #product-87, #product-90, #product-93, #product-96, #product-99 {
margin:0px;
padding:0px;
}

.current-product-counter {
display:none;
}

/*============= End Base========================*/


/*============= Begin Header Area========================*/

#widehead {
  background: none repeat scroll 0 0 #FFFFFF;
  border-color: -moz-use-text-color -moz-use-text-color #000000;
  border-style: none none solid;
  border-width: 0 0 1px;
  box-shadow: -4px 4px 4px #DDDDDD;
  left: 0px;
  margin: auto;
  width: 100%;
}

#wideheadcontents {
  margin: auto;
  padding-left: 28px;
  padding-right: 28px;
  width: 610x;
}

#header {
  margin: auto;
  padding: 25px 0px 18px;
  text-align: left;
  width:960px;
}

#header h1 {
    font-size: 0px;
    font-weight: bold;
    line-height: 80px;
    margin-bottom: 0;
    margin-top: 0;
    color:#000000;
    text-transform: uppercase;
    width:600px;
    background: url(xxxxxx) #cccccc no-repeat;
}    


#header h1 span {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
    font-family:arial;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

#header.image h1 span {
  display: visible;
  }
  
#right-header {
  float: right;
  margin-bottom: 10px;
  margin-right: 0;
  margin-top: -90px;
  width: 350px;
}

/* Header Navigation Styles-------------------------------------------------*/

#header-navigation {
  background: none repeat scroll 0 0 transparent;
  border-style: none;
  height: 26px;
  margin: auto auto 5px;
  padding-left: 0px;
  padding-right: 0px;
  width: 960px;
}


#header-navigation li a {
    display: inline;
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    font-size: 11px;
    font-weight: bold;
    margin-left: 15px;
    margin-right: 15px;
    text-transform: uppercase;
    color:#000000;
}

#header-navigation ul {
height:22px;
margin-bottom:0;
margin-left:0px;
padding-bottom:5px;
padding-top:5px;
}

#header-navigation li {
display:inline;
}

[logic_earth]

You need to apply a height to the H1 in the header.

[ralph.m]

Hi BELOVEDboutique. Welcome to the forums.

Putting a negative top margin on an element like that is a dangerous way to do this layout, and not necessary. Instead, do the following:

- remove the negative top margin on the right-header
- float the <h1> to the left
- add overflow: hidden to the #header div.

That should fix things.

[Rayzur]

It should also be pointed out that the following rule from your css is invalid

#header.image h1 span {  
 display: visible;
}

visible is not a valid value for display, the span will ignore that and default to display:inline;

[BELOVEDboutique]

You need to apply a height to the H1 in the header.

Could you copy & paste the coding where I would apply this? lol graphic design is more my line of work, my CSS skills are pretty slim.

[BELOVEDboutique]

It should also be pointed out that the following rule from your css is invalid

#header.image h1 span {  
 display: visible;
}

visible is not a valid value for display, the span will ignore that and default to display:inline;

thank you.

[BELOVEDboutique]

Hi BELOVEDboutique. Welcome to the forums.

Putting a negative top margin on an element like that is a dangerous way to do this layout, and not necessary. Instead, do the following:

- remove the negative top margin on the right-header
- float the <h1> to the left
- add overflow: hidden to the #header div.

That should fix things.

I am thankful for your help but I have to be completely honest I have no idea how to put that into coding. If you would be so kind as to show me what it should look like I would greatly appreciate it!

[ralph.m]

I am thankful for your help but I have to be completely honest I have no idea how to put that into coding. If you would be so kind as to show me what it should look like I would greatly appreciate it!

OK, delete the bits in red below and add the bits in blue:

#header {
  margin: auto;
  padding: 25px 0px 18px;
  text-align: left;
  width:960px;
  overflow: hidden;
}

#header h1 {
    font-size: 0px;
    font-weight: bold;
    line-height: 80px;
    margin-bottom: 0;
    margin-top: 0;
    color:#000000;
    text-transform: uppercase;
    width:600px;
    background: url(xxxxxx) #cccccc no-repeat;
    float: left;
}    


#header h1 span {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
    font-family:arial;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

#header.image h1 span {
  display: visible;
  }
  
#right-header {
  float: right;
  margin-bottom: 10px;
  margin-right: 0;
  margin-top: -90px;
  width: 350px;
}

[BELOVEDboutique]

OK, delete the bits in red below and add the bits in blue:

#header {
  margin: auto;
  padding: 25px 0px 18px;
  text-align: left;
  width:960px;
  overflow: hidden;
}

#header h1 {
    font-size: 0px;
    font-weight: bold;
    line-height: 80px;
    margin-bottom: 0;
    margin-top: 0;
    color:#000000;
    text-transform: uppercase;
    width:600px;
    background: url(xxxxxx) #cccccc no-repeat;
    float: left;
}    


#header h1 span {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
    font-family:arial;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

#header.image h1 span {
  display: visible;
  }
  
#right-header {
  float: right;
  margin-bottom: 10px;
  margin-right: 0;
  margin-top: -90px;
  width: 350px;
}

Thanks a bunch! everything pretty much fell into place with the exception of the title. Its missing now..the IMG file was background:url(xxxx) where I put the float property. Do you think that has something to do with it disappearing?

[ralph.m]

Do you think that has something to do with it disappearing?

Yes, I just copied your code from above. You'll have to put the path to the image back in. (I didn't notice you have removed the path. My attention was on other things. )

I don't know where the image is, so can't advise on the actual path, but it would look something like this:

background: url(/images/header.jpg) #cccccc no-repeat;

If you don't understand file paths, hopefully you've got a copy of the code as it was before. Otherwise tell us where your images are stored and we can work out what the path is. Also, we need the name of the image file.

[BELOVEDboutique]

Yes, I just copied your code from above. You'll have to put the path to the image back in. (I didn't notice you have removed the path. My attention was on other things. )

I don't know where the image is, so can't advise on the actual path, but it would look something like this:

background: url(/images/header.jpg) #cccccc no-repeat;

If you don't understand file paths, hopefully you've got a copy of the code as it was before. Otherwise tell us where your images are stored and we can work out what the path is. Also, we need the name of the image file.

Okay here it is

 
/*============= Begin Header Area========================*/

#widehead {
  background: none repeat scroll 0 0 #FFFFFF;
  border-color: -moz-use-text-color -moz-use-text-color #000000;
  border-style: none none solid;
  border-width: 0 0 1px;
  box-shadow: -4px 4px 4px #DDDDDD;
  left: 0px;
  margin: auto;
  width: 100%;
}

#wideheadcontents {
  margin: auto;
  padding-left: 28px;
  padding-right: 28px;
  width: 610x;
}

#header {
  margin: auto;
  padding: 25px 0px 18px;
  text-align: left;
  width:960px;
  height:80px;
  
}

#header h1 {
    font-size: 0px;
    font-weight: bold;
    line-height: 80px;
    margin-bottom: 0;
   
<!--[if IE]>
  margin-bottom: 8cm;
<![endif]-->
    margin-top: 8cm;
    color:#000000;
    text-transform: uppercase;
    width:600px;
    background: url(http://i62.photobucket.com/albums/h106/fantaszmikc/FINAL_LOGO5.png) #cccccc no-repeat;
    float: left;
}    


#header h1 span {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
    font-family:arial;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

#header.image h1 span {
  display: inline;
  }
  
#right-header {
  float: right;
  margin-bottom: 10px;
  margin-right: 0;
  width: 350px;
  
}

[ralph.m]

OK, well, according to that code, instead of

#header h1 {
    background: url(xxxxxx) #cccccc no-repeat;
}

you should have

#header h1 {
    background: url(background: url(http://i62.photobucket.com/albums/h106/fantaszmikc/FINAL_LOGO5.png) #cccccc no-repeat;) #cccccc no-repeat;
}

However, I would advise against linking to an image that's hosted on another site—especially like photobucket. You are better off creating an images folder in your root folder, placing the FINAL_LOGO5.png image in there, and linking to it like so:

#header h1 {
    background: url(background: url(/images/FINAL_LOGO5.png) #cccccc no-repeat;) #cccccc no-repeat;
}