hello,
check out my little photo site at http://blackblack.free.fr/
it looks great in ie 6 : on the index page, if you hover a box, the background turns grey. doesn't do so in netscape and firebird... how can i make it happen in these 2 ?
now, on the "photo gallery" pages (e.g. http://blackblack.free.fr/20031105.html), if you hover an image, the white padding around it turns grey in ie6. in netscape and firebird, it's a mess, there's some kind of grey box protruding from behind the image (wider but less high). how can i make it look good ?
here's my css :
body, div, p, td { background: #fafafa; color: #808080; font: small verdana, arial, sans-serif; } body { margin: 0; text-align: center; } a, a:visited, a:active { background-color: transparent; color: #c0c0c0; text-decoration: none; } a:hover { background-color: #eeeeee; color: #c0c0c0; } h1#head { font-size: x-small; margin: 2em 0; text-align: center; } h1#title { font-size: small; font-weight: normal; margin: 2em 0; text-align: left; } h2 { border: 1px solid #808080; font-size: small; font-weight: normal; letter-spacing: 1em; margin: 1em 0; padding: 3px 3px 3px 13px; text-align: left; } h6 { font-size: x-small; font-weight: normal; margin: 2em 0 2em 0; text-align: center; } img { border: 1px solid #808080; padding: 3px; } #main { margin: 0 auto; text-align: left; width: 500px; } #gallery { text-align: left; } #gallery a:hover { background-color: #c0c0c0; color: #c0c0c0; } #gallery img { margin: 10px; vertical-align: middle; } .menublock { border: 1px solid #808080; cursor: pointer; display: block; margin: 1em 0; } .menublock img { border: 0; border-right: 1px solid #808080; float: left; margin: 0; padding: 0; } .menutext { color: #808080; display: block; height: 50px; padding-left: 1em; }
thanks in advance for any help !
my site only looks good in ie 6 !! :o(
Hi florent,
If you set the "A" to display:block; the background should work on hover.
For the picture page you could float the "A" left.
Hope that helps.
my site only looks good in ie 6 !! :o(
yup thanks a lot tony, that did help a lot !
now i have a smaller problem : still a display difference between ie 6 and netscape/firebird...
on the image gallery pages, the spaces between my <h2> headers and my <div>s are much wider in firebird than in ie... any idea why ? (i would like to shrink them to the ie size)
my site only looks good in ie 6 !! :o(
Hi florent,
I can't really see any difference.
Have you fixed it or could you explain it differently.
my site only looks good in ie 6 !! :o(
:oops: sorry for not being too clear... no i haven't fixed it yet.
check this page in ie 6 and firebird.
go to the bottom of the page : see the space between the last row of images and the "photos by florent" text ? well it's higher in firebird (1em i think, because there are 2 line breaks) than in ie6.
somehow ie6 displays the first <br> (with a "clear:both" style) at the end of the image row, then the second one (with no style) on next line, and then the <h6> text.
whereas firebird seems to display the first <br> on the line below the last image row. since there's another <br> right after, that makes a 2lines (2em) space, instead of 1 in ie6.
i hope i've made myself clear (not too sure )
my site only looks good in ie 6 !! :o(
Hi florent,
If you set the margin to 0 for the h6 both IE6 and Netscape show the same space.
Hope that helps
my site only looks good in ie 6 !! :o(
that works perfectly, thanks !
(i wonder why i didn't think about this myself... :roll: )