01-29-2005, 05:25 PM
Hey guys, I'm hoping that you guys can give me some advice for a <ul> that's funky in IE.
Please check out www.keystonehomestx.com/element
The list shows up fine in Opera, but displays wrongly in IE.
I used extra padding-bottom to make the active tab seem to have no border-bottom.
Help appreciated! The client is coming to visit in a few hours!
P.S. The green background is for viewing purposes only - why the margin in Opera? It seems fine in IE.
01-29-2005, 05:54 PM
I had a similar issue with IE when using an unordered list this way.
Declaring a width on the ul itself caused the top and bottom borders of the inline list items to disappear. I ended up removing the width declaration from the ul and letting it expand to the width of its parent container.
But your layout is a more 'pixel-perfect' approach, so you could try enclosing the ul in a div, and apply the necessary width to the div instead.
01-29-2005, 06:13 PM
Thanks alot, mcdougals.
I added a div around the ul, took the width property off of the ul, and that cleared up the bottom of the ul issue atleast. I then added 10px (more than 10px would also work, maybe a little less too) to the padding-top of the div. Looks as intended!
Only thing bothering me now is the margin (padding maybe?) underneath the ul and content div in opera.
*** Edit: www.keystonehomestx.com/element updated to show changes. ***
01-29-2005, 06:21 PM
Not sure about that. You may try adding display:inline; to the news <h2>.
01-29-2005, 06:25 PM
I changed the margin-top of the h3 from 15px to 0 and the gap disappeared. I supposed that was the ?problem. Now, to figure out how to put some space between the h3 and the top without pulling down the h2.
I'll keep playing around.