SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

    Code:
    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;
    }

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    You need to apply a height to the H1 in the header.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It should also be pointed out that the following rule from your css is invalid
    Code:
    #header.image h1 span {  
     display: visible;
    }
    visible is not a valid value for display, the span will ignore that and default to display:inline;

  5. #5
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    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.

  6. #6
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    It should also be pointed out that the following rule from your css is invalid
    Code:
    #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.

  7. #7
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BELOVEDboutique View Post
    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:

    Code:
    #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;
    }

  9. #9
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, delete the bits in red below and add the bits in blue:

    Code:
    #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?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BELOVEDboutique View Post
    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:

    Code:
    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.

  11. #11
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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:

    Code:
    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

    Code:
     
    /*============= 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;
      
    }

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, well, according to that code, instead of

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

    Code:
    #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:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •