HTMLHelp Forums > Links not working in IE

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

Pieman

Feb 10 2008, 02:00 PM

Well, my blog layout works perfectly in firefox, but when you open it with IE the images show up, but they aren't click able.
My site: http://pie-designs.net/blog/

index.html:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css.css" rel="stylesheet" type="text/css" />

<title></title>

</head>

<body>
<div align="center">
<div class="sitemap">
<a href="index.html" target="_self"><img src="images/home.png" width="50" height="20" style="margin-right:42px;" border="0" /></a>
<br/>
<a href="http://cuteness.pie-designs.net" target="_self"><img src="images/cuteness.png" width="92" height="20" border="0"/></a>
<br/>
<a href="http://blog.pie-designs.net" target="_self"><img src="images/blog.png" width="43" height="20" border="0" style="margin-right:49px;" /></a>
<br/>
<a href="http://pie-designs.net/pieweb" target="_self"><img src="images/pieweb.png" width="66" height="20" border="0" style="margin-right:26px;" /></a>
<br/>
<a href="http://forum.pie-designs.net" target="_self"><img src="images/forum.png" width="58" height="20" border="0" style="margin-right:34px;" /></a>
</div>
<div class="banner"></div>
<div class="maininfo" align="left">
<table class="headertext" cellpadding="0" cellspacing="0" border="0" align="center">
<td>
<div style="float:right; margin-right:34px">
Sun 09/02/08
</div>
<div style="margin-left:34px;">
Author: <b><font color="red">Pieman</font></b>
<br/>
Subject: Lorem ipsum dolor
<br/>
<tr><td align="center">
<div class="textend"></div>
</td></tr>
</div>
</td></tr>
</table>
</div>
<div class="mainbody">
<div class="maintext" align="left">
----
<div class="textend"></div>
</div>
</div>
<div class="bottom"></div>
<div class="top"></div>
<div class="maininfo" align="left">
<table class="headertext" cellpadding="0" cellspacing="0" border="0" align="center">
<td>
<div style="float:right; margin-right:34px">
Sun 09/02/08
</div>
<div style="margin-left:34px;">
Author: <b><font color="#a5bfc5">Regular guy</font></b>
<br/>
Subject: Lorem ipsum dolor
<br/>
<tr><td align="center">
<div class="textend"></div>
</td></tr>
</div>
</td></tr>
</table>
</div>
<div class="mainbody">
<div class="maintext" align="left">
----
</div>
<div class="textend"></div>
</div>
<div class="bottom"></div>
<br/>
</div>
</body>
</html>

css.css:

CODE

body {
background-color:#dfdfdf;
margin: 0;
padding: 0;
background-image:url(images/back.gif);
background-repeat:repeat-x
}
.main {
background-image:url(images/back2.gif);
background-repeat:repeat-y;
width:465px;
height:auto;
}
.headertext {
width: 465px;
margin-bottom: 5px;
color: #a0a0a0;
font-family:Arial, Helvetica, sans-serif;
font-size: 11pt;
}
.sitemap {
margin-top: 50px;
margin-right: 600px;
color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size: 15pt;
}
.banner {
width:465px;
height:227px;
margin-top: -168px;
background-image:url(images/banner.jpg);
background-position: center;
}
.maininfo {
width:465px;
height: auto;
background-image:url(images/back2.gif);
background-repeat:repeat-y;
}
.mainbody {
width:465px;
height: auto;
background-image:url(images/back2.gif);
background-repeat:repeat-y;
}
.maintext {
width: 397px;
height: auto;
margin-left: 34px;
margin-right: 34px;
color: #a0a0a0;
font-family:Arial, Helvetica, sans-serif;
font-size: 11pt;
}
.bottom {
width: 465px;
height: 30px;
background-image:url(images/bottom.gif);
background-repeat:no-repeat;
}
.top {
width: 465px;
height: 18px;
background-image:url(images/top.gif);
background-repeat:no-repeat;
}
.textend {
width:397px;
height:4px;
background-image:url(images/line.jpg);
background-repeat:no-repeat;

pandy

Feb 10 2008, 02:07 PM

This is probably not the reason, but you have serious structural errors (table related) that you should correct.
http://www.htmlhelp.com/cgi-bin/validate.c...p;input=yes#L62

CSS needs a little fixing too.
http://jigsaw.w3.org/css-validator/validat...;usermedium=all

pandy

Feb 10 2008, 02:15 PM

It's the negative margin for .banner. This fixes it in IE6. Don't know about 7.

CODE

.sitemap { position: relative }

Pieman

Feb 10 2008, 02:37 PM

QUOTE(pandy @ Feb 10 2008, 02:15 PM)

It's the negative margin for .banner. This fixes it in IE6. Don't know about 7.

CODE

.sitemap { position: relative }

Ah thanks a lot! That fixed it. Also thanks for pointing out the errors, I'm fixing them now.

pandy

Feb 10 2008, 02:54 PM

Don't ask me WHY it works. It's just one of those things that often makes IE behave.

QUOTE

I'm fixing them now

You'd better!

Pieman

Feb 10 2008, 04:26 PM

QUOTE(pandy @ Feb 10 2008, 02:54 PM)

Don't ask me WHY it works. It's just one of those things that often makes IE behave.

Well, it still doesn't work on the computer I'm currently on. But I just checked on another pc, and there it does work.
So I'll just write this off as Microsoft's fault and not mine. Because my code is valid!

http://validator.w3.org/check?uri=http%3A%...ine&group=1
http://jigsaw.w3.org/css-validator/validat...;usermedium=all

pandy

Feb 10 2008, 04:41 PM

My work is done.

What's different on the machine where it doesn't work? Do you have IE7 on one machine and IE6 on another?

Pieman

Feb 10 2008, 04:44 PM

Nah, everything works now, I forgot to upload the files to the ftp.

pandy

Feb 11 2008, 03:27 AM

All is well then.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.