Wed, 2007-10-31 00:04
Question about IE6 margin float settings vs IE7 margins. I've developed a site using all css (relative) floats w/ margins to accompany the proper spacing. It looks great in all browsers except IE6. IE6 does not seem to handle the float margin properly. I've had this small problem in the past but never this bad to where I need some advise. I'm sure this is common and I was hoping someone could fill me in on the best and most efficient way to work around this issue. thanks for any advise... :rolleyes:
Wed, 2007-10-31 01:04
#1
You've been here long enough
You've been here long enough to know what the first reply to your question is going to be, right?
Wed, 2007-10-31 01:19
#2
Here is my code - thanks!
CSS
* { margin:0; padding:0 }
BODY {
font-size: 76%;
background: #CA791E url(images/top-bg.jpg) repeat-x;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #211204;
}
#header { background: url(images/logo-header.jpg) no-repeat; width:1078px; height:186px; margin:0 auto; clear:both }
#joinUs { float:right; margin:40px 270px 0 0; width:160px; height:130px; font-size:0.9em; color:#FEE0A7 }
#joinUs ul { list-style:none }
Here is the header portion of my html in which is part of the problem. My text in the join us section is mis-aligned in IE6 but properly aligned in all other browsers.
SAMPLE
- Sunday
- Bible Study - 9:30 am
- Worship - 10:00 am
- Family Night - 7:00 pm
- Wednesday
- Coffee House - 6:00 pm
- Biblical Studies - 6:30 pm
- Youth Night - 7:00 pm
Wed, 2007-10-31 01:30
#3
Looks like a doubled margin
Looks like the doubled margin float bug. It happens in IE6 when you have a float and a margin on the same side. float:left + margin-left = 2(margin-left) or
float:right + margin-right = 2(margin-right)
Try adding display:inline; to #joinUs
Wed, 2007-10-31 01:36
#4
Thanks
I completely forgot about the display code! It worked perfect, thanks!