SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Margin/Padding Issues - Again.

    This issue has now been resolved. I'm nothing if not a tryer.

    Example URL:

    http://studio-x.homedns.org/invision-skins.php (See BeachComb Box)

    Problem:

    Divs behaving correctly in Firefox and Opera (Latest versions of Both) but misaligned in IE6.

    UPDATE: Resolved that problem but now have a top padding to the first paragraph, only in Firefox.

    Relevant CSS
    Code:
      div.box-container,
       div.box-container-history,
       div.skin-container
       {
          border-left: 1px solid #000000;
          border-right: 1px solid #FFFFFF;
          border-top: 1px solid #000000;
          padding: 10px;
          height: auto;
          background: #FFFFFF url(/assets/images/site/global/grad-box.png) repeat-x top left;
       }
       
       div.skin-container
       {
          padding: 0; margin: 0;
       }
       
       div.skin-content
       {
          height: 142px;
          margin: 0; padding: 0;
          background: transparent;
       }
       
       div.skin-content span.thumb
       {
          width: 150px;	height: 120px;
          float: left;
          margin: 10px 0 0 10px;
          padding: 0;
          border: 1px solid #000000;
          background: transparent;
       }
       
       div.skin-content span.text
       {
          width: 370px; height: 122px;
          float: left;
          margin: 0 10px 0 10px; 
          background: transparent;
       }
       
       div.text p
       {
          margin: 0px 10px 4px 10px;
          padding: 0;
       }
       
       div.skin-content span.stats
       {
          height: 142px; width: 183px;
          float: left;
          margin: 0 0 0 0;
          border-left: 1px solid #000000;
          background: #FDBF6C url(/assets/images/site/global/bg-skinstats.jpg) repeat-x top left;
       }
       
       div.skin-content span.stats p.title
       {
          margin: 10px; 
          padding: 0;
          font-weight: bold;
       }
       
       div.skin-content span.stats p
       {
          margin: 0 10px 4px 10px;
          font weight: normal;
       }
    Calling Code
    Code:
            <div class="skin-container">
         	  <div class="skin-content">
         		 <div class="skinthumb">
     		 <img src="assets/images/site/skins/tmb-beachcomb.png" width="150" height="120" alt="Beachcomb for Invision Powerboard 2"	title="Beachcomb for Invision Powerboard 2" />
         		 </div>
         		 <div class="skintext">
     		 <p>BeachComb is the first StudioX Designs skin design for Invision Invision Powerboard 2.</p>
     		 <p>Featuring gradient blues, curved header, and energetic yellows to make a practical, cross browser compatible skin for any lively forums.</p>
         		 </div>
         		 <div class="skinstats">
         			<p class="title">Statistics</p>
         		 </div>
         	  </div>
            </div>
    Many thanks -- again. At least I haven't given up yet!
    Last edited by SniperX; Nov 5, 2004 at 10:06. Reason: Incorrect Formatting

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Sorry I've been out all day but glad you managed to solve it yourself

    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
  •