4 replies [Last post]
bonusballking
Offline
newbie
Curacao N.A.
Last seen: 12 years 17 weeks ago
Curacao N.A.
Joined: 2008-06-26
Posts: 3
Points: 0

Hi

Im having problems with my code, it's the first time it ever happened.

I've placed images in my sidebar to represent header, and i noticed that all the images tag
have a extra 4 pixel padding at the bottom, while in my css code everything is 0 padding and 0 margin.

Here is the site im creating http://amsterdam-sabotage.com/index.php?

And here is also the code for the problem.

If anyone can please help me, this thing is driving me crazy.

Thank you. Very Much

HTML CODE:

<body onLoad="MM_preloadImages('http://www.amsterdam-sabotage.com/images/sab_btn_about-over.gif','http://www.amsterdam-sabotage.com/images/sab_btn_home-over.gif','http://www.amsterdam-sabotage.com/images/sab_btn_media-over.gif','http://www.amsterdam-sabotage.com/images/sab_btn_schedule-over.gif','http://www.amsterdam-sabotage.com/images/sab_btn_links-over.gif','http://www.amsterdam-sabotage.com/images/sab_btn_roster-over.gif','http://www.amsterdam-sabotage.com/images/sab_btn_contact-over.gif')">
<div id="header">
		<div id="header-wrapper">
		<div id="hd-top-frame">
		</div>
		<div id="hd-btn-frame">
			<ul>
				<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','http://www.amsterdam-sabotage.com/images/sab_btn_home-over.gif',1)"><img src="http://www.amsterdam-sabotage.com/images/sab_btn_home.gif" alt="HOME" name="home" width="64" height="39" border="0" /></a></li><li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/about/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','http://www.amsterdam-sabotage.com/images/sab_btn_about-over.gif',1)"><img src="http://www.amsterdam-sabotage.com/images/sab_btn_about.gif" alt="ABOUT" name="about" width="65" height="39" border="0" /></a></li><li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/roster/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('roster','','http://www.amsterdam-sabotage.com/images/sab_btn_roster-over.gif',1)"><img src="http://www.amsterdam-sabotage.com/images/sab_btn_roster.gif" alt="ROSTER" name="roster" width="73" height="39" border="0" /></a></li><li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/media/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','http://www.amsterdam-sabotage.com/images/sab_btn_media-over.gif',1)"><img src="http://www.amsterdam-sabotage.com/images/sab_btn_media.gif" alt="MEDIA" name="media" width="65" height="39" border="0" /></a></li><li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/schedule/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','http://www.amsterdam-sabotage.com/images/sab_btn_schedule-over.gif',1)"><img src="http://www.amsterdam-sabotage.com/images/sab_btn_schedule.gif" alt="SCHEDULE" name="schedule" width="86" height="39" border="0" /></a></li><li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/contact/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','http://www.amsterdam-sabotage.com/images/sab_btn_contact-over.gif',1)"><img src="http://www.amsterdam-sabotage.com/images/sab_btn_contact.gif" alt="CONTACT" name="contact" width="79" height="39" border="0" /></a></li><li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/links/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','http://www.amsterdam-sabotage.com/images/sab_btn_links-over.gif',1)"><img src="http://www.amsterdam-sabotage.com/images/sab_btn_links.gif" alt="LINKS" name="links" width="68" height="39" border="0" /></a></li>
 
			</ul>
		</div>
		</div>
	</div>
<div id="content-wrap">
<div id="content">
 
 
<img src="http://www.amsterdam-sabotage.com/images/uploads/spolight-top_001.jpg" style="border: 0;" alt="image" width="570" height="185" />
 
 
<div id="blog">
 
<div class="entry">
<div class="datetime">
 
<div class="date_month">Jun</div>
<div class="date_day">22</div>
 
</div>
<h2>Getting Started with ExpressionEngine</h2>
 
<p>Thank you for choosing ExpressionEngine! This entry contains helpful resources to help you <a href="http://expressionengine.com/docs/overview/get_most.html">get the most from ExpressionEngine</a> and the EllisLab Community.
</p>
 
<div class="readmore">
<span class="img"><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/article/getting_started/"><img src="http://www.amsterdam-sabotage.com/images/sab_btn_readmore.gif" width="68" height="25" border="0" /></a></span>
</div>
 
<div class="posted">Posted by bonusballking on 06/22 at 01:52 PM
 
<a href="http://www.amsterdam-sabotage.com/index.php?/C1/">Blogging</a> &#8226;
(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> <a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/comments/getting_started/">Comments</a> &#8226;
<a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/getting_started/">Permalink</a>
</div>
 
 
</div>
 
 
 
<div class="paginate">
<span class="pagecount">Page 1 of 1 pages</span>  
</div>
 
 
 
</div>
</div>
 
 
<div id="sidebar">
 
<div class="inner">
<a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/rss_2.0/"><img src="http://www.amsterdam-sabotage.com/images/sab_side_rss.gif" width="170" height="34" border="0" /></a><br/>
</div>
<div class="inner">
<h1 class="short_about">Short About</h1>
<p>Amsterdam Sabotage is a newly formed paintball team with the ambition of becoming one of the best teams in Europe... <br/><br/><a href="#">Read More >></a></p>
<img src="http://www.amsterdam-sabotage.com/images/sab_side_bottom_main.gif" width="170" height="13" border="0" />
</div>
 
<div class="inner">
<h1 class="side_categories">Categories</h1>
 
<ul id="nav_categories" class="nav_categories">
	<li>
<a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/C1/">Blogging</a>
</li>
	<li>
<a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/C2/">News</a>
</li>
	<li>
<a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/C3/">Personal</a>
</li>
</ul>
 
<img src="http://www.amsterdam-sabotage.com/images/sab_side_bottom_main.gif" width="170" height="13" border="0" />
</div>
 
<div class="inner"><img src="http://www.amsterdam-sabotage.com/images/sab_side_recent.gif" width="170" height="28" border="0" />
<ul>
 
<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/getting_started/">Getting Started with ExpressionEngine</a></li>
 
</ul>
<img src="http://www.amsterdam-sabotage.com/images/sab_side_bottom_main.gif" width="170" height="13" border="0" />
</div>
 
<div class="inner">
<img src="http://www.amsterdam-sabotage.com/images/sab_side_monthly.gif" width="170" height="28" border="0" />
<ul>
 
<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/2008/06/">June 2008</a></li>
 
<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/archives/">Complete Archives</a></li>
<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/categories/">Category Archives</a></li>
</ul>
<img src="http://www.amsterdam-sabotage.com/images/sab_side_bottom_main.gif" width="170" height="13" border="0" />
</div>
 
 
</div>
</div>
 
<div id="bottom">
<ul>
 
<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/">HOME</a></li>|<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/about/">ABOUT</a></li>|<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/roster/">ROSTER</a></li>|<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/media/">MEDIA</a></li>|<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/schedule/">SCHEDULE</a></li>|<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/contact/">CONTACT</a></li>|<li><a href="http://www.amsterdam-sabotage.com/index.php?/amsterdam_sabotage/links/">LINKS</a></li>
</ul>
</div>
 
<div id="footer">
<div id="ft-frame">
 
</div>
</div>
</body>

CSS CODE:

/* Body CSS */
 
body {
margin:0;
padding:0;
font-family: sans-serif, "Lucida Sans", "Tahoma";
}
 
a {
color:#bf0000;
}
 
#header {
margin:0 auto;
padding: 0;
height:286px;
background-image: url(<a href="http://www.amsterdam-sabotage.com/images/main_header_top.gif" rel="nofollow">http://www.amsterdam-sabotage.com/images/main_header_top.gif</a>);
background-repeat: no-repeat;
background-position: top center;
}
 
#header-wrapper {
margin:0 auto;
padding:0;
width:800px;
}
 
#hd-top-frame {
height:247px;
margin:0;
padding:0;
}
 
#hd-btn-frame {
height:39px;
margin:0;
}
 
#hd-btn-frame ul {
margin:0 0 0 286px;
padding:0;
}
 
#hd-btn-frame li {
display: inline;
margin:0;
padding:0;
list-style-type: none;
}
 
.spotlight_image {
margin:0;
padding:0;
}
 
#content-wrap {
width:800px;
margin:15px auto;
padding:0;
}
 
#content {
float:left;
width:570px;
margin:0;
padding:0 15px;
}
 
#content h2 {
border-top:1px solid #ababab;
border-bottom:1px solid #ababab;
width:520px;
float:left;
color:#bf0000;
font-size:16px;
margin:0px 0 0 5px;
padding:12px 0 9px 3px;
font-weight:normal;
}
 
#content h3 {
margin:0;
padding:5px 0 0 0;
font-size:10px;
color:#cccccc;
text-align:right;
}
 
#content p {
clear:both;
font-size:12px;
color:#666666;
line-height: 24px;
text-align: justify;
margin:0;
padding:12px 0;
}
 
div.datetime {
color:#ffffff;
float:left;
margin:0 5px 0 0;
pading:0;
background-image:url(<a href="http://www.amsterdam-sabotage.com/images/cal_icon.jpg" rel="nofollow">http://www.amsterdam-sabotage.com/images/cal_icon.jpg</a>);
background-repeat:no-repeat;
width:36px;
height:40px;
}
 
div.datetime p {
margin:0;
padding:0;
}
 
.date_month {
font-size:8px;
text-transform:uppercase;
margin:0;
padding:5px 0 0 4px;
}
 
.date_day {
font-weight:bold;
font-size:18px;
text-align:center;
color:#000000;
margin:0;
padding:4px 0 0 0;
}
 
#content .readmore {
width:570px;
height: 25px;
border-bottom:1px solid #bf0000;
text-align: right;
}
 
#content .readmore .img {
border:0;
margin:0;
padding:0;
}
 
.posted {
font-size:10px;
margin:5px 0 25px 0;
padding:5px 10px;
background-color: #d9d9d9;
width:550px;
}
 
#content .paginate {
margin:0;
padding:5px;
font-size:12px;
color:#333333;
float:right;
background-color:#ababab;
}
 
#comment_input {
background-color:#000000;
margin:0;
padding:20px;
}
 
.comment_area {
font-family:Tahoma;
width:510px;
height:125px;
margin:10px 0 0 0;
padding:10px;
font-size:16px;
font-weight:normal;
color:#ffffff;
border:1px solid #333333;
background-color:#666666;
}
 
.checkbox {
text-transform:uppercase;
font-size:10px;
color:#ffffff;
}
 
#sidebar {
float:right;
width:170px;
margin:0;
padding:0 15px;
}
 
#sidebar .inner {
margin:0;
padding:0 0 -5px 0;
}
 
.short_about {
margin:0;
padding:0;
font-size:1px;
background-image: url(<a href="http://www.amsterdam-sabotage.com/images/sab_side_short_about.gif" rel="nofollow">http://www.amsterdam-sabotage.com/images/sab_side_short_about.gif</a>);
text-indent:-9999px;
width:170px;
height:28px;
}
 
.side_categories {
margin:0;
padding:0;
font-size:1px;
background-image: url(<a href="http://www.amsterdam-sabotage.com/images/sab_side_categories.gif" rel="nofollow">http://www.amsterdam-sabotage.com/images/sab_side_categories.gif</a>);
text-indent:-9999px;
width:170px;
height:28px;
}
 
#sidebar p {
font-size:10px;
margin:0;
padding:10px 10px 0 10px;
text-align:justify;
color:#ffffff;
background-color:#000000;
}
 
#sidebar ul {
background-color:#000000;
margin:0;
padding:0;
}
 
#sidebar li {
margin:0 10px;
padding:0;
list-style-type: none;
display: block;
font-size: 11px;
border-bottom:1px solid #333333;
}
 
#sidebar ul a {
display: block;
color:#ffffff;
text-decoration: none;
margin:0;
padding:6px 15px;
background-color:#000000;
}
 
#sidebar ul a:hover {
color:#ffffff;
text-decoration: none;
background-color: #bf0000;
}
 
#sb-frame {
 
}
 
#footer {
margin:0;
padding:0;
clear:both;
background-image: url(<a href="http://www.bonusballking.com/ams_sab/images/footer_bg_main.gif" rel="nofollow">http://www.bonusballking.com/ams_sab/images/footer_bg_main.gif</a>);
background-repeat: repeat-x;
color:#ffffff;
}
 
#ft-frame {
margin:0 auto;
padding:30px 0 0 0;
width:800px;
height:336px;
background-image: url(<a href="http://www.bonusballking.com/ams_sab/images/footer_bg_rockets.gif" rel="nofollow">http://www.bonusballking.com/ams_sab/images/footer_bg_rockets.gif</a>);
background-repeat: no-repeat;
}
 
#bottom {
clear:both;
font-size:10px;
margin:0 auto;
padding:15px 0 15px 0;
border-top:1px solid #ababab;
}
 
#bottom ul {
font-weight:normal;
text-align:center;
margin:0;
padding:0;
}
 
#bottom li {
margin:0;
padding:0 10px;
display:inline;
color:#ffffff;
}
#bottom-btn a {
color:#bf0000;
margin:0;
padding:25px 0 10px 0;
}

gigabytewd
Offline
Regular
Northumberland, UK
Last seen: 12 years 21 weeks ago
Northumberland, UK
Joined: 2008-06-22
Posts: 24
Points: 0

Whitespace

I find this very annoying, it is a whitespace issue, even though whitespace should make no difference in the markup, it does.

A workaround this is to make the background colour of the containing div black. Or you can remove the whitespace...

If you remove the whitespace between the img tags and the preceeding or previous tags (depending whether is it your 'header' or 'footer' image for the little boxes) then that should sort the problem - I have tried it and tested it on the code you supplied above.

For example, your code is like this:

<div class="inner">
<img src="http://www.amsterdam-sabotage.com/images/sab_side_monthly.gif" width="170" height="28" border="0" />
<ul>
 
<li>...

To get ridd of the unwanted space, remove the whitespace:

<div class="inner">
<img src="http://www.amsterdam-sabotage.com/images/sab_side_monthly.gif" width="170" height="28" border="0" /><ul><li>

This is annoying because it makes your markup less easy to follow, so a better way to do this would be to use a background image instead of tags, although this might be regarded as not semantic as the headers actually have titles in and should have alt tags.

Another solution would just be to make the background of the inner div black so that it doesn't have a white gap.

Robert Corley
Gigabyte Group

"Read the directions, even if you don't follow them."

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 38 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

The whitespace bug is an IE

The whitespace bug is an IE only bug. This problem is due to the browser reserving space under the inline image for font descenders. The space can be eliminated by setting the vertical-align of the image to bottom.

#sidebar img {
    vertical-align: bottom;
    }
This creates another problem for you though because the images used for the bottoms will now have a space above them. Another solution is to set the images to display: block;. This helps you by eliminating the space.

However, because these images (the bottoms anyway) have nothing to do with the content and are design only, they shouldn't even exist in the html. They should be applied as background images in css to an appropriate element. The header images should headers.

bonusballking
Offline
newbie
Curacao N.A.
Last seen: 12 years 17 weeks ago
Curacao N.A.
Joined: 2008-06-26
Posts: 3
Points: 0

IT WORKED (KIND IF)

Hi wolfcry911

It worked for the bottom part of some images and some of the top part.

But i placed the bottom images in the .inner background and took of the IMG tag in the sidebar.

It should be alright for now.

Thank you.
Robert

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

wolfcry911 wrote:The

wolfcry911 wrote:

The whitespace bug is an IE only bug.

It affects other browsers too if you've got a series of horizontal list items and you're trying to close the gap between them.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference