6 replies [Last post]
florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 37 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

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 !

I'm a perfectionist
and perfect is a skinned knee

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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.

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 37 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

my site only looks good in ie 6 !! :o(

yup thanks a lot tony, that did help a lot ! Tongue Tongue

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)

see http://blackblack.free.fr/20030419.html

I'm a perfectionist
and perfect is a skinned knee

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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.

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 37 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

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 Wink )

I'm a perfectionist
and perfect is a skinned knee

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 13 years 37 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

my site only looks good in ie 6 !! :o(

that works perfectly, thanks !

(i wonder why i didn't think about this myself... :roll: )

I'm a perfectionist
and perfect is a skinned knee