SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How come things disappear in certain browsers ?

    http://forums.wildfiregames.com/intranet/wfg_main/1/
    sometimes in IE or Msn or in some other browsers, thing disappear, like the little red signs in the new body or the white <blockquote>.

    Anyone ?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is similar to the peek-a-boo bug in ie (http://www.positioniseverything.net/.../peekaboo.html).

    It's not quite the same but the solution is the same. You need to add position relative in appropriate places. Apparently ie draws tthe background over the images and position relative forces the images (and text to show).

    Placing it here should solve the problems.
    Code:
    #contentcont {
    padding:2px 4px 0px 4px;
    background:#D1D9EB;
    font:1.0em/1.4em arial, serif;
    position:relative;
    }
    However, before you do that run your code through the validator as you have number of errors that may interfere with the solution.

    You have an extra </ul> in there and you have blockquotes inside a <p> tag which is not valid. blockquote is blocklevel and although a <p> tag is a type of block level it is not allowed to hold anything other than inline content.

    This should fix your display issues. (Also you are using the id more than once which is not valid code, although it doesn't cause any problems at present.)

    Hope that helps.

    Paul

  3. #3
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, thanks. Tried your approach, but with little luck yet:

    http://forums.wildfiregames.com/intranet/wfg_main/1/

    Implemented the position:relative thing and validated both my XHTML 1.0 Strict and CSS2 (doesn't validate your hacks though ).

    Any idea ?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Tim,

    You must have got something in the wrong place as I had it working perfectly. Trouble is I deleted it all!

    I've just looked at your page online - have you updated it yet? You haven't put the position:relative where I said. It should be in #contentcont as posted above!!

    Thw hacks will validate you just need to have a space between the universal selector and the html * html will validater but *HTML will not.

    I've just copied the css on your page and changed the *html to * html and it validates except for your opacity filter. I took that out and everything
    else validates fine.

    Let me know if you're still having trouble but I think you've not put the code in the right place.

    Paul

  5. #5
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great, Paul.

    Unfortunately, my curves are screwed now. I put up some more curves for the inner news body, but they are all mixed up now with the old ones (for the main coloumn's edges).

    http://forums.wildfiregames.com/intranet/wfg_main/1/

    Thanks Paul for your great assistance.

  6. #6
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note I put the inner curves now into #contentcont (the news body), but used the code of the old ones. They were position absolutely so that probably can't be it. I have no clue how to work it out, though.

    Big sorry for the additional trouble I have caused with the position:relative within #content instead of #contentcont.

  7. #7
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone has an idea ?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Anyone has an idea
    Sorry I missed this I'll take a look now

    Paul

  9. #9
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are the greatest, paul.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The corners disappeared from #content because they needed a stacking context. So adding position:relative puts them back where they should be.

    The other curves needing moving around and ie and mozilla wanted different margins to maintain the appearance so there's no way but to hack it. I can't work out why there's such a difference and would have to strip the code right down to find out why and then it might just be a bug.

    As mentioned before that although the curves are initially placed correctly they move 1px out of alignment due to rounding errors on the browsers. This is due to the fact that the middle element really doesn't have a width but is defined by margins. It's not possible to place the curves so that they are subject to the same rounding errors as the middle element without a re-design.

    Your top and left bodycurves have a white base instead of a coloured base. I assumed you just did this so you could see them but you need to replace them with solid colour on the base.

    It will also be better for the right hand body curves if you allow more white space to the right on the image itself. This will ensure the background is erazed when the rounding error occurs. Otherwise there will be small sliver of colour showing to the side of the curve as the browsers is resized. (If you do increase the image size then you will need to adjust the margins as required etc.)

    Here's the relevant amended CSS:
    Code:
    #topleftcurve {
    position:absolute;
    left:0px;
    top:-3px;
    margin:0px 0px 0px -1px;
    background:#fff url('http://forums.wildfiregames.com/intranet/wfg_main/1/graphics/curve-top-left.gif') no-repeat;
    height:22px;
    width:18px;
    }
    #toprightcurve {
    position:absolute;
    margin:0px;
    background:#fff url('http://forums.wildfiregames.com/intranet/wfg_main/1/graphics/curve-top-right.gif') no-repeat;
    height:22px;
    width:18px;
    right:0px;
    top:-3px;
    }
    #bottomleftcurve {
    position:absolute;
    margin:0px 0px 0px -1px;
    background:#fff url('http://forums.wildfiregames.com/intranet/wfg_main/1/graphics/curve-bottom-left.gif') no-repeat;
    height:22px;
    width:18px;
    bottom:-2px;
    left:0px;
    }
    #bottomrightcurve {
    position:absolute;
    margin:0px;
    background:#fff url('http://forums.wildfiregames.com/intranet/wfg_main/1/graphics/curve-bottom-right.gif') no-repeat;
    height:22px;
    width:18px;
    right:0px;
    bottom:-2px; 
    }
    #body_topleftcurve {
    position:absolute;
    left:0px;
    top:0px;
    margin:0px 0px 0px -1px;
    background:#fff url('http://forums.wildfiregames.com/intranet/wfg_main/1/graphics/ntop_left.gif') no-repeat;
    height:22px;
    width:18px;
    }
    #body_toprightcurve {
    position:absolute;
    margin:0px;
    background:#fff url('http://forums.wildfiregames.com/intranet/wfg_main/1/graphics/ntop_right.gif') no-repeat;
    height:22px;
    width:18px;
    right:0px;
    top:0px;
    }
    #body_bottomleftcurve {
    position:absolute;
    margin:0px 0px 0px -1px;
    background:#fff url('http://forums.wildfiregames.com/intranet/wfg_main/1/graphics/nbot_left.gif') no-repeat;
    height:22px;
    width:18px;
    bottom:0px;
    left:1px;
    }
    #body_bottomrightcurve {
    position:absolute;
    margin:0px;
    background:#fff url('http://forums.wildfiregames.com/intranet/wfg_main/1/graphics/nbot_right.gif') no-repeat;
    height:22px;
    width:18px;
    right:0px;
    bottom:0px; 
    }
    * html #body_toprightcurve {margin-right:13px}
    * html #body_topleftcurve {margin-left:-4px}
    * html #body_bottomrightcurve {margin:0 13px 70px 0px}
    * html #body_bottomleftcurve {margin:0px 0px 70px -5px}
    * html #toprightcurve {margin-right:-1px}
    * html #bottomrightcurve {margin:0px -2px -1px 0px}
    * html #bottomleftcurve {margin:0px 0px -1px -1px}
    * html #content {height:1%} /*helps ie find the width of content */
    * html #sitenavbottomspacer {height:5px;background:#fff;}
    /* center coloumn */
    #content {
    color:#00005E;
    background:#fff;
    margin:0px 18% 0px 18%;
    padding:2px 1em 0px 1em;
    border-top:3px solid #D1D9EB;
    position:relative;/*for stacking context */
    }
    I think that should more or less sort it.

    Paul

  11. #11
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stunning Paul. I don't know where you get all this knowledge.

    I doubt I will use the inner curves unless i can adjust the images appropriately.

    Thanks again.


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
  •