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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Masthead Repeating In Internet Explorer For No Reason I Can Ascertain

    Please can you look at the following link in firefox...

    http://www.joolzfx.com/test_area/rol...overtrick.html

    This is how it is intended to be.

    Now open in IE. Notice it has gone completely insane. Can anyone offer any advice, please?
    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.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Forcing standards mode makes it work.

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    What does "forcing standards mode makes it work" mean?

    I've maybe found a slight clue. By adding no-repeat to the background classes of the list items, I have effectively got rid of the repeating masthead background but the button-images remain.... In a stacked appearance and off base, from where they should be located... Which makes me think there is something wrong with the float. D'you have any ideas what I have done wrong here?
    Last edited by Doctor_Varney; 04-12-2009 at 03:57 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.

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I made IE render in standards mode in web developer tools or whatever you call it and it looks fine. You have a comment at the start of your file which is triggering quirks mode. Remove it and IE--indeed all browsers--will tend to play nicer.

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I'm sorry, I've never noticed anything like this happen before with comments. I thought the browser ignored them. I'm afraid, I'm not familiar with the term "quirks mode".

    Okay, so I've removed the comment at the start of the HTML (or did you mean the comments in the CSS?). It hasn't made any difference.

    What 'web-developer tools' are you talking about?

    It seems to me, maybe more like something I have done in the CSS that IE doesn't like but I'm lost for a solution right now. As you may or may not have noticed, I'm using an image replacement trick here, which takes advantage of the visibility attribute in the a:hover. I expected a few problems, which I've worked at to overcome but not anything quite as mad as this. I get a strong feeling this is to do with the floated list.
    Last edited by Doctor_Varney; 04-12-2009 at 04:32 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.

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You didn't remove the comment.
    Your file starts:
    Code:
    <!--Local Path: F:\Webfolders\Testing Area\rollovertrick.html-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    Remove the first line. Remember to save it to your webserver (I forget that all the time.)

    The reason for this is that a comment before the DTD triggers "quirks mode", a set of rendering rules used to decipher old documents which used an old, broken rendering engine, in IE.

    Then, add a complete DTD. A complete DTD has a System Identifier (a normal URI after the DTD's name.) I would recommend you use:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    Remember to upload this too.

    A complete DTD will make sure that all browsers render nearly the same. You can read more on Quirks mode at quirksmode.org
    Last edited by Apostropartheid; 04-12-2009 at 04:46 PM.

  • Users who have thanked Apostropartheid for this post:

    Doctor_Varney (04-12-2009)

  • #7
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I see. Well, I removed it locally and hoped that would tell me if the comment was the cause. I don't think it's anything to do with comments, Cyan. I've now removed it server-side (to be on the safe side) and also no change. I'll change the DTD and see that makes any improvements.

    Thanks for the link.
    Last edited by Doctor_Varney; 04-12-2009 at 04:52 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.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    If you haven't made the Doctype switch as well, nothing will happen--certain incomplete Doctypes (i.e., ths one) trigger it too. It's definitely Quirks mode--I can send you screenshots if you so wish to prove this case.

  • Users who have thanked Apostropartheid for this post:

    Doctor_Varney (04-12-2009)

  • #9
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Changed the Doctype locally, after removing the comment Cyan - and it works. Thanks! Now I've updated the server.

    Looks like you were absolutely right there, Cyan. Funny, I was sticking to a transitional, on the premise I was using a 'quirky', more experimental disappearing trick, for a psuedo rollover effect.

    Anyway - many thanks. I can go back to designing now. That's got me out of todays rut.

    I can see I'm gonna have to read up on this 'quirks mode'. A person could get stuck for hours, not knowing this was the cause.

    Best regards,

    Doctor V
    Last edited by Doctor_Varney; 04-12-2009 at 05:10 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.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Doctor_Varney,
    That is some very odd behaviour. I've never seen a rollover done like this, you have the image for the normal state in the markup with the link and the hover state image as a background on the li. I never would have thought to do it that way...
    Just as an alternative, have a look at a little demo of a CSS rollover menu at http://nopeople.com/CSS/h_ul_menu-wi...ges/index.html

    Anyway, this is your code the way IE7 sees it -
    Code:
    <div id="masthead">
    				<ul>
    					<li class="about">
    						<a href="#">
    							<img src="interface/out/aboutus.gif" 
    							width="111" height="45" alt="" />
    						</a>
    					</li>
    					<li class="news">
    						<a href="#">
    							<img src="interface/out/newsandevents.gif" 
    							width="162" height="45" alt="" />
    						</a>
    					</li>
    					<li class="labs">
    						<a href="#">
    							<img src="interface/out/monsterlabs.gif" 
    							width="152" height="45" alt="" />
    						</a>
    					</li>
    					<li class="thestaff">
    						<a href="#">
    							<img src="interface/out/meetthestaff.gif" 
    							width="176" height="45" alt="" />
    						</a>
    					</li>
    					<li class="behind">
    						<a href="#">
    							<img src="interface/out/behindthescenes.gif" 
    							width="195" height="45" alt="" />
    						</a>
    					</li>
    					<li class="contact">
    						<a href="#">
    							<img src="interface/out/contactus.gif" 
    							width="114" height="45" alt="" />
    						</a>
    					</li>
    					
    				</div>
    			<iframe name="iframe" id="bioframe" src="infoblank.html">

    And this is how FireFox is seeing it -
    Code:
    <div id="wrapper">
    			<div id="masthead">
    				<ul>
    					<li class="about">
    						<a href="#">
    							<img src="interface/out/aboutus.gif" alt="" height="45" width="111">
    						</a>
    					</li>
    					<li class="news">
    						<a href="#">
    							<img src="interface/out/newsandevents.gif" alt="" height="45" width="162">
    						</a>
    					</li>
    					<li class="labs">
    						<a href="#">
    							<img src="interface/out/monsterlabs.gif" alt="" height="45" width="152">
    						</a>
    					</li>
    					<li class="thestaff">
    						<a href="#">
    							<img src="interface/out/meetthestaff.gif" alt="" height="45" width="176">
    						</a>
    					</li>
    					<li class="behind">
    						<a href="#">
    							<img src="interface/out/behindthescenes.gif" alt="" height="45" width="195">
    						</a>
    					</li>
    					<li class="contact">
    						<a href="#">
    							<img src="interface/out/contactus.gif" alt="" height="45" width="114">
    						</a>
    					</li>
    					
    				</ul></div>
    			<iframe name="iframe" id="bioframe" src="infoblank.html">
    Notice how FireFox is adding the missing closing tag for your unordered list? I'm not sure that's the cause of your images repeating like that.

    The validator finds that error and more.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Ah, Excavator... I suspected there was something wrong in the code, somewhere. I probably should have validated first, but I don't normally produce invalid code, as the colouring system in Notepad++ usually highlights any syntax errors. Usually, I'll type up the opening and closing tags, then work in between them, so it's rare for me to leave out a closing tag.

    Anyway, it was definitely the doctype causing the display quirks. I ammended the code and tried the transitional again and the problem was repeated.

    Thanks for noticing my error, though.
    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.

  • #12
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Right... The problem comes back, under this same strict doctype - when I try to unfloat the list. So I've tried switching back to the transitional DTD and this isn't helping. So, according to CyanLight, apparently, I must be driving the thing back into quirks mode again, the minute I unfloat that list and place it elsewhere within my #wrapper. Only this time, the DTD isn't coming to my rescue.

    Got any ideas? I need to understand what's really happening here. Lists have never ever done this to me before; floated or not. It may be something to do with the background I set into the li style or the slightly unorthodox hover-behaviour, because it's as if the background and the front image are seperating away from each other.

    I'm going to try some code isolation tests in a new document. In the meantime, if anyone has any more advice, I'd be most grateful.
    Last edited by Doctor_Varney; 04-13-2009 at 08:13 AM.
    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.

  • #13
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Now I have another problem. Since changing the DTD to "strict", the mark-up won't validate. I'm getting the message that I should use a transitional type, in order to support i-frames. But I can't use that because it messes up my lists. So what on earth is the answer to all this?
    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.

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You could use
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    by making some changes in your markup, like
    1)Adding the xmlns attribute in your html tag
    2)Fixing some closing tags etc.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Thanks, Abdura. Though I've managed to fix the problem, by adding in width & height attributes to the list item classes. It's making me think this really had nothing to do with the doctype, after all. Well, actually, it did have an effect, as Cyan's advice proved - but it sent me down the wrong path, when in fact, the problem was right under my nose all the time. I've gone back to a transitional DTD, which supports the i-frame and the whole rig validates flawlessly.


    So, I think I'm out of that rut now... 'Till I try something else, I suppose.

    1) Done that. With a trans. doctype, the validator didn't like the way I'd closed my img tags.
    2) I'll have to look up xmlns. Have no idea what that means.
    Last edited by Doctor_Varney; 04-13-2009 at 11:58 AM.
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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