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="imagetoo lbar" 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:relati ve;
}
#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.htm l"
target="_self"> <img src="./img/5.gif" width="100" height="100"
title="#5"></a></div>
</div>
</div>
</body>
</html> 9  2899 
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/
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.
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
On 2006-10-25, frizzle <ph********@gma il.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.
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!
Ben C wrote:
On 2006-10-25, frizzle <ph********@gma il.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
On 2006-10-26, frizzle <ph********@gma il.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.
Ben C wrote:
On 2006-10-26, frizzle <ph********@gma il.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.
On 2006-10-26, frizzle <ph********@gma il.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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Thomas Mlynarczyk |
last post by:
Hello,
The following gives different results in IE and "Non-IE" browsers:
<div style="background-color: green; width: 200px">
<div style="margin-top: 20px; background-color: red">
Hello
</div>
</div>
|
by: Alan Little |
last post by:
I have a two-column layout, with a background image in the left panel. If
the content of the right column is longer than the left, I would like to
have the background image repeat all the way down. Is there a way to do
this? Here's a screenshot of what I have:
http://www.holotech.net/images/brr.jpg
My CSS:
#TwoColumn {
|
by: RJ |
last post by:
Hello! I am trying to lay out a left navigation column with a
background image, where the left nav column runs the entire scrolled
height/length of the page. The float:left column layout works fine, but
the background image doesn't continue downward in this column below the
links. I tried this in FireFox 1.0.7 and IE6, but this image stops
where the last link stops. I want the background all the way to the bottom.
How can I force...
|
by: johkar |
last post by:
I have two problems I cannot work out in the following tab code with
Netscape 6. Problems are marked with all cap comments. One is that
the background image is not shown in NS 6 (two places in CSS). The
second problem is that the top right rounded corner is not showing up
in the Tier 2 tabs. Could you have a look and tell me if it is
possible to correct? This code seems to work fine in IE 5+ and
Firefox. Note that since I can't post...
|
by: Viken Karaguesian |
last post by:
Hello all,
I need somehelp with background tiling. I have a sneaking suspicion that
what I want to do is not possible, but I'll ask anyway. :>) First some
background: Here's the site in question: www.sayatnova.com (I'm sure many of
you have seen this before as I've often asked for help).
I've come a long way since I first created the site many moons ago and I'm
trying to convert it to a (1) Table-less, (2) Frame-less and (3) Validated...
| | |
by: Walker |
last post by:
I have a span containing two words. Eg.
<span>Avant Garde</span>
Using CSS, I pad the text to the right and assign a background-image. Eg.
span {
padding: 0 3px 0 11px;
background: url(images/tagbull.gif) no-repeat 0px 2px;
}
|
by: =?Utf-8?B?R3JlZyBMYXJzZW4=?= |
last post by:
I'm trying to figure out how to modify a panel (panel1) from a
backgroundworker thread. But can't get the panel to show the new controls
added by the backgroundwork task. Here is my code. In this code there is a
panel panel1, that I populate with a lable in the foreground. Then when I
click on "button1" a backgroundworker thread in async mode is started. When
the backgoundworker thread completes the thread returns a panel to populate...
|
by: Paul Wake |
last post by:
I'm missing something regarding positioning background images. It's probably
obvious, and I hope someone here will note it for me. I'm trying to do
something like the complex spiral thing, only much simpler. According to the
O'Reilly CSS definitive guide book, it should work, but it isn't. On
http://www.xmission.com/~wake/backgroundtest.html I have a background image
showing through, but not showing up in the header areas. It is my...
|
by: Chris Beall |
last post by:
See
http://pages.prodigy.net/chris_beall/Demo/photo%20block%20experiments.html
I've ended up with what seems like a rather complex structure for what I
thought would be a somewhat simple problem. Even that complex solution
works well only in FireFox (haven't tested Safari...).
Can anyone come up with a better solution, where 'better' means:
- Works as well as the example above, but is simpler.
OR
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
