Float: Right divs, different spacing in FF and IE

HTML & CSS
1

I have been trying everything, and can’t get the spacing right in both FF and IE…here is my page:

http://www.pro-tractire.com/

and css

http://www.pro-tractire.com/style.css

Any ideas? I’m not sure what else to try!

2

Any other ideas? This seems so simple, but I just can’t get it to work correctly

3

Hi,

Set the line-height in .contact.


.contact {
    width:70%;
    float:right;
    margin-right: 32px;
    text-align:right;
    font-family:Arial, Helvetica, sans-serif;
    clear:right;
    display:inline;
   [B] line-height:1.13;[/B]
}

That’s rather a fragile way to build a page by placing text on top of a fixed image. If anyone resizes their text then the text will be misplaced. You are also assuming that all browsers are going to make things exactly the same height which as you can see is not as easy as it seems.

Usually you would create individual elements that can grow with the text but takes a lot more effort but results in a more stable layout.

However if that’s all the content you have on that page then it may not be worth the extra slicing and dicing but there will be issues on text resize.

I think a dl list would have been more semantic for those details rather than using divs and strong tags.

4

Also you probably have a double float margni bug coming up here

.address {
	width:70%;
	float:right;
	margin-right: 32px;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
}

The right margin and the right float is probably setting the bug off. Add display:inline;

5

Sorry, my suggestion was for IE6 and it was addressing horizontal spacing :stuck_out_tongue:

6

Okay, that makes absolute sense. So because I was relying on the text to define the size of the box, it was displaying differently.

Yes, I am still learning css and trying to do “simple” things like this to get me used to doing larger projects. Thank you so much for the help!

7

Stomme, yes, it is vertical spacing that is the issue. Sorry, to be more clear, it is showing correctly (at least, the way I WANT it to) in IE8. In FF it is adding spacing.

Tried both of your suggestions, and still having the issue. I’m still playing with it…

8

Ah, yes, IE6. That’s sounds about right, and that margin would indeed double in IE6.

9

I didn’t see your page in IE, but I did see code that should make a difference. Did you mean the vertical spacing was different?

You have top margins on elements who are sitting under floats.

This is Paul’s article showing how top margins slide up under floats in Modern Browsers but not in IE.

Solution most of the time is to put the margin on the other end: the bottom.

Or did I completely miss the issue?
*edit took a look in IE7, did not see any difference between that and Mozilla.

Which IE did you mean?