Pushing text in a couple pixels

[shanebryant]

I have two columns on my site that are full of DIVs, each one similar in code to this:

<img src="image.gif" width="115" height="25" alt="" />
<div class="side">
Entries: Count<br />
Comments: Count<br />
Author Login: Link<br />
About C12<br />
</div>
<img src="image.gif" width="115" height="13" alt="" />
<img src="spacer.gif" width="1" height="10">

With the external CSS having:

.side {
color:#104E8B;
background-color:#FFFFFF; 
font-size:xx-small;
font-weight:normal;
border-right: 2px solid #104E8B;
 line-height:140%;
}

I want the text to be indent as a whole so that it does not rest right against the left edge, by about 5 pixels, but I can't get it to work and I really don't want to nest a DIV in it.

On a side note, you see that last line of HTML for the "spacer.gif"? I'm using it to separate the DIV sections in the columns and it works fine in Safari, but there is nothing there in Firefox. Anyone care to tell me why?

Thanks all!

[edited by: SuzyUK at 6:07 pm (utc) on July 21, 2005]
[edit reason] examplified image paths [/edit]

[faltered]

Try inserting some padding in your css:

.side {
color:#104E8B;
background-color:#FFFFFF;
font-size:xx-small;
font-weight:normal;
border-right: 2px solid #104E8B;
line-height:140%;
padding: 0px 0px 0px 5px;
}

That should push the test over 5 pixels to the right.

I'm not sure what your question is about the spacer .gif however.

[nigassma]

you can also change the p tag's css and assign that to your content text that you want tabbed over.

[shanebryant]

Alright, the padding in the CSS did it :) Thank you!

Now, about the spacer.gif, it's a blank gif that is 1px x 1px and I use it in between a stack of DIVs in a column to space them out. It works fine in Safari and spaces them by 10px, but in Firefox there is no space...

[nigassma]

CSS is meant to be used so that you don't need to use spacer.gifs.

All you need to do is set some margins on the left and/or on the right of the divs and you will not need the spacer.gifs.