...

View Full Version : having trouble removing whitespace between images in my 100% CSS layout...



SpeedFreak
12-23-2003, 05:06 PM
Hey,

i am designing my latest site in CSS and XHTML 1.1 strict to comply with the latest web standards. I have a concept of the site designed here: http://www.blueshiftdesigns.com/new_test/ but this concept version is a simple table based html 4.01 layout. That is how the ending CSS layout should look (more or less)

In the CSS version: http://www.blueshiftdesigns.com/new_test/indexCSS.php i cannot get the images and the menu div down the left side (the blue section) to have no whitespace between them like in the table based layout. What am i doing wrong?

Cheers

me'
12-23-2003, 06:53 PM
First off, congratulations on starting down the light side!

How about setting the left hand side as one big div, then setting the background-image: to be a conglomerate of all your current images. This'll mean the content is completely seperated from the style (a good thing). One test to do on your page to see if the content is seperated from the style is to view it without CSS and see if it flows nicely, there are no images or colours in there, but all the content is.

SpeedFreak
12-23-2003, 10:22 PM
well due to the way my site will scale infintely and still maintain the gradients, that is the most efficient way to make my site and its gradients scale correctly.

Anyway, that doesnt help my problem with my unexplained gaps between images seperated with <br/> tags - any ideas??

Cheers

SpeedFreak
12-26-2003, 10:09 PM
^^ bump ^^

any suggestions would be massively apprteciated, this is my last hurdle in completing the layout phase of this design and it is still giving me this last headache.

The url is: http://www.blueshiftdesigns.com/new_test/indexCSS.php (as above)

All CSS code is easily visible via 'view source'

EDIT: the site renders fine in Mozilla, the whitespace appears in IE...

TIA

me'
12-27-2003, 11:37 AM
Strange... Try putting them all on one line? Like this:
<img /><img /><img />rather than
<img />
<img />
<img />

SpeedFreak
12-27-2003, 01:56 PM
Hooray! that did it.

I had to put all images and the start of the div tags on the same line to get IE to put no whitespace between them.

silly non-compliance :p

thanks me'

Cheers :D

me'
12-27-2003, 03:41 PM
Originally posted by SpeedFreak
Hooray! that did it.Excellent! Strange how such a low-tech solution sometimes fixes strange things in IE! For example, setting position:relative on a containing element will solve around 50% of positioning problems for it's children!

brothercake
12-29-2003, 12:06 AM
Originally posted by me'
For example, setting position:relative on a containing element will solve around 50% of positioning problems for it's children!
And removing it will solve the other 50% ...

Alex Vincent
12-30-2003, 03:59 AM
Originally posted by me'
Strange... Try putting them all on one line? Like this:
<img /><img /><img />rather than
<img />
<img />
<img />

One of my dirty tricks which is legal XML and/or legal HTML is to put the closing portion of the tag on the next line:

<img src="1.jpg"

/><img src="2.jpg"

/>

It makes the code a little harder to read, but not much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum