I have been messing with this problem for a couple days now, and it is really frustrating. The browser I'm using is firefox 3.0. I have a page with 2 iframes (needed because I need to refresh a section separately). The iframes are loaded with the page but hidden. Only when the user clicks one of 3 tabs does the one of the 2 iframes appear (div is made to appear by using javascript and css display property). When the tab is clicked and an iframe appears: everything on the parent page increases in size everything on the parent page shifts to the left (except for the text) all the underlines of blue links shift to the left words on input buttons disappear until you mouseover them, then they reappear (no javascript is linked to these buttons) I know the iframes are the cause of the problem because when i remove them and click the tab, the problem does not occur. Some other strange things associated with the iframe problem: After the problem occurs and my page's display is all messed up, if I click on another browser tab in firefox, and then click back on my page's browser tab, then the problem corrects itself. I also use an browser plugin called 'webdeveloper' that allows me to view the 'window size'. When the problem occurs the window size gets changed (although the firefox browser size doesn't change). I tried using a javascript code (written after the iframe loads) to just resize the window back to the original size it was before the iframe loaded, but this does not work. Please let me know if you have ever dealt with something like this, or have any clues to what the problem may be. It is a very strange problem to me and I have gotten nowhere trying to fix it over the past couple of days. There are a few less significant symptoms I have left out (due to length), I can add them if you think they'd help. Thank you for the help! Any is appreciated.
I didn't post a link to the site because the site is password protected. But I was able to open up the one page I need help fixing while keeping the rest of the site password protected. Page Address: http://www.postiki.com/list/get_user.php Just click on the box that says "quickAccount" or "vipAccount" to see the error. The box that says "email Account" works as I would like the others to work. The iframe that is causing problems is the blue captcha (verification image). Thank you again for the help.
I am still working at finding a how to fix this problem. If you need more information please let me know. Any information would be very helpful. Thank you.
I do not have Firefox 3.0, however I do have Firefox 3.5 on my computer. I do not experience the problems that you mention while viewing your page. Make sure that addons are not affecting your browser's webpage rendering. Have you tried viewing your webpage in other browsers? I do experience a layout issue when clicking the VIP Create Account button. "First Name" and other labels and input below it fall below the yellow box and to the right.
Thank you for the suggestion. I will check out how it looks with an upgraded browser. But I think I'd also like to try and fix it on this version so that it looks correct to anyone using this version. The other layout issues are because I haven't bothered to position anything else until I have fixed this problem. Thanks again for the suggestion. I will update this post on what I end up doing with the page. Hopefully I will have a solution so that anyone else who runs into this problem can fix it. P.S. I think I may have also found an image that is larger than it is suppose to be that could possibly be causing the problems.
I think I have finally fixed the problem. I never upgraded the browser, because the ubuntu package repository hasn't released a stable version of firefox 3.5 yet. Instead I change the <iframe> tag to an <object> tag. This seems to have allowed the CSS to display my page as intended. However, I have not tested it fully. So, there may be things that an iframe can do but an object tag can't. But for now the CSS is working and my refresh button for the image in the object (previously the iframe) is working also. Unless I post again, then this worked. The object works as a good alternative to an iframe if the iframe is giving you problems.
Hi, Just to let you know the VIP link is still really messed on my Firefox 3.5. You should just create a simple 2 column layout, and use AJAX or JS to change the content of the right column, if you want to do it without a page refresh. If everything is fixed within the column, then there's no way it can jump out. Unless you start using positioning, which there is no need to do.
Thank you for the reply. I am still in the process of fixing the layout of the page, I just wanted to get the iframe problem fixed before I began laying everything out how I wanted. As for the 2nd column within the VIP link, I was planning on putting 'column #1' into a div and putting 'column #2' into a separate div. Then I was going to use CSS position to place these divs appropriately. Is divs not a good approach for designing this? And is it not good to use position for nearly everything on pretty much every page (as I have been doing)? I have been using JS sparingly because I didn't want to be too dependant on javascript for the site to work properly. I have only been using JS to create secondary visual effects. Is this an unnecessary approach? I am still new to all this and have only self-taught myself by reading tutorials online for everything I have done on the site. Any advice is appreciated. Thank you.
Hi, You are quite correct in that you should use DIV's as a good approach for the layouts. However regarding the "positioning", you shouldn't really be using position:absolute and then postioining everything exactly where you want it using the top: and left: settings. Because absolute positioning takes things out of the normal flow of the document, hence things might not appear where you expect. Although layouts can be achieved with this sort of positioning, it is more common to use floats to align stuff to the right and left, and then a combination of margins and paddings to create the gaps around the elements you need. You are correct in trying to avoid JavaScript. It's important that users without JS can still use the site for accessiblity reasons. JavaScript can be good for adding functionality after you've finished your site, but you shouldn't use it to depened on your site working correctly as you stated. Anyway you correct you should have a column to hold the buttons, and just float it to the left, and then another column to hold the information which goes on the right.(which you already have anyway with your containers i think)