Image Padding Issue

**jobowoo** · 05-10-2005 03:49 PM

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?--

**bathurst_guy** · 05-10-2005 06:00 PM

#rightcontent {
padding: 0;
}

**jobowoo** · 05-10-2005 06:18 PM

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

**BonRouge** · 05-10-2005 06:35 PM

Code:

* html #leftcontent {
margin-right:-3px;
}

**bathurst_guy** · 05-10-2005 06:36 PM

What if you remove the space between the tags?

**BonRouge** · 05-10-2005 06:40 PM

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.

**jobowoo** · 05-10-2005 07:02 PM

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.

**BonRouge** · 05-10-2005 07:07 PM

That is how to do it - exactly what I posted there.

**jobowoo** · 05-10-2005 07:26 PM

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?

**BonRouge** · 05-10-2005 07:31 PM

It's a parsing error. Other browsers ignore it but IE accepts it. What more can I say?

**Siddan** · 05-11-2005 08:43 AM

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?

**BonRouge** · 05-11-2005 08:59 AM

No - IE Mac's the same.

**Siddan** · 05-11-2005 10:03 AM

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: Image Padding Issue

Thread Tools

Display

Image Padding Issue

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions