Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy IE - The problem child strikes again!

    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.

    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think you're missing a closing tag here:

    Code:
    	<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.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    I think you're missing a closing tag here:

    Code:
    	<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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
       	<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.

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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:

    Code:
       	<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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •