5 replies [Last post]
Clark_Kent
Offline
newbie
UK
Last seen: 15 years 28 weeks ago
UK
Joined: 2007-02-04
Posts: 3
Points: 0

Hey Everyone,

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 ...

CSS Code:

body {
background-color:#000000;
}

#navlinks {
position:absolute;
left:250px;
width:399px;
height:73px;
top:5px;
text-align:left;
z-index:1;
}

#navlinks li{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
display:inline;
list-style: none;
margin-right: 1em;
padding: 1em 1em 1em 1em;
border: solid #FFFFFF;
}

HTML Code:

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.

Thanks,

- CK

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Erm, can we see all the HTML

Erm, can we see all the HTML and CSS please?

Verschwindende wrote:
  • CSS doesn't make pies

Clark_Kent
Offline
newbie
UK
Last seen: 15 years 28 weeks ago
UK
Joined: 2007-02-04
Posts: 3
Points: 0

Hi thepineapplehead, Here

Hi thepineapplehead,

Here is everything..

Test

Thanks,

- CK

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

Clark_Kent
Offline
newbie
UK
Last seen: 15 years 28 weeks ago
UK
Joined: 2007-02-04
Posts: 3
Points: 0

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 ...

Test

Thanks again for the help,

- CK

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies