By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,949 Members | 946 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,949 IT Pros & Developers. It's quick & easy.

Background image not showing up in outer column.

P: n/a
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">
<!--
body, form, input{
margin: 0;
padding: 5;
color: #555;
font: 9pt/100% Arial, Helvetica, sans-serif;
text-align: center;
}
body{
background: #F9F9F9;
}
#container{
margin: auto;
width: 672px;
text-align: left;
clear: both;
}
#piclist{
margin: 50px auto;
clear: both;
display: block;
}
#pic{
float: left;
position:relative;
}
#pic a{
background: #fff;
float: left;
border: 1px solid #eaeaea;
width: 100px;
height: 100px;
padding: 6px;
margin: 10px;
}
#pic a:hover{
border: 1px solid #c7c7c7;
}
#pic a img{
border: none;
}
#selected{
background: transparent url("./selected.gif") no-repeat 0 0 scroll;
height: 23px;
width: 23px;
top: 4px;
left: 4px;
position: absolute;
display: block;
overflow: hidden;
text-indent: 30px;
z-index: 10;
}
-->
</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>

Oct 25 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
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/

Oct 25 '06 #2

P: n/a

Jukka K. Korpela wrote:
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/
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.

Oct 25 '06 #3

P: n/a
frizzle wrote:
Jukka K. Korpela wrote:
>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/

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
Oct 25 '06 #4

P: n/a
On 2006-10-25, frizzle <ph********@gmail.comwrote:
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.
Oct 25 '06 #5

P: n/a

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!

Oct 25 '06 #6

P: n/a

Ben C wrote:
On 2006-10-25, frizzle <ph********@gmail.comwrote:
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.
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

Oct 26 '06 #7

P: n/a
On 2006-10-26, frizzle <ph********@gmail.comwrote:
[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.
Oct 26 '06 #8

P: n/a
Ben C wrote:
On 2006-10-26, frizzle <ph********@gmail.comwrote:
[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.
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.

Oct 26 '06 #9

P: n/a
On 2006-10-26, frizzle <ph********@gmail.comwrote:
Ben C wrote:
[snip]
>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?
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.
Oct 26 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.