The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Becoming Cross-Browser Compatible, usage of 'position' with Firefox & IE
Steffan Harries
post 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;  
  }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 27 2007, 07:23 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Steffan Harries @ Nov 27 2007, 11:47 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Steffan Harries
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Steffan Harries
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 04:57 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC