...

View Full Version : Masthead Repeating In Internet Explorer For No Reason I Can Ascertain



Doctor_Varney
04-12-2009, 03:43 PM
Please can you look at the following link in firefox...

http://www.joolzfx.com/test_area/rollovertrick/rollovertrick.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?

Apostropartheid
04-12-2009, 03:49 PM
Forcing standards mode makes it work.

Doctor_Varney
04-12-2009, 03:50 PM
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?

Apostropartheid
04-12-2009, 03:56 PM
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.

Doctor_Varney
04-12-2009, 04:18 PM
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.

Apostropartheid
04-12-2009, 04:39 PM
You didn't remove the comment.
Your file starts:


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


<!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 (http://www.quirksmode.org/css/quirksmode.html)

Doctor_Varney
04-12-2009, 04:48 PM
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.

Apostropartheid
04-12-2009, 04:53 PM
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.

Doctor_Varney
04-12-2009, 05:06 PM
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

Excavator
04-12-2009, 05:27 PM
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-with_images/index.html

Anyway, this is your code the way IE7 sees it -

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


...

Doctor_Varney
04-12-2009, 05:50 PM
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.

Doctor_Varney
04-13-2009, 08:07 AM
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.

Doctor_Varney
04-13-2009, 08:24 AM
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?

abduraooft
04-13-2009, 11:30 AM
You could use
<!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.

Doctor_Varney
04-13-2009, 11:38 AM
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.

coothead
04-13-2009, 02:39 PM
Hi there Doctor_Varney,

your project can be done without iframes. ;)

check out this reworking of your pages...
http://www.coothead.co.uk/Doctor_Varney.zip
coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum