Two more questions

[chlori]

Me again...

1. Gap between images
The images on the left have a gap between them on
FF1.0. When I refresh a few times the gap disappears.
When I refresh again it reappears. Bug?
http://www.arto.ch/tests/thinklab/index4.php
IE has no gap.

2. Printer Stylesheet
For the first time I've made a print stylesheet.
How can I improve it?
http://www.arto.ch/tests/thinklab/style4.css

 

[chlori]

chlori schrieb am 20.01.2005 22:11:

1. Gap between images
The images on the left have a gap between them on
FF1.0. When I refresh a few times the gap disappears.
When I refresh again it reappears. Bug?
http://www.arto.ch/tests/thinklab/index4.php

BTW, if I check the site on my local PC Firefox keeps
the gap even when I refresh.

 

[floele]

I suggest you make a background of these images.
That means
1) remove the images from HTML code
2) Add that code to your CSS:
div#leftcol {
background-image:url(gras.jpg);
background-repeat:repeat-y;
height:322px;
}

 

[Steve Pugh]

I suggest you make a background of these images.
That means
1) remove the images from HTML code
2) Add that code to your CSS:
div#leftcol {
background-image:url(gras.jpg);
background-repeat:repeat-y;
height:322px;
}

I think they're just sample images - the real site will probably have
four different images there, not the same one four times. But I may be
wrong.

Steve

 

[chlori]

Steve Pugh schrieb am 20.01.2005 23:59:

I think they're just sample images - the real site will probably have
four different images there, not the same one four times. But I may be
wrong.

Exactly, they're sample images. Actually I'm more
interested in *why* that gap appears/disappears than in
solving this problem.

Do you see this same effect in Firefox?

Probably there will bi just two images with a bigger gap.

 

[Mitja]

Me again...

1. Gap between images
The images on the left have a gap between them on
FF1.0. When I refresh a few times the gap disappears.
When I refresh again it reappears. Bug?
http://www.arto.ch/tests/thinklab/index4.php
IE has no gap.

Opera does, though. I don't think it's a bug, it's simply
that your paragraph in #leftcol (which contains only images
and no characters) wraps into several lines, which as always
have a bit of spacing between tham so the "text" is easier
to read. You can get rid of the gap by applying a smaller
line-height to the containing paragraph, i.e. #leftcol p {
line-height: 1em; }. Note that this leaves a one-pixel gap
in Opera; line-height:0 gets rid of that though I don't know
if it works elsewhere.
Another solution is to float the images left.

 

[Spartanicus]

Actually I'm more
interested in *why* that gap appears/disappears than in
solving this problem.

http://www.w3.org/TR/CSS21/visudet.html#line-height

Specifying a suitable value for the vertical-align property removes the
gap, example: img{vertical-align:top}.

For images the default "baseline" value is a poor choice imo, I have a
default stylesheet that I start off with when creating a new site, in it
the vertical alignment for images is set to something more suitable.