Stylesheets - Background image not showing up in outer column.

Author

Background image not showing up in outer column.

frizzle

2006-11-05, 11:33 pm

Hi there,

I have a site where i display all kinds of thumbnails, (all 100 *
100px), the thumbs are links (surprise! ;) ).
They link to a page where someone can order the picture. If ordered, a
"selected div" is added (via PHP) before the thumbnail. It has to show
a small image above the left corner of the thumbnail.
Now it works fine in FF, only in IE (windows) the image isn't visible
in the fifth (outer) "column".

My code is below. I hope someone can help.

Thanks.

Frizzle.

* * * * * * * * * * C O D E - A L A R M * * * * * * * * * *

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pics</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">

</style>
</head>

<body>
<div id="container">
<div id="piclist">
<div id="pic"><a href="./img_1.html" target="_self"><img
src="./img/1.gif" width="100" height="100" title="#1"></a></div>
<div id="pic"><a href="./img_2.html" target="_self"><img
src="./img/2.gif" width="100" height="100" title="#2"></a></div>
<div id="pic"><a href="./img_3.html" target="_self"><img
src="./img/3.gif" width="100" height="100" title="#3"></a></div>
<div id="pic"><a href="./img_4.html" target="_self"><img
src="./img/4.gif" width="100" height="100" title="#4"></a></div>
<div id="pic"><div id="selected">*</div><a href="img_5.html"
target="_self"><img src="./img/5.gif" width="100" height="100"
title="#5"></a></div>
</div>
</div>
</body>
</html>

Jukka K. Korpela

2006-11-05, 11:33 pm

Scripsit frizzle:

> My code is below. I hope someone can help.

Don't hold your breath. If you don't care about our convenience by simply
posting the URL of your page, why would anyone care to help you.

Besides, your markup is invalid; you didn't do your homework.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

frizzle

2006-11-05, 11:33 pm

Jukka K. Korpela wrote:
> Scripsit frizzle:
>
>
> Don't hold your breath. If you don't care about our convenience by simply
> posting the URL of your page, why would anyone care to help you.
>
> Besides, your markup is invalid; you didn't do your homework.
>
> --
> Jukka K. Korpela ("Yucca")
> http://www.cs.tut.fi/~jkorpela/

I didn't post a URL, because it isn't online ...
That's why i hoped posting the entire page with relevant info would be
ok.
And what it comes to the markup: i'm no CSS expert like everybody else,

so my humble excuses for making any mistakes.

Frizzle.

Ed Mullen

2006-11-05, 11:33 pm

frizzle wrote:
> Jukka K. Korpela wrote:
>
> I didn't post a URL, because it isn't online ...
> That's why i hoped posting the entire page with relevant info would be
> ok.
> And what it comes to the markup: i'm no CSS expert like everybody else,
>
> so my humble excuses for making any mistakes.
>
> Frizzle.
>

So put your test example online with dummy image files so it will work.
There's no way we can duplicate your local file system. We need to
see what you see and online is the only real way given what you describe.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
There's very little advice in men's magazines, because men think, I know
what I'm doing. Just show me somebody naked. - Jerry Seinfeld

Ben C

2006-11-05, 11:33 pm

On 2006-10-25, frizzle <phpfrizzle@XXXXXXXXXX> wrote:
> Hi there,
>
> I have a site where i display all kinds of thumbnails, (all 100 *
> 100px), the thumbs are links (surprise! ;) ).
> They link to a page where someone can order the picture. If ordered, a
> "selected div" is added (via PHP) before the thumbnail. It has to show
> a small image above the left corner of the thumbnail.
> Now it works fine in FF, only in IE (windows) the image isn't visible
> in the fifth (outer) "column".
>
> My code is below. I hope someone can help.
>
> Thanks.
>
> Frizzle.
>
>
> * * * * * * * * * * C O D E - A L A R M * * * * * * * * * *
>
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">

Have you tried using the "strict" doctype instead?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

This may make IE work better.

A few points that are probably irrelevant to your problem, but may
simplify things:

1. No point setting clear on #container or #piclist that I can see.
2. Should be no need to set z-index on #selected.
3. Rather than set #pic a to float: left, you could try making it
display: block. The effect should be the same.
4. Don't give more than one node the same id. Validators and things
should tell you this.
5. Put units on non-zero lengths.

Andy Dingley

2006-11-05, 11:33 pm

frizzle wrote:

> Now it works fine in FF, only in IE (windows) the image isn't visible
> in the fifth (outer) "column".

You've clearly been attacked by subversive fifth columnists!

frizzle

2006-11-05, 11:33 pm

Ben C wrote:
> On 2006-10-25, frizzle <phpfrizzle@XXXXXXXXXX> wrote:
>
> Have you tried using the "strict" doctype instead?
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
>
> This may make IE work better.
>
> A few points that are probably irrelevant to your problem, but may
> simplify things:
>
> 1. No point setting clear on #container or #piclist that I can see.
> 2. Should be no need to set z-index on #selected.
> 3. Rather than set #pic a to float: left, you could try making it
> display: block. The effect should be the same.
> 4. Don't give more than one node the same id. Validators and things
> should tell you this.
> 5. Put units on non-zero lengths.

Thanks Ben for taking the effort to help me.
Too bad, it doesn't completely solve it: when i change float:left to
display:block (and the rest) like you said, the selected pics jump a
few pixels higher, and the next row beneath it stops under that
picture.

So if the right picture of the top row is "selected", the picture link
is just as high as the selected-div (which should be a bit higher then
the pic), and the following row only has 1 picture (the most right
one).
I hope you/anyone can help me a little bit further ...

Thanks.

Frizzle

Ben C

2006-11-05, 11:33 pm

Newsgroups: comp.infosystems.www.authoring.stylesheets
X-Trace: sv3-HnbEUhJ1KGa5h+cZVLUS4L6oGfojq2OhCBT+r6R0l2gvdP7fKrF0RK3jjrTMIZkxid4VtjKTH0SWSlk!HSjPVDmlHh/So11EOxkgyvCQUL/zIVQu9kaNkXs9nI6OjfjfxYZ4FkMqKnD9qFacUb5jZsLenCJJ!yuUGWqKaXrLHdA==
NNTP-Posting-Date: Thu, 26 Oct 2006 13:03:04 -0500
User-Agent: slrn/0.9.8.0 (Linux)
X-Complaints-To: abuse@eclipse.net.uk
X-DMCA-Complaints-To: abuse@eclipse.net.uk
X-Abuse-and-DMCA-Info: Please be sure to forward a copy of ALL headers
X-Abuse-and-DMCA-Info: Otherwise we will be unable to process your complaint properly
X-Postfilter: 1.3.32

On 2006-10-26, frizzle <phpfrizzle@XXXXXXXXXX> wrote:
[snip]
> Too bad, it doesn't completely solve it: when i change float:left to
> display:block (and the rest) like you said, the selected pics jump a
> few pixels higher, and the next row beneath it stops under that
> picture.
>
> So if the right picture of the top row is "selected", the picture link
> is just as high as the selected-div (which should be a bit higher then
> the pic), and the following row only has 1 picture (the most right
> one).
> I hope you/anyone can help me a little bit further ...

Are you now getting the same problems in IE and FF?

If so, post a link to an example showing the problem, and I'll have a
look at it.

If the problem is still IE-specific even when using the strict doctype
then I can't help you, but maybe someone else can.

frizzle

2006-11-05, 11:33 pm

Ben C wrote:
> On 2006-10-26, frizzle <phpfrizzle@XXXXXXXXXX> wrote:
> [snip]
>
> Are you now getting the same problems in IE and FF?
>
> If so, post a link to an example showing the problem, and I'll have a
> look at it.
>
> If the problem is still IE-specific even when using the strict doctype
> then I can't help you, but maybe someone else can.

Only IE.
Here are some screens:
IE: http://img276.imageshack.us/img276/1716/iese9.gif
FF: http://img76.imageshack.us/img76/9608/ffdx1.gif

If you don't know how to solve this, do you know another way to achieve
the same?

Thanks for the help.

Frizzle.

Ben C

2006-11-05, 11:33 pm

On 2006-10-26, frizzle <phpfrizzle@XXXXXXXXXX> wrote:
> Ben C wrote:
[snip]
>
> Only IE.
> Here are some screens:
> IE: http://img276.imageshack.us/img276/1716/iese9.gif
> FF: http://img76.imageshack.us/img76/9608/ffdx1.gif
>
> If you don't know how to solve this, do you know another way to achieve
> the same?

The way you were doing it in the first place was a good way of doing it.

It looks from your screenshots like the basic problem is that IE is
(incorrectly) moving the divs up a bit when they contain the selection
icon thing. Once it's done that, the floats don't line up any more, and
you get (correct) "float catching", which is why 11 ended up on a line
all by itself.

You could try putting the selection icon in _all_ the divs, not just the
selected ones, but set to visibility: hidden by default. Then set the
ones that are selected to visibility: visible. That way maybe they will
all stay in the same shape and position (even if it's a bit wrong), so
line up properly, and look OK.

I can't try this as I don't have IE.