Becoming Cross-Browser Compatible, usage of 'position' with Firefox & IE |
Becoming Cross-Browser Compatible, usage of 'position' with Firefox & IE |
Steffan Harries |
Nov 27 2007, 05:47 PM
Post
#1
|
Group: Members Posts: 3 Joined: 27-November 07 Member No.: 4,408 |
Hey there,
I'm new here but read through these forums now and again and find it very useful. Anyway, my problem is this: I personally use Firefox as my browser, however the majority of users visitng my site use IE. I have a website as a basis for my photographic work. Here! However, I use this snippet to load the navigation links on my site to load into an iframe which is in a <div> and is positioned in the center of the page. Link: CODE <a onclick="return loadiframe('iframe', this.href)" href="aboutme.htm"> This works perfectly in Firefox, but not so nicely in IE. In IE however, instead of the new links opening in the iframe in the position of the <div> over the center of the page...the new links are opened in the <div> at the bottom of the page. Any help that solves this problem is greatly appreciated The code for my index page is... CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Steffan Harries Photography</title> <link href="file:///C|/Documents%20and%20Settings/Steffan/Desktop/NEW%20SITE/img/Stylesheet.css" rel="stylesheet" type="text/css"><!-- Start of StatCounter Code --> <script type="text/javascript"> var sc_project=3157465; var sc_invisible=0; var sc_partition=1; var sc_security="5c97988b"; </script> <script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"> </script> <link href="Stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <noscript> <div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c2.statcounter.com/3157465/0/5c97988b/0/" alt="web tracker"></a></div> </noscript><!-- End of StatCounter Code --> <div align="center"> <script type="text/javascript"> function loadiframe(iframeName, url) { if ( window.frames[iframeName] ) { window.frames[iframeName].location = url; return false; } else return true; } </script> <!-- ImageReady Slices (index-img.psd) --> <table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="8"> <img src="images/index-img_01.gif" width="800" height="64" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index-img_02.gif" width="77" height="486" alt=""></td> <td> <a href="http://www.steffanharries.com/"> <img src="images/Home.gif" width="186" height="37" border="0" alt="Home"></a></td> <td rowspan="2"> <img src="images/index-img_04.gif" width="157" height="486" alt=""></td> <td> <a onclick="return loadiframe('iframe', this.href)" href="aboutme.htm"><img src="images/aboutme.gif" alt="About Me" width="79" height="37" border="0"></a></td> <td> <a onclick="return loadiframe('iframe', this.href)" href="porftolio.htm"><img src="images/portfolio.gif" width="78" height="37" alt="Portfolio" border="0"></a></td> <td> <a onclick="return loadiframe('iframe', this.href)" href="services.htm"><img src="images/services.gif" alt="Services" width="78" height="37" border="0"></a></td> <td> <a onclick="return loadiframe('iframe', this.href)" href="contact.htm"><img src="images/contact.gif" alt="Contact" width="67" height="37" border="0"></a></td> <td rowspan="2"> <img src="images/index-img_09.gif" width="78" height="486" alt=""></td> </tr> <tr> <td> <img src="images/index-img_10.gif" width="186" height="449" alt=""></td> <td colspan="4"> <img src="images/index-img_11.gif" width="302" height="449" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </div> <div class="c3"> <table align="center"> <tr> <td><iframe name="iframe" width="625" height="420" scrolling="auto" frameborder="0" id="iframe"></iframe></td> </tr> </table> </div> <p class="copyright c5">All images & content is copyright<sup>©</sup> of Steffan Harries<br> The World Wide Web Consortium has validated that this site's designer has taken the care to create an interoperable Web page.</p> <p align="center"> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.steffanharries.com%2F"><img src="http://www.w3.org/Icons/valid-html401-blue" alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0"></a> </p> </body> </html> And the code for my .CSS file is: CODE /* CSS Document */ p.intro { font-face:Veranda; font-style:italic; font-family: Verdana, Helvetica, sans-serif; color: #000000; font-size: x-small; } .shp { font-family: Verdana, Helvetica, sans-serif; font-size: medium; color: #000000; font-weight: bold; } .footer { font-family: Verdana, Helvetica, sans-serif; font-size: x-small; font-style: italic; } .block { font-family: Verdana, Helvetica, sans-serif; font-size: x-small; color: #CCCCCC; } a:link { color: #0000FF; } a:visited { color: #3366FF; } a:hover { text-decoration: none; } a:active { color: #FF0000; } .copyright { font-family: Verdana, Helvetica, sans-serif; font-size: xx-small; font-style: italic; color: #000000; } .div { display:inline; } p.c5 { text-align: center; } div.c4 { text-align: center; } div.c3 { position: fixed; text-align: center; top: 108px; } div.c2 {position: fixed; text-align: center; top: 172px; } p.c1 {color: #FFFFFF; text-align: center; } /* Default links */ a:link, a:visited { font-weight : bold; text-decoration : none; color: #998; background: transparent; } a:hover { font-weight : bold; text-decoration : underline; color: #bba; background: transparent; } a:active { font-weight : bold; text-decoration : none; color: #998; background: transparent; } |
Christian J |
Nov 27 2007, 07:23 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I use this snippet to load the navigation links on my site to load into an iframe which is in a <div> and is positioned in the center of the page. Link: CODE <a onclick="return loadiframe('iframe', this.href)" href="aboutme.htm"> Why use javascript? A link TARGET will work better: http://htmlhelp.com/faq/html/frames.html#frame-target (applies to IFRAMEs too). But it's better to not use frames at all: http://htmlhelp.com/faq/html/frames.html#frame-problems QUOTE This works perfectly in Firefox, but not so nicely in IE. In IE however, instead of the new links opening in the iframe in the position of the <div> over the center of the page...the new links are opened in the <div> at the bottom of the page. The links are not causing this, rather IE6 doesn't support CSS "position: fixed" at all. IE7 should support it, but perhaps the Doctype you use puts it in "quirks mode" (where it simulates the bugs of older IE versions). Use one of these instead: http://www.htmlhelp.com/tools/validator/doctype.html In any case pos. fixed shouldn't be used for centering, since you use tables for layout I suggest a 100% high and wide single-cell table with it content in the center/vertical middle. Also the current layout looks broken in Safari. |
Frederiek |
Nov 28 2007, 03:39 AM
Post
#3
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Error:
Not allowed to load local resource: file:///C|/Documents%20and%20Settings/Steffan/Desktop/NEW%20SITE/img/Stylesheet.css And: p.intro -> font-face: Verdana There's no font-face property in CSS, but you already used the correct font-family property. |
Steffan Harries |
Nov 30 2007, 11:40 AM
Post
#4
|
Group: Members Posts: 3 Joined: 27-November 07 Member No.: 4,408 |
Thanks for the quick reply!
I've made the adjustments as you suggested and thank you for pointing out those errors. I no longer use the style="position:fixed" method and made a table to house the content. Haven't yet changed to using the TARGET method you described, Christian. I've also made the changes to the .css file and thank you too for pointing those out, Frederiek. I must say, I'm impressed by your intelligent responses, though it did make me wonder: "Why didn't I think of that!" Thank you! Click! |
Frederiek |
Nov 30 2007, 04:55 PM
Post
#5
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
IIRC, there are workarounds for the "position: fixed" CSS IE6 doesn't support. You'll probably find answer at http://www.d.umn.edu/itss/support/Training...design/css.html.
I simply passed your page through the W3C CSS Validator Service to see you mispointed the url of the stylesheet. You still have that line in your HTML, though. In Fact, you can get rid of it entirely, since you already link to a stylesheet by the same name. |
Steffan Harries |
Dec 6 2007, 10:10 AM
Post
#6
|
Group: Members Posts: 3 Joined: 27-November 07 Member No.: 4,408 |
Thanks guys, would just like to say you are all very helpful!
|
Lo-Fi Version | Time is now: 26th April 2024 - 09:44 AM |