Collapsing /disappearing elements

HTML & CSS
1

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.

  1. 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 }

#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}/

#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 }

.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
  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 :slight_smile:

#brand_img{top:0;bottom:auto;}
#logo .pasteback{width:335px;height:232px;}
  1. The <span>'s there need haslayout. Use zoom, or another haslayout trigger if you want it valid
#NavList span{zoom:1;}
  1. When in doubt, haslayout :slight_smile:

.postitside .end{zoom:1;}
3

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

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 :wink:

And yes, stated dimensions=lashayout :slight_smile:

5

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

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 :wink: