Helpful Information

Hi there
I've a question regarding the validation of my site in progress...

I've been working on adding an iframe for the LHN to which I'd like to thank John (jscheuer1 (http://www.dynamicdrive.com/forums/member.php?u=2033)) for all the help he gave me in getting this sorted.

I've put the page through the w3c validator and wanted some advice if poss on the (allowtransparency attribute) which is doesn't like...?

I seem to need this for IE, though FF can do without it

Is there a way around this attribute to make my page valid XHTML?

I'd really appreciate it if you'd be able to give a little advice or point me in the right direction.

Here's the link to the page as it stands now:

http://www.clippergems.com/range.html

thanks :)

<style type="text/css">
span.nonie {
visibility: visible !important;
visibility: hidden;
}
</style>

<span class="nonie">
<iframe id="iframe2" src="frame.htm"/>
</span>

If this sort of scheme will satisfy the validator, it may need a little tweaking to get the correct result in IE, as far as layout goes. Instead of setting the visibility in the style for the nonie iframe's containing span, I would think the display property would be more appropriate:

<style type="text/css">
span.nonie {
display: inline !important;
display: none;
}
</style>As I say, if the rest of the idea works vis a vis the validator, this may be required, strictly to achieve the desired layout result for IE. However, I suspect that having two iframes with the same id or (as would be the case with elliot's setup, the same name) may throw things off in IE anyway, preventing the targeting and/or onclick events from working properly.

It does work in the validator, and it darned well ought to work in IE. Good point about the ID, though: I cut and paste and forgot about that. :-\

Well, it is definately worth a shot, we will just have to see how IE takes the duplicate iframes.

I don't see why IE would have a problem with visibility:. Using display:none; is a bit of a hack, I've always thought; hiding isn't really what display: is for.

Well, it seems to work, I used the display property. The problem I would anticipate using the visibility property is that although the element is not visible, it is still allotted space on the page. With such a large element as:

<span class="nonie">
<iframe name="contents" src="pr_lively.html" width="665" height="550" frameborder="0" marginheight="0" scrolling="no" />
</span>which is required here, that could really throw the layout off. You are correct in saying that using display simply to hide something is a poor practice but, since we are here not only wishing to hide it but also remove its rendering area from the layout, that is exactly what the display property is for. I just tried it using visibility and it does mess up the layout, just as I suspected. There still remains (and perhaps elliot already has a solution for this) the problem that when attempting to validate strict xhtml, the validator thinks an iframe requires a frameset DOCTYPE which, I am pretty sure would not work on his page. I will look into that though.

Added Later:

No, as I suspected, the validator doesn't like a frameset DOCTYPE for this page either, due to the presence of a body tag.

Ah, very well. iframes are valid in Transitional, by the way.

The validator loved this DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">and the page still renders well with it. This is with the added style section using display, inserted here:

<link href="styles/colours.css" rel="stylesheet" type="text/css" />
<style type="text/css">
span.nonie {
display: inline !important;
display: none;
}
</style>
</head>and the duplicate iframes:


<span class="nonie">
<iframe name="contents" src="pr_lively.html" width="665" height="550" frameborder="0" marginheight="0" scrolling="no" />
</span>replacing the original iframe:

<iframe name="contents" src="pr_lively.html" width="665" height="550" frameborder="0" marginheight="0" scrolling="no" allowtransparency="true" >
</iframe>

Wow guys, been off for the day to come back to a nice long post :)

Thanks for all your support!. I'm going to read through this and get to work. Be back with the results

all the best,
Elliot

Hi John, using the code from your last post, It Validate, which is fantastic, keeping the layout exact

Only problem is because you can't have a closing tag for the iframe the bottom part of the site doesn't show. If i put in the closing tag it does show, though doesn't validate...

The area that's missing is the footer (background image)
Should I put this in a, z-index layer? to bring it above?

http://www.clippergems.com/range.html

Also, just out of interest, the code i've added has the (if IE) part comented out? doe's it get read anyway because its an if statement,

thanks very much,
Elliot

I've just tried positioning the footer absolute with a z-index layer
didn't help :confused:

Also, just out of interest, the code i've added has the (if IE) part comented out? doe's it get read anyway because its an if statement,
Yes, it's technically a comment, so other browsers ignore it, but IE reads it anyway.

Only problem is because you can't have a closing tag for the iframe the bottom part of the site doesn't show. If i put in the closing tag it does show, though doesn't validate...
Tags without closing tags should be self-closing in XHTML:

<iframe name="contents" src="pr_lively.html" width="665" height="550" frameborder="0" marginheight="0" scrolling="no" />
John did put this in his post; perhaps you missed it.

Hi Twey,
Thanks very much for your help. Your explanation on the commented area was good to know for future reference.
I did miss the fact iframes are self-closing in XHTML :o

I'm very pleased to be able to get this page to validate, though if there's not a way of getting the footer to show, i'll have to revert back to way the original iframe was set :(

Would yourself or John have a solution for retreiving the missing footer, keeping the iframe as it is..?

many thanks,
Elliot

Eh? I would have thought that that would be fixed by closing the iframe.
You say this doesn't happen when you use an </iframe> tag?

P.S. you should style the body with a white background. There's a big chunk at the top you haven't styled, and it clashes for those of us who don't have white default backgrounds.

Hi Twey,

I'm getting a little confused :confused:

I've gone and included </iframe> at the end of the iframe. This is live to have a look at and is now looking perfect, though doesn't work with the w3c Markup Validation Service.

http://www.clippergems.com/range.html

It comes up with the following error only...

error Line 256 column 129: end tag for element "iframe" which is not open

I've gone and adjusted the background to the body which was transparent, now white.

all the best,
Elliot

When you use:

<tagName attributes />you don't need:

</tagName>
But, as you say, it messes up the rest of the page. I just tried it using the more conventional or old fashioned:


<span class="nonie">
<iframe name="contents" src="pr_lively.html" width="665" height="550" frameborder="0" marginheight="0" scrolling="no"></iframe>
</span>That took care of the problem and it still validated.

Genius!
I've got a great big smile on my face as I type :D

Thanks ever so much for all the help you and Twey have given me.

?? Just out of interest how long have you been doing this, as you know sooooo much :) ??

I look forward to being able to give back what i've received Already from this forum.

I can confidently say this post is done and dusted.,

all the best,
Elliot

Well, this is actually the first page I ever validated or helped validate. I am a quick study though. I did notice that your css (as w3 recommended a check of that as well) does not validate but, it didn't look too far off. On another related note, I noticed that when scrolling the Nav contents in FF, they sort of overlap the header of the Nav area a little bit. This can also probably be fixed with little effort and is not so bad as to warrant any change really. Just be certain to backup your work before you change anything!

First page you've ever validated? Really? You're missing out on all the fun of web design ;)
It's easy to write a valid page from scratch, but it can be a nightmare to validate an existing page. Some of the validator messages are fairly cryptic too.

I did notice that your css (as w3 recommended a check of that as well) does not validate

Hi John, I've just gone and had a look, yeah, it seems to not like any of my IE hacks. I've been using the underscore hack that IE only recognises.

Would you know of an valid alternative?
I do know one other where you put a * infront of the line for IE, i'll give that a quick try.

Thanks for pointing out the LHN in FF, I completely mised that :)

Try using child selectors.
div>p {
will select a paragraph directly inside a div, but IE doesn't recognise child selectors. They're valid CSS, though.
Another is the !important rule. This is also part of the standard, but IE just ignores it. So, you can do:

element {
property-one: value-one !important
property-one: value-two
}
Other browsers recognise the !important rule, so property-one isn't overwritten and remains as value-one; IE, however, doesn't, so property-one ends up as value-two. This is what I did in the "nonie" class.