SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member MatthewR1985's Avatar
    Join Date
    Mar 2004
    Location
    San Diego, CA
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Streamlining

    Hi there, I was asked to create a new thread where you can review the flaws and/or point out redundant coding in the CSS of my site.

    The site URL: http://matthewr1985.freeservers.com

    The CSS:
    Code:
          BODY {
                /* gundam background */
                /* background:url(http://matthewr1985.freeservers.com/...ut/site-bg.PNG) no-repeat fixed 85% 85%; */
                /* angel wing background */
                background:url(http://matthewr1985.freeservers.com/...t/site-bg2.PNG) no-repeat fixed center center;
                margin:0px;
    	    font:normal normal 7pt arial;
    	    color:#000000;
                text-align:center;
                cursor:default;
                overflow:auto;
    	    }     
    
          INPUT {
                border:1px solid #bbbbbb;
                background:transparent;
                font:normal bold 7pt verdana;
                color:#1e90ff;
                cursor:default;
                }
    
          TEXTAREA {
                border:1px solid #bbbbbb;
                background:transparent;
                font:normal bold 7pt verdana;
                color:#1e90ff;
                cursor:default;
                overflow:auto;
                }
             
          IFRAME {
                border:1px solid #eeeeee;
                width:251px;
                height:150px;
                }
    
          FORM {
                margin-top:0px;
                margin-bottom:0px;
                float:left; 
                }
    
          TABLE {
                width:100%;           
                }
    
          HR {
                width:100%;
                border-bottom:1px dotted #000000;
                }      
    
          .invisible {
                width:551px;
                /* opacity used with gundam bg */
                /* filter:alpha(opacity=90); */
                /* opacity used with angel wing bg */
                filter:alpha(opacity=75) 
                }
    
          .main {
                background:#ffffff;
                border:1px dashed #000000;
                text-align:center;
                width:100%;
                padding:10px 10px;
                }
    
          .heading {
                letter-spacing:-2px;
                font:normal 900 x-large arial;
    	    color:#000000;
    	    }
    
          .column1 {
                float:left;
                width:50%;
                margin-right:2px;
                }
    
          .column2 {
                float:right;
                width:50%;
                margin-left:2px;
                }
    
          .switchcontent {
                display:none;
                background:#FFFFFF;
                border:1px dashed #bbbbbb;
                padding:10px 10px;
                text-align:justify; word-spacing:1px;
                margin-bottom:4px;
                width:256px;
                line-height:10px;
                }
    
          .subheadon {
                background:url(http://matthewr1985.freeservers.com/...subhead-bg.PNG) repeat-x fixed top left;
                font:normal bold 8pt arial;
    	    color:#000000;
                vertical-align:top;
                border:1px solid #000000;
                text-align:left;
                margin-bottom:4px;
                width:100%;
                padding-left:1px;
                }
    
          .subhead {
                background:#ffffff;
                font:normal bold 8pt arial;
    	    color:#000000;
                vertical-align:top;
                border:1px solid #000000;
                text-align:left;
                margin-bottom:4px;
                width:100%;
                padding-left:1px;
                }
                
          .footer {
                font-weight:normal normal xx-small arial;
                color:#bbbbbb;
                }
     
          .clock {
                font-weight:bold;
                font-size:8pt;
                }
    
          .gbrow {
                background:#eeeeee;
                }
    
          .gbleft {
                width:50%;
                font:normal bold 8pt arial;
                }
    
          .gbright {
                width:50%;
                }
    
          #showimage {
                position:absolute;
    	    visibility:hidden;
                filter:alpha(opacity=90);
                border:1px dashed #000000;
                z-index:1000;
                }
    
          #dragbar {
                background-color:#ffffff;
    	    min-width:100px; /*NS6 style to overcome bug*/
                z-index:1000;
                filter:alpha(opacity=90);
    	    }
    
          #dragbar #closetext {
    	    font-weight:bold;
                margin-right:1px;
                z-index:1000;
                filter:alpha(opacity=90);
    	    }
    
          #dhtmltooltip {
                position:absolute;
                width:150px;
                border:1px solid #000000;
                background-color:#ffffff;
                visibility:hidden;
                z-index:100;
                text-align:left;
                /* gundam bg tootip opacity */
                /* filter:Alpha(opacity=90); */
                /* angel wing tooltop opacity */
                filter:Alpha(opacity=75)
                padding:2px;
                }
    
          A:link {
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:visited	{
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:active {
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:hover {
    	    text-decoration:underline;
    	    color:#1e90ff;
    	    cursor:default;
    	    }
    
          A:link.action {
                font:normal 900 8pt arial;
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:visited.action {
                font:normal 900 8pt arial;
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:active.action {
                font:normal 900 8pt arial;
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:hover.action {
                font:normal 900 8pt arial;
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }

  2. #2
    Il condottiere Francesco Sforza's Avatar
    Join Date
    Mar 2004
    Location
    Cracow - Poland
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well. I'd say you don't need to set cursor: default; as it is default

    When you set font it's better to offer whole font family instead of just one. There's a chance someone may not have Verdana. So it's better doing it like this:
    font:normal 8pt verdana, arial, helvetica, sans-serif;

    You are using IE filters for opacity. Mozilla also has this feature. CSS propperty that takes care of it is called -moz-opacity. To set it to the same value used for IE just add: -moz-opacity: .75; (it's the same as 75 for IE)

    Regards

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can reduce all this:
    Code:
    A:link {
    		text-decoration:none;
    		color:#000000;
    		cursor:default;
    		}
    
    	  A:visited	{
    		text-decoration:none;
    		color:#000000;
    		cursor:default;
    		}
    
    	  A:active {
    		text-decoration:none;
    		color:#000000;
    		cursor:default;
    		}
    
    	  A:hover {
    		text-decoration:underline;
    		color:#1e90ff;
    		cursor:default;
    		}
     A:link.action {
    			font:normal 900 8pt arial;
    		text-decoration:none;
    		color:#000000;
    		cursor:default;
    		}
    
    	  A:visited.action {
    			font:normal 900 8pt arial;
    		text-decoration:none;
    		color:#000000;
    		cursor:default;
    		}
    
    	  A:active.action {
    			font:normal 900 8pt arial;
    		text-decoration:none;
    		color:#000000;
    		cursor:default;
    		}
    
    	  A:hover.action {
    			font:normal 900 8pt arial;
    		text-decoration:none;
    		color:#000000;
    		cursor:default;
    		}
    to this:
    Code:
    a {
    	text-decoration:none;
    	color:#000000;
    	}
    a:hover {
    	text-decoration:underline;
    	color:#1e90ff;
    }
    a.action {font:normal 900 8pt arial;}
    a.action:hover {color:#000}
    Also if these 2 columns are supposed to fit inside a 100% container then they won't fit.
    Code:
    .column1 {
    			float:left;
    			width:50%;
    			margin-right:2px;
    			}
    
    	  .column2 {
    			float:right;
    			width:50%;
    			margin-left:2px;
    			}
    100% + 4px will be too wide for a 100% container (if that is what you are doing with it.)

    Paul

  4. #4
    SitePoint Member MatthewR1985's Avatar
    Join Date
    Mar 2004
    Location
    San Diego, CA
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    About setting "cursor:default", the reason I do that is to make the arrow cursor appear over every element of my site. For example, there isn't that tacky little hand when you mouseover a link, or that boring little text cursor over the text or form elements. Subtle continuity was what I had in mind.

    The reason I defined the visited and the active link status was to tell the browser not to display the default purple and red, which aren't a part of the color scheme of my site. Unless you are saying that the browser reads from just the "A" property and applies it to normal, active, AND visited, I'm not sure what NOT defining the active and visited link status will accomplish.

    About the column width comment, here's my reasoning: The columns will be 50% of the remaining width after you subtract the column margin from the width of "main" (551px) and the horizontal padding of "main" (10px). 551 - 20 - 4 = the width of one column. I suppose I could use absolute px in every width declaration, but that would take time to figure out and probably cause problems with alignment.

    Correct me if I'm wrong in any argument.

    I have also made some changes to the HTML and CSS.

    The new CSS:
    Code:
          BODY {
                background:url(http://matthewr1985.freeservers.com/...t/site-bg2.PNG) no-repeat fixed center center;
                margin:0px;
    	    font:normal normal 7pt arial;
    	    color:#000000;
                text-align:center;
                cursor:default;
                overflow:auto;
    	    }     
    
          INPUT {
                border:1px solid #bbbbbb;
                background:transparent;
                font:normal bold 7pt verdana;
                color:#1e90ff;
                cursor:default;
                }
    
          TEXTAREA {
                border:1px solid #bbbbbb;
                background:transparent;
                font:normal bold 7pt verdana;
                color:#1e90ff;
                cursor:default;
                overflow:auto;
                }
             
          IFRAME {
                border:1px solid #eeeeee;
                width:251px;
                height:150px;
                }
    
          FORM {
                margin-top:0px;
                margin-bottom:0px;
                float:left; 
                }
    
          TABLE {
                width:100%;           
                }
    
          HR {
                width:100%;
                border-bottom:1px dotted #000000;
                }      
    
          .main {
                background:#ffffff;
                border:1px dashed #000000;
                text-align:center;
                width:551px;
                padding:10px 10px;
                filter:alpha(opacity=75) 
                }
    
          .heading {
                letter-spacing:-2px;
                font:normal 900 x-large arial;
    	    color:#000000;
    	    }
    
          .column1 {
                float:left;
                width:50%;
                margin-right:2px;
                }
    
          .column2 {
                float:right;
                width:50%;
                margin-left:2px;
                }
    
          .switchcontent {
                display:none;
                text-align:left;
                background:#FFFFFF;
                border:1px dashed #bbbbbb;
                padding:10px 10px;
                margin-bottom:4px;
                width:256px;
                line-height:10px;
                }
    
          .subheadon {
                background:url(http://matthewr1985.freeservers.com/...subhead-bg.PNG) repeat-x fixed top left;
                font:normal bold 8pt arial;
    	    color:#000000;
                vertical-align:top;
                border:1px solid #000000;
                text-align:left;
                margin-bottom:4px;
                width:100%;
                padding-left:1px;
                }
    
          .subhead {
                background:#ffffff;
                font:normal bold 8pt arial;
    	    color:#000000;
                vertical-align:top;
                border:1px solid #000000;
                text-align:left;
                margin-bottom:4px;
                width:100%;
                padding-left:1px;
                }
                
          .footer {
                font:normal normal 6pt arial;
                color:#bbbbbb;
                }
     
          .title {
                font:normal bold 8pt arial;
                }
    
          .gbmain {
                width:100%;
                font:normal bold 8pt arial;
                text-align:left;
                }
    
          .gbrow1 {
                background:#eeeeee;
                height:20px;
                }
               
          .gbrow2 {
                height:20px;
                }
    
          .gbcol1 {
                width:50%;
                float:left;
                }
    
          .gbcol2 {
                width:50%;
                float:right;
                }
    
          #showimage {
                position:absolute;
    	    visibility:hidden;
                filter:alpha(opacity=90);
                border:1px dashed #000000;
                z-index:1000;
                }
    
          #dragbar {
                background-color:#ffffff;
    	    min-width:100px; /*NS6 style to overcome bug*/
                z-index:1000;
                filter:alpha(opacity=90);
    	    }
    
          #dragbar #closetext {
    	    font-weight:bold;
                margin-right:1px;
                z-index:1000;
                filter:alpha(opacity=90);
    	    }
    
          A:link {
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:visited	{
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:active {
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:hover {
    	    text-decoration:underline;
    	    color:#1e90ff;
    	    cursor:default;
    	    }
    
          A:link.action {
                font:normal 900 8pt arial;
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:visited.action {
                font:normal 900 8pt arial;
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:active.action {
                font:normal 900 8pt arial;
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }
    
          A:hover.action {
                font:normal 900 8pt arial;
    	    text-decoration:none;
    	    color:#000000;
    	    cursor:default;
    	    }

  5. #5
    Il condottiere Francesco Sforza's Avatar
    Join Date
    Mar 2004
    Location
    Cracow - Poland
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If there's no hand over the link it will be confusing to people. How do I know if it's link and not some kind of a flashing thingy that changes when I hover it? There are some things on the net people are used to and making them change their habits may be risky.
    If you define links as Paul O'B showed you you will get exactly the same result regarding colors. Browsers will apply the same color to all links states except hover which has it's own color definition.

    Regards

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks Francesco that's exactly what I was going to say

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    About the column width comment, here's my reasoning: The columns will be 50% of the remaining width after you subtract the column margin from the width of "main" (551px) and the horizontal padding of "main" (10px). 551 - 20 - 4 = the width of one column. I suppose I could use absolute px in every width declaration, but that would take time to figure out and probably cause problems with alignment.

    Correct me if I'm wrong in any argument.
    If you make an element 50% then it wil be 50% of the available content width for that element (regardless of broken box model). However if yoy add margins to it then it will be too big to fit in the 100%.

    However IE as usual will do strange things It will sometimes expand the container when it shouldn't (when margins are small) so you should check in mozilla to see what really should happen.

    Paul

  8. #8
    SitePoint Member MatthewR1985's Avatar
    Join Date
    Mar 2004
    Location
    San Diego, CA
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok ... points taken ... thanks guys! Oh, BTW, I actually took the time to set all the widths in absolute px (as well as some other optimizations). Check out the CSS if possible (I'm not going to post it as this thread is already too long ).


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
  •