Hover Over Border Effect Breaking Down In IE

Discussion in 'CSS' started by DrZork101, Aug 28, 2008.

0
  1. #1
    Hi, i built this page a while back but have decided to clean it up:

    http://www.creationbox.co.uk/portfolio.html

    When you hover over the picture the border is not displayed correctly in IE 6 but it works fine in ie 7 and firefox 3

    Any help would be great,

    Julian
     
    DrZork101, Aug 28, 2008 IP
  2. bvchandu

    bvchandu Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi

    problem:Hover Over Border Effect Breaking Down In IE

    Change the " Margin:0px; " in the below css styles

    #portfolio1 A
    #portfolio1 A:active
    #portfolio1 A:hover

    in your style sheet.......After the modification you have to check in ie6 & 7 and firefox it is working.
     
    bvchandu, Aug 29, 2008 IP
  3. DrZork101

    DrZork101 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    NOT Solved. If i do that, the border is then placed over the images.
     
    DrZork101, Aug 29, 2008 IP
  4. gsbit2005

    gsbit2005 Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    Use this CSS :

    /* Splash Screen CSS */

    body {
    background: #302E2C;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #CCCCCC;
    text-align: center;
    }

    p {

    margin: 5px;
    }

    h1{

    font-size: 18px;
    font-weight: bold;
    }

    h2{

    font-size: 14px;
    font-weight: bold;
    }

    a {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #72B2B0;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    #mainHiddenContent{
    float: right;
    width: 400px;
    height: 300px;
    text-indent: -9999px;
    text-align: left;
    }

    #mainContainer{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    width: 700px;
    height: 400px;
    background: url(Images/splashMain.gif) 0 0 no-repeat;
    text-align: left;

    }

    #contactButtonContainer{
    float: left;
    width: 120px;
    height: 75px;
    background: url(Images/splashContactButton.gif) 0 0 no-repeat;
    margin-top: 275px;
    margin-left: 50px;
    display:inline;
    }

    #contactButtonContainer a{
    display:block;
    width : 120px;
    height: 75px;
    text-indent: -9999px;
    text-decoration:none;
    overflow:hidden;
    }
    #contactButtonContainer a:hover{
    background: url(Images/splashContactButton.gif) 0 -75px no-repeat;
    }

    #contactBackContainer{
    position: absolute;
    width: 120px;
    height: 75px;
    background: url(Images/splashBackButton.gif) 0 0 no-repeat;
    display: inline;
    left: 58px;
    top: 242px;
    }

    #contactBackContainer a{
    display:block;
    width : 120px;
    height: 75px;
    text-indent: -9999px;
    text-decoration:none;
    overflow:hidden;
    }
    #contactBackContainer a:hover{
    background: url(Images/splashBackButton.gif) 0 -75px no-repeat;
    }

    #footerLineContainer{
    width: 620px;
    height:1px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #666666;
    }

    #footerContainer{
    width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;

    }

    #footerTextContainer{
    float: right;
    width: 240px;
    height: 10px;
    font-size: 10px;
    color:#999999;
    }

    #mainContactContainer{
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    width: 700px;
    height: 400px;
    background: url(Images/contactSplashBack.gif) 0 0 no-repeat;
    position: relative;
    text-align: left;

    }

    #emailFormContainer{
    width: 400px;
    height: 250px;
    position: absolute;
    left: 245px;
    top: 141px;
    }

    #emailConfirmContainer{

    width: 400px;
    height: 250px;
    float: right;
    margin-top: 145px;
    margin-right: 95px;
    }

    input{
    background: #302E2C;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;

    }

    textarea{
    background: #302E2C;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;

    }

    #subButton{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #CCCCCC;
    background: #302E2C;
    border: 1px solid #FFFFFF;
    }

    #mailText{
    position: absolute;
    width: 100px;
    left: 205px;
    top: 270px;
    font-size: 12px;
    font-variant: small-caps;
    }

    #phoneText{
    position: absolute;
    width: 100px;
    left: 340px;
    top: 270px;
    font-size: 12px;
    font-variant: small-caps;
    }

    #emailText{
    position: absolute;
    width: 100px;
    left: 470px;
    top: 266px;
    }

    #emailText a{
    font-size: 14px;
    font-variant: small-caps;
    color: #7FC0BA;
    }

    #emailText a:active,
    #emailText a:focus,
    #emailText a:hover{
    color: #fff;
    }

    #portfolioButtonContainer{
    position: absolute;
    width: 120px;
    height: 75px;
    background: url(Images/portfolioButton.gif) 0 0 no-repeat;
    top: 180px;
    left: 50px;
    }

    #portfolioButtonContainer a{
    display:block;
    width : 120px;
    height: 75px;
    text-indent: -9999px;
    text-decoration:none;
    overflow:hidden;
    }
    #portfolioButtonContainer a:hover{
    background: url(Images/portfolioButton.gif) 0 -75px no-repeat;
    }

    #portfolio1{
    position: absolute;
    width: 110px;
    height: 110px;
    top: 150px;
    left: 210px;
    background: url(Images/greenPic1.jpg) no-repeat 5px;
    }

    #portfolio1 a{
    display: block;
    width: 100px;
    height: 100px;
    text-indent: -9999px;
    margin:4px;
    text-decoration: none;
    border: 1px solid #888;
    }

    #portfolio1 a:active,
    #portfolio1 a:focus,
    #portfolio1 a:hover{
    border: 5px solid #EEE;
    width: 100px;
    height: 100px;
    margin: 0;
    }

    /*Lightbox Styles*/

    #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../Images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../Images/nextlabel.gif) right 15% no-repeat; }

    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

    #imageData{ padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
    #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
     
    gsbit2005, Aug 31, 2008 IP
  5. gsbit2005

    gsbit2005 Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hey its already corrected by you!!!
    I also leave a message in your contact form!!!
    anywayz best of luck !!!

    Regards
    Santosh
     
    gsbit2005, Aug 31, 2008 IP