View Full Version : "CSS Buttons" with "iFrames" quirk
Greetings to all the impressive designers, and smart programmers on this forum!
I hope someone can help me, or explain what is happening to my personal family web page. I am trying to wean myself off MS FrontPage, and I am trying to learn more about CSS (that is so often discussed here). In particular, I am impressed with Zero Angel's prior post (http://developers.evrsoft.com/forum/showthread.php?threadid=1023) regarding some nice looking CSS buttons. In my effort to learn more about this technique, I tried to integrate a copy into my web pages.
My problem is that the CSS buttons seem to clash or interfere with my "iFrames". My site makes use of 2 cgi Perl scripts: one for a "Calendar", and one for a "Guess Book". Since I am not a programmer, I have found the best way for me to blend these two programs into my site was to use "iFrames" (to match color, fonts, maintain menu navigation, etc.) Both cgi programs exhibit the same behavior with the CSS buttons ... on my system (IE 5.5), as soon as I "hover over" one of the CSS buttons, the "Calendar" shrinks vertically to about 1", leaving a horrible looking vertical scroll bar. Can anybody help explain this, and hopefully have a solution to correct this?
Here are two contrasting examples to show this behavior in action (click on the "Calendar" menu item):
This is the prior "FrontPage" way (worked OK):
http://wongbrian.marketsmash.com/Album_Projects/calendarHTM.htm
This is with the new "CSS Button Menu" (wait for the "Calendar" to appear, and then try hovering over the CSS Menu Buttons):
http://wongbrian.marketsmash.com/Album_Projects/calendarCSS.htm
I appreciate all the help and comments on this forum!
Bri
DCElliott
01-19-2003, 02:23 PM
Brian - you should be using a doctype - I'd suggest 4.01 strict. It determines how boxes are rendered. You also need to give a body style in your css with a height of 100% since other elements may be calculated relative to that height. I don't know if that will take care of your problem or not. I'll take a better look later.
Welcome to the forums.
Thank you for taking a look DC!
As per your suggestion, I have changed and added to the examples as follows:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
and added to the CSS:
~~~~~~~~~~~~~~~~
body {
height : 100%;
}
~~~~~~~~~~~~~~~~
I hope the above is close to what you wanted to see.
Please add any other ideas, or suggestions that I can try. I really appreciate the efforts!
Bri
DCElliott
01-20-2003, 03:01 AM
Hmmmm . . .
Back to the drawing board. :mad:
Hi guys!
My host may have been "down" for awhile ... but my site seems to be "up" again right now.
Please give it another shot. The only changes I've made since the original post, so far, was to add the two items DC suggested.
Thanks!
Bri
Hi David!
Interesting findings... Is the Calendar not showing up inside the iFrame in both examples (the CSS version and the HTML version)?
I am using IE 5.5 here, and it is still doing the strange CSS "mouse-hover effect" on my Calendar inside the iFrame. I wonder if the problem is related, and maybe the solution is close at hand?
Do you have any suggestions you would like me to try in implementing an iFrame (or Frame)?
Thanks!
Bri
Hi again!
I just thought of an idea ... I made up another page with the CSS button menu, but with the iFrame calling up just a plain HTML page (trying to rule out the Calendar script as the possible problem).
I will not be able to upload the page until tonight ... but with the iFrame just pulling up a plain HTML page, it continues to display the strange mouse-hover quirk.
Hope this information helps, and I will let you know when the new sample page is up.
Thank you!
Bri
Hi again!
I just uploaded the new (non-cgi "Calendar" script) sample page:
http://wongbrian.marketsmash.com/Album_Projects/no_cgiCSS.htm
This latest sample has the iFrame loading a plain HTM page (font color is green to distinguish that page). Since it still displays the "hover" quirk, I believe the problem is not due to the Perl-CGI-Calendar scripts.
However, David, please also tell me if you still cannot see it. Depending on your answer, it may mean the problems might still be related(?), or it may mean that I have 2 separate problems(?), or a common problem in properly displaying the iFrame(?).
Thanks again!
Bri
Hi David!
Sorry, but I really do not have enough knowledge to help the situation. As I do value your opinion, I hope I can offer something to help you figure out why the page are not displaying properly. For starters, maybe you can easily spot if I have any major errors in the iframe (copied directly from the pages):
<IFRAME SRC="http://www.wongbrian.marketsmash.com/cgi-bin/calendar.pl" height="83%" width="100%" frameborder="0">
Did you actually see the "hover" quirk at one time (and then "something seemed to change")? Do you think trying a "refresh" might help?
Could it be possible that maybe one of the changes I had done above is responsible? Would you like me to make any changes or modifications to them? (on my system, the 2 changes as suggested by DC, did not seem to affect the pages).
Thanks again!
Bri
DCElliott
01-21-2003, 04:08 AM
Try changing the relative height=83% to a static height=400px for debugging purposes.
Hi DC!
I made the suggested changes on the pages:
height="400px"
You are the best! I think you are on to something as it seems to behave much better on my browser. Does it work better on your system also? How about you, David?
I really like the "CSS color effects" of the menu, and am really excited that I can now start trying to incorporate more of it to my family site.
Thanks so much, but please continue to offer any more advice!
Bri
DCElliott
01-21-2003, 06:35 AM
OK, here is my thought on this. CSS % heights are a % of the parent container.* Somehow the calendar isn't getting the proper window height. Look at my CSS template examples or at ByteWizard's tools page for examples of CSS pages with scrolling divs as a % of page height.
That may help you find what's wong . . . er . . . I mean wrong. (couldn't resist - no offense, I hope ;))
*Come to think of it, I remember trying iframes at one time and I don't think I could make them work with %age heights - had to be static height. I hope I'm wrong but I hope not. You can still get the scrolling effect by specifying a container div that is guaranteed large enough for the iframe and then use it to control the scrolling behaviour I expect you want. The container div CAN be a % of window height with {scroll:auto;} property.
Hi DC!
No offense taken ... I really appreciate your help! After further research from your findings, most instructional sites seem to agree and show iframes with only static height and width. However I did find one site that seems to suggest that height=% and width=% is proper form:
http://www.htmlhelp.com/reference/html40/special/iframe.html
In any event, it is time for me to start learning (ie I am completely lost at what you said in your last paragraph!) and slowly converting more over to CSS.
This is a very professional, friendly and helpful forum. Thanks so much!
Bri
Zero Angel
01-22-2003, 11:28 AM
You could also try changing the width: auto; in the .button style to width: 140px;. This should also prevent the vertical rule from jumping (very much) when you click on a link (or when the page loads).
Hope that helps.
Zero Angel
vBulletin® v3.8.6, Copyright ©2000-2012, Jelsoft Enterprises Ltd.