5 replies [Last post]
Chad_Cross
Chad_Cross's picture
Offline
Enthusiast
Long Beach, CA
Last seen: 12 years 17 weeks ago
Long Beach, CA
Joined: 2005-07-21
Posts: 58
Points: 0

Hello,

I am having a bit of an issue with the bottom margin for a list link.

The page in question is here: http://www.presstelegramlofts.com/index2.html

You will notice the tabs at the bottom left. If you look at the page in FF or even IE6, the tab outline touches the horizontal grey bar. In IE7 the bottom 5px padding is ignored so that the border does not extend to the grey bar. Has anyone ever seen anything like this? There also seems to be a mystery margin on the right side of the li. Not sure where that is coming from but it doesn't disrupt the layout.

Here is the CSS:

#maintab li{ background: transparent; display: inline; margin: 0; padding: 0;

}
#maintab li a{
text-decoration: none;
padding: 5px 5px 5px 5px;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
margin: 0;
color: #DEDBDE;
background: transparent;
}
#maintab li a:visited{
text-decoration: none;
padding: 5px 5px 5px 5px;
color: #DEDBDE;
margin: 0;
}
#maintab li a:hover{
text-decoration: none;
padding: 5px 5px 5px 5px;
color: #000;
margin: 0;
}

Here is the HTML:

  • Home
  • About
  • History
  • Green
  • Map/Vicinity
  • Entertainment

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 48 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Add

Add position:relative; in #maintab li a

Chad_Cross
Chad_Cross's picture
Offline
Enthusiast
Long Beach, CA
Last seen: 12 years 17 weeks ago
Long Beach, CA
Joined: 2005-07-21
Posts: 58
Points: 0

Thanks Dana. That worked

Thanks Dana. That worked perfectly. Why did that work perfectly?

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 48 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

IE doesn't always apply

IE doesn't always apply padding, margin, border on inline elements without position relative (or without hasLayout).

Chad_Cross
Chad_Cross's picture
Offline
Enthusiast
Long Beach, CA
Last seen: 12 years 17 weeks ago
Long Beach, CA
Joined: 2005-07-21
Posts: 58
Points: 0

I see. I just learned about

I see. I just learned about hasLayout a few weeks ago. So position is one of the things that triggers hasLayout. Thank you so much for the explanation.

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 48 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Quote:So position is one of

Quote:
So position is one of the things that triggers hasLayout.

While position:absolute; or position:fixed; set hasLayout in ie7, position:relative doesn't.
In your case, setting hasLayout to the anchor didn't seem to be a good solution.