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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Denmark
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with some image hover [CSS]

    Hey guys

    atm im working on my own portofolio at http://fredskov.com/ and for once FF is the troublemaker, and not IE

    How it is intended to work: the image will have a nice border around it when i hover above the thumb. Works nicely in IE but in FF it lets the border go to the end of screen.

    the CSS:
    Code:
    #container a.gallery:hover span {
    	position:absolute;
    	width: auto;
    	height:372px;
    	top: 309px;
    	background: rgb(255,255,255);
    }
    The gallery is a customized version as the one on this tutorial. The reason that im not just going with the standard measurements used on the tutorial is that my work is'nt all in same sizes and therefor i found it better with this solution if i could get it working; That the height is the same, but with different width.

    As seen in the code i did it with a width definition of auto.

    Hope you can help me
    /Fredskov

    EDIT: some pics to show what i mean

    Firefox 5.0


    Internet Explore (9.x ?)
    Last edited by fredskov; 07-02-2011 at 08:18 PM. Reason: Adding pictures

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    why not just set a width?

    try adding a doctype to prevent further problems with the page

    Code:
    #container a.gallery:hover span {
        position: absolute;
        width: 275px;
        height:372px;
        top: 309px;
        background: rgb(255,255,255);
    }
    This fixes the problem.
    width: auto; would set the width equal to touch the right side of the screen.
    Last edited by Sammy12; 07-02-2011 at 09:15 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Denmark
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    why not just set a width?

    try adding a doctype to prevent further problems with the page

    Code:
    #container a.gallery:hover span {
        position: absolute;
        width: 275px;
        height:372px;
        top: 309px;
        background: rgb(255,255,255);
    }
    This fixes the problem.
    width: auto; would set the width equal to touch the right side of the screen.
    how excactly do i add a doctype? (i code everything on my own, prefer notepad++ over dreamweaver )

    and the code is fine n all, but the problem then jumps forth at next image where it wont display full size of picture/or add some ugly bg fill color on the other pics where the aspect radio dont fit

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Doctype goes on the top line, before the <html> tag. ex:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    That's for XHTML 1.0 Transitional, which I find pretty useful.

  • Users who have thanked Rehnberg for this post:

    fredskov (07-03-2011)

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Yes transitional is a pretty leniant doctype.

    Addressing the problem:

    You could set it to float: left; which will omit the need for a width
    Last edited by Sammy12; 07-02-2011 at 11:56 PM.

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Denmark
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Just tried to flow it left without a width defintion (keeping the height), but it simply make a thing 0,5pt line with the defined height.


  •  

    Tags for this Thread

    Posting Permissions

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