SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple margin-top browser issue

    Well I often bump into this issue..
    I'm doing a simple "margin-top: 10px;" on my class ".case_title". The issue im looking at is, that with firefox no margin is done, in IE it is..

    Guess i'm doing something wrong in my setup, but just can't point out what?

    Feel free to take a look here:
    http://www.loungebb.com/port/portfolio.html

    the class ".case_title" contains the text : CARLHEUSER on the page..

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because vertical margins collapse. IE gets this wrong, as usual.

    Adding padding-top:1px for #content_case li will prevent the margins from being adjacent, and they won't collapse.

    Alternatively, you can use padding-top:10px instead of margin-top:10px for your .case_title class.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot tommy, I got it sorted out now ...

    I have another question though.. Not sure if I should make a new thread, but here goes:

    Currently all text is setup as it should, as seen here:
    http://www.loungebb.com/port/portfolio.html

    I've been trying to add a thumbnail, like seen on the gif below.
    I got a class created for showing the thumbnail:
    Code:
    <div class="case_thumb"><img src="images/_thumb.gif" class="thumbs" \></div>
    For some reason I thought i'd be able to simply float the div to the right, and move it into place by using position relative, however huge gaps are made when I try to do this.. How would I go about this issue?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    position:relative only shifts the generated box. As far as the flow is concerned, the element itself is still in its original position. This can leave visible 'holes' in the layout if you shift the box a 'large' distance.

    I don't know if that's the case here. Unfortunately I have to run very shortly, so I don't have time to look at it now.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    position:relative only shifts the generated box. As far as the flow is concerned, the element itself is still in its original position. This can leave visible 'holes' in the layout if you shift the box a 'large' distance.
    Just as I thought, just didn't know how to say it, thanks

    Hmmm .. Then i'm all out of ideas.. I just thought there was a way for me to put the div containing the thumbnail (and place it like shown in the gif) above the other divs, without effecting their position..

    Anyone besides Tommy who'd know what to do in this case? Any suggestions would be appreciated

    EDIT - made a new and more relevant topic about the above question, since it doesn't have anything to do with this topic (

    Thanks again Tommy for helping with the original topic...
    Last edited by mrsam; Oct 5, 2007 at 09:22.


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
  •