IE and FF are rendering the spaces

[charlee]

Hi Im new working with CSS and every page I code is a nightmare and even more cause Im very picky and a single pixel is a problem for me. The thing is that Im having a hard time here trying to get why IE and FF are rendering the spaces and even the tabulators I use to format my code and make it legible. For instance if i have this:

<div>
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
</div>

then the browsers put an space of about 4 pixels between the images but not if i do this,

<div>
<img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" />
</div>

Is there a CSS rule i can use to avoid this in the whole css file?

thanks in advance

[4css]

You should have it set up as this:

<img src="1.jpg" height="" width="" alt="this is number one jpg" />

Also if you have it in an image folder, which you should it would be:

<img src="images/1.jpg" height="" width="" alt="this is number one jpg" />

Also, one thing you need to realize is that ff and IE render differently. Design in ff first, then go and tweak IE.

There are also some things which are default in some browsers. margins, padding, borders.

I always put this in the top of my css file

*{margin: 0px;
padding: 0px;
border: 0px;
}

These you can set as you go along your page and put in the widths etc.. that you wish to put in.

[4css]

Oh! btw Charlee,

Welcome to WebmasterWorld!

Just keep posting your questions.

[SuzyUK]

Hi charlee,

images are inline by default, the space between (and often above/below) them is the normal wordspacing that is applied to words.

you can remove it completely top, bottom, left, right by making the images into block-level elements

img {display: block;}

however if you then actually want them side by side you will need to float them

or I just tried using the word-spacing property which appears to work but only if it was set to -4px

applied to the div containing the images.

div {
word-spacing: -4px;
}

[charlee]

Thanks guys, but well, still not working for my specific page. Ok I will tell you exactly how it is because its a little complicated, I cannot float the div modelBanner containing the images because its following the normal flow of the document and there is a div centerBottomContainer which position depends on this so affecting the normal flow of modelBanner is gonna affect centerBottomContainer. In the other hand I tryied the word spacing -4px and no effect at all as you can see in the code here, and I also tried the height="" and width-"" and nothing, the only solution so far is just putting every img tag right after the other. Check this out and tell me what could be wrong with my code please:

first is that i have this:

/***********************************************************/

<div id="sideBar">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 5</a></li>
...
</ul>
</div>

<div id="leftContainer">
//Here is where i want to know how to avoid the space
<div id="modelsBanner">
<img src="images/stars1.jpg" alt="Model 1" /> //space
<img src="images/stars2.jpg" alt="Model 2" /> //space
<img src="images/stars3.jpg" alt="Model 3" /> //space
<!-- end #modelsBanner --></div>

<div id="top10models">
more images come here
</div>

<!-- end #leftContainer --></div>

<div id="centerBottomContainer">
<img src="images/THETOP1.jpg" alt="MODEL WANTED" />
<!-- end #centerBottomContainer --></div>

/***********************************************************/

this is the CSS

#leftContainer {
margin-right: 205px;
padding: 0px;

}
#sideBar {
float: right;
padding: 0px;
margin: 0px;
}
#modelsBanner {
border: #C1C1C1 solid 1px;
padding: 6px;
text-align: left;
margin-bottom: 5px;
word-spacing: -4px;

}
#top10models {
clear: left;
float: left;
width: 288px;
}
#centerBottomContainer {
margin-right: 205px;
margin-left: 289px;
}
#centerBottomContainer img {
word-spacing: normal;
margin-bottom: 10px;
}

.top10modelsClass {
float: left;
margin-right: 4px;
width: 92px;
}
/***********************************************************/

thanks in advance

[SuzyUK]

OK charlee, the wordspacing was something that worked in the browsers I tested but floating the images should work better..

Q. are the images all the same height?

if they are this should work, yu shouldn't need to float the modelsBanner div just the images inside it

#modelsBanner {
border: #C1C1C1 solid 1px;
padding: 6px;
text-align: left;
margin-bottom: 5px;
overflow: hidden; /* add this to contain floats */
}

#modelsBanner img {
float: left;
}

however if your images are different heights and there's more than one row, this will not work very well so let us know!

-Suzy

[charlee]

thanks! it works now, I didnt know that about the overflow property that was all i was needing :), I never had this problem before because i always float the image but in this case i didnt know how to do it without affecting some other divs elements declared in my xhtml code, but well as I said im just starting using CSS and im full of doubts really, right now there are a lot of things which are blury for me, thanks again suzy and 4css.