Need help with some image hover [CSS]

fredskov

07-02-2011, 07:24 PM

Hey guys :)

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

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:

#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. (http://www.webreference.com/programming/css_gallery/) 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
http://fredskov.com/unintended.gif

Internet Explore (9.x ?)
http://fredskov.com/intended.gif

Sammy12

07-02-2011, 09:06 PM

fredskov

07-02-2011, 11:46 PM

why not just set a width?

try adding a doctype to prevent further problems with the page

#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

Rehnberg

07-02-2011, 11:49 PM

Doctype goes on the top line, before the <html> tag. ex: <!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.

Sammy12

07-02-2011, 11:51 PM

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

fredskov

07-03-2011, 12:47 AM

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.