Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Firefox blues

  1. #1
    Join Date
    Nov 2004
    Location
    Here to often...
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Firefox blues

    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

  2. #2
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  4. #4
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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)

  5. #5
    Join Date
    Nov 2004
    Location
    Here to often...
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Dec 2004
    Location
    Windsor, UK.
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Dec 2004
    Location
    Windsor, UK.
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Nov 2004
    Location
    Here to often...
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Dec 2004
    Location
    Windsor, UK.
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Dec 2004
    Location
    Windsor, UK.
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •