View Full Version : IE6 Display Issues: Extra Margin/Padding & Rounded Corners

01-24-2008, 09:06 AM
Sorry for the vague subject my brain is a bit fried and I couldn't think of another way to say it.

I am having trouble with a website I'm designing. As is usual, it renders fine in FF but is not accurate with IE6. (Note: I'm on a Mac and had a friend send me a screenshot to see the issues.)

Here's the link: http://agewithease.com/index2.htm


In the screenshot, there was extra margin around the sidebar's<li> elements. I may have solved this by since adding 0px margin & padding to the <ul>, thereby clearing the browser defaults. If not, I'm not sure what's going on. (My friend on PC has gone to bed so I won't be able to get another screenshot until morning.)

For some reason, some of the background colors aren't appearing. I've done some web searching and don't see any limitations in IE6; are there some?

I've used a couple methods to do my rounded corners. The challenging ones are those containers that have a border on them. I used the negative margin method, and I saw somewhere that IE6 doesn't support neg margins on floated items. Is there a way around this?

I apologize if any of this is unclear, or if I've missed obvious solutions easily found elsewhere. I promise I've done searches to try and figure this out.

Thank you so much (in advance) for your help.

01-24-2008, 09:55 AM
I am not sure that I have understood all you say but:

Try this.

#footer {
background-image: url(/images/footerBg.gif);
background-repeat: no-repeat;
float: left;
padding: 0.5em;
width: 1006px;


Edited using CSSVista.



Note that I use IE7

01-24-2008, 02:15 PM
Some simple fixes..
Either add

#sidebarNav li a {
display: block;
margin: 0px;
padding: .5em;
border-right: 1px solid #002252;
Or remove all border properties from the above and add it to

#sidebarNav li {
display: block;
list-style-type: none;
border-right: 1px solid #002252;
border-bottom: 1px solid #002252;
border-left: 1px solid #002252;

01-24-2008, 06:36 PM
Thank you both for your responses. I made both of those changes and it seems to be getting there. Still a couple inconsistancies, if anyone has a thought on them:

1. Rounded corner in top nav bar (id="masthead_Nav") isn't working. It uses absolute positioning with negative margins, but the containing div is floated, which I think may be the issue.

2. In the right column (id="rightColumn"), there's a gap between the top border and the box.

3. In the footer, an extra "com" is appearing on a second line. It's no where in the code or anything. Never seen anything like it!

Again, thank you so much for your help!

01-24-2008, 07:10 PM
I do not have IE6 - these are from IE7 and FFox 3:D

01-24-2008, 07:32 PM
Thank you for going out of your way to post those screen shots. It looks like it's perfect in IE7 now (awesome!).

Unfortunately, the problems still persist in IE6. I can't figure this dang thing out, but it's close. Just the rounded corners issue and the extra "com" are the only major things.

IE6 Screenshots:

6010 6011

Thank you again for your help!

01-24-2008, 10:10 PM

I can't help you further with IE6, but there are many links here.