Strange IE problem - unclickable links

[Stephen Melia]

Hello,

I've just done a redesign of website, and it's gone terribly wrong for
Internet Explorer 6. I have a two column layout, and for some reason
links in the right hand column cannot be clicked - it's almost as if
the left column is covering the right - an attempt to click a link
will select text in the left column.

I've tried setting the right margin (of the left column) to 300px; but
to no avail. I don't want to set the size of the left column, which
presumably would fix it, since the whole point is to have a fluid
layout. It works fine in Firebird 0.8.

Here's an example:
http://www.golisten.co.uk/retrieve.php?messageID=648

[Jim Roberts]

"Stephen Melia" wrote...

Hello,

I've just done a redesign of website, and it's gone terribly wrong for
Internet Explorer 6. I have a two column layout, and for some reason
links in the right hand column cannot be clicked - it's almost as if
the left column is covering the right - an attempt to click a link
will select text in the left column.

I've tried setting the right margin (of the left column) to 300px; but
to no avail. I don't want to set the size of the left column, which
presumably would fix it, since the whole point is to have a fluid
layout. It works fine in Firebird 0.8.

Here's an example:
http://www.golisten.co.uk/retrieve.php?messageID=648

Hello Stephen,

Using the w3c validation service, I discovered that your page does not have
a document type declared:

http://validator.w3.org/check?uri=ht...tern+Europe%29

This is important. If a 'doctype' is not declared, web pages can do funny
things. Refer to this:
http://www.alistapart.com/articles/doctype/

Decide which doctype best applies and revalidate your document. Fix any
errors that the validation service returns and then see if that fixes your
troubles.

Good luck,
Jim Roberts

[Stephen Poley]

On 3 Apr 2004 08:03:02 -0800, sj*****@yahoo.co.uk (Stephen Melia) wrote:

I've just done a redesign of website, and it's gone terribly wrong for
Internet Explorer 6. I have a two column layout, and for some reason
links in the right hand column cannot be clicked - it's almost as if
the left column is covering the right - an attempt to click a link
will select text in the left column.

I've tried setting the right margin (of the left column) to 300px; but
to no avail. I don't want to set the size of the left column, which
presumably would fix it, since the whole point is to have a fluid
layout. It works fine in Firebird 0.8.

Here's an example:
http://www.golisten.co.uk/retrieve.php?messageID=648

FWIW: links operate normally in IE 6 here (Windows XP). Odd, but in IE
almost anything is possible.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Stephen Melia]

> Decide which doctype best applies and revalidate your document.

Heh, almost immediately I posted my plea for help, I remembered that
I'd put in a doctype to try and validate towards - and removing the
doctype solved the problem. (I'll have to work for compliance another
day :)

Thanks very much for your help!

[Pastis]

Hello

I also have a problem with links. Am only learning CSS. I have several divs
on my page and the links of the third and fourth (called "valikko" and
"paapalsta") only work if the fifth one (bottom picture) is positioned very
far down from it, something like 400 pixels. For the moment it's at the
distance I want it to be. The link in the div "paapalsta" (the words
"sivujen tekijän") curiously begins to work if I position div "bottom" very
far down.

What could be the problem? It didn't help to add a document type.

http://www.geocities.com/fennomaani

There's nothing behind the links for the moment. I have to finish the first
page before working on others. I'll paste my css here-below.

Thanks!

P.

/* basic elements */

body {
font: 10pt/10pt courier new;
color: #725712;
background: #ffffff url(tausta.jpg) repeat-y top center;
margin: 0px;
}

p {
font: 10pt/10pt courier new;
color: #725712;
margin-top: 10px;
margin-left: 15px;
margin-bottom: 5px;
text-align: justify;
}

h1 {
font: normal 18pt courier new;
font-weight: bold;
letter-spacing: 0px;
margin-top: 10px;
margin-left: 15px;
margin-bottom: 0px;
color: #725712;
text-align: center;
}

h2 {
font: normal 10pt courier new;
font-weight: bold;
letter-spacing: 0px;
margin-top: 10px;
margin-left: 15px;
margin-bottom: 0px;
color: #725712;
text-align: left;
}
ul {
list-style-type: none;
margin-top: 10px;
margin-left: 15px;
}

a:link {
font: 12pt/12pt courier new;
font-weight: bold;
text-decoration: none;
color: #725712;
}

a:visited {
font: 12pt/12pt courier new;
font-weight: bold;
text-decoration: none;
color: #ff9f2c;
}

a:hover, a:active {
font: 12pt/12pt courier new;
font-weight: bold;
text-decoration: underline;
color: #725712;
border: none;
}

div#valikko a span {
display: none;
}

div#valikko a:hover span {
display: block;
position: absolute;
width: 215px;
top: 185px;
left: 0px;
margin-left: 15px;
z-index: 100;
font: italic 10pt/10pt courier new;
text-decoration: none;
color: #725712;
background: transparent;
}

div#kielet a span {
display: none;
}

div#kielet a:hover span {
display: block;
position: absolute;
width: 215px;
top: 205px;
left: 0px;
margin-left: 15px;
z-index: 100;
font: italic 10pt/10pt courier new;
text-decoration: none;
color: #725712;
background: transparent;
}

div#paapalsta a:link {
font: 10pt/10pt courier new;
font-weight: bold;
text-decoration: none;
color: #725712;
}

div#paapalsta a:visited {
font: 10pt/10pt courier new;
font-weight: bold;
text-decoration: none;
color: #ff9f2c;
}

div#paapalsta a:hover, a:active {
font: 10pt/10pt courier new;
font-weight: bold;
text-decoration: underline;
color: #725712;
border: none;
}

div#alareuna p {
text-align: center;
}

/* specific divs */

#top {
background: url(puunrungot.jpg) no-repeat top center;
position: absolute;
top: 0px;
left: 136px;
width: 700px;
height: 255px;
margin-top: 0px;
margin-bottom: 0px;
}

#kielet {
background: #ff9f2c;
position: absolute;
top: 255px;
left: 136px;
width: 700px;
}

#valikko {
width: 230px;
position: absolute;
top: 270px;
left: 136px;
margin-top: 8px;
background: #CDCDCD;
}

#paapalsta {
width: 455px;
position: absolute;
top: 270px;
left: 366px;
margin-top: 10px;
}

#bottom {
background: url(puunrungot2.jpg) no-repeat bottom center;
position: absolute;
left: 136px;
top: 440px;
width: 700px;
height: 900px;
}

#alareuna {
background: #ff9f2c;
position: absolute;
top: 1340px;
left: 136px;
width: 700px;
}

[Jukka K. Korpela]

"Pastis" <fe*********@yahoo.com> wrote:

I also have a problem with links.

Please check the answer I gave in the Finnish group sfnet.viestinta.www.
It is far too early to consider styling details, before the basic
structure is right. Besides, the problem you mention seems to result from
an attempt to create a CSS imitation of the title="..." attribute, quite
unnecessarily.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Pastis]

> structure is right. Besides, the problem you mention seems to result from

an attempt to create a CSS imitation of the title="..." attribute, quite
unnecessarily.

Aha, that's a piece I've copied from somewhere. Thanks.

[Pastis]

Is there a way to position the bottom picture and colored strip not
absolutely but automatically just below the previous div, however long the
text is?

Pastis

[Jim Dabell]

Pastis wrote:

Is there a way to position the bottom picture and colored strip not
absolutely but automatically just below the previous div, however long the
text is?

img {
display: block;
clear: both;
}

It will appear below previous page contents that aren't absolutely
positioned.

--
Jim Dabell

[Pastis]

> img {

display: block;
clear: both;
}

Thanks. I will try that. It would be the ideal solution as the text may be
longer on some other pages using the same style sheet.

In the meanwhile, I found a solution to the link that didn't work when the
following div was too close. I still don't understand why it didn't work. It
DOES, however, work now that I put the div with the link inside the div with
the background picture.

Curiously, the link referred to the same page became clickable but lead to
an error message when I wrote <a href="blabla"> but works fine when I write
<a href="index.html#blabla> even though both the link and the target are on
the same page.