SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem padding is 2px bigger in IE 6

    Hi,

    I have the problem that the top container in the middle column is 2px moved to the left in corespondance to container below. I have no clue why this is moved 2 px further to the left. I tried to change the padding but then Firefox displays it wrong.

    Here's the problem

  2. #2
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding another one and see if it's moved another 2px across.

    I have a horrible feeling you've run into an IE bug: http://www.positioniseverything.net/explorer/creep.html perhaps?
    Olly Hodgson
    thinkdrastic.net

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy problem persists

    If I add another container it will be moved again exactly 2px

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

    It's yet another problem cause by an element not having "layout" (see faq on haslayout").

    This can be cured by giving the element a dimension and the design will fall into place. Yiou will just have to work out the exact size including padding and borders and give the element the appropriate width,

    Or if you don't mind hacks you can force layout with this:

    Code:
    /* mac hide \*/
    .containercontentas,
    .containercontentas2,
    .containercontentas3{height:1%}
    /* end hide*/
    You will notice that mozilla has a slighly larger bottom margin between images and is probably due to the bottom margin on the last p tag in that section. However in mozilla you also have clearing issues and if the text content is reduced then the section underneath won't float underneath but will float up and snag on the image above.

    Adding the appropriate width should cure this but the real answer is to add clear:both to each section so that it starts on a new line. Unfortunately this presents another problem in that any clear statement in that section will force that element down below all ths side columns as all floats are cleared. Therefore you need to wrap your whole center section in a parent float and this will containe any clears that are inside that section without clearing the side columns also. See the faq on floats for more info on this

    Hope that helps:

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy aaargh...

    Hello Paul,

    thanks for your help. I'm already working the entire day on this but now I'm lost!

    I have added the lines to my stylesheet...
    Code:
    /* mac hide \*/
    .containercontentas,
    .containercontentas2,
    .containercontentas3{height:1%}
    /* end hide*/
    ...and tried to incorporate the other suggestions you made as far as I could follow but now the middle column drops down in IE
    This happened when I tried to add width to the containers or the middle column.
    This is how it looks nows
    I guess you have to take me by the hand
    (if you wouldn't mind)

    kind regards
    Marcin

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

    Change your #content to floated as there is no need to use margins in a fixed width layout and the you avoid the ie 3 pixel jog.

    Code:
    #content {
     /*margin: 0 180px 0 180px;remove this */
     float:left;
     width:400px;
     margin-left:5px;
    }
    Then you just need to put the clearer in the correct place as follows.
    Code:
    	 Wir verlosen drei Handtacker und zwei Elektrotacker von Novus. Und damit Sie auch gleich loslegen können, ist jeweils ein Starterset mit Nägeln bzw. Klammern dabei. Das Lösungswort finden... </div>
      </div>
      <!--END CONTENT-->
     </div>
     <div class="clearone"></div>
    </div>
    <div class="clearone"> <img src="upload/beta/cm/transparent.gif" width="1" height="1" /> </div>
    </div>
    <div id="footer">
    That should get the columns back in order with any luck

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up I'll take a bow, master

    Hey Paul,

    thanks a lot! I wish I knew that much about CSS like you do. You know I start to hate IE the longer I do layouting in CSS.

    Have a nice day!
    kind regards
    Marcin


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
  •