cannot get rid of bottom margin or border

[ggeoff]

Hi

I have been trying to remove what appeared to be a bottom border on an image. I am using Lytebox. Adding a bottom border resulted in the existing "border" being pushed down below the new border. So then I looked for a bottom margin. I didn't find one that is being applied to the images. So I left one image with a border-bottom styled 10px in red. The grey "border" is clearly still there. The second image in the table of images has a negative margin set to -4px. that removes the unwanted bottom "border" I suppose I could add that styling to all the images but it is only happening on the thumbs and I am not sure how to target just the thumbnail images.

I would prefer to resolve the issue by finding why this is happening as it only seems to affect IE8 and IE9 browsers, IE7 is ok. Note affects Opera as well. my website

Geoff

[Dandello]

In Firefox, there are borders around all four sides of the images except the one with the bottom margin set to -4px. (And there's a hint of a top gray border on that one)

Make sure all the 'a' attributes are set to 'text-decoration:none'. My gut is telling me the issue is related to an 'a' attribute as that is a container for the image and the color of the border is the same as for your text and a:link.

[ggeoff]

Hi Dandello

Thanks. I have checked all occurrencies of text-decoration and find that only the footer has underline. I am not sure why you think that an undrline setting would have this effect. what would normally appear in the space under each thumbnail image would be the filename. I have diabled this option for the thumbs but perhaps a space is still made available for the missing filenames?

Geoff

[Dandello]

Duh, never code without sleep.

Something is adding a border that's the color of your links. It's probably a 'border: medium none' which I see in the css when using Firebug. It's supposed to give a medium border on top and bottom and none on left and right - but in Firefox it also looks like there are 1px borders on the left and right which is what led me to think it's something with the link attributes.

[ggeoff]

Thanks Dandello

I have rechecked the CSS for both lytebox and thumbs and found two errors an uneccessary comma and using font-color instead of just color! I am getting a css validatation error "background too many values or values not recognized . . ." and can't find any reason for those errors.

I don't think that this is a border issue as the first image has a border-bottom set to 10px and red but still shows the grey bottom border, which I suppose is not possible as there cannot be two bottom borders can there? So it would seem that the grey bottom border is a margin.

However, I agree there appears to be a faint border around the thumbnail images only.

Geoff

[Dandello]

You can have two borders is one of them belongs to a container holding an element that has a border - which puts us back to an issue with links as that is the container holding the images.

I didn't see any css for your links that would add either a margin or padding to show a background-color through. But the fact that a negative margin made it go away does hint at it being background-color bleeding through a margin or padding. We know that border disappears when the margin on the image is set to a negative number. If that works on the others, that may be a short term solution.

(BTW, spaces in file names makes validators go bonkers.)

[Dandello]

Update - I just downloaded the page onto my test server so I could play with it and I've come to an interesting conclusion - it's not in the code. I think it's in the thumbnail itself. The one where the border disappeared with the negative margin - take away the negative margin and the border's still gone. When I enlarge the first thumbnail with a border to 400% in Photoshop I can see a 1px lighter 'border' around the graphic - like the fade effect when you're doing a 3-D button. You won't see it at the top of the graphic since the sky is already so light.

[ggeoff]

Thanks Dandello

Right I understand now :) spaces in filenames, yes the advice is to use hypens or underscores as far as i can gather. In this situation Lytebox and the sotware I use to prepare the images uses the filename to create the alt text and also the title for each image which maybe displayed. I'd rather have that automated than have to fiddle around editing the alt and title information. I'll use the negative margin for now.

Thanks once again Dandello

Geoff

[ggeoff]

Update - I just downloaded the page onto my test server so I could play with it and I've come to an interesting conclusion - it's not in the code. I think it's in the thumbnail itself. The one where the border disappeared with the negative margin - take away the negative margin and the border's still gone. When I enlarge the first thumbnail with a border to 400% in Photoshop I can see a 1px lighter 'border' around the graphic - like the fade effect when you're doing a 3-D button. You won't see it at the top of the graphic since the sky is already so light.

Yes I can see a border as well but its black and part of the image so couldn't render as grey. I have been having server trouble most of the afternoon so have not been able to check recent alterations. The top line has negative margin on all images except the first now.

Geoff

[Dandello]

What I'm seeing on the image is a lighter band of color that would look gray against the dark background. I'm not seeing a black border at all - in Chrome or in Firefox. But I do see a gray bottom border in MSIE8 on the one with the red bottom border and the rows beneath the first row.

FOUND IT: it's in the css for A:link in stylesheet2.css - there's a background-color:#999. Using MSIE Tools, when that's disabled, that bottom border disappears.

[ggeoff]

Hi Dandello

Thanks :) Great thats fixed it! I'll need to learn how to use MSIE Developer Tools

best regards

Geoff