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 (<!-- m --><a class="postlink" href="http://www.jobowoo.com/asdf">http://www.jobowoo.com/asdf</a><!-- m -->)
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=http://www.webdeveloper.com/forum/archive/index.php/"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.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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?--#rightcontent {
padding: 0;
}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:
<!-- m --><a class="postlink" href="http://www.jobowoo.com/asdf/firefox.gif">http://www.jobowoo.com/asdf/firefox.gif</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.jobowoo.com/asdf/ie.gif">http://www.jobowoo.com/asdf/ie.gif</a><!-- m -->
Thanks* html #leftcontent {
margin-right:-3px;
}<div id="rightcontent">_<img src=http://www.webdeveloper.com/forum/archive/index.php/"bl.gif" name="" width="200" height="200">
What if you remove the space between the tags?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.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.That is how to do it - exactly what I posted there.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?It's a parsing error. Other browsers ignore it but IE accepts it. What more can I say?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?No - IE Mac's the same.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....
See it here: Link (<!-- m --><a class="postlink" href="http://www.jobowoo.com/asdf">http://www.jobowoo.com/asdf</a><!-- m -->)
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=http://www.webdeveloper.com/forum/archive/index.php/"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.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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?--#rightcontent {
padding: 0;
}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:
<!-- m --><a class="postlink" href="http://www.jobowoo.com/asdf/firefox.gif">http://www.jobowoo.com/asdf/firefox.gif</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.jobowoo.com/asdf/ie.gif">http://www.jobowoo.com/asdf/ie.gif</a><!-- m -->
Thanks* html #leftcontent {
margin-right:-3px;
}<div id="rightcontent">_<img src=http://www.webdeveloper.com/forum/archive/index.php/"bl.gif" name="" width="200" height="200">
What if you remove the space between the tags?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.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.That is how to do it - exactly what I posted there.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?It's a parsing error. Other browsers ignore it but IE accepts it. What more can I say?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?No - IE Mac's the same.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....