Sent by Gunlaug_Sørtun on 15 February 2005 05:05
adwin wijaya wrote:
> www.fcc.org.au
>
> I got problem with css stuff especially in photo album area (on first
> page). I wants to display 8 pictures (each pictures has different
> size) but it looks ungly in both IE and firefox (it looks unglier in
> firefox).
>
> Can someone recommend me a suggestion how to fix the bug ?
It's not a bug-- it's bad coding.
No doctype will hold on that page, and my IE6 broke down 4 times just
trying to render it. A round-trip to <http://validator.w3.org/"> might
help a lot-- as a starting-point.
That apart, when you try to shrink images in floats, you must fix both
width and height if you want those floats to stay the same height. Any
deviation will make most browsers hook up on the tallest floats when
they stack them. IE/win has its own interpretation of "auto", so that's
no good.
> div.imageGallery img { padding: 0; width: 105px; height: auto; }
Should be something like:
div.imageGallery img
{
width: 105px;
height: 78px;
}
A better idea would be to use images of the right, and the same, size.
It isn't good use of bandwidth to shrink an image of 924x689 pixels and
88KB filesize to button-size. It won't end up the same size as a 200x150
pixels image when shrinked, unless you force dimensions on all of them--
as in my example.
No need for the <ul><li><a><img...></a></li><li><a>text</a>text<li></ul>
at all really, since you wrap each of those constructions in <div
class="imageGallery">, and float it. You can easily just move all styles
to those divs, and just keep the images and text/links in there.
regards
Georg
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/