IE8 opacity and menu bar question

[speakoff]

Hi,

My site is elizabethdavisphoto dot com (sorry, still can't post links).

Would anyone be willing to tell me two things:

-If there's a way to have my menu navigation bar (which is currently on the bottom of all my pages), show up on the top of just two of my pages and stay where it is for every other page? My "Bio" and "Contact" pages both have a lot of content and so my menu bar is all the way at the bottom... might as well be invisible for visitors.

-Update my code to make the opacity setting in my drop-ups menu work in IE8? It works great everywhere, even in IE7, but I've tried a few different things but haven't been able to get it to work. Any assistance would be wonderful.

[PS. still very new at coding, so use small words again].

[Stomme poes]

-If there's a way to have my menu navigation bar (which is currently on the bottom of all my pages), show up on the top of just two of my pages and stay where it is for every other page? My "Bio" and "Contact" pages both have a lot of content and so my menu bar is all the way at the bottom... might as well be invisible for visitors.

Hm, I suppose you could set it to position: fixed or position: absolute on those pages, which can be messy... were these my pages I'd simply (hah) place the html near the top on those pages, but if you're using anything like a template... then you may find it too difficult to place stuff in different places (it's not impossible by any means) and so you could try a css hack like fixed or absolute positioning. It would cover anything sitting on top of those pages (an id on the body for those two pages could let you add enough padding-top there to make room for it, depending on if it's supposed to stay in place or scroll offscreen as people scroll down).

Maybe it's because I don't have scripts on, but your menu was very difficuly for me to read. Light coloured text on a white background don't help me : )

-Update my code to make the opacity setting in my drop-ups menu work in IE8? It works great everywhere, even in IE7, but I've tried a few different things but haven't been able to get it to work. Any assistance would be wonderful.

http://jhop.me/general-stuff/sshhhhh...roperty-in-ie8
(the comments in the sidebar and Paul's link are prolly required reading)

btw you don't need to do this:
.slideshow.slideshow_stretch #slideshow, .slideshow.slideshow_stretch #header, .slideshow.slideshow_stretch #footer {
margin-left: 15px;
margin-right: 15px;
min-width: 785px;
width: auto;
<!--[if IE 6]>
_width: expression(document.documentElement.clientWidth < 815? "785px" : "auto");
<![endif]-->
}

Those IE Conditional Comments are HMTL, not CSS. They do not belong inside stylesheets or the style tag (even if they work). If you want your IE6 styles next to your EveryoneElse styles (and I do as well) then use the Tan hack:

    .slideshow.slideshow_stretch #slideshow, .slideshow.slideshow_stretch  #header, .slideshow.slideshow_stretch #footer {
        margin-left: 15px;
        margin-right: 15px;
        min-width: 785px;
        width: auto;
    }
* html .slideshow.slideshow_stretch #slideshow, * html .slideshow.slideshow_stretch  #header, * html .slideshow.slideshow_stretch #footer { 
  width: auto;
  width: expression(document.documentElement.clientWidth < 815 ? "785px" : "auto");
}

Start out with the width you want IE6 to do if it's got JS turned off (those expressions are really just Javascript, and if it's turned off for security reasons then it won't work in the CSS either) and then the expression.

Also, you have a space before your doctype, which if I recall correctly can cause IE6 to go into Quirks Mode (you really want your doctype to start at char 1, line 1). Sometimes I've gotten IE to not do it so I think it may depend on if there's actually a certain whitespace character before the doctype that sets it off. Any other characters certainly do.

[Paul O'B]

-If there's a way to have my menu navigation bar (which is currently on the bottom of all my pages), show up on the top of just two of my pages and stay where it is for every other page? My "Bio" and "Contact" pages both have a lot of content and so my menu bar is all the way at the bottom... might as well be invisible for visitors.

Theoretically you would need to add a class to those pages to identify them uniquely and assuming your menu bar s a fixed height you could absolutely place the menu to the top of the page while moving the other elements down a bit. Of course you would need to allow the exact room for you drop ups or change then to dropdowns.

You would also need to set up some sort of context for the absolute element (a page wrapper of correct width with position:relative set).

-Update my code to make the opacity setting in my drop-ups menu work in IE8? It works great everywhere, even in IE7, but I've tried a few different things but haven't been able to get it to work. Any assistance would be wonderful.

[PS. still very new at coding, so use small words again].

You lost me there Which browser are you trying to address?

IE8 has a bug where position:relative on a child element cuts of the opacity so you would need to set the child element to static.

The format that works for ie8 is like so:

.menu ul li:hover ul{
    filter:Alpha(Opacity=50);
    -ms-filter: "Alpha(Opacity=50)"; 
  -moz-opacity: 0.7;
  /*opacity for mozilla/safari*/
  opacity: 0.7;
    background:#fff;/* needed for ie8 or you can't get to the drop up menu */
}
.menu ul li ul li,
.menu ul li ul li a{position:static!important}

Edit:


plus what Stomme said above

[speakoff]

Wow, that's a lot of information. Thank you, guys! Let me start by responding to the opacity issue. I tried putting in that -ms-filter for the IE8 fix and not only did it not work, but somehow I have taken away the opacity completely (FF and Chrome too).
Yikes, what did I do?

[RyanReese]

You had to have done something else . No other browser reads that.

But validate your page first. This is invalid (having the conditional comment there).

You don't need the CC there in the first place. The _ hack will target IE6

.allthumbs_stretch #allthumbs_stretch, .allthumbs_stretch #header, .allthumbs_stretch #footer {
        margin-left: 15px;
        margin-right: 15px;
        min-width: 785px;
        width: auto;
        <!--[if IE 6]>
        _width: expression(document.documentElement.clientWidth < 815? "785px" : "auto");    
        <![endif]-->
    }

Just remove the CC there. Along with every other place you have it .

[Stomme poes]

Post what you wrote and the code around it.

As it shows on Paul's site, the order of where the filters are matters. Elements need Haslayout to use the IE opacity filter. Non-IE browsers should ignore the -ms stuff so we'd need to see how that possibly interfered with FF etc.

I didn't know about the IE8 opacity bug. I assume that's on James' site? I didn't even look to see who exactly was being assigned opacity on the page.

[RyanReese]

Post what you wrote and the code around it.

As it shows on Paul's site, the order of where the filters are matters. Elements need Haslayout to use the IE opacity filter. Non-IE browsers should ignore the -ms stuff so we'd need to see how that possibly interfered with FF etc.

I didn't know about the IE8 opacity bug. I assume that's on James' site? I didn't even look to see who exactly was being assigned opacity on the page.

It's not on James's site I think

IE6/7/8 all suffer from the bug. If you rmember the opacity quiz we had Stomme, you would remember the bug. Position:relative got rid of the opacity on the child element (which is what we needed) but a new container with the opacity was needed since everything inside an opacitied parent is supposed to stay that way. Not exactly a desired effect but w/e

http://www.sitepoint.com/forums/showthread.php?t=610506

[speakoff]

Smugmug wrote that CC. I don't have access to change it(could be wrong...i'm still really new at this). My site is a mixed bag of pre-written customizations with my personal customizations built on top of them. I think I need one more post to be able to post code and links... stand by...

[speakoff]

Below is all the CSS that's customized beyond Smugmug's pre-written stuff.... thoughts?

navBottom, .navTop { text-align: center; }
.customNav { font-family: georgia !important; font-size: 18px; color: #212121 !important; list-style-type: none; padding: 0; margin: 0; }
.customNav li{ display: inline; }
.customNav li a, #customNav li a:active, #customNav li a:visited, #customNav li a:link { font-family: georgia !important; font-size: 18px; color: #212121 !important; text-decoration: none !important; }
.customNav li a:hover { font-family: georgia !important; font-size: 18px; color: #017C80 !important; text-decoration: none !important; }
 
/* disabled - save for backup
.navBottom {display: none;}
.homepage .navBottom {display: block;}
.homepage .navTop {display: none;}*/
 
.navBottom {display: block;}
.navTop {display: none;}
 
 
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* [url]http://www.cssplay.co.uk/[/url] */
 
            /* Common Styling */
.menu {
      position: relative;
      display: block;
      z-index: 99;
      padding: -20px 0px 40px 0px; /* spacing around menu - top right bottom left */
      height: 20px;   /* menu container (div .menu) */
      width: 616px;   /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
      margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}
 
.menu ul {
      padding: 10px 0px 10px 20px;  /* this effects menu centering if too big */
      margin:0 auto;              /* this maybe not needed?  */
      list-style-type: none;
}
 
.menu ul li {
   /* margin: 0 2px 0 2px;  */  /* adds space between main menu boxes */
      float:left;    /* WARNING: float right reverses menu */
      position:relative !important;   /*  ***** Carbonite fix ***** */
}
 
.menu ul li a, 
.menu ul li a:visited {
      display: block;
      font-size: 1em;         /* main buttons */
      color: #212121;           /* main buttons text non-hover*/
      text-decoration:none;
      text-align: center;     /* centers text in buttons */
      width: 100px;           /* main box width */
      height: 20px;           /* main box height */
      background: #FFF;    /* main button color */
      padding-left: 0px;
      line-height: 20px;      /* positions text up/down in box */
}
 
 
* html .menu ul li a, .menu ul li a:visited {
      width: 104px; w\idth: 104px;      /* IE main button */
}
 
.menu ul li ul {
      display: none;}
 
       /*                             */
       /* Specific to Non-IE browsers */
       /*                             */
 
.menu ul li:hover a { 
      color: #017C80;       /* main when hover DD */
      background: white;    /* main when hover DD */
}
 
.menu ul li:hover ul {
      display: block;
      position: absolute !important;    /*  ***** Carbonite fix ***** */
      bottom: 15px;   /* was top: -4px; */ /* FF DD up down */
      margin-top: 17px;     /* FF main mouse active vertical */
      left: -32px;            /* FF DD right left */
      width: 104px;         /* unknown */
}
 
  /*opacity for IE5+*/
  filter: alpha(opacity=40);
  /*opacity for older Mozilla browsers*/
  -moz-opacity: 0.7;
  /*opacity for mozilla/safari*/
  opacity: 0.7;
}
 
.menu ul li:hover ul li ul {
      display: none;
}
 
.menu ul li:hover ul li a {
      display: block;
      background: #FFF;  /* DD FO non-hover */
      color: #212121;           /* DD FO non-hover */
      height: auto;
      line-height: 25px;      /* DD FO box height */
      padding: 0px 0px;
      width: 130px;            /* DD FO box width */
}
 
.menu ul li:hover ul li a:hover {
      background: #FFF;     /* DD FO hover */
      color: #017C80;      /* DD FO hover */
}
 
.menu ul li:hover ul li:hover ul {
      display: block;
      position: absolute;
      left: 102px;           /* FF FO right left  */
      top: -27px;            /* FF FO up down  */
      width: 146px;          /* FF FO box width */
}
 
      /*                             */
      /*   Specific to IE browsers   */
      /*                             */
 
.menu ul li a:hover {
   /* text-decoration: none;  */  /* might be needed */
      color: #017C80;               /* main hover */
      background: #FFF;        /* main hover */
}
 
.menu ul li a:hover ul {
      display: block;
      position: absolute !important;    /*  ***** Carbonite fix ***** */
      top: 2px;                /* DD container up down */
      background: none;        /* gets rid of DD container */
      margin-top: 7px;         /* DD container up down */
      right: 0px;               /* DD right left */
}
 
.menu ul li a:hover ul li a {
      display: block;
      background: #FFF;        /* IE DD color non-hover */
      color: #212121;               /* IE DD color non-hover */
      height: auto;
      line-height: 20px;        /* IE DD FO box height */
      padding: 0px; 
      width: 0px;             /* IE DD FO box */
}
 
.menu ul li a:hover ul li a ul {
      visibility:hidden;
      position:absolute;
      height: 0;
      width: 0;
}
 
.menu ul li a:hover ul li a:hover {
      background: #FFF;              /* DD FO hover */
      color: #017C80;                   /* DD FO hover */
}
 
.menu ul li a:hover ul li a:hover ul {
         display: block;
         position: absolute;  
         top: -22px;                    /*   FO up down    */
         color: #000000;                /*   unknown       */
         left: 147px;                   /*   FO right left */
} 
 
          /*ADD TO FIX IE*/
          /* a hack so that IE5.5 faulty box model is corrected */
 
* html .menu a, * html .menu a:visited {
         width: 125px; 
         w\idth: 139px;
}
 
    /* another hack for IE5.5 */
 
* html .menu ul ul {
         top: 30px;
         t\op: 31px;       /* IE gap between main bar and the dropdown items */
}
 
          /* style the table so that it takes no part in 
             the layout - required for IE to work */
.menu table {
         position:absolute;
         top:auto 0; left:0;
}
 
      /* yet another hack for IE5.5 */
 
* html .menu ul ul a {
         width: 125px;             /* unknown */
         w\idth: 104px;             /* DD FF width */
}
 
         /*END EXTRA ADDS FOR IE*/
 
          /* ADD TO HIDE EXTRA LEVELS */
          /* make the 2nd level visible when 
             hover on 1st level list OR link */
.menu ul a:hover ul,  /* IE */
.menu ul:hover ul {   /* FF */
         visibility:visible; 
}
 
 
 
 
 
 
/* START bio gallery 10669249 */
 
.gallery_10669249 #albumDescription { 
    margin-top: 10px;    /* gap from navbar at top */
    background: none;    /* background of description box */
    padding: 20px 40px 40px 40px;    /* top right bottom left */
}                                    /* spacing inside box from edges */
 
.gallery_10669249 .myPhoto {
    float: left;     /* allows the text to flow to the right */
    padding: 5px 20px 5px 0px;  /* top right bottom left        */
}                            /* spacing of text around photo */
 
.gallery_10669249 .myPhoto img {
   border: none;    /* add border around photo */
}
 
.gallery_10669249.myTitle {
    font-family: georgia; 
    font-size: 150%;
    color: #444;
    font-weight: bold;
    text-align: left;
    margin: 0 auto 30px auto;    /* top right bottom left */
}
 
.gallery_10669249 .myText {
    font-family: georgia; 
    font-size: 110%;
    color: #444;
    font-weight: normal;
    text-align: justify;
}
 
.gallery_10669249 .myEmail {color: #444;}
.gallery_10669249 .myEmail:hover {color: #017C80;}
 
       /* things you can hide on page */
.gallery_10669249 .nophotos h3, /* if no photos in gallery */
.gallery_10669249 #albumNav_top,
.gallery_10669249 #albumNav_bottom,
.notLoggedIn .gallery_10669249 .journal_entry,  /* hides photos in gallery */
.notLoggedIn .gallery_10669249 #breadcrumb {display: none;}
 
       /* END bio gallery 10669249 */
 
 
 
 
 
/* START contact gallery 10669255 */
 
.gallery_10669255 #albumDescription { 
    margin-top: 10px;    /* gap from navbar at top */
    background: none;    /* background of description box */
    padding: 20px 40px 40px 40px;    /* top right bottom left */
}                                    /* spacing inside box from edges */
 
.gallery_10669255 .myPhoto {
    float: left;     /* allows the text to flow to the right */
    padding: 10px 30px 10px 10px;  /* top right bottom left        */
}                            /* spacing of text around photo */
 
.gallery_10669255 .myPhoto img {
   border: none;    /* add border around photo */
}
 
.gallery_10669255.myTitle {
    font-family: georgia; 
    font-size: 150%;
    color: #444;
    font-weight: bold;
    text-align: left;
    margin: 0 auto 30px auto;    /* top right bottom left */
}
 
.gallery_10669255 .myText {
    font-family: georgia; 
    font-size: 110%;
    color: #444;
    font-weight: normal;
    text-align: justify;
}
 
.gallery_10669255 .myEmail {color: #444;}
.gallery_10669255 .myEmail:hover {color: #017C80;}
 
       /* things you can hide on page */
.gallery_10669255 .nophotos h3, /* if no photos in gallery */
.gallery_10669255 #albumNav_top,
.gallery_10669255 #albumNav_bottom,
.notLoggedIn .gallery_10669255 .journal_entry,  /* hides photos in gallery */
.notLoggedIn .gallery_10669255 #breadcrumb {display: none;}
 
       /* END contact gallery 10669255 */
 
 
 
 
#filmstrip #photos {display:none;}

[RyanReese]

Below is all the CSS that's customized beyond Smugmug's pre-written stuff.... thoughts?

Not a huge fan of the spacing of the CSS...I notice he is using !important in there sometimes when there is absoltuely no need for it..he is using px font sizes which is horrible because there is no text resizing for that..

The dropdown is alright because it was coded by a good CSS guy..but the smugmug guy is using box model hacks for IE5.5 which I guess is ok..but unneccesary
Like here

* html .menu ul li a, .menu ul li a:visited {
      width: 104px; w\idth: 104px;      /* IE main button */
}

The * html selects IE6 and down. So the backslash hack isn't needed. You also can't mix the * html (to target IE6) and then a regular selector like the .menu ul li a:visited. So that's wrong.

I'm not going to go thorugh all the CSS, but on a quality scale I'd rank it pretty low

[Paul O'B]

You seem to have introduced a stray bracket here:

 

.menu ul li:hover ul {

      display: block;

      position: absolute !important;    /*  ***** Carbonite fix ***** */

      bottom: 15px;   /* was top: -4px; */ /* FF DD up down */

      margin-top: 17px;     /* FF main mouse active vertical */

      left: -32px;            /* FF DD right left */

      width: 104px;         /* unknown */

} /* <<<<<  what's this ? - remove it */ 

 

  /*opacity for IE5+*/

  filter: alpha(opacity=40);

  /*opacity for older Mozilla browsers*/

  -moz-opacity: 0.7;

  /*opacity for mozilla/safari*/

  opacity: 0.7;

}

This rule will kill IE's opacity for the reason I already mentioned:

.menu ul li {

   /* margin: 0 2px 0 2px;  */  /* adds space between main menu boxes */

      float:left;    /* WARNING: float right reverses menu */

      position:relative !important;   /*  ***** Carbonite fix ***** */

}

Add the css from my original post and place it at the end of the CSS files and it will work. I've tested locally so I know it's working.

[speakoff]

Sad day. Well, being who I am... a photographer and not a coder... do you have any suggestions for how to, at the very least, fix the 40-ish % opacity back to what it was for the browsers other than IE? Opacity just on the dropups.

[speakoff]

Thanks Paul O'B... that was it... the stray bracket. Sorry about the crappy code. Thanks for everybody's help.

[speakoff]

Ah! Got it! Thanks, Paul O'B! Now... how did the dropup containers get shifted like that?

[RyanReese]

If you mean it being shifted over to the right, then it's the padding on the <ul>. I realize you set it manually on the top <ul>. But on ".menu ul li ul" you will need the padding set to 0

[Paul O'B]

how did the dropup containers get shifted like that?

If you mean in Ie8 then I don't think you've set enough width on the ul. The anchor is 130px wide but you have the parent ul smaller.

Try something like this (untested):

.menu ul li:hover ul {width: 150px;}

[speakoff]

Wow. It works perfectly. Thank you, thank you, thank you.

Last question... and please forgive my ignorance.. when everybody was talking about the fact that I need to "validate" my page... what does that mean? Is that conditional comment bad?

[RyanReese]

Conditional comments aren't bad, however it was invalid to have the HTML comment (that's waht it is basically) inside <style>
HTML validator
CSS validator

Off Topic:

Which solutino did you use. Mine or Pauls?

[speakoff]

Re: validation... Ohhh, I see. So much to learn. If Smugmug automatically puts those things in there, does that mean I can't change it? I guess that's probably something I need to take up with Smugmug, eh?

I used Paul's solution...

Thank you so much, everybody, for your help. Ya'll are brilliant and I really appreciate it.

[RyanReese]

Well normally you should be able to edit whtaever they give you. I don't see a reason why you can't unless they specifically made it so you can't, which would be stupid .

[Stomme poes]

Re: validation... Ohhh, I see. So much to learn. If Smugmug automatically puts those things in there, does that mean I can't change it? I guess that's probably something I need to take up with Smugmug, eh?

I'm going to assume that SmugSmug is a program and not a dude. This is kinda something we hand-coders are always fighting against.

You're a photographer and you just want a site. You're artistic enough that you know exactly how you want it to look and act. But you're not a coder. So you go to some pre-made thing or service or template (one reason people use stuff like Drupal and Joomla too). But we call this a Lemon Market because if some cars are lemons and you're not a mechanic, how can you choose a car to buy? They'll charge you as much for the lemons as for the good ones because they know you don't know the difference.

Absolutely bad code aside, there's also the template problem. Code can be well-written, but it's still going to be ginormously bigger than you will ever need, and as Gary says, "the more code there is, the more code there is to break"... or maybe it was deathshadow who says that, but whatever, it's true. So even when it's as well-written as possible, it's still easier to add bugs as you work with the code because it's necessarily bloated. Hm, is that an oxymoron?

I think you can go ahead and alert SmugSmug of the issues, because if he/they care then they may want to fix them. But they might not. If you choose to stay with this sort of thing, then just try not to change too much of it : ) It's kinda delicate. Also, a lot of themes and templates are editable, but only easily by someone who's already a decent hand-coder.

Those !importants are pretty nasty, mostly because they interfere with any particular user's own personal stylesheet (anyone can make a stylesheet in their browser, and the rules say it's supposed to override the styles on the page, and !important is supposed to help users override stuff... which becomes a bit of a problem when the author/site is also using it).

As far as changing stuff, while you should be able to, if you don't know why they did it, you might possibly be breaking something somewhere else. So if you make a change to their code (after making a backup of your site!!), go check all your other pages to make sure there wasn't breakage somewhere.

[speakoff]

Thanks Stomme,

Yep. You pretty much summed it up. I guess I'll contact Smugmug (correct... a program for developing websites for photographers who know nothing of coding) about the !importants and see if there's a better way.
Someday, after I've hit it big, maybe I will have the money to pay someone to make a really great site. Until then, though, I'll try to keep my changes to a minimum. Thanks for all the advice and patience with my ignorance.

Liz