Firefox blues

**astralrose** · 12-04-2004, 08:28 PM

Hi,

I have new browser blues. For whatever reason my external style sheets are not being read/picked up in Firefox and it also positions my iframes wherever it feels like. I have checked out all compatilibilty and firefox says it is okay with these two. Is anyone else having these problems? Has anyone figured out a solution to these problems? As firefox is rapidly becoming the browser of now I need to figure this out as soon as.

thanks

Donna x

**chinchilla2** · 12-07-2004, 03:14 PM

Donna,

So far I haven't experienced that in Firefox. I'm currently working on a site that uses both externals and iframes and Firefox is displaying that correctly.

Do you have a link to where the Firefox issue is happening? Maybe I can figure out what's up.

**cr3ative** · 12-07-2004, 03:23 PM

Also, check you're using absolute rather than relative positioning.

cr3ative

**chinchilla2** · 12-07-2004, 03:34 PM

Yeah, what cr3ative said. Absolutes are a definite.

Using absolutes are second nature to me, so I keep forgetting to say it.

(mumbles to self as she heads into her sig line to add it)

**astralrose** · 12-07-2004, 05:27 PM

Hi,

I am using absolute positioning (always do) this is one of the pages www.splitns.co.uk
that uses iframes.
I have checked out other sites that uses external style sheets (msn for one) and firefox does not seem to pick up their style, mostly text/link style is not being read.

thanks

Donna x

**GavinPearce** · 12-13-2004, 03:33 PM

It picks up the styles fine in my firefox (except the unsupported scrollbar colours), what version you using?

Oh yea, at the bottom of the page, you're missing the http:// out of the link to furiouswebdesign.com so it goes nowhere.

And the iframe isn't just placed anywhere. It's actually IE placing it in the wrong place.

In your CSS your asking a browser to put it right at the very very very top of a page [top: 0px;] and your asking it to put it 225px from the very very left of the page. [left:500px;]. And this is what firefox does. IE seems to move it down when you set [top: 0px;] but I believe that's because it does it from the padding and firefox does it from the margin, or something like that.

**GavinPearce** · 12-13-2004, 03:37 PM

Yea, I believe thats why. IE is measuing from your <body leftmargin="20" topmargin="30"> tags and Firefox is doing what it should, ignoring them.

**astralrose** · 12-13-2004, 07:31 PM

Hi,

Thanx Gavin, do you mean what version of firefox am I using? The most recent......?
I notice that it isnt supporting msn's style and putiing all fonts/links in default. I know about the scrollers, mozilla have never supported them. Thanks for the check on the link my worst fault im afraid to much rush typing at the end.

The way I positioned my iframes is how I was taught, how would you suggest I write the code for firefox that will be compatible with IE or am I getting into double site territory now?

Donna x

**GavinPearce** · 12-14-2004, 10:50 AM

I've figured what's wrong.

I've got a bit of spare time somehow, so I'm going to rewrite the coding a little bit. Shouldn't take that long, get back to you when I'm done.

**GavinPearce** · 12-14-2004, 11:26 AM

Ok, I've rewritten the page as valid transitonal xhtml 1.0. I normally use xhtml 1.1 but it doesn't like iframes and the target attribute much so had to mild it down a bit. Anyway you should find it means it'll work in pretty much every browser, and I've rewritten bits of the css.

The iframe:
What was happening is that IE was measuing from the padding that was around the body, and firefox was measuring right from the edge of the page. So by removing the hspace="100" vspace="80" from the iframe then in both browsers it showed it in the same place, and it was just a matter of setting its location in the style sheet. I then decided to remove the <div> from it altogether, and set the iframe with id="floatframe" and then the div isn't even required.

Let you know what other things I've done:
- Removed the <style> tags from within the external style sheet.
- Removed all html info that can be set in CSS (ie <b> font tags, backgrounds, image properties etc)
- In the main page gave it class="main" to the body tag, so anything set in body.main shows only in that page and not in the iframes as well (usful for giving them main page that background and the iframes the orange one)
- Made sure all ALT tags had content describing the image.
- Changed tags that aren't used anymore to current tags (language=JavaScript should be type="text/javascript")
- All tags must be closed, <br> = <br />, <img /> etc..
- set a <p> right at the start, and a </p> right at the end, <img /> and <a></a> must be within a <p>, <div, <h1,2,3..> etc.. tag.
- Various other tiny little things....

I got a bit bored so I thought why not.
I put the #floatframe into the main mystyles.css so all the style information is now in one place.

Well, here's the code:
index.htm :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Affordable prices for all the family.</title>
<link href="mystyles.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta content="hairdressers,hair,cut,fashion,ghd,fudge,schwarzkopf,affordable,value,perm,cut,colour,streaks,foils,comfort,pamper,nails,beauty,wax,friendly" name="keywords" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body class="main">
<p>
<img alt="Logo" src="Animation4.gif" style="height: 100px; width: 275px;" />
<br /><br /><br />
	<a href="indexx.htm" target="norman">
	<img onmouseover="MM_swapImage('Image1','','up_home1.gif',1)" onmouseout="MM_swapImgRestore()" alt="Home" src="up_home.gif" name="Image1" style="height: 50px; width: 150px; border: 0;" /></a>
   <br /><br /> 
	<a href="salon.htm" target="norman">
	<img onmouseover="MM_swapImage('Image2','','up_thesalon1.gif',1)" onmouseout="MM_swapImgRestore()" alt="The Salon" src="up_thesalon.gif" name="Image2" style="height: 50px; width: 150px; border: 0;" /></a>
   <br /><br />
	<a href="pricelist.htm" target="norman">
	<img onmouseover="MM_swapImage('Image3','','up_services1.gif',1)" onmouseout="MM_swapImgRestore()" alt="Services" src="up_services.gif" name="Image3" style="height: 50px; width: 150px; border: 0;" /></a>
   <br /><br />
	<a href="products.htm" target="norman">
	<img onmouseover="MM_swapImage('Image4','','up_products1.gif',1)" onmouseout="MM_swapImgRestore()" alt="Products" src="up_products.gif" name="Image4" style="height: 50px; width: 150px; border: 0;" /></a>
   <br /><br />
	<a href="acessories.htm" target="norman">
	<img onmouseover="MM_swapImage('Image5','','up_tools1.gif',1)" onmouseout="MM_swapImgRestore()" alt="Tools" src="up_tools.gif" name="Image5" style="height: 50px; width: 150px; border: 0;" /></a>
   <br /><br />
	<a href="portfolio.htm" target="norman">
	<img onmouseover="MM_swapImage('Image6','','up_portfolio1.gif',1)" onmouseout="MM_swapImgRestore()" alt="Portfolio" src="up_portfolio.gif" name="Image6" style="height: 50px; width: 150px; border: 0;" /></a>
   <br /><br />
	<a href="book.htm" target="norman">
	<img onmouseover="MM_swapImage('Image7','','up_visit1.gif',1)" onmouseout="MM_swapImgRestore()" alt="  Visit" src="up_visit.gif" name="Image7" style="height: 50px; width: 150px; border: 0;" /></a>
<br /><br />
<iframe id="floatframe" name="floatframe" align="left" src="indexx.htm" frameborder="0"></iframe>
<a href="http://www.the-nhf.org/Home/Home.asp"><img alt="NHF" src="NHF.gif" style="height: 100px; width: 150px; border: 0;" /></a>
<a href="http://www.fudge.com"><img alt="Fudge" src="fsymbol.gif" style="height: 90px; width: 88px; border: 0;" /></a>
<a href="http://www.schwarzkopf.com/"><img alt="Schwarzkopf Professinal" src="blackhead.gif" style="height: 46px; width: 86px; border: 0;" /></a>
<img alt="hits" src="/cgi-sys/Count.cgi?df=split.dat|display=Counter|ft=6|md=5|frgb=255;51;0|dd=V" /> 
<br />
<br />
© Donna Page 2004 created and housed by <a href="http://www.furiouswebdesign.com">::furiouswebdesign.com::</a>
</p></body>
</html>

mystyles.css :

Code:

<!--
body {
border-color:#f53d00;
border-style:solid 8px;
color:#000000;
background: #ff6633;
font-family: verdana, terminal, arial;
font-size:8pt;
line-height:18px;
scrollbar-darkshadow-color:#f53d00;
scrollbar-track-color:#ffd966;
scrollbar-face-color:#ffd966;
scrollbar-shadow-color:#ff6633;
scrollbar-3dlight-color:white;
scrollbar-highlight-color:white;
scrollbar-arrow-color:#f53d00;
}
body.main {background: url(background.jpg) fixed #ff6633;}

a {color: #FF0000; text-decoration: underline;}

#floatframe {
position:absolute;
left:305px;
top:110px;
width:410px;
height:350px;
z-index:100; }
-->

Once you have the page up, you can check if it's still valid at http://validator.w3.org

Thread: Firefox blues

Thread Tools

Search Thread

Firefox blues

Bookmarks

Bookmarks

Posting Permissions