Web Analytics Made Easy -
StatCounter "Double Layer Background" CSS. Ie and FF compatibility issues - CodingForum

Announcement

Collapse
No announcement yet.

"Double Layer Background" CSS. Ie and FF compatibility issues

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • "Double Layer Background" CSS. Ie and FF compatibility issues

    Hi,

    Ive been teaching myself CSS for 2weeks and still very green.

    The several problems I'm having stem around trying to hack a "Double Layer Backround" effect that works for Firefox and Ie6.
    I have semi acheived this, however:
    • the scrolling of the page "join section" doesn't work well, i appear to run out of 'background'
    • the website logo doesn't work/show in IE6


    I've gotten this far and I'm now very fresh out of ideas.

    Normally I'm that guy that doesn't ask for directions when he's lost, and try to solve my own problems.
    However, no man is an island.

    Many many many thanks for any direction or help you can give.
    Here's the url: http://www.exposure.org.uk/joomla/in...d=14&Itemid=28

  • #2
    http://homepage.ntlworld.com/bobosola/index.htm

    the first issue is IE lt7 doesnt support png transparency. That link proviodes a little info and a javascript solution.

    Seeing as your logo is a png with transparency that might help it as well. It doesnt need to be a png though unless your dead set on it.

    oh wait:

    Code:
    div#logo {
    	position : absolute;
    	margin:0;
    	padding: 0px 0 0 0;
    
    	top: 1px;
    	width: 409px;
    	height: 200px;
    	right: 50px;
    	background: url(../images/logo_getonbus.png) no-repeat; 
    	background: attatchment fixed;
    }
    first there is typo in that background-attachment: fixed. And IE doesnt like non body backgrounds being fixed.

    do me a favor? add the javascript so I can see if the same thing happenign on ff is happening on IE. then we can go from there.

    the way your file tree is set up it makes it real hard for me to save the whole thing to mess with it. so one step at a time?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

    Comment


    • #3
      Firstly, thank you ever so much for taking the time to go over my shoddy coding and go one step further in replying to my plee for help. I greatly appreciate it and your time.
      Being my first post, i thought i perhaps discribed my situation poorly. Maybe i should have entitled it "Multiple" backround layer instead.
      Anyways on with the show....

      Originally posted by harbingerOTV View Post
      It doesnt need to be a png though unless your dead set on it.
      What would you do in place of my png 'method'?

      Originally posted by harbingerOTV View Post
      first there is typo in that background-attachment: fixed. And IE doesnt like non body backgrounds being fixed.
      'non body backgrounds being fixed' - im not quite sure i follow


      Originally posted by harbingerOTV View Post
      do me a favor? add the javascript so I can see if the same thing happenign on ff is happening on IE. then we can go from there.
      I've added the javascript to the index.php . Unfortunetly, im unable to immediately test/view the results of its usage on IE6. Im currently at work using Macs only . But i will be able to see it tonight. If you read this before I get to a PC, id greatly appreciate feed back on whether it worked.


      Originally posted by harbingerOTV View Post
      the way your file tree is set up it makes it real hard for me to save the whole thing to mess with it. so one step at a time?
      Being the newbie, ive been creating all of this using Joomla CMS. Its been a 'learning curve' indeed.
      If its ok with you, I've PM you a direct url to a zip of the two template attempts I have in made in trying to fix the problems ive had.
      Hopefully, this'll make things easier for you to save/view/help perhaps

      Again, many thanks for your help.

      Comment


      • #4
        Originally posted by harbingerOTV View Post
        http://homepage.ntlworld.com/bobosola/index.htm

        oh wait:

        Code:
        div#logo {
        	position : absolute;
        	margin:0;
        	padding: 0px 0 0 0;
        
        	top: 1px;
        	width: 409px;
        	height: 200px;
        	right: 50px;
        	background: url(../images/logo_getonbus.png) no-repeat; 
        	background: attatchment fixed;
        }
        first there is typo in that background-attachment: fixed. And IE doesnt like non body backgrounds being fixed.
        Many thanks, yes ineed, typo now spotted and corrected.

        However, im still having problems with the 'background' dissapearing when i scroll the 'join in' page.

        Anybody have any thoughts on this? http://www.exposure.org.uk/joomla/in...d=14&Itemid=28

        Comment


        • #5
          Warning! do not copy and paste the code from the site Im posting. i ripped out code I didnt need

          Sorry about the javascript i linked to. it only works with real images not css images. to do that you need the filter for ie. in this case that presents another proble, giveing the html a background with a body background fixed, gives you that "disappering" thing you had. The solution I made involves making tha body back gorund a combination of the two and turnign it into a jpg. It's 2000 x 2500 so shuold suffice for 99% of the screen resolutions and cuts the file size down by some 20k.

          you had two title tags in your <head> and I took one out. not sure which one was generated by joomla so be careful. You also had an extra </div> at the end which i took out.

          your logo image a imade into a jpg with a red background which eleminates the need for any png filters or hacks and lessens the file size to boot.
          take a ook at this and see if you can work with it.

          if you need any more assistance just shout.

          http://home.earthlink.net/~harbinger...mra/index.html

          Edit: please disregarde al the horrible typos
          Stop making things so hard on yourself.
          i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

          Comment


          • #6
            Wow, wow, and wow. Alas, my problems solved. Many thanks!!!!

            Originally posted by harbingerOTV View Post
            the javascript i linked to. it only works with real images not css images. to do that you need the filter for ie.
            Just out of my sheer curiousity and hunger for knowledge, what did you mean by 'real images' or 'css images'?

            Originally posted by harbingerOTV View Post
            making tha body back gorund a combination of the two and turnign it into a jpg. It's 2000 x 2500 so shuold suffice for 99% of the screen resolutions and cuts the file size down by some 20k.
            You can rest assured that i WILL be making this little gem a regular practice for my next css venture! Many thanks for this excellent design tip.

            Originally posted by harbingerOTV View Post
            you had two title tags in your <head> and I took one out. not sure which one was generated by joomla so be careful.
            Even though, ive got it up and running, I've yet to spot this. Ill take some further looks into it. Nevertheles, by golly you've got a sharp eye there!

            Originally posted by harbingerOTV View Post
            You also had an extra </div> at the end which i took out.
            Again, very sharp eye you have there. That one escaped me.

            Originally posted by harbingerOTV View Post
            your logo image a imade into a jpg with a red background which eleminates the need for any png filters or hacks and lessens the file size to boot.
            I've learnt a lesson here. That eleminated an awful IE6 grey png background effect. Many thanks.


            In closing, i heartily thank you for your time and patience, which is above and beyond the call of 'community' duty.

            I was already in the midst of re-coding the entire site with the addition of dreaded embeded tables just to try and hack away a result.

            One of my many downfalls had to be trying to stick too close to the Lynda.com CSS tutorials for 'designers' with "Molly" and company. They solely used Firefox with all their demonstrations and promoted png usage throughout,thus never getting around to true IE5/6 compatibity issues.
            I now know better.

            I'll keep re-visiting these forums and try to 'Pay it Forward' to some other poor CSS newbie as my skills advance a bit more.

            Comment


            • #7
              ooh, one more thing.

              Im finding that only the 'join in' section properly has the top header aligned up with the background image on my IE6 browser.
              All other url's appear misaligned.

              Is there any way I can rectify this?
              Naturally, it works pretty much flawlessly now in Firefox.

              I already tried emptying my IE6 browser cache and deleted all temporary files. Yet still no luck.

              Comment


              • #8
                Just out of my sheer curiousity and hunger for knowledge, what did you mean by 'real images' or 'css images'?
                well i guess my "real" or "css" images is like this:

                real images are ones where you do:

                Code:
                <img src="?.?">
                thus images actually refered to in the HTML as images rather than css based images used as backgrounds like:
                Code:
                #whatever {
                background: url(images.jpg);
                }
                I think the javascript only hits the images produced into the actual html code and those put in by css are ignored as it looks for < img > tags to do it's work.


                You can rest assured that i WILL be making this little gem a regular practice for my next css venture! Many thanks for this excellent design tip.
                glad something i do can be used somewhere. it only goes so far though and each design wil be the test. you can "cheat" like that in some situations , but on others it's just not bandwidth feasible. time and design will tell


                Even though, ive got it up and running, I've yet to spot this. Ill take some further looks into it. Nevertheles, by golly you've got a sharp eye there!
                ...
                Again, very sharp eye you have there. That one escaped me.
                I used tidyhtml to point out the errors and it spotted them. the extra title shouldnt have been an issue but an unescaped div can be more so.


                I've learnt a lesson here. That eleminated an awful IE6 grey png background effect. Many thanks.
                I love pngs. I fool with them a lot but after trying to get around thier IE deffecincy, Ive found the easy road is well, easier in a lot of cases. PNGs can add some cool stuff but having to fight or comprimise to get the efect might be easier handled in a little retooling.


                In closing, i heartily thank you for your time and patience, which is above and beyond the call of 'community' duty.
                Not a problem. I like coming on here and finding something I can dig my perverbial teeth into and try to learn something from myself.

                I was already in the midst of re-coding the entire site with the addition of dreaded embeded tables just to try and hack away a result.

                One of my many downfalls had to be trying to stick too close to the Lynda.com CSS tutorials for 'designers' with "Molly" and company. They solely used Firefox with all their demonstrations and promoted png usage throughout,thus never getting around to true IE5/6 compatibity issues.
                I now know better.
                Nah recoding isnt nessecary most of the time. Its more of looking at the base image or layout you want and just thinking of the different ways it can be done to achieve the same effect. The more you mess around with css the more you can finagle it to do your bidding. If I could show you the contents of my J: Drive you'd get the idea

                I'll keep re-visiting these forums and try to 'Pay it Forward' to some other poor CSS newbie as my skills advance a bit more.
                please do. I joined up here about a year or so ago and was looking for one answer for a "simple" issue. I found that answer through searching right away and bounced around and got sucked in. All in all a real good group of people come here, and Im sure we all learn something new from it on a frequent basis. Everyone who gives back, with what ever good they can, only leads to a better forum for everyone.

                Im finding that only the 'join in' section properly has the top header aligned up with the background image on my IE6 browser.
                All other url's appear misaligned.

                Is there any way I can rectify this?
                Naturally, it works pretty much flawlessly now in Firefox.

                I already tried emptying my IE6 browser cache and deleted all temporary files. Yet still no luck.
                This Im not seeing. Im looking on FF and IE6 PC and they all look fine unless im missing something.

                Im running 1152 resolution and i know that your layout breaks on less than 800 but if 800+ it looks like everyting i sinline to me.

                If it is doing it, maybe you can post up a screen shot so we can work from there.
                Stop making things so hard on yourself.
                i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

                Comment


                • #9
                  If it is doing it, maybe you can post up a screen shot so we can work from there.
                  Sure, and thanks again for your continued help.

                  It would appear to me that the misalignment i spoke of only occurs when the opened page does Not have an initial vertical scroll bar on the page.
                  See screenshot 1: http://exposure.org.uk/images/errors/error1.jpg

                  In screenshot 2: http://exposure.org.uk/images/errors/error2.jpg
                  I noticed that when i initialy open a page where there is an initial vertical scroll bar present, it looks disjointed and weird like this

                  To re-align said page, I found that it is only when i use the v.scroll bar that the page then sort of 'snaps' back into its correct alignent.
                  Like so: http://exposure.org.uk/images/errors/error3.jpg

                  Im running on 1280 x 800 here on this particular laptop, but i found it was also running awkwardly on my main home PC as well (which is runnig at 1280x1024 resolution )
                  Last edited by mumra; Oct 18, 2006, 09:26 AM.

                  Comment


                  • #10
                    hmmm... I can't replicate the problem so I'll fiddle with it when I get home. Looking at your source i get these errors:

                    Code:
                    [COLOR="Red"]<!--
                    	Dark Fire Template by:  B. A. Khan, 3digita.com
                    -->[/COLOR]
                    
                    <?xml version="1.0" encoding="iso-8859-1"?><!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">
                    <head>
                    	[COLOR="Red"]<title>Get On bus</title>[/COLOR]
                    			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                    	[COLOR="Red"]<title>Get On bus - Join in</title>[/COLOR]
                    2 Title tags and whitespace above the xml declaration. Not sure if either is causing the issue but the whitespace might be throwing IE into quirks more which may cause an issue.

                    when I get home Ill try it out more an dsee if I can make IE do the same thing.
                    Stop making things so hard on yourself.
                    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

                    Comment


                    • #11
                      I bumped up my res and loaded your page an dstill cant get it to happen that wya. really weird.

                      Looking at the error image, it appears the body background image is breaking in those two spots but it's not possible it is being 1 image. I looked thorugh the css and cant find anything with same image.

                      i mean ive resized and refreshed some 30 times in different sizes and nothing.

                      I'm truly lost.
                      Stop making things so hard on yourself.
                      i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

                      Comment


                      • #12
                        Oh, so you're normally running in a lower res? What resolution do you normally work in?
                        Come to think of it, I'm yet to lower my own res (on both of my machines) to assertain whether any difference may come of it?

                        Personally, I can live with it, seeing as though it would appear I'm the only person experiencing this mishap - touch wood!

                        My next area with regards to this site now are, 'improvements'.
                        Im going to try and replace/create some nice CSS powered rollover buttons to replace the text.
                        Wish me luck.

                        Many thanks again for all your answers, help and time.

                        Comment

                        Working...
                        X