I've been browsing around the threads in this forum in search for a solution to a problem I think is probably quite common, but haven't had much luck finding it. I created a list, displayed inline, and have placed a box around each link so there is some padding in between each link. The problem I'm experiencing is IE cutting off the top bit of all boxes I've created that house those links. Works fine in Firefox but not in IE. Here is the code ...
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 1em 1em 1em 1em;
border: solid #FFFFFF;
If you were to copy and paste that into your editor of choice and view it using IE, you'll notice the white boxes are cut off at the top. I've used IE 6 to test out the above code.
Why does it do that? And, how would I work around it?
Any help would be appreciated.
Erm, can we see all the HTML
Erm, can we see all the HTML and CSS please?
Hi thepineapplehead, Here
Here is everything..
It seems to be the display:
It seems to be the display: inline; that's throwing IE - inline elements don't accept things like dimensions.
Instead of using inline display, float the list-items left.
Also, remove the outer div, you can't use an ID twice and the div is unnecessary.
Cool. Thank you for the
Cool. Thank you for the advice. I've changed it to look like the following, which is alright for now ...
Thanks again for the help,
One other thing you'll need
One other thing you'll need to do if you haven't already is clear the floated content.
The easiest way in this case is to add overflow: auto; to the container, which here is the UL.