PDA

View Full Version : IE 6 double-margin bug?


dsnyder
10-12-2008, 10:55 PM
Trying to figure out why things are displaying incorrectly in IE6. Figured out a few issues by adding display:inline to some of my css. But, still have other issues. Fixing 1 thing might fix them all...?

the page: http://earthscradle.com/
IE6 problems:
text at top of purple column about 10px higher than in FF.
purple column nav totally missing
HOME | CONTACT links missing above right column and spacing of right col text and footer links messed up.CSS (not much of it): http://earthscradle.com/style.css

thanks for any guidance!
derek

ps Also interested in comments on how i set up the page. Couldn't figure out a better way than creating two background images, floating various divs and using padding/margins to position the text and stuff. Anyone see a better way to do anything?

domedia
10-13-2008, 01:08 PM
1. A case of collapsing margins. For your H1, set margin-top: 0; and padding-top: 20px; or whatever the right height should be.

2. http://earthscradle.com/style.css
#leftcol ul{ width:120px; display:block; font-size:0px; margin:10px 0 0 17px; display:inline; }
-change or remove the font size of 0.

3. Home and contact links are inside an LI but there is no UL.

dsnyder
10-13-2008, 02:40 PM
A. you rock. thanks so much for the help!

1. collapsing margin fixed. thanks.
2. nav bar now appears in IE6 but can't get spacing of left alignment to look the same in FF/IE6. UL seems bumped over to the right by 10ish px in IE6 so LI text is off as well.

2b. in IE6: left column img is a bit lower, UL a bit higher and footer ("created by...") a bit higher. Must be something I'm doing wrong in general with how I create the correct spacing?

3. added UL to Home and Contact links. That helped. :) Can't adjust alignment though...tried using right-padding and text-align left within LI but links won't move from far right edge.

4. footer links still appear in center content area instead of over the green box below (IE6)

thanks Dom the Wise!

domedia
10-13-2008, 03:39 PM
2. Set margin and padding of all UL, and LI's to 0 first, then add what you need. The default margin/padding on list elements are so different across browsers.
ul, li {margin: 0; padding: 0;}
2b. The above should fix this.
3. Hopefully this as well.
4. Don't float the #footer. There is no content to float it next to.
Remove the display: inline, and use padding to 'move it'.

You asked for some feedback earlier. I would maybe have constructed the page so it would be more flexible to content :) grow vertically etc

dsnyder
10-13-2008, 05:43 PM
Totally agree about allowing for vertical growth. Because I made the beige content box appear behind the purple column i couldn't think of a way to let the content area expand without bumping the nav too low. (so i did it the simple way with a couple of bkgd images) Using the rounded edged boxes w/ drop shadow added to the issue. Still trying to figure out a better way...feel free to suggest :)

2. & 3. adding ul, li {margin: 0; padding: 0;} solved the spacing issue but now the links have disappeared from IE6...got bumper some place? I added the css to the top of the styles page as general instructions for all UL & LI's...correct?

4. removed footer float and used padding. Fixed things a bit but in IE the top padding must be measuring from someplace different because it shows up way low. Could this have to do with the issue with the Home & Contact links being lost?

dsnyder
10-14-2008, 02:48 AM
worked through a most issues...IE6 seems to prefer padding rather than margin adjustments to position things. Maybe congress will mandate that all people update their browsers...that would win over some web designers...

One remaining issue. Can't get the bottom footer links and copyright positioned correctly in IE6. When i remove the right column it is positioned perfectly. Don't know what it is about the the css that is causing this!?

http://earthscradle.com/

.rightColumn{ float:right; padding:120px 10px 0px 10px; width: 150px; display:inline;}#footer {margin:0px 0px 0px 0px; padding:535px 0px 0px 130px}

domedia
10-14-2008, 03:32 AM
Hey Derek, bump this thread tomorrow and I'll look at it.

dsnyder
10-14-2008, 01:06 PM
good morning and thanks Ove,

The other spacing issue I'm dealing with (aside from the above cursed footer) is IE6 adding extra left padding/margin to my nav in the left (purple) column

here's the code on that
ul, li {margin: 0; padding: 0;}

#wrapper {margin: 0px auto;width: 770px;background-color: #C8C8C8;text-align:left;}

/*------ left column ------*/
#leftcol{width: 225px; height:679px; float:left; background:url(images/leftBkd.png) no-repeat;}
#leftcol h1 {color:#EEE1C8; font-size:24px; font-weight: normal; padding-left: 45px; margin-top: 0; padding-top: 10px; }
#leftcol h2 {color:#ccc; font-size:16px; font-weight:600; padding-left:95px; margin-top: -17px;}
#leftcol img {padding-left: 28px; width:186px; margin-bottom: 212px; margin-top:2px;}

/*------ main navigation ------*/
#leftcol ul{ width:120px; display:block; font-size:16px; padding:10px 0px 0px 0px; display:inline; }
#leftcol ul li{color:#cccccc; font-weight: bold; display:block; height:30px; list-style:none; padding-left: 40px; }
#leftcol ul li a{text-decoration:none; line-height: 24px;color:#cccccc; }
#leftcol ul li a:hover{ text-decoration:none; color:#FFF;}
#leftcol ul li a:active {color:#000000;}

#leftcolFooter {font-size:12px; text-align:right; color:#999; font-weight: bold; padding-right:17px; padding-top:40px;}
http://earthscradle.com/
http://earthscradle.com/style.css

what an annoying battle this is! thanks for the help!
d

domedia
10-14-2008, 01:38 PM
Clear the footer first. You have that right column to think of, clear: right;

For the link on left column, you've set the list as an inline element for some reason.

dsnyder
10-14-2008, 02:04 PM
Thanks,
Cleared the footer:
#footer {margin:0px 0px 0px 0px; padding:535px 0px 0px 130px; clear:right;}No change in IE6. Still seems to be measuring the top padding from someplace other than what i want.

link on left column, you've set the list as an inline elementWhen I remove this, the second word in the LI is bumped down to the next line in FF. No change in IE - lists 'Jessica Snyder' w/ no line break but padding/margin is still too far to left.

domedia
10-14-2008, 02:26 PM
After you clear the bottom footer, you will have to adjust your other CSS properties. Maybe remove the padding and try with margin? Play around.
Left hand column you gotta play with as well. If you want to keep it inline, you'll never get it cross browser afaik :(

dsnyder
10-14-2008, 04:51 PM
thanks! got the footer behaving in IE now I'll keep goofing with the nav area.
Let me know if u are in Ann Arbor and need some good, free bodywork...my 'client/sister' would be glad to help for all your help :)

domedia
10-14-2008, 05:04 PM
I have some good friends down there so I might take you up on that offer! :)
Do you have any statistics go from about the people that will visit the website? Was thinking maybe, just maybe you wouldn't have to care about IE6.

dsnyder
10-14-2008, 05:43 PM
I have some good friends down there so I might take you up on that offer! :) Great...let me know whenever...
Do you have any statistics...No stats...but in my own small experience checking out my sites on the computers of family and friends I've been shocked with how many people still have IE6...and it seems like a lot of people have no clue as to what browser they are even using. But, I'm not gunna stress over very small details though when it comes to IE6...however hard that is for me :)