Re: Image display and white space

#1

"Evertjan." <exjxw.hannivoort (AT) interxnl (DOT) net> wrote

Quote:

Tony T wrote on 17 aug 2003 in
comp.infosystems.www.authoring.stylesheets:

Is there any way other than using absolute or relative positioning (or
tables) for each image that will reliably render a grid of images
without any gaps on all - or at least most - browsers and platforms?

What about float and clear in css ?

I can't see quite how this could work, but I'm prepared to try if you can
suggest a way!

T
---
replace "from" with "to" for email address

#2

"Evertjan." <exjxw.hannivoort (AT) interxnl (DOT) net> wrote

Quote:

.grid img {
float:left;
border: 0px;
padding: 0px;
margin :0px;
}
/style
base href="http://rnetworks2002.users.btopenworld.com/csstest/"
/head><body
div class="grid"
img src="red.gif" width=100 height=100 alt="red"
img src="green.gif" width=100 height=100 alt="green"
br style="clear:left;"
img src="blue.gif" width=100 height=100 alt="blue"
img src="yellow.gif" width=100 height=100 alt="yellow"
br style="clear:left;"
/div

Yes, this does it better - see
http://rnetworks2002.users.btopenwor...est/grid2.html

NN4.5 loses two of the squares, but I can live with a workaround for NN4 if
I have to.

---
Tony T
Replace 'from' with 'to' (twice) for e-mail

#3

Tony T wrote on 17 aug 2003 in
comp.infosystems.www.authoring.stylesheets:

Quote:

div class="grid"
img src="red.gif" width=100 height=100 alt="red"
img src="green.gif" width=100 height=100 alt="green"
br style="clear:left;"
img src="blue.gif" width=100 height=100 alt="blue"
img src="yellow.gif" width=100 height=100 alt="yellow"
br style="clear:left;"
/div

Yes, this does it better - see
http://rnetworks2002.users.btopenwor...est/grid2.html

NN4.5 loses two of the squares, but I can live with a workaround for
NN4 if I have to.

You need the second <br style="clear:left;"> to be able to have text under
the img-es

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

#4

"Tony T" <fromny.turfromn (AT) btinternet (DOT) com> wrote

Quote:

"Evertjan." <exjxw.hannivoort (AT) interxnl (DOT) net> wrote in message
news:Xns93DA98F90F376eejj99 (AT) 194 (DOT) 109.133.29...

snip Evertjan's solution>....
http://rnetworks2002.users.btopenwor...est/grid2.html

NN4.5 loses two of the squares, but I can live with a workaround for NN4
if
I have to.

That now works on both IE 6 and Moz, but
breaks on NN 4.8 (loses 2 squares), whereas
the 4.01 transitional form at my site worked
for NN 4.8.

The subtleties of browser versions..

--
Andrew Thompson
http://www.lensescapes.com/
http://www.physci.org/
http://www.1point1c.org/

#5

I had a brainwave ....

here's the original but with the img {margin} set to img {margin: -2px;}

http://rnetworks2002.users.btopenwor...negmargin.html

Seems to work quite well except in NN4.5
--
Tony T
Replace 'from' with 'to' (twice) for e-mail

#6

"Tony T" <fromny.turfromn (AT) btinternet (DOT) com> wrote

Quote:

I had a brainwave ....

here's the original but with the img {margin} set to img {margin: -2px;}

http://rnetworks2002.users.btopenwor...negmargin.html

But not 4.8..

Red
Green

Blue
Yellow

All down the left column!

--
Andrew Thompson
http://www.lensescapes.com/
http://www.physci.org/
http://www.1point1c.org/

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Re: Image display and white space

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Re: Image display and white space - 08-17-2003 , 07:40 AM

Re: Image display and white space - 08-17-2003 , 12:25 PM

Re: Image display and white space - 08-17-2003 , 12:46 PM

Re: Image display and white space - 08-17-2003 , 12:52 PM

Re: Image display and white space - 08-17-2003 , 02:18 PM

Re: Image display and white space - 08-17-2003 , 08:35 PM