Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Background bleeding through

  1. #11
    Join Date
    Nov 2011
    Posts
    205
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Hi
    Thanks for that but still i see the flashing yellow.
    Check out this page and select a few of the options on the left then watch the yellow on the right flash before the item for sale is shown.
    http://www.theremotedoctor.co.uk/honda_keys.html

    Or short video
    http://s670.photobucket.com/user/ipb...FLASH.mp4.html

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Set the id="content_outer" to

    Code:
    #content_outer {background-color: #000066 !important;}
    I didn't mean for anything on the top page to be background transparent, just everything on the external pages. Without background transparent on the external pages, the white of their bodies will show first in many cases.

    And set whatever you have as yellow to #000066 as well.
    Last edited by jscheuer1; 10-16-2013 at 02:30 PM. Reason: looked at it more
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #13
    Join Date
    Nov 2011
    Posts
    205
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Ok
    Learning all the time.
    Do i then need to put the previous code back to how it was.

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Not unless there is still a problem or it has created a new problem.

    However, what the page is doing each time a button is clicked is injecting a new iframe into the markup. It's source (src) is already set to the desired page when it's injected. But in some browsers that might still allow for a brief moment when nothing is loaded into it. If so, in those browsers there will be a white flash that cannot be removed unless an entirely different approach is taken. Importing the external content via AJAX would probably work, as would having the content on the page already display: none or visibility hidden and simply revealing the desired one each time a button is clicked.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Nov 2011
    Posts
    205
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    ok
    Now thinking as to what to do as i thought i could do away with the flash alltogether.
    Thanks for the help.

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    It seems to be working better. Still flashes white sometimes. Try this. Make up a new stylesheet called external.css:

    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    }
    * {
    	background: transparent !important;
    }
    On all the external pages, change this:

    HTML Code:
    <link href="../style.css" rel="stylesheet" type="text/css" />
    to point to the external.css file we just made.

    The browser cache may need to be cleared and/or the page refreshed to see changes. Probably both, as these are in iframes and the browser will cache the external pages even when refreshing the top page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #17
    Join Date
    Nov 2011
    Posts
    205
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    I did not make this style sheet,my friend did and he is away at present.
    Can i copy my existing sheet,delete the contents and add the following,
    html, body {
    margin: 0;
    padding: 0;
    }
    * {
    background: transparent !important;
    }

    Then just rename it to
    external.css:

  8. #18
    Join Date
    Nov 2011
    Posts
    205
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Ok
    I have done what i said,
    Copied original css file and renamed it.
    Added the small amount of code to it.

    Changed the code
    from <link href="../style.css" rel="stylesheet" type="text/css" />

    to <link href="../external.css" rel="stylesheet" type="text/css" />

    The result is on one page so far.
    http://www.theremotedoctor.co.uk/audi_keys.html

  9. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Works well in Chrome, you would want to style the text though. IE still flashes until the external page is cached. Since there's only one, I don't know if that's because the page is cached or that the external stylesheet is cached. If the latter, it would cut down on flashing a lot.

    But, as I said before, some browsers will see this as an empty iframe at first. Those that do will show white at first, at least until the external stylesheet is cached, perhaps until the external page is cached. There are alternative ways of dealing with the whole thing that wouldn't involve iframe (or object as you had before), that would not have these problems.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #20
    Join Date
    Nov 2011
    Posts
    205
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Ok
    I must have a think as im getting deeper out of my depth.

    Thanks for the input,now having a think.

Similar Threads

  1. Background Image Carousel won't load stuck on black background
    By accessotronik in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-15-2012, 03:23 PM
  2. Background Image Carousel background-size: cover; is not working
    By kerriluo in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-12-2012, 10:38 PM
  3. Replies: 0
    Last Post: 01-10-2012, 05:27 PM
  4. Resolved Odd rollover/hover "bleeding" problem
    By Anthrogue in forum CSS
    Replies: 7
    Last Post: 08-13-2011, 02:55 AM
  5. Replies: 3
    Last Post: 02-24-2009, 01:25 AM

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
  •