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 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Inconsistent Behavior in IE

    I am using a combination of HTML and CSS for the rendering of my web site. Although the website displays properly in Firefox, it is not displaying properly in Internet Explorer.

    The following URL is one that is not cooperating. I have an h2 block that is labeling the page in the upper left section. In Firefox, this shows up properly. In IE, it doesn't display at all until I highlight it. It seems to be related to the right aligned spacer gifs borders somehow. When I enable the border on them by taking out the style="border:none" line, the text becomes visible in IE but then sticks me with a border. I tried putting the border:none line in the internalSpacerRight section of my CSS file but it doesn't seem to affect the border when placed there.

    http://author.www.purdue.edu/bands/ensembles/

    Even more strangeness can be viewed on the homepage at the following URL. There is a block of text in the bottom left that is highlighting "fun facts" about the group. In Firefox, this stays put as designed. In IE, the text will move down if I click on it...

    http://author.www.purdue.edu/bands/

    I can find no reason for this behavior. I have run HTML validator checks against my pages and they come back clean with the exception of a few alt="" complaints. What's going on? Why is IE butchering my web site?

    I've included a few lines of pertinent code below.

    Ensembles Page Code
    Code:
    <div id="internalBackground">
            <div id="internal"><img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="340px" alt="spacer" style="border:none">
          <img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="560px" alt="spacer" style="border:none">
          <img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="710px" alt="spacer" style="border:none">
          <img src="/bands/2010/images/spacer.gif" class="internalSpacerRight" width="800px" alt="spacer" style="border:none"><!-- InstanceBeginEditable name="Text" --><br>
    <h2 id="internalPageHeader">Ensembles</h2>
    Fun Facts on Home Page
    Code:
    <p><strong>Fun Facts About Us</strong></p>
          <ul>
            <li>70 percent of the student musicians performing in Purdue Bands &amp; Orchestras ensembles major in science, engineering and technology.</li>
            <li>The Purdue Jazz Band has performed at the Montreaux Jazz Festival in Switzerland three times.</li>
            <li>In 2008, the Purdue &ldquo;All-American&rdquo; Marching Band became the first American marching band invited to perform in China by its Ministry of Culture.</li>
          </ul>
    CSS
    Code:
    body {
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12pt;
    	background-color:#000;
    	margin:0px;
    }
    h2 {
    	font-family: "Trajan Pro", "Times New Roman", serif;
    	font-weight:bold;
    	margin:0 0 10 0px;
    }
    img {
    	border:none;
    }
    .internalSpacerRight {
    	display:block; 
    	clear:both;
    	float:right;
    	height:20px;
    	border:none;
    }
    #internalBackground {
    	background-image:url(/bands/2010/images/internalBottom.png);
    	padding:0px;
    }
    #internal {
    	padding:0px 65px 20px 65px;
    	margin:0px auto 20px;
    	color:#000;
    	background-image:url(/bands/2010/images/internalTop.png);
    	background-repeat:no-repeat;
    }
    
    #internal img {
    	border:thin solid #000;
    	padding:4px;
    	margin:7px;
    }
    
    #internalPageHeader {
    	font-family: "Trajan Pro", "Times New Roman", serif;
    	font-weight:bold;
    	font-size:30px;
    	padding:0 0 10 0px;
    }
    Last edited by trs4ece; 09-06-2010 at 06:13 PM. Reason: Not entirely resolved but adapted code to deal with quirks

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    As you're just beginning to discover, Internet Explorer is a black hole of wrongness.

    Standard practice is to place the global rule: * {margin:0; padding:0} at the top of your stylesheet.

    There may be other errors which need fixing but this is the starting point, so get into the habit of doing that. It fixes several of the main issues that IE can otherwise induce.

    Next - Run your page through the W3C validating engine. Do this often, especially after making significant changes to your code. It fixes most errors... not always but ironing out any syntax errors first, does at least clean the area, ready for troubleshooting.

    Hope this helps

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your invisible h2 problem looks like a hasLayout issue. Try adding height:1% to your css for #internalPageHeader. This will give the element the hasLayout property, in IE7 or less.

    I don't see your moving element problem in IE7 or IE8.

    EDIT: I see the h2 is a problem in IE8 as well - and that isn't a hasLayout issue.

    EDIT AGAIN: Although the validator isn't picking it up, your code starts with:

    Code:
    <!-- InstanceBegin template="/Templates/internal.dwt" codeOutsideHTMLIsLocked="false" --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    IE is notorious for behaving badly if the doctype isn't the very first item in your code - you need to get rid of that comment (looks like a DW template tag) so the doctype starts the code.
    Last edited by SB65; 09-05-2010 at 06:49 PM.

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Haslayout? Huh?! I've just tried reading that article... What on earth is all that about???

    Shouldn't this be described on the very first page of the W3C site? I tried searching for it and nothing came up!

    Dr. V
    Last edited by Doctor_Varney; 09-05-2010 at 07:53 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I added * {margin:0; padding:0} to the top of my CSS file and although it killed my layout compressing everything together, it did fix the weird moving text issue on the home page. I'll just need to go through and manually stick in margins and padding for the elements that need it now.

    I'm unable to get rid of that DW markup. Even if I stick the DOCTYPE at the top of the template, it still inserts the DW tag at the top and then the DOCTYPE below. I realize that's a DW problem so I won't press that issue here.

    I'd also never heard of hasLayout. I thought you must have been making it up but that height: 1% fixed the invisible text problem right up. Thanks for that.

    So the website has a whole batch of new layout problems now but at least I've been able to resolve the ones that had me stumped prompting the creation of this thread. Many thanks for the quick responses.

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I just wanted to note that I solved the DOCTYPE DW issue as well. I'm using a hybrid between PHP includes and DW Templates. Apparently the DW template needs to have both the DOCTYPE and <html> </html> lines in it. Leaving them to PHP includes doesn't get them flagged correctly and so DW just sticks their own tag at the top of each file instead hopelessly confusing IE.

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Alas, the moving text problem has returned. It's a problem such that unless I am explicitly checking for it after every update (clicking the text) it's impossible to catch. Consequently, I'm not sure of which of a series of updates that I've done may have triggered it again.

    The code has all the changes recommended above in place and yet the text is bouncing around. I have noticed that it does not appear if I place IE in Compatibility Mode.

    EDIT: After disabling my CSS file and tracing the table cells to make sure they lined up, I discovered that there was some fighting going on with the valign property. If I set the left cell, which had my moving text, to anything other than valign="top" then the text would hop all over the place. I still don't know why it would have such an effect since I have used valign with much success on photo albums but I've gotta get this done so I'm just moving on with it stuck at valign="top". If anyone has some insight as to how I might reconcile this problem, I'd still love to hear it, but you should not be able to replicate the issue since it shouldn't be moving around anymore.
    Last edited by trs4ece; 09-06-2010 at 12:54 AM. Reason: Additional information

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Haslayout? Huh?! I've just tried reading that article... What on earth is all that about???

    Shouldn't this be described on the very first page of the W3C site? I tried searching for it and nothing came up!
    It isn't mentioned on W3C because it is not part of the standards at all. hasLayout is a Microsoft proprietary property which is utilised in the rendering engines of IE7 and under. It is not used in IE8. The absence of hasLayout can cause very odd behaviour in IE7 and under.

  • #9
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by SB65 View Post
    It isn't mentioned on W3C because it is not part of the standards at all. hasLayout is a Microsoft proprietary property which is utilised in the rendering engines of IE7 and under. It is not used in IE8. The absence of hasLayout can cause very odd behaviour in IE7 and under.
    Thank you!

    Does Bill Gates hate us that much?! What did we ever do to him (apart from make him very, very rich)....?

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Tags for this Thread

    Posting Permissions

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