SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast Briano's Avatar
    Join Date
    Jun 2007
    Location
    Chattanooga, TN
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float: Right divs, different spacing in FF and IE

    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!
    Michelin Collectibles - Vintage Mr Bib Collectibles
    ...make your friends think you're NOT a nerd!!
    Corky Coker's Blog - Weekly blog by lead vintage car figure

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.
    http://www.search-this.com/2007/09/0...ar-about-this/
    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?

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Also you probably have a double float margni bug coming up here
    Code:
    .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;
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah, yes, IE6. That's sounds about right, and that margin would indeed double in IE6.

  5. #5
    SitePoint Enthusiast Briano's Avatar
    Join Date
    Jun 2007
    Location
    Chattanooga, TN
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    Michelin Collectibles - Vintage Mr Bib Collectibles
    ...make your friends think you're NOT a nerd!!
    Corky Coker's Blog - Weekly blog by lead vintage car figure

  6. #6
    SitePoint Enthusiast Briano's Avatar
    Join Date
    Jun 2007
    Location
    Chattanooga, TN
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any other ideas? This seems so simple, but I just can't get it to work correctly
    Michelin Collectibles - Vintage Mr Bib Collectibles
    ...make your friends think you're NOT a nerd!!
    Corky Coker's Blog - Weekly blog by lead vintage car figure

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Set the line-height in .contact.

    Code:
    .contact {
        width:70%;
        float:right;
        margin-right: 32px;
        text-align:right;
        font-family:Arial, Helvetica, sans-serif;
        clear:right;
        display:inline;
        line-height:1.13;
    }
    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.

  8. #8
    SitePoint Enthusiast Briano's Avatar
    Join Date
    Jun 2007
    Location
    Chattanooga, TN
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Michelin Collectibles - Vintage Mr Bib Collectibles
    ...make your friends think you're NOT a nerd!!
    Corky Coker's Blog - Weekly blog by lead vintage car figure

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Briano View Post
    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...
    Sorry, my suggestion was for IE6 and it was addressing horizontal spacing
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •