SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Chicago, IL
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Spot the float/margin problem

    Okay, I've tried to do my homework but can't figure this on out. I should note that the problem is appearing on IE Mac (it looks beautiful on Safari and Camino). I don't have access to a PC right now, but my assumption is that the problem is also there on IE Win. If not- great! Here's the link:

    https://www.jfistore.com/nick/detail.php?id=412

    Here's the relevant CSS:

    Code:
    div#productDetails {
    	margin-left:40px;
    	float:right;
    	width: 360px;
    	voice-family: "\"}\""; /* BMH */
    	voice-family: inherit;
    	width: 320px;
    }
    	
    html>body div#productDetails {
    	width: 360px;
    }
    
    div#productDetails p{
    	text-align:justify;
    	line-height:15px;
    }
    
    div#prices {
    	float:right;
    	margin: 5px 0 2px 20px;
    }
    
    
    div#productImages {
    	margin-top: 20px;
    	text-align:right;
    }
    UPDATE: When I added a width to the div#prices it works correctly. I think this has to do with IE Mac needed a width on a floated element? Anyway, I then had to add box-model hacks in there as well, which I'd prefer to avoid, but oh well. Here's how it now looks (and seems to look right on all my Mac browsers):
    Code:
     div#singleProduct {
    	margin: 0 5px 0 15px;
    	padding: 10px;
    	color:#333;
    }
    
    div#singleProduct h2 {
    	margin:0;
    	padding:0;
    }
    
    div#productDetails {
    	margin-left:40px;
    	float:right;
    	width: 360px;
    	voice-family: "\"}\""; /* BMH */
    	voice-family: inherit;
    	width: 320px;
    }
    	
    html>body div#productDetails {
    	width: 360px;
    }
    
    div#productDetails p{
    	text-align:justify;
    	line-height:15px;
    }
    
    div#prices {
    	float:right;
    	margin: 5px 0 2px 20px;
    	width: 110px;
    	voice-family: "\"}\""; /* BMH */
    	voice-family: inherit;
    	width: 90px;
    }
    
    html>body div#prices {
    	width: 110px;
    }
    
    div#productImages {
    	margin-top: 20px;
    	text-align:right;
    }

  2. #2
    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)
    Yes ie mac needs a width on floats otherwise it defaults to 100% and is a common problem with mac.

    According to the specs floats should have a width at all times (even though sometimes you can get away with it on other browsers).

    Paul


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
  •