Help - Search - Members - Calendar
Full Version: Links not working in IE
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Pieman
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" />
<!--[if IE]>
<style type="text/css">
.banner {
width:465px;
height:227px;
margin-top: -170px;
background-image:url(images/banner.jpg);
background-position: center;
}
</style>
<![endif] -->
<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
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
It's the negative margin for .banner. This fixes it in IE6. Don't know about 7.

CODE
.sitemap    { position: relative }
Pieman
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
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! angry.gif happy.gif

Pieman
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! tongue.gif

http://validator.w3.org/check?uri=http%3A%...ine&group=1
http://jigsaw.w3.org/css-validator/validat...;usermedium=all
pandy
My work is done. cool.gif biggrin.gif

What's different on the machine where it doesn't work? Do you have IE7 on one machine and IE6 on another?
Pieman
Nah, everything works now, I forgot to upload the files to the ftp. tongue.gif
pandy
rolleyes.gif All is well then. tongue.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.