Problem with DIV borders

Hello Everyone! This is my first post on this forum... and of course is a request for help!
Here's my problem. I created a div as a container for a facebook like button and a twitter button. Each button is in its own div. Below is the css I used to style these divs:

These small "sharing footer" is displayed correctly on the latest versions of Chrome and FF, and beside the recent "like button" issue, also on Safari (for PC). The problem is with IE8. As you can see from the css, the div as border on top. IE8 shows also a bottom border, and I can't figure out why, and how to get rid of it... If I deleted the border-top also the border-bottom disappear, but that's not a good way to achieve the goal obviously!
Hope someone can help me! Thank you!
Oh, not sure if I can link the website so you guys can check it... I do admit I didn't read the rules of the forum *shame on me* Anyway, one example page is http://www.sienaschool.com/site/page...bout-ssla.aspx. If I'm not allowed to post links, of course feel free to edit this post! Thanks!

Have you tried creating a zero border?

"border-bottom: 0px;"

as an addition to your current code of course

Yea, I did try that... didn't work :-(
I tried to add an explicit rule for all the borders, setting all of them to 0 except the top, but the second border was still showing up.

Looking at the page with the developer tools in IE it looks like the bottom border is aligned with the bottom of the two divs inside the main div... and it doesn't really makes sense to me how deleting the top border of the main div would also make this second undesired border disappear. Changing border rules for the two divs didn't affect it either...

I tried also playing with the height of the two inner divs, and the bottom border seems to move in relationship to them, but again, I can't really understand why..

Thanks for your help tho! :-)

I tried using your CSS code and it seemed to work just fine without having an additional border at the bottom.

heres a screenshot.

I also have been using these borders for my footer on my webpage without problem so i don't think its the CSS problem. I used both IE and FF.


Here is the screenshot on your code. I didnt add border at the bottom DIV to judge the occurrence of the mysterious border. But it seemed fine.

Have you tried using Firefox? DIV plays hat tricks with their visuals sometime.

On Firefox it looks fine, as it does on other browsers. Only IE8 display the border. Could it be just my IE?

Here's a screenshot of what it looks like on my IE8:



Here's a screenshot using the IE developer tools, highlighting the div structure. As you can see, the top border of the main div is correct (hidden here by the green border). The second border is aligned with the bottom of the two inner divs..



Really confusing to me...

hmmm what if you add a white colour to your 2nd Div where the like button and the tweet belongs?

Unlike your problem, my problems are derived from DIVs in the wrong places i think but could that be your solution?

try...

have a go at that.

I tried, it didn't work :-/ I also tried to set the width of the main div to the exact width of the main container (478px instead of 100%) and didn't work either.

The weird thing is that in some pages the second border is not showing. In most of the pages it does though.

not showing: http://www.sienaschool.com/site/pages/the-school.aspx

showing: http://www.sienaschool.com/site/pages/how-to-apply.aspx

I'm wondering if it would be better to get rid of the border and just place an horizontal line instead...

Thank you again for your help!

Browser compatibility can be a pain in the bottom if u ask me... but try to update your browsers, use all of them (Chrome, FF, IE, Safari).

if you still got a problem then i suggest go for an easier solution at the moment :/ by using <hr>

It may work on my side but not really on ur side so its pretty weird.

anyway good luck with ur stuff.