...

View Full Version : Does my CSS look OK?



TomKroscavage
12-07-2009, 05:15 PM
Hi, I've been working on the CSS on my website for a few years now learning as I go. Does this look sound? It is a wordpress site "tekindoor" the doc type is DTD XHTML 1.0 Transitional. Any input would be greatly appreciated. Is posting a link OK?



body {background:#dedeed; border:0 none; color:#000000; font-family:arial,georga,times-new-roman; margin:0; padding:0;}
.container {width:100%;max-width:1600px;min-width:800px;}
#header {background: #0000cc url(http://www.tekindoor.com/images/header/header3.gif)
repeat-x top left;height:130px;fixed; }
#header h1 a{font: bold 76px/67px arial;color:#badfad;}
#header h1{text-align:center; }
#description {background:#c0c0c0; }
#description h5 {text-align:center;margin: 35px 0 0 0; }
.right-rss {float:right;margin: -40px 0 0 0;}

a {color:#005495;text-decoration:none}
p a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, ul a:hover {text-decoration:underline}
h1 {font:3.0em arial;font-weight:bold;letter-spacing:-0.08em;color:#000000;}
h2 {font:2.3em Georga,"Times New Roman";letter-spacing:-0.04em;color:#000000;}
h3 {font:1.3em arial;margin-bottom:3px;color:#000000;}
h4 {font: italic small-caps 900 25px arial}
h5 {font: bold italic small-caps 0.8em/1.5em arial,georga,times-new-roman}
h6 {font:0.6em arial;color:#000000;}
p {font-family:arial-bold;font-size:1.0em;color:#000000;}
blockquote {display: inline-block;background: #f4f5f7 url(http://www.tekindoor.com/images/extras/blockquote.gif)no-repeat; border: 1px solid #addadd;padding: 10px;font-style:oblique;font-weight:500;width:80%;text-indent: 1cm}


img {border:none;margin:0 10px 0 10px;}
a img:hover {border: 2px solid #0000ff}
.centeredImage {text-align:center;margin-top:0px;margin-bottom:0px;padding-bottom:0px;}
p img {padding: 0;max-width: 100%;}
img.centered {display: block;margin-left: auto;margin-right: auto;}
img.alignright {padding: 4px;margin: 0 0 2px 7px;display: inline;}
img.alignleft {padding: 4px;margin: 0 7px 2px 0; display: inline;}
.alignright {float: right;}
.alignleft {float: left}


#content ul, #content ol {margin:0.5em 0;font-family:arial;font-size:1.7em;margin:0.2em 0;padding:0px 0 0 2em}
#content ul li, #content ol li {color:#333}
#content {margin:0 30px 30px 30px}
#content textarea {width:600px}
.postinfo {font-size:0.6em;border-bottom:1px solid #ccc;padding-bottom:10px}


#home {
background:#dedeed;
border:0 none;
color:#000000;
font-family:arial,georga,times-new-roman;
margin:0;
padding:0;
text-align:center;
}
#services{
background:#dedeed;
border:0 none;
color:#000000;
font-family:arial,georga,times-new-roman;
margin:0;
padding:0;
text-align:center;
}
#welding{
background:#dedeed;
border:0 none;
color:#000000;
font-family:arial,georga,times-new-roman;
margin:0;
padding:0;
text-align:center;
}
#duct-cleaning{
background:#dedeed;
border:0 none;
color:#000000;
font-family:arial,georga,times-new-roman;
margin:0;
padding:0;
text-align:center;
}
#about{
background:#dedeed;
border:0 none;
color:#000000;
font-family:arial,georga,times-new-roman;
margin:0;
padding:0;
text-align:center;
}
#photos{
background:#dedeed;
border:0 none;
color:#000000;
font-family:arial,georga,times-new-roman;
margin:0;
padding:0;
text-align:center;
}
#vacation-rentals{
background:#dedeed;
border:0 none;
color:#000000;
font-family:arial,georga,times-new-roman;
margin:0;
padding:0;
text-align:center;
}
#post{
background:#abcabc;
border:0 none;
color:#000000;
font-family:arial,georga,times-new-roman;
margin:0;
padding:0;
text-align:left;
}


#menuwrapper {margin:0 0 0 0;width:100%;clear:both;background:#6E9F1F url('/images/mainmenu.png') repeat-x;}
#menu {background:#6E9F1F url('/images/mainmenu.png') repeat-x;font-family:tahoma,arial;font-weight:normal;font-size:1.3em;}
#menu, #menu ul {float:left;list-style:none;line-height:1;padding:0;margin:0;width:100%;height:35px;}
#menu h2 {font-family:tahoma,arial;font-weight:normal;font-size:1.0em;padding:0 0 0 10px;line-height:.5; }
#menu a {display:block;color:#ededed;text-decoration:none;padding:0 0.4em;line-height:35px;}
#menu li {float:left;padding:0;margin:0;text-align:left;}
#menu li ul {position:absolute;left:-999em;height:auto;width:10em;font-weight:normal;margin:0;font-size:0.9em;z-index:1;}
#menu li li {padding-right:1em;width:9em;border-bottom:1px solid #aaa;border-left:1px solid #aaa;border-right:1px solid #aaa;}
#menu li li a {padding:0.4em 1em;line-height:1em;color:#333;}
#menu li a:hover {color:#fff;}
#menu li ul a {width:9em;}
#menu li ul ul {margin:-1.67em 0 0 10em;font-size:1em;}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul uhttp://www.tekindoor.com/wp-admin/theme-editor.php?file=/themes/tekindoor/style.css&theme=TEK+INDOOR&a=tel, #menu li.sfhover ul ul ul {left:-999em;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {left:auto;background:#fff;}
#menu li:hover, #menu li.sfhover {background: #1E85D9;}
#menu .move-right {float:right;line-height:25px;padding: 0 80px 0 0;}



#weather {display:inline;}

#photo-gal {position:relative; width:570px; height:1580px; margin:20px auto;}
#photo-gal a.pics {float:left; margin:1px 3px; width:75px; height:75px;}
#photo-gal a.pics img.thumb {display:block;border:0;}
#photo-gal a.pics span {display:none; text-align:center;}
#photo-gal a.pics:hover span {display:block; position:absolute; left:-38px; top:100px;}

#footer {text-align:center; }

.clear {clear:both}

/* Tables */
table {border-collapse: collapse;border-spacing: 0;margin-bottom: 10px;border:1px #444;padding:5px 0 10px;}
table {background:#dedede;}
th, td {text-align: left;}
table caption{font-size:;background:#F7F7DD;}
table tr td{border-top:1px solid #333;padding:2px 10px;}
table tr th{background:#999;padding:1px 10px;text-align:left;}
tr:hover {background:#fff;}

abduraooft
12-07-2009, 05:21 PM
Is posting a link OK? Yes, that's what we all required. Some CSS without any related HTML is of no use.

TomKroscavage
12-07-2009, 05:29 PM
Yes, that's what we all required. Some CSS without any related HTML is of no use.

Here it is http://www.tekindoor.com.

Excavator
12-07-2009, 05:47 PM
Hello TomKroscavage,
and hello to a fellow Alaskan!

The first thing I notice is you're re-using id's - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.tekindoor.com%2F

Have a look at a page that describes the difference and how to use class and id. (http://www.tizag.com/cssT/cssid.php)

You seem to have a link in your CSS? That does not belong there...

#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfhover ul uhttp://www.tekindoor.com/wp-admin/theme-editor.php?file=/themes/tekindoor/style.css&theme=TEK+INDOOR&a=tel, #menu li.sfhover ul ul ul {left:-999em;}


In FF3.5 and IE8 your dropdown menu opens completely upon hovering. In IE7 it does not open up at all.

TomKroscavage
12-07-2009, 11:05 PM
Hello TomKroscavage,
and hello to a fellow Alaskan!

The first thing I notice is you're re-using id's - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.tekindoor.com%2F

Have a look at a page that describes the difference and how to use class and id. (http://www.tizag.com/cssT/cssid.php)

You seem to have a link in your CSS? That does not belong there...

#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfhover ul uhttp://www.tekindoor.com/wp-admin/theme-editor.php?file=/themes/tekindoor/style.css&theme=TEK+INDOOR&a=tel, #menu li.sfhover ul ul ul {left:-999em;}


In FF3.5 and IE8 your dropdown menu opens completely upon hovering. In IE7 it does not open up at all.
Yes, hello back at you fellow Alaskan!
Wow, that is a mess I don't think it has been like that for long. I think it is from some find and replace operation. I'll fix soon. thanks for the feedback. Should I just delete the link?

TomKroscavage
12-07-2009, 11:13 PM
I fixed the link in the css

Excavator
12-08-2009, 12:29 AM
Menu works much better in FF3.5 and IE8 now. It still does not drop at all in IE7. I do not have IE6 to check it in.
Did you fix/upload the markup yet?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum