...

View Full Version : Need help with some image hover [CSS]



fredskov
07-02-2011, 08: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, 10:06 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.

fredskov
07-03-2011, 12:46 AM
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-03-2011, 12:49 AM
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-03-2011, 12:51 AM
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, 01: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum