Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Internet Explorer can't display left toolbar

    Dear all,

    Could someone please help explain why the left toolbar (identified as "nav" in the css style sheet below) in my subpages, such as this one (www.lixiao-art.com/bliss.html), can be displayed in older Windows versions of IE browser BUT NOT when using newer versions (e.g. Windows 7) of IE browser?

    Also, why is the spacing between the thumbnails wrong in IE7 compared to using an older version of IE browser?

    I've just started learning css coding, please be so kind to show me what went wrong and how I can make them correct.

    Thanks so much!!!

    ----------------------------------------------------------------------
    body { font-family: Verdana;
    color: white;
    margin: 0px;
    background-color: black; }
    #header { font-family: courier new;
    padding-left: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    background-color: white;
    margin-bottom: 0px; }
    #content {float: right;
    padding: 30px 20px 20px 100px;
    width: 650px;
    position: absolute;
    margin: 0px;
    border: none;
    font: white;
    font-family: Arial;
    background-color: black; }
    h2 {height: 2em;}
    #nav {float: left;
    text-align: right;
    font-size: small;
    width: 200px;
    margin-top: 30px;
    font-weight: bold;
    padding: 10px;
    border: none;
    }
    #footer { font-family: arial;
    padding-bottom: 5px;
    width: 100%
    border: none;
    background-color: black;
    color: white;
    margin-bottom: 0px; }
    a{text-decoration: none;
    color: white;}
    a:hover {color: red;}



    * {margin: 0;}
    html, body {height: 100%;}

    .wrapper {min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -1.5em;}

    .footer, .push { height: 1.5em; }

    .ImgBorder:hover { border: 1px solid red; }

    img { border: none; }
    ---------------------------------------

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You can't see #nav because #content is absolutely positioned on top of it - later versions of IE, and FF are displaying the code correctly. Try removing the position:absolute from #content, and changing float:right to float:left.

    IE7 displays this page differently due to its incorrect application of position:absolute in that it requires an explicit left statement. In the absence of this an absolutely positioned element is not correctly positioned - which here actually gives you the result you want. However, the change in my previous paragraph should fix this.

    The spacing on the images is different in IE7 because you are using deprecated hspace and vspace attributes on the images, which IE7 is parsing, but more modern browsers are not. Remove these attributes and it should be OK.
    Last edited by SB65; 07-30-2012 at 09:59 AM.

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you so much!

    Following your advice, I have made the changes regarding the position of the left toolbar.


    However, I still have problems with the spacing between the images. I wanted to keep vspace=30px and hspace=20px between the images. Instead of using the deprecated vspace and hspace tags (I've removed them in the html), I have added this line (shown in red) in the css stylesheet:

    .ImgBorder:hover { border: 1px solid red;
    margin: 30px 20px; }


    But, still, no spacing is shown between the images. What's wrong with my css coding?


    For your reference, the entire css coding is here:

    ------------

    body { font-family: Verdana;
    color: white;
    margin: 0px;
    background-color: black; }
    #header { font-family: courier new;
    padding-left: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    background-color: white;
    margin-bottom: 0px; }
    #content {float: left;
    padding: 30px 20px 20px 100px;
    width: 650px;
    margin: 0px;
    border: none;
    font: white;
    font-family: Arial;
    background-color: black; }
    h2 {height: 2em;}
    #nav {float: left;
    text-align: right;
    font-size: small;
    width: 200px;
    margin-top: 30px;
    font-weight: bold;
    padding: 10px;
    border: none;
    }
    #footer { font-family: arial;
    padding-bottom: 5px;
    width: 100%
    border: none;
    background-color: black;
    color: white;
    margin-bottom: 0px; }
    a{text-decoration: none;
    color: white;}
    a:hover {color: red;}



    * {margin: 0;}
    html, body {height: 100%;}

    .wrapper {min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -1.5em;}

    .footer, .push { height: 1.5em; }

    .ImgBorder:hover { border: 1px solid red;
    margin: 30px 20px; }

    img { border: none; }

    ---------------------------

    Many thanks again!!

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Looks like you've almost sorted this...

    You're (now) applying a top and bottom margin to an inline element, which won't work. Try:

    Code:
    .ImgBorder {
        display: block;
        float: left;
        margin: 80px 20px;
    }
    
    h5{
    clear:both
    }
    Declaring the a elements as block will mean the top and bottom margins are valid, then float the elements so they line up next to each other. Finally add a clear:both to the h5 so it sits underneath all the elements.

    Then, to give your images a margin when hovered, use the img tag:

    Code:
    ImgBorder img {
    border:1px solid transparent}
    
    ImgBorder:hover img{
    border-color:red
    }
    Give the img a transparent border, and turn it red on hover. If you don't have the transparent border the images will jump to the right on hover because of the additional border.
    Last edited by SB65; 07-30-2012 at 12:02 PM.

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Wow, thank you so much! I've made the changes as advised. But I've noticed two new problems:

    1. some of the images are now aligned on the right. See, for example,

    http://www.lixiao-art.com/broken.html
    http://www.lixiao-art.com/gaze.html

    2. Having removed the position:absolute attribute for the left toolbar (in #nav), it is now correctly displayed on the left. But, when I decrease the size of my browser, the left toolbar got squeezed to the top.

    How can I fix these two new problems?

    Thanks so much!!!

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    1. That's because the images preceding the one on the right are actually 1px less high than the rest. A simple solution here would be to force the images to be 100px high via:

    Code:
    ImgBorder img {
    border:1px solid transparent;
    height:100px;
    }
    2. That will happen when the viewport is not wide enough. If you don't want this, set a min-width on #wrapper of 970px (total width of #nav and #content) or more.

  • Users who have thanked SB65 for this post:

    lixiao (07-30-2012)

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Wow, I've learnt so much from you! Thank you so much !!! I really appreciate your help!!

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    css not working after switching lightbox

    Hi again,

    Your solution had worked perfectly. But, once I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails disappeared and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?

    see the problem page after switching to using fancybox: Li Xiao, artist | └ţŔ╔ ĎŇ╩§╝Ď (compared with Li Xiao, artist | └ţŔ╔ ĎŇ╩§╝Ď )


    This is my code:

    body { font-family: Verdana, Arial, Helvetica, sans-serif;
    color: black;
    margin: 0px;
    background-color: RGB(181,170,128);
    }

    *{
    font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
    }


    #nav {float: left;
    position: fixed;
    background-color: RGB(233,231,197);
    text-align: left;
    font-size: 11px;
    color: #645630;
    width: 90px;
    font-weight: bold;
    padding: 100px 20px 100px 30px;
    border: none;
    min-height: 100%;
    }



    #content {float: left;
    margin-left: 150px;
    padding: 15px 20px 10px 80px;
    width: 900px;
    margin-top: 0px;
    border: none;
    font: black;
    font-size: 11px;
    }


    #content a {text-decoration:underline}


    h2 {height: 2em;}


    .footer {
    text-align:center;
    padding-top: 50px;
    padding-bottom: 1em;
    font-size: 11px;
    }


    a{text-decoration: none;
    color: #645630;}
    a:hover {color: red;}


    * {margin: 0;}
    html, body, wrapper {height: 100%;}










    .ImgBorder img { border:2px solid transparent;
    height:100px;
    }
    .ImgBorder:hover img{ border-color: white}

    .ImgBorder {display: block;
    float: left;
    margin: 30px 20px; }
    h5{
    clear:both
    }

    img { border: none; }
    Thank you!


  •  

    Posting Permissions

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