SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 opacity and menu bar question

    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].

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    -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:

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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by speakoff View Post


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

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

  4. #4
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    .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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  9. #9
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Below is all the CSS that's customized beyond Smugmug's pre-written stuff.... thoughts?

    Code CSS:
    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;}

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by speakoff View Post
    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
    Code:
    * 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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You seem to have introduced a stray bracket here:

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

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

  12. #12
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  13. #13
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B... that was it... the stray bracket. Sorry about the crappy code. Thanks for everybody's help.

  14. #14
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! Got it! Thanks, Paul O'B! Now... how did the dropup containers get shifted like that?

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by speakoff View Post
    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):

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

  17. #17
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  22. #22
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Florida
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


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
  •