Why aren't these links functional in IE?

[seegoon]

Hi guys.

I'm completely new to web design and development, but have been tasked with creating a passable website for a new venture. I've done the whole thing by hand, which might have been a bit foolhardy. The result is a website that looks okay on the system I'm using, but is pretty temperamental with lower resolutions and the sinful IE.

There's a page - http://buddingpress.co.uk/publish - which has some coloured banners. I've coded up a little hack that highlights them on mouseover, and they each link out to another page. Issue is that they don't work at all on IE. I understand that it was probably my own fault to create some coding without thinking about standards. How should I repair this?

Here's the on-page HTML:

<a href="/publish/picture-book/options.html" class="highlightit" title="blah">
<div class="publish-box" id="publish-childrens">
<img src="/images/white.gif" height="100%" width="100%">
</div>
</a>

And here's the relevant CSS:

.highlightit img {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    opacity: 0.2;
}
 
.highlightit:hover img {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0;
}
 
.publish-box {
    border:2px solid gray;
    width:650px;
    margin:20px 0;
    border:1px solid #bcbcbc;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    height:168px;
    box-shadow: 0 5px 5px -3px #999999;
    -moz-box-shadow: 0 5px 5px -3px #999999;
    -webkit-box-shadow: 0px 3px 5px #999999;
    overflow:hidden
}
 
#publish-childrens { background-image:url('images/publish-childrens.jpg') }
 
 

As a PS, the textbox that pops up when you click the bottom link on that page is positioned really bizarrely. Do you know a fix for that, too?

Thank you muchly.

[zorgi]

@seegoon
IE and standards !? :)

Anyhow, I checked and it works in IE8 but not in IE6 and IE7. There is nice little tool for checking things like this. Its called IE tester.

As for your problem at them moment you have this structure:

 <a><div><img /></div></a>
 

I would try to remove DIV from between <a></a> and do all my styling on actual "a" tag to get this structure:

<a><img /></a> 
 

or if you prefer on divs:

 <div><a><img /></a></div>
 

[seegoon]

The final solution seems to have worked perfectly, thanks for that. It seems obvious now! Would I have been able to style the <a> tags? The <div>s use background-image to get the desired effect. No matter how you look at it, I completely bodged it together so it working at all is a miracle!

Any ideas about the positioning of the pop-up? Not that you haven't already saved my ass today.

Thanks.

[zorgi]

I went back to your site to check that popup issue again and it seems you sorted it out :)

[Dormilich]

PS. (for future works) block elements (like <div>) are not allowed inside inline elements (like <a>)

[drhowarddrfine]

I've done the whole thing by hand, which might have been a bit foolhardy

I have never coded a site any other way.

[seegoon]

PS. (for future works) block elements (like <div>) are not allowed inside inline elements (like <a>)

Thanks for this. I should really spend some time learning the basics before lunging headfirst into a project and learning as I go.

I have never coded a site any other way.

Everyone I've talked to about this has said to me "oh, what software are you using?", which surprises me. Learning from scratch, I've never seen any recommendations that I should go and buy any kind of web design program at all. In fact, it looks to be looked down upon.

And Zorgi - you da man.

[Dormilich]

@seegoon
there are more programmes than just the web design programmes. nearly every code editor has it’s own pros and cons (say, tag highlighting, syntax checking, project management, ftp, distributed development, auto-completion, etc.) which may be discussed. but I agree that hand-coding is the most efficient (in terms of code).

[zorgi]

@Dormilich
Curios. What editor/s are you using Dormilich?

[Dormilich]

SubEthaEdit (because I can edit files on my server on the fly and on the fly PHPing) and sometimes Geany.

[drhowarddrfine]

Everyone I've talked to about this has said to me "oh, what software are you using?", which surprises me. Learning from scratch, I've never seen any recommendations that I should go and buy any kind of web design program at all. In fact, it looks to be looked down upon.

The web is populated by everyday people who aren't programmers and need help creating web sites. Adobe marketing, along with others, make you believe you can't get anywhere without their software and that they'll make things easier for $600 or so. This is what makes Microsoft rich, too, but both ignore the fact that there are plenty of free tools that do the same job just as good, or better, and the human mind does a far better job than any automatic code generator that needs to guess your intentions.

Of course, you'll never learn from such things and you'll never learn how to debug problems either. It's like wanting to be a mathematician but letting a calculator do all the work. I was given a copy of Dreamweaver some years ago. I installed it to see what it was about but uninstalled it when I couldn't see the point.

[drhowarddrfine]

nearly every code editor has it’s own pros and cons (say, tag highlighting, syntax checking,

Bah. Editors for sissies.

[Dormilich]

@drhowarddrfine
I know, you use Notepad ;)