#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    England
    Posts
    21
    Rep Power
    0

    Question Netscape 6 css margin/padding problem!


    Hi

    I am displaying a series of images with text aligned to the right of these images. Each line basically contains an image, then some text, some space and then the same again, an image and some text. Then it goes down to the next line where it happens again.

    The problem resides in the fact in IE there correctly is a 1em gap between the image and the image above. However in Netscape 6 the image below is flush to the image above. This problem can be solved by increasing the margin/padding value but this then increases the margin/padding in IE and makes it too much!!

    Is there something I should be coding to increase the margin in Netscape that wont increase in IE?

    Here is my HTML:-

    <div id="content">
    <div class="medpics"> <a href="#"><img src="../eg_med.gif" width="40" height="50" border="0" alt="" /></a><a href="#" title="#">
    </a>Lorem ipsum dolor sit ame<br />
    Lorem ipsum dolor si</div>

    <div class="medpics"> <a href="#"><img src="../eg_med.gif" width="40" height="50" border="0" alt="" /></a><a href="#" title="#">
    </a>Lorem ipsum dolor sit ame<br />
    Lorem ipsum dolor si</div>

    <div class="medpics"> <a href="#"><img src="../eg_med.gif" width="40" height="50" border="0" alt="" /></a><a href="#" title="#">
    </a>Lorem ipsum dolor sit ame<br />
    Lorem ipsum dolor si</div>
    </div>

    and the CSS :-

    #content {
    margin: 0 22% 0 0;
    padding-left: 1.5%;
    font-size: 0.8em;
    }

    .medpics img {
    float: left;
    margin-right: 0.5em;
    border: 0.1em outset #ffffff;
    }

    .medpics {
    float: left;
    margin-bottom: 1em;
    width: 350px;
    }

    And ideas would be greatly appreciated!!
    Last edited by Mr X; August 5th, 2003 at 10:50 AM.
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    England
    Posts
    21
    Rep Power
    0
    Has nobody got any ideas?
  4. #3
  5. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Try using a percentage for your margin instead of em.
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    think its a bug in netscape 6,
    i've tried your code in mozilla 1.2 / 1.5a
    and mozFb
    and can not reproduce your problem,

    so even there is ways avoid ie to read css, it would afffect later version of gecko based browsers too,
    Last edited by Akh; August 6th, 2003 at 05:58 AM.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    England
    Posts
    21
    Rep Power
    0
    I have changed the margin to % now, it does indeed seem to work much better now in netscape 6, and still remains the same in ie which is good. Opera does render the gap slightly bigger now, but I can live with that!

    Thanks everyone! It is much appreciated.

IMN logo majestic logo threadwatch logo seochat tools logo