SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    collapsing /disappearing elements...

    YES, it's another IE issue.

    I've got this site working on FF, Safari, Chrome and Opera. but IE is doing it's usual mess.

    Some notes: I know the CSS3 wont work with IE, and I am not concerned about minor aesthetic differences. What has me pulling my hair is:

    1) The site logo is not displaying at all. I used AP to position a logo above text in it's element ( this way the name of the site will be there if images are turned off). Again it works fine in all other browsers, but IE just doesn't show the element at all. I thought it was that IE didn't like the Height/width:inherit... or that I could get it to have layout ( I used zoom:1 to give it layout). But it still didnt work at all...

    ODD NOTE, I used a similar method to display the motto a an image over the text .. and it's working fine.


    2)The main navigation has another "mystery" behavior... icons images are half-collapsing ( these are bg images of a SPAN, I am assuming that IE is half rendering the element). I tried using zoom:1 to give it layout.. to no avail.

    3) on the sidebar, here is a par that supposed to be notepaper, it's supposed to have a torn edge at its bottom. As well as a part bellow it that is supposed to resemble a post-it note. in either cases the element is not being rendered ( or the rule is begin ignored by IE). the only thing I could think of for this was that that element has multiple classes "class='clear end'" but IE7 and above support multiple classes doesnt it?




    The link to the site:http://raym31.home.comcast.net/~raym31/projects/rose


    RELEVANT CSS:
    general:

    .center { margin: 0 auto; width: 960px }
    .clr { visibility: hidden; display: block; height: 0; clear: both }
    .clear { display: block; clear: both }
    .clrf:after { visibility: hidden; display: block; height: 0; clear: both; content: "" }
    .hide { display: none }

    1)

    #head { background: #2d452f url(../images/design/rose-chalkboard.jpg); position: relative; top: 6.5em }
    #head_wavs { background: url(../images/design/rose-wave.jpg) repeat-x left bottom; padding-bottom: 48px }
    #brand { position: relative; height: 274px }
    #motto { color: #e4be0d; font-size: 230%; font-family: NewsGothic-medium, "Arial Narrow", Arial, helvetica, san-serif; line-height: 90%; background: url(../images/design/rose-motto.gif) no-repeat left top; text-indent: -9999px; position: absolute; z-index: 12; top: 135px; bottom: 49px; left: 360px; width: 400px }
    #motto span { font-size: 55%; font-family: NewsGothic-medium, "Arial Narrow", Arial, helvetica, san-serif; line-height: 110%; text-indent: -9999px; display: block }
    #brand_img { background: url(../images/design/rose-student_05.jpg) no-repeat left top; position: absolute; right: 0; bottom: 0; width: 320px; height: 274px }
    #elbow { background: url(../images/design/rose-student_06.png) no-repeat left top; display: block; position: absolute; z-index: 10; top: 100%; right: 29px; width: 235px; height: 57px }
    /*#hand{display: block; position:absolute;background : url(../images/design/rose-student_02.png) no-repeat left top;width: 78px; height: 84px; right:106px; bottom:100%; z-index: 10}*/
    #logo { color: #fff; font-size: 200%; text-indent: 20px; padding-top: 50px; position: absolute; top: 0; left: 0; width: 335px; height: 182px }
    #logo .pasteback { color: #fff; background: url(../images/design/rose-logo.jpg) no-repeat left top; display: block; padding-top: inherit; position: absolute; top: 0; left: 0; width: inherit; height: inherit }
    #brand address { color: #fff; font-size: 80%; font-style: normal; line-height: 90%; text-align: center; position: relative; top: 222px; left: 5px; width: 335px }
    /*#Main_nav{border-top:1px solid #f5f5f5; background: url(../images/design/rose_nav_bg.gif) repeat-x left top #A6A592;padding:3px 0}*/



    2)

    #Main_nav { background: #3a84b3 }
    #NavList { background: #000 url(../images/design/nav/black/Untitled-1_05.gif) repeat-x; margin: 0 auto; padding: 0 10px; position: relative; width: 938px; border: solid 1px #777; -moz-border-radius: 10px; -moz-box-shadow: 0 0 5px #000; -webkit-border-radius: 10px; -webkit-box-shadow: 0 0 5px #000; border-radius: 10px; box-shadow: 0 0 5px #000 }
    #NavList li { float: left }
    #NavList li + li { background: url(../images/design/nav/black/Untitled-1_03.gif) no-repeat left center; padding-left: 4px }
    #NavList li a { color: #f7f7f7; font-family: Arial; text-decoration: none; display: block; margin-bottom: -1px; min-height: 28px; border-bottom: 1px solid transparent }
    #NavList li a:hover, .topsP #NavList .topsP a, .ptaP #NavList .ptaP a, .mainP #NavList .mainP a, .officeP #NavList .officeP a, .resourceP #NavList .resourceP a, .prinP #NavList .prinP a,.libP #NavList .libP a { color: #87add1; background: url(../images/design/nav/Hilight.png) repeat-x left bottom; border-bottom: 1px solid #e9c10d; text-shadow: 0 0 4px #403536 }
    .topsP #NavList .topsP a, .ptaP #NavList .ptaP a, .mainsP #NavList .mainP a, .officeP #NavList .officeP a, .resourceP #NavList .resourceP a, .prinP #NavList .prinP a,.libP #NavList .libP a { color: #e9c10d }
    #NavList li a span { background-repeat: no-repeat; background-position: 3px center; display: block; padding: 0.5em 0.4em 0.5em 50px }
    li.mainP a span { background-image: url(../images/design/nav/icons/home.png) }
    li.libP a span { background-image: url(../images/design/nav/icons/lib.png) }
    li.prinP a span { background-image: url(../images/design/nav/icons/Princpl.png) }
    li.ptaP a span { background-image: url(../images/design/nav/icons/pta.png) }
    li.topsP a span { background-image: url(../images/design/nav/icons/TOPs.png) }
    li.officeP a span { background-image: url(../images/design/nav/icons/front.png) }
    li.resourceP a span { background-image: url(../images/design/nav/icons/res.png) }
    li.mainP a:hover span { background-image: url(../images/design/nav/icons/home_on.png) }
    li.libP a:hover span { background-image: url(../images/design/nav/icons/lib_on.png) }
    li.prinP a:hover span { background-image: url(../images/design/nav/icons/Princpl_on.png) }
    li.ptaP a:hover span { background-image: url(../images/design/nav/icons/pta_on.png) }
    li.topsP a:hover span { background-image: url(../images/design/nav/icons/TOPs_on.png) }
    li.officeP a:hover span { background-image: url(../images/design/nav/icons/front_on.png) }
    li.resourceP a:hover span { background-image: url(../images/design/nav/icons/res_on.png) }
    #NavList li a span span { background-image: none; text-transform: uppercase; display: block; padding: 0 }
    #NavList li a span span + i { color: gray; font-size: 80%; font-style: normal; line-height: 0.875em; text-transform: capitalize; display: block; min-height: 1.15em; text-shadow: none }
    #NavList li a:hover span span { background: transparent }

    3)
    .notebookside { background: #e8e7d4 url(../images/design/sidebar_ruledpaper_320_04.jpg) repeat-y left -5px }
    .notebookside .wrap { background: url(../images/design/sidebar_ruledpaper_320_02.jpg) no-repeat left top; padding: 80px 30px 0 }
    .right div + .notebookside .wrap { background: url(../images/design/sidebar_ruledpaper_02b_down.jpg) no-repeat left top }

    .notebookside .end { background: url(../images/design/bottom-sidebar_06.jpg) no-repeat left bottom; padding-bottom: 60px }
    .postitside { background: #eae397 url(../images/design/postiy_03.jpg) repeat-y; position: relative }
    .postitside .wrap { background: url(../images/design/postiy_02.jpg) no-repeat left top; padding: 60px 30px 0 }
    .right div + .postitside .wrap { background: url(../images/design/postiy_down_02.jpg) no-repeat left top }
    .postitside .end { background: url(../images/design/postiy_05.jpg) no-repeat left bottom; padding-bottom: 40px }
    .postitside .clip { background: url(../images/design/clipup.jpg) no-repeat left top; margin: -60px -30px 0 0; width: 94px; height: 80px; float: right }
    .right div + .postitside .clip { background: url(../images/design/clipdown.jpg) no-repeat left top }
    .postitside .pencil { background: url(../images/design/shiny-pencil.png); position: absolute; right: -10px; bottom: -10px; width: 160px; height: 112px; no-repeat: }


    IE FIX ATTEMPTS:
    * html #login { top: -366px }
    * html #gaia_loginform { background-image: none; width: 6.45em }
    * html #motto { height: 49px }
    * html #brand { height: 314px }
    * html #brand address { top: -90px }

    * html #NavList { width: 960px }
    * html #NavList li a, * html #NavList li a span { float: left }
    * html #NavList li a span i { display: inline; clear: both }
    /* PNG FIX for IE*/
    * html img, * html .png, * html #NavList li a:hover, * html .topsP #NavList .topsP a, * html .ptaP #NavList .ptaP a, * html .mainsP #NavList .mainP a, * html .officeP #NavList .officeP a, * html .resourceP #NavList .resourceP a, * html .prinP #NavList .prinP a { behavior: url(css/CSS_resources/iepngfix.htc) }
    * html #search {border-bottom: none }

    * html #NavList li a span, * html #NavList li a ,* html #NavList li {zoom:1} /*haLayout*/
    * html #logo .pasteback{ width: 335px; height: 182px; }
    * html #login_w {height:6.5em}


    Any suggestion will be greatly appreciated...

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    1) The hand on the right not matching up with another. Set that to top:0 and not bottom
    The logo, set the width/height fo the element to match the background

    Code:
    #brand_img{top:0;bottom:auto;}
    #logo .pasteback{width:335px;height:232px;}
    2) The <span>'s there need haslayout. Use zoom, or another haslayout trigger if you want it valid
    Code:
    #NavList span{zoom:1;}
    3) When in doubt, haslayout
    Code:
    .postitside .end{zoom:1;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ryan, thanks for your help.

    One Q tho... didnt I set hasLayout in my fix attempts with: * html #NavList li a span, * html #NavList li a ,* html #NavList li {zoom:1} , and doesnt anything with stated dimentions (height/widht) get hasLayout??

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yes I guess I missed that. I am not quite sure why it didn't work, although I haven't even looked for a possible reason.

    If you really want an answer then put the page back to it's original format (you know hte fixes now anyway) and I'll do my best . It's probably something simple.

    You don't want to set haslayout to everything though. That could cause inadvertent side effects

    And yes, stated dimensions=lashayout
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    ok,
    I took out the conditional CSS file ( the link is still in the HTML, but the file is deleted) and for good measure commented out all the star hacks in the main style sheets.

    yeah, i have to admit I thought of *{zoom:1} but I would figure if it was that easy people would have been doing it already.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I do that just to see for debugging if haslayouts the cause. I'm normally good with guessing htat sorta stuff.

    It's not a good idea trust me
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •