IE - The problem child strikes again!

[BGamlin]

I have been designing a website for a family member. The site itself seems to work fine in Chrome, Safari, Firefox and Opera and some mobile browsers.

It relies heavily on Javascript and runs off the Concrete5 CMS.

The problem is that when I go to the site in IE my single div class boxes duplicate one on-top of another. I have been through the source code of the live site and the browser doesn't seem to be making an actual duplicate copy of the div and I cannot see any problem in my coding. Ironically Compatibility Mode breaks the site even more.... so I've been left completely stumped at this problem. Any help would be greatly appreciated.

I have pasted an extract of code below that displays each of the individual divs you would see when accessing the site.

<div class="content">
    	<a style="border:none;" name="page2">
        <div class="contentZone">
        <div class="navBar">
            	<div class="prevPageBlank"></div>
                <div class="title"><?php $a = new Area('page2'); $a->display($c); ?></div>
            	<a style="border:none;" href="#page3"><div class="nextPage"></div></a>
            </div>
            <div class="bodyText"><?php $a = new Area('page2Body'); $a->display($c); ?></div>
            <div class="adHolder"><div class='adText'><?php $a = new Area('advert'); $a->display($c); ?></div></div>
        </div>
        </a>
    </div>

I'm not sure whether you're aloud to post links to the site or not on this forum but here it goes... You can take a look at the problem at www.joegamlin.co.cc

The site isn't quite finished yet and I'm aware of a few tweaky bits that are on my 'to-do list' so please don't be too judgmental of it!

Thanks in advance for any help you can offer.

[SB65]

I think you're missing a closing tag here:

	<div class="content">
    	<a style="border:none;" name="page2">--No closing tag--
        <div class="contentZone">
        	<div class="navBar">

While FF is adding one for you, IE is not and is parsing the subsequent code as being within the anchor element - giving unexpected results.

The w3c validator will help you find things like this.

[BGamlin]

Originally Posted by SB65

I think you're missing a closing tag here:

	<div class="content">
    	<a style="border:none;" name="page2">--No closing tag--
        <div class="contentZone">
        	<div class="navBar">

While FF is adding one for you, IE is not and is parsing the subsequent code as being within the anchor element - giving unexpected results.

The w3c validator will help you find things like this.

Hi,

Thanks for the reply. Which closing tag do you mean? the href tag and the content tag both close in the bottom 3 - 4 lines of code I originally posted

I did try the W3 Validator but everything it suggested didn't seem to fix the issue.

Many Thanks,
Ben

[SB65]

I think that is the problem - a div (block element) cannot sit within an anchor tag (inline element). Firefox is immediately ending the <a> tag I highlighted in my previous post for you, but IE is not.

If I view in Firebug the parsed html is:

   	<a name="page2" style="border:none;">
        </a><div class="contentZone"><a name="page2" style="border:none;">
        	</a><div class="navBar"><a name="page2" style="border:none;">
            	<div class="prevPageBlank"></div>
                <div class="title"><p>Blog</p></div>
            	</a><a href="#page3" style="border:none;"><div class="nextPage"></div></a>
            </div>

Since FF is displaying what you want it might be worth trying closing the tag and checking the result in IE.

[BGamlin]

Originally Posted by SB65

I think that is the problem - a div (block element) cannot sit within an anchor tag (inline element). Firefox is immediately ending the <a> tag I highlighted in my previous post for you, but IE is not.

If I view in Firebug the parsed html is:

   	<a name="page2" style="border:none;">
        </a><div class="contentZone"><a name="page2" style="border:none;">
        	</a><div class="navBar"><a name="page2" style="border:none;">
            	<div class="prevPageBlank"></div>
                <div class="title"><p>Blog</p></div>
            	</a><a href="#page3" style="border:none;"><div class="nextPage"></div></a>
            </div>

Since FF is displaying what you want it might be worth trying closing the tag and checking the result in IE.

Well, what do you know. That did the trick!

I never knew that that would cause a problem like that... Never encountered it before

Many Thanks for all your help it's really appreciated