CSS - How Would I Remove The Space Around Images?

I'm having a "can't think" day.

How would I get rid of the space(s) between the image icon and the <li> folder or file name on my test website?

On the left-hand side of my test website, there is a directory tree listing.

You'll see that php files are indicated with an php file icon for example.

I don't want that much space between the file name and the file icon.



Test website: www seemyinvestments dot com

I have a site I am constructing in CSS. It looks good in most browsers, except one -- IE 6 PC. There is a gap between images (on the right top) and I can't figure out why

http://www.arrivalband.com/test/

Here's the css code (the offending code seems to be in rightCOL). My guess this is something that is pretty usual with IE, but I don't know a good work around. Thanks for the help in advance.

I am building this layout using strict xhtml and css.
Now I run into a problem with the menu buttons. On Firefox they
look just like they should. Though, Internet Explorer 6 adds an
empty space between each button. See the example page and CSS.

Basically, Internet Explorer adds that space under images. You can
also see it under the header image. Any idea on how to fix it?

I tried to add overflow: hidden; - it seemed to fix the issue
with the header div, but did not make any effect in the list.
Actually, in THIS case, as in the example page, I could make it
without using images. Add text, borders and so on, which would
probably fix the problem, but there are cases when I just want
to use images.

Both, Strict XHTML and CSS of the page are 100% valid.

Thanks,
Timo

I've been trying to solve this problem about my website.

My site

What it is suppose to look like.

Image

Thanks in advance.

As always, I am developing in Firefox and correcting for IE.

I have a strange problem I am unable to correct:

I am getting a 2 pixel gap in the bottom of these images in I.E. 6, but they line up perfectly in Firefox.(See attached image) The only way I can get it to line up in IE 6 is to increase the image size by 2px, but it then overlaps in Firefox.

Here is my corrosponding CSS:

Code:

ul.links {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

ul.links li {
    background: #d4d4d4 url(/images/tabbg.gif) scroll top center repeat-y;
    color: inherit;    
    display: inline;
    margin: 0px;
    padding: 0px;
}

ul.links li.current {
    background: #d4d4d4 url(/images/currbg.gif) scroll top center repeat-y;
    color: inherit;
    display: inline;
    margin: 0px;
    padding: 0px;
}

Hi everyone.
I have a strange problem which get's on my nerves for a long time and it usually makes me keep on using tables instead of css.
It has to do with floating images inside another div or td.

I have, let's say, a td which contains 2 pictures. I want the first picture to be at the left side and the other one at the right leaving space in the middle. So I just have the following code:

Code:

<td class=top width="936" height="52"><img src="images/left.jpg" style={float:left;}><img src="images/right.jpg" style={float:right;}></td>

I also have declared the following in the style definition:
Code:

td.top {background:url(images/back.jpg) repeat;padding:0;margin:0;}
td.top img {padding:0;margin:0;}

So I test my page and although it appears ok on firefox a strange thing happens on Explorer. Both pictures leave some blank space on their side just like if I had added 2-3 pixels of side margin.
It is even more annoying that the float:left img leaves a space on it's left side and the float:right img on it's right one.
Notice that the table has both cellpadding and cellspacing set to 0.

Thank you in advance for your time.

I'm working on a custom MovableType site for a sports news company, and after including FCKeditor into the backend to allow for more freedom in styling, etc, I've found that the css styles for the blog entries and the output from the editor just don't mix. Is there some way I can clear all the inherited css definitions and just let the text display as itself?

Thanks for taking the time to read my question.

I'm having a bit of a brain stall here.

I want to get rid of the border around the href image, using css.

How????

Code:

<div class="Valid">
  <p>
    <a class="ValidLink" href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>			   
</div>

Thanks,

Brad

Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats.

- before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with.

I remember it was something like this:
instead of:
form{
margin:0px;
padding:0px;
}

I'm sure you can do something like:
form{
preformatting:none;
}

Does anyone know what I'm talking about? Or did I dream it?...

cheers in advance

Hello. There is a small gap between my input and image, see attached screenshot.

i thought it might be the image dimensions but it isn't; and I've removed margins, padding, etc.

What property should I be looking for please?

Here's some css:
Code:

html, body, div, p, form, fieldset,  input, img  {
    margin: 0; border: 0; padding: 0;
    line-height: 1;
}
 input  {
    border: 1px solid gray;
}
. txtImage  {
    vertical-align: text-bottom;
}
#frmCourse {
    width: 500px;
    height: 500px;
    margin: 5px; padding: 5px;
    outline: 1px solid gray;
}
#fldCourse {
    width: 80%;
    padding: 5px;
    margin: 0 auto;
    border: 1px solid #808080;
}
# inpCourse  {
    height: 20px;
    border: 1px solid #808080;
    vertical-align: text-bottom;
}

I'd like to be able to remove all unused css styles on a website and the FireFox add-on "Dust-me Selectors" is highly recommended, only that it doesnt support FireFox 4 which is what is installed for me at the moment, can you please confirm if I can have more than 1 instance/version of a web browser/FireFox on my machine, or if you could recommend another way of finding unused css on the whole of a website, and not just one page, thanks plenty in advance..

Is it possible to remove the embossed bored from a select box. That is just destroying the whole look of my page and i there is a way please let me know.

Nick

Below is some code I scraped from a page in my application using firebug. The current code displays a series of row with what appears to be a blank row in between. I'm trying to figure out how I can reduce the vertical space. Thanks In Advance!

<tr>
<td class="PTSection">
<table class="PTSectionTable" cellspacing="0">
<tbody>
<tr>
<td class="PTSection">
<table cellspacing="0">
<tbody>
<tr>
<td cid="saw_11382_14" s="-1" l="0" e="3">
<table id="saw_11382_14_3_0" class="PT_VSGHT" cellspacing="0px" cellpadding="0px" border="0" onmousedown="PTPSS(event, this); return false" cid="saw_11382_14" s="-1" l="0" e="3">
<tbody>
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
</tbody>
</table>
</td>
<td id="saw_11382_14_3_0_Grp" class="PTCLDC" style="visibility:collapse">&nbsp;</td>
<td>
<table id="saw_11382_14_3_0_Tbl" cellspacing="0" cid="saw_11382_14" s="0" l="0" e="3">
<tbody>
<tr>
<td class="PTPSHLC" style="font-family:Arial Black;">Non-Sponsored Description:</td>
<td>&nbsp;</td>
<td class="PTSC OOLT">Stein IREE "Co2 Recycling"</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="PTSection">
<table cellspacing="0">
<tbody>
<tr>
<td cid="saw_11382_14" s="-1" l="1" e="3">
<table id="saw_11382_14_3_1" class="PT_VSGHT" cellspacing="0px" cellpadding="0px" border="0" onmousedown="PTPSS(event, this); return false" cid="saw_11382_14" s="-1" l="1" e="3">
<tbody>
<tr align="right" style="width:10px;">
<td class="PT_CHPHT">&nbsp;</td>
<td class="PT_VGHL" rowspan="3" style="display:none">Fund Code:</td>
</tr>
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
</tbody>
</table>
</td>
<td id="saw_11382_14_3_1_Grp" class="PTCLDC" style="visibility:collapse">&nbsp;</td>
<td>
<table id="saw_11382_14_3_1_Tbl" cellspacing="0" cid="saw_11382_14" s="0" l="1" e="3">
<tbody>
<tr>
<td class="PTPSHLC" style="font-family:Arial Black;">Fund Code:</td>
<td>&nbsp;</td>
<td class="PTSC OOLT">Business and Industry</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

Hi,
Is it possible to remove the border from a select box?

Many thanks

Hi, I need to lay down two images side-by-side in an absolutely positioned div, but they always have a gap between them. I am guessing there is some inherent padding in an image, much like in a <p>, but I can't get rid of it.

Qualifiers:

1. The containing DIV is absolutely positioned, but I do NOT want to absolutely position the images within. I want them to be inline, so they lay across the div horizontally.

2. As follows from above, I want the images inline, not block.

Basically, I want to control the images, I think there is padding there I cant see, I would like to know how to remove the padding.

Here is my test page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html  >
<head>
    <title>Mind the Gap</title>
</head>
<body>
    
    <p style="position: absolute; top: 250px;">Desired code style</p>
    <div id="bottomAds" style="position: absolute; left: 0px; top: 297px; background-color: orange; width: 760px; height: 90px;">
	<img id="leftImage" alt="sorry cnn" style="border-width: 0; padding: 0; margin: 0; border: none;"  src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
	    <a style="border: none; margin: 0;  padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="adImage" style="margin: 0; padding: 0; border: none; border-width: 0; " src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
	</div>
    
    <p style="position: absolute; top: 450px;">Desired Result</p>
    <div id="Div1" style="position: absolute; left: 0px; top: 497px; background-color: orange; width: 760px; height: 90px;">
	<img id="Img1" alt="sorry cnn" style="display: block; float: left;"  src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
	    <a style="border: none; margin: 0;  padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="Img2" style="border: none;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
	</div>
	    
</body>
</html>

Thanks for looking at this, and for any tips.

CJB