Links don't work !

T

Thibault

Hey,

Ok so I finally succeed in creating a geographical map with points on it,
whom coordinates come from a MySql database (I used PHP). There is a last
thing I don't understand : in the html page that is displayed, only some of
the links I made on my points work, the other don't. Here is the beginning
of the file, for you to understand (in fact there is 62 points, but it is
always the same thing) :

<HTML>

<HEAD>
<STYLE TYPE="text/css">
.pixel1 {
position:absolute;
padding-left:100;
padding-top:100;
}
.pixel2 {
position:absolute;
padding-left:150;
padding-top:200;
}
</STYLE>
</HEAD>

<BODY>
<TABLE>
<TR>
<TD valign="top">
<span class="pixel1"><A href="sable.php?id=1" TITLE="Awbari"><img
src="point.gif"></A></span>
<span class="pixel2"><A href="sable.php?id=2" TITLE="Frederikshavn"><img
src="point.gif"></A></span>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now the question is : why in the hell the second hyperlink works and the
first one don't !?
Thanks for your help !

Thibault
 
S

SpaceGirl

Thibault said:
Hey,

Ok so I finally succeed in creating a geographical map with points on it,
whom coordinates come from a MySql database (I used PHP). There is a last
thing I don't understand : in the html page that is displayed, only some of
the links I made on my points work, the other don't. Here is the beginning
of the file, for you to understand (in fact there is 62 points, but it is
always the same thing) :

<HTML>

<HEAD>
<STYLE TYPE="text/css">
.pixel1 {
position:absolute;
padding-left:100;
padding-top:100;
}
.pixel2 {
position:absolute;
padding-left:150;
padding-top:200;
}
</STYLE>
</HEAD>

<BODY>
<TABLE>
<TR>
<TD valign="top">
<span class="pixel1"><A href="sable.php?id=1" TITLE="Awbari"><img
src="point.gif"></A></span>
<span class="pixel2"><A href="sable.php?id=2" TITLE="Frederikshavn"><img
src="point.gif"></A></span>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now the question is : why in the hell the second hyperlink works and the
first one don't !?
Thanks for your help !

Thibault
Click to expand...


Why all the uppercase tags? Anyway... no way of seeing why this isn't
working without seeing your site.
 
S

Steve Pugh

If you're setting position to absolute then why aren't you setting any
of left, right, top or bottom as well?

Those padding values are wrong (all non-zero lengths must have units)
and so will be ignored by some browsers.

What's the point of the table?

You're missing the required alt attribute.

They're both clickable for me in IE6 but behave as you describe in
Opera 7.23 and Mozilla 1.6.

Add some borders to pixel1 and pixel2 and you will see that pixel1 is
completely contained within the boundaries of pixel2. As pixel2 comes
later in the source code and as z-index as not been set this means
that pixel1 is 'under' pixel2. Now, it turns out that pixel1 is under
the padding of pixel2 and this is presumably what makes the first one
clickable in IE.

Changing padding-left to left and passing-top to top would solve the
problem (assuming that the images are small enough not to overlap.
This will also let you get rid of the spans and apply the styles to
the anchors or images themselves.

So you would end up with something like this:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.pixel1 {
position:absolute;
left:100px;
top:100px;
}
.pixel2 {
position:absolute;
left:150px;
top:200px;
}
</STYLE>
</HEAD>
<BODY>
<A href="sable.php?id=1" TITLE="Awbari" class="pixel1"><img
src="point.gif" ALT="Awbari"></A>
<A href="sable.php?id=2" TITLE="Frederikshavn" class="pixel2"><img
src="point.gif" ALT="Frederikshavn"></A>
</BODY>
Why all the uppercase tags?
Click to expand...

Maybe because it's easier to see at a glance what's HTML and what's
content if the HTML is all uppercase? Certainly that is why I got into
the habit of using uppercase tags back when I learnt HTML (long before
I ever saw an editor that colour coded different parts of the code).
It's equally valid either way so is entirely down to personal choice.

Steve
 
T

Thibault

"SpaceGirl" a écrit dans le message news:
Why all the uppercase tags?
Click to expand...

Because tags are more legible in uppercase in Notetab.

Anyway... no way of seeing why this isn't working without seeing your
Click to expand...
site.

Here it is ... http://perso.wanadoo.fr/titan_keikomi/test/carte.html
It seems to work in Internet Explorer. But not in Opera nor in Mozilla. I
suppose there is a bug in my code and IE tolerates it. What could it be ?
Thanks ...
 
S

SpaceGirl

Maybe because it's easier to see at a glance what's HTML and what's
content if the HTML is all uppercase? Certainly that is why I got into
the habit of using uppercase tags back when I learnt HTML (long before
I ever saw an editor that colour coded different parts of the code).
It's equally valid either way so is entirely down to personal choice.

Steve
Click to expand...


....not if you write XHTML, XML or are a programmer... It's all case
sensitive. Get out of the bad habit right away, and it'll save confusion
when you try to do more complex things that involve scripting. Uppercase
XHTML will not validate...
 
T

Thibault

"Steve Pugh" a écrit dans le message news:
If you're setting position to absolute then why aren't you setting any
of left, right, top or bottom as well?
Click to expand...

Why would I do that ? Top and left-padding are sufficient for the point to
know where he is supposed to be.

Those padding values are wrong (all non-zero lengths must have units)
and so will be ignored by some browsers.
Click to expand...

Wow, I didn't know that. In facts, all paddings I defined up till now where
equal to zero, so I didn't have any problem. Thank you.

What's the point of the table?
Click to expand...

In facts, I display a map in the background, so defining a table with
absolute width and height allows one to see all the map. But I removed the
map and a lot of things, to make the code more legible and more compact, and
I forgot to remove the table.

You're missing the required alt attribute.
Click to expand...

I know, the reason is the same as above.

They're both clickable for me in IE6 but behave as you describe in
Opera 7.23 and Mozilla 1.6.
Click to expand...

Yes, you're right. In facts, I used only Opera to test this, but it's true
that IE has no problem with this.

Changing padding-left to left and passing-top to top would solve the
problem (assuming that the images are small enough not to overlap.
Click to expand...

They are not some times, but my php file is made in such a way that it
displays only one image if two or more are overlapping.

This will also let you get rid of the spans and apply the styles to
the anchors or images themselves.
Click to expand...

Yes, thank you very much, it is better that way.

Maybe because it's easier to see at a glance what's HTML and what's
content if the HTML is all uppercase? Certainly that is why I got into
the habit of using uppercase tags back when I learnt HTML (long before
I ever saw an editor that colour coded different parts of the code).
It's equally valid either way so is entirely down to personal choice.
Click to expand...

You're definitely right.
Thank you very much for your help !

Thibault
 
S

SpaceGirl

Thibault said:
"SpaceGirl" a écrit dans le message news:

Because tags are more legible in uppercase in Notetab.
Click to expand...

Dont use Notetab then. Writing code (tags) in uppercase is bad habit to get
into - soon as you start having to embed scripts or writer server side code
you'll start getting tripped up. Also, XHTML (the 'next' version of HTML)
does *not* validate in uppercase.
site.

Here it is ... http://perso.wanadoo.fr/titan_keikomi/test/carte.html
It seems to work in Internet Explorer. But not in Opera nor in Mozilla. I
suppose there is a bug in my code and IE tolerates it. What could it be ?
Thanks ...
Click to expand...

Looking...
 
J

Jukka K. Korpela

Thibault said:
Here it is ... http://perso.wanadoo.fr/titan_keikomi/test/carte.html
Click to expand...

I see two red points with blue borders around them. I do not see the
point. Showing a real life case might help in guessing what you really
need - now we can only say that the current approach is wrong.
It seems to work in Internet Explorer. But not in Opera nor in
Mozilla. I suppose there is a bug in my code and IE tolerates it.
What could it be ?
Click to expand...

Of course there are errors in your code. Read Steve's reply. Note that
stuff like padding-top:100; _must_ be ignored by a browser that conforms
to CSS specifications. Whether fixing all the errors fixes the problem
you have observed is not clear yet. The observed problem might relate to
positioning the span elements at the same coordinates.
 
S

Steve Pugh

SpaceGirl said:
...not if you write XHTML,
Click to expand...

Who said anything about writing XHTML? The OP's example was HTML
(unclosed <img> elements) and XHTML offers nothing over HTML for the
vast majority of authors and users.

There are no benefts to writing XHTML for any of the projects I work
on. I use XHTML for my personal home page and when a client requests
it but for most sites HTML offers equal utility with fewer hassles.
XML or are a programmer...
Click to expand...

Irrelevant. Any decent XML tool or any decent program can output HTML
in whatever case is requried by the user. Anything that can't is
seriously flawed.
It's all case sensitive.
Click to expand...

Um, no it isn't. Some things are, some things aren't.
Get out of the bad habit right away, and it'll save confusion
when you try to do more complex things that involve scripting.
Click to expand...

Rubbish. I do lots of complex things with scripting and the case of
the HTML makes no difference. Whilst some programming languages are
themselves case sensitive that doesn't mean that any HTML they
interface with has to be.
Uppercase XHTML will not validate...
Click to expand...

Really? Wow! I never knew that. I wonder how all the XHTML pages I've
written over the past four years ever managed to validate?

Steve
 
J

Jeff Thies

Thibault said:
"Steve Pugh" a écrit dans le message news:

Why would I do that ? Top and left-padding are sufficient for the point to
know where he is supposed to be.
Click to expand...

Hmmm,

I looked at this and then read Steve's response and he had it spot on.

The only reason the padding appears to work is that when you say position:
absolute the browser is implying: top: 0px, left: 0px

Forget the padding and the table., just set the position. And although I
like to use lowercase tags, it's totally irrelevant to whether this works or
not.

Jeff
 
M

Mitja

Thibault said:
Hey,

Ok so I finally succeed in creating a geographical map with points on
it, whom coordinates come from a MySql database (I used PHP). There
is a last thing I don't understand : in the html page that is
displayed, only some of the links I made on my points work, the other
don't. Here is the beginning of the file, for you to understand (in
fact there is 62 points, but it is always the same thing) :

<HTML>

<HEAD>
<STYLE TYPE="text/css">
.pixel1 {
position:absolute;
padding-left:100;
padding-top:100;
}
.pixel2 {
position:absolute;
padding-left:150;
padding-top:200;
}
</STYLE>
</HEAD>

<BODY>
<TABLE>
<TR>
<TD valign="top">
<span class="pixel1"><A href="sable.php?id=1" TITLE="Awbari"><img
src="point.gif"></A></span>
<span class="pixel2"><A href="sable.php?id=2"
TITLE="Frederikshavn"><img src="point.gif"></A></span>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Now the question is : why in the hell the second hyperlink works and
the first one don't !?
Thanks for your help !

Thibault
Click to expand...

As others already mentioned, replacing "padding-top:100" with "top:100px"
etc. solves the problem.

I further suggest you don't complicate so much with separate css. In your
case, ID selectors (#pixel1 and <img id="pixel1">) would seem more
appropriate. Even better (and slightly easier to code in php, too) would be
to use inline css:
<div id="cities">
<img src="..." style="top:100px;left:15px">
<img ...>
...
</div>
And somewhere above it all simply
<style> #cities img {position: absolute} </style>

It's not better in any tangible way, it's just nicer :)
 
S

SpaceGirl

Steve Pugh said:
Who said anything about writing XHTML? The OP's example was HTML
(unclosed <img> elements) and XHTML offers nothing over HTML for the
vast majority of authors and users.
Click to expand...

He didn't... I was just pointing out it might not be a good habit to get
into (from experience).
There are no benefts to writing XHTML for any of the projects I work
on. I use XHTML for my personal home page and when a client requests
it but for most sites HTML offers equal utility with fewer hassles.

Irrelevant. Any decent XML tool or any decent program can output HTML
in whatever case is requried by the user. Anything that can't is
seriously flawed.


Um, no it isn't. Some things are, some things aren't.


Rubbish. I do lots of complex things with scripting and the case of
the HTML makes no difference. Whilst some programming languages are
themselves case sensitive that doesn't mean that any HTML they
interface with has to be.
Click to expand...

That's what I thought, until we couldn't get a couple of sites to validate.
We switch out headers and bulk to lowercase to see what would happen and
suddenly both sites validate. It could have been coincidence I guess... Okay
I just checked on W3C. XHTML *is* case sensitive. Write a simple page and
Really? Wow! I never knew that. I wonder how all the XHTML pages I've
written over the past four years ever managed to validate?
Click to expand...

I have no idea. Maybe it doesn't? According to the W3C site... Gimme one of
your URL and we can see for ourselves.
 
S

SpaceGirl

I have no idea. Maybe it doesn't? According to the W3C site... Gimme one of
your URL and we can see for ourselves.
Click to expand...

And I dont mean your homepage... I mean one of your websites that uses upper
case XHTML...
 
S

Steve Pugh

SpaceGirl said:
That's what I thought, until we couldn't get a couple of sites to validate.
Click to expand...

What has validation got to do with "complex things that involve
scripting". Did the complex scripting not work until the page
validated?
We switch out headers and bulk to lowercase to see what would happen and
suddenly both sites validate.
Click to expand...

But did this solve your problem with "complex things that involve
scripting"?
It could have been coincidence I guess... Okay
I just checked on W3C. XHTML *is* case sensitive.
Click to expand...

Yes I know. But what has that got to do with "complex things that
involve scripting"?

Steve
 
S

SpaceGirl

Steve Pugh said:
validate.

What has validation got to do with "complex things that involve
scripting". Did the complex scripting not work until the page
validated?
Click to expand...

No, it didn't. But if you are switching between XHTML, C#, ASP and JS all
day, it is a good idea to try use some sort of similar methodology across
them all. That was all I was suggesting.
But did this solve your problem with "complex things that involve
scripting"?
Click to expand...

See above
Yes I know. But what has that got to do with "complex things that
involve scripting"?

Steve
Click to expand...


I did miss your sarcasm btw... late night posting... not good!
 
L

Leif K-Brooks

SpaceGirl said:
Writing code (tags) in uppercase is bad habit to getinto - soon as you
start having to embed scripts or writer server side code
you'll start getting tripped up.
Click to expand...

I'm yet to see how uppercase tags hurt server-side code. Would you mind
giving an example?
Also, XHTML (the 'next' version of HTML) does *not* validate in uppercase.
Click to expand...

Python code isn't generally valid C++, but that's no reason to avoid
Python. Why avoid certain HTML features just because they aren't valid
in XHTML?
 
N

Neal

Why avoid certain HTML features just because they aren't valid in XHTML?
Click to expand...

But capital letter tags aren't a feature of HTML, they're handy to be
sure, but down the road you are going to have an easier time if you
develop the habit of lower-casing your tags and attributes today.

When the day comes that most browsers in use support XHTML when properly
served, and you find benefit in changing your pages to XHTML, using
lower-case, solidly semantic, valid and well-formed HTML 4.01 Strict
markup today will pay off. Only minor cosmetic changes to the code will be
needed.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sort by number of characters 1
I am trying to detect Which image id="" was clicked ? 22
Working on mobile css menu with plenty of frustration! 2
Help with code 0
SendGrid email issue in responsive Gmail 1
Help with Visual Lightbox: Scripts 2
How to wrap <td> content . 16

Members online

Total: 21 (members: 1, guests: 20)
Robots: 390

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top