text is not aligned properly in IE6

Discussion in 'CSS' started by driven, Oct 11, 2007.

0
  1. #1
    i tested this site in IE7 and FF, but doesn't work in IE6.

    does anyone know why the testimonial and newsletter signup text in my banner area is not aligned properly? the newsletter signup is at the bottom left hand corner when it should be in the right hand-- next to my testimonial.

    I tried readjusting the width and margins of the testimonial and newsletter class but it didn't really solve much.

    

header {
	height: 200px;
	width: 900px;
	}
	
#banner {
	background-image:url(images/banner.jpg);
	height: 200px;
	}
	
.testimonial {
	width: 220px;
	float: left;
	margin: 10px 5px 0 340px;
	}

p.banner {
	color: #fff;
	font-size: .8em;
	padding-bottom: 0;
	}
	
.newsletter {
	width: 260px;
	float: left;
	margin: 10px 5px 0 70px;
	}
    Code (markup):
     
    driven, Oct 11, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    Probably double margins in MSIE6 which are fixed by display:inline on the same element (that has float and horiz. margin).
     
    soulscratch, Oct 11, 2007 IP
  3. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I think it's because you set the left margin of your third section (newsletter) to only 60px;. When you float something, like you did with "testamonials" it is no longer part of the flow control. Therefore, you are not specifying how big of a margin you want between testimonial and newsletter like you might think. As for as the browser is concerned, that floated element (testamonials) is no longer there. So you want to set the left margin to for newsletter to something even larger than testamonials.
     
    Arnold9000, Oct 12, 2007 IP