SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Odd margin issue

    http://www.kimronemusdesign.com/ronvil/index.php

    Hi,

    On this page there is a padding or margin at the top pf the picture in Safari and FireFox 1.0, but in IE, there is none at the top but a a little at the bottom.
    I notice this across the site as well, IE has no padding or margin, and Safari and FF has some. I cannot seem to find what is casusing this.

    Any ideas?

    Thanks
    Rich
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

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

    The top gap in mozilla is because of the default ul list margins/padding.

    Set it to zero as follows.
    Code:
    #menu ul
    {
    vertical-align: middle;
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    margin-top:6px;
    }
    The gap in ie at the bottom is caused by the whitespace between the image tags and the div tag in the html. If you close the gaps then the space disappears. Setting that particular image to display:block should also do the trick.

    Code:
    <div id="left-side" style="margin-top: 0; padding-top:0;"><img src="http://www.kimronemusdesign.com/ronv.../dedicated.jpg" /></div>
    Or:
    Code:
    #left-side img {display:block}
    Paul

  3. #3
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul - that got what i needed.
    Next obsticle is placing text over this graphic.
    It's easy as pie in Safari and FireFox, but as soon as there is text overflow in my #right-side, it gets pushed down below the graphic rather than over it.

    I am trying to position a large piece of text over the large graphic-if you view in FireFox or Safari you'll see how it is intended.

    http://www.kimronemusdesign.com/ronvil/index.php

    Is IE acting as it should?
    Thanks
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

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

    Because your image is bigger than the space you allocated it (space = 315px:image= 463px) then ie will stretch the left-side to 463px which means that there is nowhere for the text to go but drop down below.

    Mozilla on the other hand ignores any content bigger than the container and therefore does not affect the remaining width.

    You could try a negative margin on the image container to draw it back to its correct dimensions.
    Code:
    /*left side of page which is often a graphic */
    #left-side
     {
     float: left;
     width: 315px;
     font-family: Arial, sans-serif;
     font-size: .9em;
     line-height: 1.2em;
     
     }
    * html #left-side{margin-right:-178px} /* the difference between image size and container size*/
    
    However you may need to change that to be more specific if you are using left-side on other pages.

    You also need to kill the space on the bottom of the p tag.
    Code:
    	<p style="margin: 25px 18px 0 230px"> Contact 
    	  the attorneys of Ronemus & Vilensky. We have years of experience fighting 
    	  for our client's rights and making sure they receive fair compensation. 
    	  We are committed to providing every client with the most effective legal 
    	  representation. Please contact us to discuss your potential case. We look 
    	  forward to speaking with you. </p>
    You would make the code neater if you make those inline styles external.

    There are probably other ways to do this such as absolutely placing theimage onthe left and holding the page open with a min height etc.

    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
  •