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

Strange IE problem - unclickable links

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a

"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
Jul 20 '05 #2

P: n/a
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/
Jul 20 '05 #3

P: n/a
> 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!
Jul 20 '05 #4

P: n/a
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;
}
Jul 20 '05 #5

P: n/a
"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/
Jul 20 '05 #6

P: n/a
> 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.
Jul 20 '05 #7

P: n/a
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
Jul 20 '05 #8

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

Jul 20 '05 #9

P: n/a
> 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.
Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.