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 4 of 4

Thread: My CSS Gallery

  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts

    My CSS Gallery

    Hey, I am having troube with my css gallery. it is located here:

    http://cssgallerytesting.nrtdesigns.com/

    If you have firefox/opera it will work fine but in IE it has many problems. If you have any sugestions please let me know
    Edit: adding code
    Code:
    /*******************************
    	BODY AND WRAP STYLES
    *******************************/
    
    body {
    font-family:Verdana, sans-serif;
    font-size:12px;
    margin-top:20px;
    background:white;
    }
    
    #wrapper {
    width:550px;
    padding-bottom:15px;
    padding-top:10px;
    margin:auto;
    border: 2px solid #000066;
    }
    
    /*******************************
    	    THE GALLERY 
    *******************************/
    
    ul.gallery {
    width:200px;
    list-style:none;
    }
    
    ul.gallery li {
    border-bottom:solid 1px #004d8b;
    }
    
    ul.gallery a{
    width:200px;
    padding: 5px 5px 5px 5em;
    display:block;
    text-decoration:none;
    color: #000000;
    }
    
    
    /********************************************************
    	        NOTE: BACKGROUND IMAGE MUST BE
    	              HEIGHT: 155PX OR LESS
                MUST CHANGE CSS FOR DIFFERENT HEIGHETS
    *********************************************************/
    
    
    ul.gallery p.photo1 {
    width:500px;
    height:155px;
    padding: 5px 5px 5px 0px;
    margin-top:0px;
    margin-bottom:-135px;
    font-weight:bold;
    background: url(photo1.gif) no-repeat 215px 1px;
    }
    
    
    
    a:hover.photo2 {
    background: url(photo2.gif) no-repeat 215px -0px;
    width:500px;
    height:155px;
    margin-top:-30px;
    margin-bottom:-111px;
    color:#f61a3e;
    font-weight:bold;
    }
    
    a:hover.photo3 {
    background: url(photo3.gif) no-repeat 215px 0px;
    width:500px;
    height:155px;
    margin-top:-55px;
    margin-bottom:-86px;
    color:#f61a3e;
    font-weight:bold;
    }
    
    a:hover.photo4 {
    background: url(photo4.gif) no-repeat 215px 0px;
    width:500px;
    height:155px;
    margin-top:-80px;
    margin-bottom:-61px;
    color:#f61a3e;
    font-weight:bold;
    }
    
    a:hover.photo5 {
    background: url(port.gif) no-repeat 215px 0px;
    width:500px;
    height:155px;
    margin-top:-105px;
    margin-bottom:-36px;
    color:#f61a3e;
    font-weight:bold;
    }
    
    a:hover.photo6 {
    background: url(port.gif) no-repeat 215px 0px;
    width:500px;
    height:155px;
    margin-top:-130px;
    margin-bottom:-11px;
    color:#f61a3e;
    font-weight:bold;
    }
    
    a:hover.photo7 {
    background: url(photo4.gif) no-repeat 215px 0px;
    width:500px;
    height:155px;
    margin-top:-105px;
    margin-bottom:-35px;
    color:#f61a3e;
    font-weight:bold;
    }
    
    a:hover.photo8 {
    background: url(photo3.gif) no-repeat 215px 0px;
    width:500px;
    height:155px;
    margin-top:-70px;
    margin-bottom:-70px;
    color:#f61a3e;
    font-weight:bold;
    }
    
    a:hover.photo9 {
    background: url(photo2.gif) no-repeat 215px 0px;
    width:500px;
    height:155px;
    margin-top:-35px;
    margin-bottom:-105px;
    color:#f61a3e;
    font-weight:bold;
    }
    Last edited by srule_; 07-24-2007 at 11:16 PM.

  • #2
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It might help if you put up some of your CSS. The simplest solution would be to write a little footer on your site that says to get rid of IE and switch to Firefox...

  • #3
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by wsg4 View Post
    It might help if you put up some of your CSS. The simplest solution would be to write a little footer on your site that says to get rid of IE and switch to Firefox...
    Now that is not good practice. Even though I hate IE too, getting one of those statements is annoying. People are able to choose what browser they wish to use and if they don't want to go through all the "hassle" it is to switch browser, then fine (even though they would most likely get a better internet experience).
    .
    .

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I haven;t tried out your code but I recall from a time when I was doing some CSS that the -135px type value screwed up the consistency between browsers.

    As soon as I made all valules positive or rermoved them completely, the browsers worked very similarly. might be worth your trying.

    FWIW, my starting point would be to use the code so that the links work as per html (with minimal styling), and then make the rollover position absolute so that the corresponding image will always be in the same place. But then, maybe you are trying to find a way which uses less html code?

    bazz


  •  

    Posting Permissions

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