www.webdeveloper.com
Results 1 to 10 of 10

Thread: Please help me with css code!

  1. #1
    Join Date
    Nov 2008
    Posts
    44

    Please help me with css code!

    Hey fellas, I got another wee problem with IE and FIrefox css coding

    In my Css sheet I have the code for regular:
    a:link {colorink}
    a:visited {colorink}
    a:hover {color:black}
    a:active {colorink}

    a
    {
    float:center;
    width:6em;
    height:2em;
    text-decoration:none;
    colorink;
    padding:5px 6px;
    border-right:0px solid white;
    border-left:0px solid white;
    }

    a:hover {background-colorink; height: 3px;}

    Problem is, I have a nice pink border around images when you hover your mouse above them, it looks really hot in IE, but firefox.....not so much...damn you firefox!! anyway, instead of the complete border coming up around the image like in IE, in firefox, it has this weird like, 1/3 of way border, and then it stops. I use div.img for those pics, and this is the css code I have, maybe there are errors in it

    div.img
    {
    margin: 3px;
    border: 1px;
    height: auto;
    width: auto;
    float: center;
    text-align: center;
    }

    div.img img
    {
    display: inline;

    border: 3px solid #ffffff;
    }

    div.img a:hover img
    {
    border: 3px solid black;
    }

    In the html page, my code for images looks like this:
    <div class="img">
    <a href="abc.html">
    <img src="website pics/pic/picture.jpg" alt="Enter" width="200"
    height="200" /></a>
    <a href="abc.html">
    <img src="website pics/pic/picture.jpg" alt="Enter" width="200"
    height="200" /></a>
    <div class="desc">Picture Description</div>
    </div>




    I think I'm doing something wrong, it works good in IE, but firefox is getting messed up a little sumtin. This is really peeving me, all you CSS wizs please help!!!!!!!!!!

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there evan5
    I think I'm doing something wrong...
    That is certainly true.
    You are using IE as your guide when coding, big mistake.

    Always code for a compliant browser, Opera, Safari or Firefox, and then tweak the code for the non-compliant IE browsers.

    Here is the your code reworked...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <style type="text/css">
    div.img  {
        text-align:center;
     }
    div.img img {
        width:200px;
        height:200px;
        border: 3px solid #fff;
     }
    div.img a {
        display:block;
        width:206px; 
        height:206px;
        padding:6px;
        margin:auto;
        text-decoration:none;
     }
    div.img a:hover {
        background-color:#ffc0cb;
     }
    div.img a:hover img {
        border:3px solid #000;
     }
    </style>
    
    </head>
    <body>
    
    <div class="img">
    
    <a href="abc.html"><img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter"></a>
    Picture Description
    
    </div>
    
    </body>
    </html>
    
    Note:-
    As you were advised by Major Payne here about color names, I have changed pink to #ffc0cb.

    coothead

  3. #3
    Join Date
    Nov 2008
    Posts
    44

    Smile

    Coothead..i love you!
    That code works really well, except I am having one small issue with it.

    I try to have 2-3 pictures in a row, like the ones below would be next to each other:

    <div class="img">
    <a href="abc.html">
    <img src="website pics/pic/picture.jpg" alt="Enter" width="200"
    height="200" /></a>
    <a href="abc.html">
    <img src="website pics/pic/picture.jpg" alt="Enter" width="200"
    height="200" /></a>
    <div class="desc">Picture Description</div>
    </div>

    And I am having trouble with this part you gave me:

    div.img a {
    display:block;
    width:206px;
    height:206px;
    padding:6px;
    margin:auto;
    text-decoration:none;
    }

    It works good, now the borders are complete(firefox and IE), but they only appear 1 at a time, or one, each row,

    with the display:block; code, it makes them be one per row, but fixes the border in firefox, but when I change display:block; to display:inline;, it goes back to 2 pics per row(how I want it), but makes the border screwed up again.( the wierd 1/3 of the way border)

    How would I go about fixing this lil problem, I feel like I almost got it, it might be somthing minor I hope??

    THanks again coothead, you da man

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there evan5,

    for more than one image I would suggest that you use a list element, ul, to position them.

    Here is an example...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <style type="text/css">
    ul.img  {
        width:654px;  /*this value is equal to 'li' width times 3 */
        margin:0 auto;
        padding:0;
        list-style-type:none;
        text-align:center;
     }
    ul.img  li {
        width:218px; /* this value is equal to the total 'a' width */
        float:left;
     }
    ul.img img {
        width:200px;
        height:200px;
        border: 3px solid #fff;
     }
    ul.img a {
        display:block;
        width:206px; 
        height:206px;
        padding:6px;
        margin:auto;
        text-decoration:none;
     }
    ul.img a:hover {
        background-color:#ffc0cb;
     }
    ul.img a:hover img {
        border:3px solid #000;
     }
    </style>
    
    </head>
    <body>
    
    <ul class="img">
    
    <li>
    <a href="abc.html"><img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter"></a>
    Picture Description
    </li>
    
    <li>
    <a href="abc.html"><img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter"></a>
    Picture Description
    </li>
    
    <li>
    <a href="abc.html"><img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter"></a>
    Picture Description
    </li>
    
    </ul>
    
    </body>
    </html>
    
    coothead

  5. #5
    Join Date
    Nov 2008
    Posts
    44
    Thank you so much for the help Coothead! that worked really well, ur da best man!

    I put the code into my external CSS sheet instead of the header, would I still need the two meta tags you gave me in the header?

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">

    I dont have any of the "content-type" meta tags yet in any of my pages, should I put that meta in to all pages?

    THanks again for all the help, I real appretiate it.

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there evan5,
    ...should I put that meta in to all pages?
    It is considered good coding practice to use those two metatags.

    coothead

  7. #7
    Join Date
    Nov 2008
    Posts
    44
    oh ok, i will put them in then, thanks

    I came up against a small delema with having word links under the pics:

    <ul class="img">
    <li><a href="link.html">
    <img src="website pics/pic/pic.jpg" alt="Enter" width="200"
    height="200" /></a></li>
    <li><a href="link.html">
    <img src="website pics/pic/pic/pic.jpg" alt="Enter" width="200"
    height="200" /></a></li>
    <div class="desc"><a href="link.html">Link</a></div>
    </ul>

    I have a link under the row of two pictures, but since it is in the list, it is getting screwed up , when i put it out of the list, it is still messed up, IDK what <div> elements to give to it in css, i just want the letters "link" to turn pink when you hover over them, do you have any suggestions coothead?

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there evan5,

    does this help...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <style type="text/css">
    ul.img  {
        width:654px;  /*this value is equal to 'li' width times 3 */
        margin:0 auto;
        padding:0;
        list-style-type:none;
        text-align:center;
     }
    ul.img  li {
        width:218px; /* this value is equal to the total 'a' width */
        float:left;
     }
    ul.img img {
        width:200px;
        height:200px;
        border: 3px solid #fff;
     }
    ul.img a {
        display:block;
        width:206px; 
        height:206px;
        line-height:40px;
        padding:6px;
        margin:auto;
        text-decoration:none;
     }
    ul.img a:hover {
        background-color:#ffc0cb;
        color:#ffc0cb;
     }
    ul.img a:hover img {
        border:3px solid #000;
     }
    </style>
    
    </head>
    <body>
    
    <ul class="img">
    
    <li>
    <a href="abc.html">
    <img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter">
    Picture Description
    </a>
    </li>
    
    <li>
    <a href="abc.html">
    <img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter">
    Picture Description
    </a>
    </li>
    
    <li>
    <a href="abc.html">
    <img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter">
    Picture Description
    </a>
    </li>
    
    </ul>
    
    </body>
    </html>
    
    
    coothead

  9. #9
    Join Date
    Nov 2008
    Posts
    44
    yeap. now it works , thanks man!

  10. #10
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    No problem, you're very welcome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles