PDA

View Full Version : Firefox blues



astralrose
12-04-2004, 07: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, 02: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, 02:23 PM
Also, check you're using absolute rather than relative positioning.

cr3ative

chinchilla2
12-07-2004, 02: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, 04: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, 02: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, 02: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, 06: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, 09: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, 10: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 :


<!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 :


<!--
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

astralrose
12-14-2004, 04:19 PM
Wow you have a lot of time on your hands *thanx* I'll give it a play.

Donna x

astralrose
12-14-2004, 05:15 PM
After studying the code and what you had wrote
- All tags must be closed, <br> = <br />, <img /> etc..

is this only applicable in writing xhtml? When I was taught html this was not so. I ask this as I only write in html. I was actually told not to bother with xhtml and stick to html.

Also I didnt include all my style in an external sheet as certain styles varied on different pages, so I had to put the ones you removed back in the page.

I didnt include any alternative text for pictures as the client specified they didnt want it (their perogative)

The main thing was sorting out my iframe problem in firefox, so thankyou.I now know where I am going with that.

Donna

GavinPearce
12-15-2004, 11:40 AM
Yea, it's xhtml, using it in html would actually be invalid i think.

Wel yea, don't take it the wrong way, was just bored, had a free afternoon so thought I'd play around with it a bit.

I don't know why they said you shouldn't bother, it is by far the way the internet is going even though switching from HTML 4.01 to XHTML 1.0-1.1 brings almost no direct benefits for the visitors of your Web site. Still there are many reasons why XHTML should be used...
- XHTML is easier to maintain
- XML syntax rules are far more rigorous than HTML. As a result, XHTML makes authors work more precisely, having to address issues such as:

all elements and attribute names must appear in lower case
all attribute values must be quoted
non-Empty Elements require a closing tag
empty elements are terminated using a space and a trailing slash
no attribute minimization is allowed
in strict XHTML, all inline elements must be contained in a block element

- In HTML, case, quotes, termination of many elements and uncontained elements are allowed and commonplace. The margin for errors in HTML is much broader than in XHTML, where the rules are very clear. As a result, XHTML is easier to author and to maintain, since the structure is more apparent and problem syntax is easier to spot.
- XHTML is XSL ready
- XHTML is easier to teach and to learn
- When the new version of XHTML becomes a recommendation, XHTML 1.0 documents will be easily upgradable to this new version, to allow to take advantages of its exciting new features. It's likely that an XSLT style sheet will be available by then to help you move your XHTML 1.0 (strict) documents to XHTML 2.0 documents.

It provides for a page that is accessible to all, and not just the majority.

I work for a company that provides online development to other companies and induvidals, one of our main causes is building a fully valid and accessible webpage, not just using the correct coding, but making sure those who are disabled in some form can still access the website.

With the way it's going, various companies have been sued already for providing websites that discriminate, and as I said, before anything else, we make a website accessible.

Simple things like making sure the page can still be read if colours are turned off, that images don't flash at a certain frequency, filling alt tags ...
It may be their perogative to decide, but as their web developer you should reinforce the point, we here would suggest you tell them about the issues of accessibility and such causes online, and that it is a very good idea to comply to these standards.