Submit Your Article Forum Rules

Page 2 of 2 FirstFirst 12
Results 11 to 19 of 19

Thread: AAAAAAAAAAA IE is giving me a headache!!!

  1. #11
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,781
    Oops... Ignore the shims. You have modernizr. The part about this appearing BEFORE your style sheet link still applies. It will speed up page load if the DOM is prepared before the style sheet comes in for parsing.

  2. #12
    Senior Member
    Join Date
    Dec 2003
    Location
    Newnan, GA
    Posts
    155
    I must not be doing something right. It's still jumpy. The navigation. I will move the modernizr.
    Last edited by Anissa; 02-28-2012 at 04:48 PM.

  3. #13
    Senior Member
    Join Date
    Dec 2003
    Location
    Newnan, GA
    Posts
    155
    *does a little dance* I figured it out. Thanks for everything. Is there anything else I need to fix?

  4. #14
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,781
    Order counts in your style sheet. Be sure to put lowest specificity at start of cascade, and have rules progress in order of specificity from there.
    Code:
    CSS
    
    #nav li a{
    display: block;
    text-decoration: none;
    border: solid 1px #728F86;
    line-height: 14pt;
    }
    #nav {
    height: 3px;
    font-family: 'palatino linotype';
    font-size: 14pt;
        width: 800px;
        margin: 0px auto;    
        margin-left: 350px;
        margin-top: 5px;
            list-style: none; }
    #nav li {line-height: 14pt;
    border: solid 1px #728F86;
    background-color: #728F86;
        float: left; 
        padding:5px;}
    #nav li a:link {line-height: 14pt;
    border: solid 1px #728F86;
    color: #F8F8FF;
    }
    #nav li a:visited{line-height: 14pt;
    border: solid 1px #728F86;
    color: #F8F8FF;}
    #nav li a:hover{line-height: 14pt;
    color: #F8F8FF;
    background-color: #987993;
    padding: 2px;
     border: solid 1px #3d3d3d;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    #nav li a:active{line-height: 14pt;
    color: #F8F8FF;
    background-color: #987993;
    padding: 5px;
     border: solid 1px #3d3d3d;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    You could adjust this rule set like so:

    Code:
    /* ??? do you really mean 3 pixels? or should this be more? */
    /* !!! don't forget to include fall back fonts; at the very least, add serif to the list. Font names should be capitalized as they appear in the Fonts folder. */
     /* PT is a type size for printing, not web pages. Use PX or EM or % for units. */
    /* 0 is not a defined value, so it gets no units. */
    #nav {
     height: 3px;
     font-family: 'Palatino Linotype', 'Times New Roman', serif; 
     font-size: 14px;
     width: 800px;
     margin: 0 auto;    
     margin-left: 350px;
     margin-top: 5px;
     list-style: none;
    }
    #nav li {
     line-height: 14px;
     background-color: #728F86;
     float: left; 
     padding: 5px;
    }
    #nav li a{
     display: block;
     text-decoration: none;
     color: #F8F8FF;
     line-height: 14px;
     padding: 2px;
     border: solid 1px #728F86;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
    }
    #nav li a:hover,
    #nav li a:active {
     color: #F8F8FF;
     background-color: #987993;
     border: solid 1px #3d3d3d;
    }

  5. #15
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,781
    Quote Originally Posted by Anissa View Post
    *does a little dance* I figured it out. Thanks for everything. Is there anything else I need to fix?
    Remember to swap out those images. One of them is over 250 KB. They should be only about 2-4 KB each for the size that's displaying. I would add that if the thumbnails are all the same dimensions, they will look better, imho.

    Go through your style sheet and arrange as suggested, according to specificity. Remember that rules lower in the cascade gain in specificity, even if their selectors stay the same. Make sure all your style rules are taking effect, as they should, by order of the cascade, not by whether they are brute forced to work (i.e., with !important or more selectors).
    Last edited by weegillis; 02-28-2012 at 05:17 PM. Reason: added to first paragraph.

  6. #16
    Senior Member
    Join Date
    Dec 2003
    Location
    Newnan, GA
    Posts
    155
    The only one I am having a problem optimizing is the logo. I tried a couple of different optimizers, but I can't get it under 30kb much less in between 2-4.

  7. #17
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,781
    There is a mismatch in physical dimensions on the logo, for starters. Smaller dimensions to match the img attributes (288x175 as opposed to 336x204) might shrink the byte count. The drop shadow is adding overhead. One might try using CSS box-shadow and reduce the image size even more. Just thoughts.

    Looking at the nav, your original height had a nicer mouseover. To restore it,
    Code:
    
    #nav li a{
     ...
    
     line-height: 18px; /* or thereabout */
    
     ...
    }

  8. #18
    Senior Member
    Join Date
    Dec 2003
    Location
    Newnan, GA
    Posts
    155
    I will fix that when I get home from work. thanks again.

  9. #19
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,781
    Quote Originally Posted by weegillis View Post
    Oops... Ignore the shims. You have modernizr. The part about this appearing BEFORE your style sheet link still applies. It will speed up page load if the DOM is prepared before the style sheet comes in for parsing.
    Hogwash. I did some more reading up and was dead wrong. The shim is supposed to load in AFTER the other style sheets, not before. Same goes for Modernizr (which has an option to include the shim). My apologies for misleading everyone.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •