www.webdeveloper.com
Results 1 to 13 of 13

Thread: Image Padding Issue

  1. #1
    Join Date
    May 2005
    Posts
    38

    Image Padding Issue

    I'm currently modding a layout template for my own use. The template has two columns and I wanted to put an image in the right column but without padding/margin.

    See it here: Link

    Here's the source:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html><head><title>glish.com : CSS layout techniques : 2 columns, ALA style</title>

    <style type="text/css">
    @import "all.css"; /* just some basic formatting, no layout stuff */

    body {
    margin:0px 0px 0px 0px;
    }

    #leftcontent {
    float:left;
    width:67%;
    background:#fff;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    margin-right:0px;
    padding-bottom:20px;
    }

    #rightcontent {
    }

    p,h1,pre {
    margin:0px 30px 10px 30px;
    }

    h1 {
    font-size:14px;
    padding-top:10px;
    }

    #rightcontent p {
    font-size:10px;
    margin-left:0px;
    }
    img {
    margin-left: 0px;
    padding-left: 0px;
    }

    </style>
    </head><body>

    <div id="leftcontent">
    <h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 2 columns, ALA style</h1>
    <h1>leftcontent</h1>

    <p>This technique was famously chronicled by Jeffrey Zeldman in his ALA article <a href="http://www.alistapart.com/stories/journey/"> A Web Designer's Journey</a>, and is an extremely easy layout to implement requiring only a simple float:left declaration.</p>
    <p><strong>Scroll down for the source.</strong></p>
    <p class="greek">Conceptualizing random endpoints in a access matrix provides reach extentions enterprise wide. Respective divisions historically insignificant, upscale trendlines in a management inventory analysis survivabilty format. </p>
    <p class="greek">Document-centric projections unfetter traditional auditing practices rivaling central process management. Advanced functionality, easy administration, proclaim the hallmarks of unprecedented opportunity.</p>
    <p class="greek">Iteration systemwide engenders economies of scale, cross-media technology, presentation action items and life cycle replication.</p>
    <p class="greek">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
    <p class="greek">Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. Media sourcing as an acquistion strategy is counterproductive in a internet environment in virtual component methodology. Imaging through ideals rather than real world branding, is a perilous undertaking with negative results. Branding strategies generating motion as activity without reproducible results is a ultimately futile effort if left in place.</p>
    </div>

    <div id="rightcontent"> <img src="bl.gif" name="" width="200" height="200">
    </div>

    </body>
    </html>
    I've set the CSS so that all the images have no padding/margin to their left but why does the image still continue to have that white space inbetween the border of the left column and itself? Thanks.

    --Curiously enough, my current CSS works in Mozilla/Firefox. Why doesn't it work in IE?--
    Last edited by jobowoo; 05-10-2005 at 05:19 PM.

  2. #2
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    #rightcontent {
    padding: 0;
    }

  3. #3
    Join Date
    May 2005
    Posts
    38
    I just tried it, the gap is still there.

    However, I think it's more of a browser issue than anything. The gap doesn't show up in Firefox, while it still does in IE.

    Compare the screenshots:

    http://www.jobowoo.com/asdf/firefox.gif
    http://www.jobowoo.com/asdf/ie.gif

    Thanks

  4. #4
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Code:
    * html #leftcontent {
    margin-right:-3px;
    }

  5. #5
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    <div id="rightcontent">_<img src="bl.gif" name="" width="200" height="200">
    What if you remove the space between the tags?

  6. #6
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Quote Originally Posted by bathurst_guy
    What if you remove the space between the tags?
    That's not the problem here. This is what they call IE's 3px jog - it adds 3px to the margins of some floated elements.

  7. #7
    Join Date
    May 2005
    Posts
    38
    Quote Originally Posted by BonRouge
    That's not the problem here. This is what they call IE's 3px jog - it adds 3px to the margins of some floated elements.
    Awesome, that works perfectly for IE, but when I open it in Firefox now it shows the -3px margin it doesn't look right. Is there a way I can make that part of the CSS only apply to IE browsers? Thanks.

  8. #8
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    That is how to do it - exactly what I posted there.

  9. #9
    Join Date
    May 2005
    Posts
    38
    Quote Originally Posted by BonRouge
    That is how to do it - exactly what I posted there.
    That's awesome, I thought you had to have some long script.

    Just curious though, how exactly does --* html-- translate to Internet Explorer and not for any other browsers?

  10. #10
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    It's a parsing error. Other browsers ignore it but IE accepts it. What more can I say?

  11. #11
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    you could also add float:left to your #rightcontent

    works for me in both IE and FF


    btw

    Does it only affect MSIE when the * html is ahead?
    Last edited by Siddan; 05-11-2005 at 09:45 AM.

  12. #12
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    No - IE Mac's the same.

  13. #13
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    Quote Originally Posted by BonRouge
    No - IE Mac's the same.
    strange

    I have just tried it myself and it looks fine on the macintosh.
    I used the original code... no float and no *html fix
    On the Mac I have tested 5 webbrowsers on 2 different computers, one old and one new.
    IE 5.0 (old machine); IE 5.2, Safari, Netscape 7
    Only Netscape 4.77 (on old machine) had a major glitch but not even float or *html fix could make it kiss the border

    Otherwise only MSIE on PC had the space and by adding float:left it sure worked for me without affecting the other browsers....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles