PDA

View Full Version : Need help to fix small part in my css code



chapperzhtid
Aug 13th, 2009, 08:33 PM
Hello. I have got a site at www.djchapperz.co.uk and the CSS is correct but i am having a problem lately. On my PayPal links and images i have got a grey box around them but i dont want a grey box. How do i get rid of the grey box can someone please help by telling me what code i should be using. My CSS is as follows:


/* top elements */
* {
padding: 0; margin: 0;
}
body {
margin: 0; padding: 0;
font: normal .90em/1.5em Tahoma, 'Trebuchet MS', sans-serif;
color: #6A6A6A;
text-align: center;
background: #000;
}

/* links */
a {
color: #F88F26;
background-color: inherit;
text-decoration: none
}
a:hover {
color: #FFF;
background-color: inherit;
}

/* headers */
h1, h2, h3 {
font: bold 1.3em 'Trebuchet MS', Arial, Sans-serif;
color: #A0080D;
}
h1 { font-size: 1.6em; }
h3 { font-size: 1.3em; }

#main h1 {
font: normal 3.5em 'Trebuchet MS', Arial, Sans-serif;
color: #DBD0A3;
}
#sidebar h1 {
font: bold 1.4em 'Trebuchet MS', Arial, Sans-serif;
background: #000 url(arrow.gif) no-repeat 10px .7em;
padding: 7px 0 7px 35px;
color: #A0080D;
}

p, h1, h2, h3 {
margin: 0;
padding: 10px 15px;
}

ul, ol {
margin: 10px 30px;
padding: 0 15px;
color: #F88F26;
}
ul span, ol span {
color: #CCC;
}

/* images */
img {
border: 3px solid #444;
}
img.no-border {
border: none;
}
img.float-right {
margin: 5px 0px 5px 15px;
}
img.float-left {
margin: 5px 15px 5px 0px;
}
a img {
border: 3px solid #444;
}
a:hover img {
border: 3px solid #CCC !important; /* IE fix*/
border: 3px solid #444;
}

code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
/* white-space: pre; */
background: #111;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 15px;
padding: 0 0 0 20px;
background: #111;
font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;
}

/* form elements */
form {
margin: 15px;
padding: 0;
background: #000;
border: 0px dashed #151515;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border: 1px solid #CCC;
font: normal 1em Verdana, sans-serif;
color:#000;
background: #CCC;
}
textarea {
width: 250px;
padding:2px;
border: 1px solid #CCC;
font: normal 1em Verdana, sans-serif;
height:100px;
display:block;
color:#000;
background: #CCC;
}
input.button {
margin: 0;
font: bold 1em Tahoma, Sans-serif;
border: 1px solid #CCC;
padding: 2px 3px;
color: #000;
background: #CCC;
}


/***********************
LAYOUT
************************/

#header-content, #footer-content, #content {
width: 83%;
}

/* header */
#header {
background: #444 url(headerbg.jpg) repeat-x 0 0;
height: 120px;
text-align: left;
}
#header-content {
position: relative;
margin: 0 auto; padding: 0;
}
#header-content #logo {
position: absolute;
font: bold 40px Verdana, 'Trebuchet Ms', Sans-serif;
letter-spacing: 1px;
color: #000;
margin: 0; padding: 0;

/* change the values of left and top to adjust the position of the logo */
top: 5px; left: 10px;
}


/* header menu */
#header-content ul {
position: absolute;
right: 0px; top: 70px;
font: bolder 1.3em 'Trebuchet MS', sans-serif;
color: #000;
list-style: none;
margin: 0; padding: 0;
}
#header-content li {
display: inline;
}
#header-content li a {
float: left;
display: block;
padding: 3px 5px;
color: #000;
}
#header-content li a:hover {
background: #000;
color: #F88F26;
}
#header-content li a#current {
background: #000;
color: #CCC;
}

/* content */
#content-wrap {
clear: both;
float: left;
background: #000;
width: 100%;
}
#content {
text-align: left;
padding: 0; margin: 0 auto;
}

/* sidebar */
#sidebar {
float: right;
width: 260px;
margin: 10px 0; padding: 0;
}
#sidebar ul.sidemenu {
list-style:none;
margin: 0;
padding: 5px 0 15px 0;
}
#sidebar ul.sidemenu li {
padding: 0 10px;
}
#sidebar ul.sidemenu a {
display: block;
font-weight:bold;
color: #6A6A6A;
height: 1.5em;
text-decoration: none;
padding:.3em 0 .3em 15px;
background: #000;
border-bottom: 1px dashed #151515;
line-height: 1.5em;
}
#sidebar ul.sidemenu a.top{
border-top: 1px dashed #151515;
}
#sidebar ul.sidemenu a:hover {
padding: .3em 0 .3em 10px;
background: #000;
border-left: 5px solid #D30F16;
color: #D30F16;
}
#sidebar .sidebox {
background: #000;
margin: 5px 15px 10px 15px;
}

/* main */
#main {
margin: 10px 0;
padding: 0 270px 0 0;
}

/* footer */
#footer {
clear: both;
margin: 0; padding: 0;
border-top: 1px solid #68050A;
font-size: 95%;
text-align: left;
}
#footer h2, #footer p {
padding-left: 0;
}
#footer-content {
margin: 0 auto;
}
#footer-content a {
text-decoration: none;
color: #8A8A8A;
}
#footer-content a:hover {
text-decoration: underline;
color: #FFF;
}
#footer-content ul {
list-style: none;
margin: 0; padding: 0;
}
#footer-content .col {
width: 32%;
padding: 0 5px 30px 15px;
}
#footer-content .col2 {
width: 30%;
padding: 0 0 30px 0;
}

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }


Thanks for your help in advance.

noneforit
Aug 13th, 2009, 08:58 PM
I can see a grey box around the image in the sidebar which is being caused by the code below:

Edit - This will be the same for all images on all pages due to the code below


a img {
border: 3px solid #444;
}


There is also a 1px border round the paypal image from the Code below:


input {
padding: 2px;
border: 1px solid #CCC;
font: normal 1em Verdana, sans-serif;
color:#000;
background: #CCC;
}

chapperzhtid
Aug 16th, 2009, 01:28 AM
Thank you for your response i have changed the code which you told me and it fixes the issue with the pictures. But on my about me page their a picture their and it still got grey around it how do i get rid of that and the paypal button is still grey round the outside. Here is the code after i have changed some things. What else could the problem be?


/* top elements */
* {
padding: 0; margin: 0;
}
body {
margin: 0; padding: 0;
font: normal .90em/1.5em Tahoma, 'Trebuchet MS', sans-serif;
color: #6A6A6A;
text-align: center;
background: #000;
}

/* links */
a {
color: #F88F26;
background-color: inherit;
text-decoration: none
}
a:hover {
color: #FFF;
background-color: inherit;
}

/* headers */
h1, h2, h3 {
font: bold 1.3em 'Trebuchet MS', Arial, Sans-serif;
color: #A0080D;
}
h1 { font-size: 1.6em; }
h3 { font-size: 1.3em; }

#main h1 {
font: normal 3.5em 'Trebuchet MS', Arial, Sans-serif;
color: #DBD0A3;
}
#sidebar h1 {
font: bold 1.4em 'Trebuchet MS', Arial, Sans-serif;
background: #000 url(arrow.gif) no-repeat 10px .7em;
padding: 7px 0 7px 35px;
color: #A0080D;
}

p, h1, h2, h3 {
margin: 0;
padding: 10px 15px;
}

ul, ol {
margin: 10px 30px;
padding: 0 15px;
color: #F88F26;
}
ul span, ol span {
color: #CCC;
}

/* images */
img {
border: 3px solid #444;
}
img.no-border {
border: none;
}
img.float-right {
margin: 5px 0px 5px 15px;
}
img.float-left {
margin: 5px 15px 5px 0px;
}
a img {
border: 0px solid #444;
}
a:hover img {
border: 3px solid #CCC !important; /* IE fix*/
border: 3px solid #444;
}

code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
/* white-space: pre; */
background: #111;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 15px;
padding: 0 0 0 20px;
background: #111;
font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;
}

/* form elements */
form {
margin: 15px;
padding: 0;
background: #000;
border: 0px dashed #151515;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border: 0px solid #CCC;
font: normal 1em Verdana, sans-serif;
color:#000;
background: #CCC;
}
textarea {
width: 250px;
padding:2px;
border: 0px solid #CCC;
font: normal 1em Verdana, sans-serif;
height:100px;
display:block;
color:#000;
background: #CCC;
}
input.button {
margin: 0;
font: bold 1em Tahoma, Sans-serif;
border: 0px solid #CCC;
padding: 2px 3px;
color: #000;
background: #CCC;
}


/***********************
LAYOUT
************************/

#header-content, #footer-content, #content {
width: 83%;
}

/* header */
#header {
background: #444 url(headerbg.jpg) repeat-x 0 0;
height: 120px;
text-align: left;
}
#header-content {
position: relative;
margin: 0 auto; padding: 0;
}
#header-content #logo {
position: absolute;
font: bold 40px Verdana, 'Trebuchet Ms', Sans-serif;
letter-spacing: 1px;
color: #000;
margin: 0; padding: 0;

/* change the values of left and top to adjust the position of the logo */
top: 5px; left: 10px;
}


/* header menu */
#header-content ul {
position: absolute;
right: 0px; top: 70px;
font: bolder 1.3em 'Trebuchet MS', sans-serif;
color: #000;
list-style: none;
margin: 0; padding: 0;
}
#header-content li {
display: inline;
}
#header-content li a {
float: left;
display: block;
padding: 3px 5px;
color: #000;
}
#header-content li a:hover {
background: #000;
color: #F88F26;
}
#header-content li a#current {
background: #000;
color: #CCC;
}

/* content */
#content-wrap {
clear: both;
float: left;
background: #000;
width: 100%;
}
#content {
text-align: left;
padding: 0; margin: 0 auto;
}

/* sidebar */
#sidebar {
float: right;
width: 260px;
margin: 10px 0; padding: 0;
}
#sidebar ul.sidemenu {
list-style:none;
margin: 0;
padding: 5px 0 15px 0;
}
#sidebar ul.sidemenu li {
padding: 0 10px;
}
#sidebar ul.sidemenu a {
display: block;
font-weight:bold;
color: #6A6A6A;
height: 1.5em;
text-decoration: none;
padding:.3em 0 .3em 15px;
background: #000;
border-bottom: 1px dashed #151515;
line-height: 1.5em;
}
#sidebar ul.sidemenu a.top{
border-top: 1px dashed #151515;
}
#sidebar ul.sidemenu a:hover {
padding: .3em 0 .3em 10px;
background: #000;
border-left: 5px solid #D30F16;
color: #D30F16;
}
#sidebar .sidebox {
background: #000;
margin: 5px 15px 10px 15px;
}

/* main */
#main {
margin: 10px 0;
padding: 0 270px 0 0;
}

/* footer */
#footer {
clear: both;
margin: 0; padding: 0;
border-top: 1px solid #68050A;
font-size: 95%;
text-align: left;
}
#footer h2, #footer p {
padding-left: 0;
}
#footer-content {
margin: 0 auto;
}
#footer-content a {
text-decoration: none;
color: #8A8A8A;
}
#footer-content a:hover {
text-decoration: underline;
color: #FFF;
}
#footer-content ul {
list-style: none;
margin: 0; padding: 0;
}
#footer-content .col {
width: 32%;
padding: 0 5px 30px 15px;
}
#footer-content .col2 {
width: 30%;
padding: 0 0 30px 0;
}

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }

jhaycutexp
Aug 16th, 2009, 04:16 AM
Well try this..

you made a style that was not even applied to your html that is why it is still showwing up.. noborder..

then to remove the gray box.. simply just set the height and width to zero or just add the style display:none to it..



<input class="noborder" type="image" alt="PayPal - The safer, easier way to pay online." name="submit" src="https://www.paypal.com/en_GB/i/btn/btn_donate_SM.gif"/>


<img height="0" border="0" width="0" style="display:none;" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" alt="Donate to DJ ChapperZ"/>



hope this helps..

Andrew

_Aerospace_Eng_
Aug 16th, 2009, 06:46 AM
You set a background color to all of your inputs. This is where the gray comes from on your paypal button.

Then you set another border on all of your images. You have a class called no-border but its not applied to the images that you don't want to have borders.

bazz
Aug 17th, 2009, 02:17 AM
And you have this in your css.



a:hover img {
border: 3px solid #CCC !important; /* IE fix*/
border: 3px solid #444;
}



That means all hover images will have that border.

better to set a class to the images you want to border on and for those which you do not want a border, do not assign them that class.

eg: a.class_here:hover { bleh}

and then in your html, put < img class='class_here' src='whatever' / >

bazz

chapperzhtid
Aug 18th, 2009, 05:31 PM
I have used the codes above and i have got the little grey box away next to the paypal logo and all the images are free from borders so i am getting somewhere but now my paypal logo has a grey background. i dont no if this is because of the paypal log or part of my code if it code what can i use to make it black background. if not can someone suply a picture or url of the paypal logo with black background.

Thanks

_Aerospace_Eng_
Aug 18th, 2009, 05:59 PM
I already told you what the problem was. You set a background color on all inputs. See?

input {
padding: 2px;
border: 0px solid #CCC;
font: normal 1em Verdana, sans-serif;
color:#000;
background: #CCC;
}

bazz
Aug 18th, 2009, 05:59 PM
This is what you need to change.



input {
padding: 2px;
border: 0px solid #CCC;
font: normal 1em Verdana, sans-serif;
color:#000;
background: #000;
}


it was #ccc;

Remember, if you have more than one thing on your page (of the same type) which needs to have different attributes assigned, then you need to use classes/id to distinguish between them.



input.class1 {
padding: 2px;
border: 0px solid #CCC;
font: normal 1em Verdana, sans-serif;
color:#000;
background: #000;
}

input.class2 {
padding: 2px;
border: 0px solid #CCC;
font: normal 1em Verdana, sans-serif;
color:#000;
background: #000;
}

I think numerical class names is not allowed. I think they must be textual but I used a number there to try to explain.

bazz

_Aerospace_Eng_
Aug 18th, 2009, 06:03 PM
I think numerical class names is not allowed. I think they must be textual but I used a number there to try to explain.

bazz
You are right. Class names and IDs must not begin with any special character or a number but they can contain numbers and underscores. Its probably best not to end a class name with a special character for browsers' sake.

chapperzhtid
Aug 18th, 2009, 06:50 PM
Sorry but this is the first time i have made a website and im self learning css and html so i am going to have mistakes. Thanks for the new code it has fixed all my problems. Just one last issue i have found out that my page at http://www.djchapperz.co.uk/events.html some text is orange i no i have missed out on a closing tag or something can someone let me no what it is? Thanks for all your help. Its been appreciated

noneforit
Aug 18th, 2009, 07:04 PM
Text colour is highlighted in red below, either remove this or change the colour to something you want it to be:


ul, ol {
margin: 10px 30px;
padding: 0 15px;
color: #F88F26;
}

chapperzhtid
Aug 18th, 2009, 07:27 PM
Thank you to everyone who has helped with my site. everything is better for now. thanks this topic don't need responding anymore.

_Aerospace_Eng_
Aug 19th, 2009, 08:54 AM
thanks this topic don't need responding anymore.
Yes, yes it does. Remove this line

<!-- DOCTYPE START -->
It will cause IE6 to go into quirks mode and things won't look right.

You have a paragraph directly inside of an unordered list (ul) element but it must be inside of an li element for it to be valid. The validator points these errors out: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.djchapperz.co.uk%2Fevents.html&charset=%28detect+automatically%29&doctype=Inline&group=0

chapperzhtid
Aug 20th, 2009, 07:05 PM
Thank you i will be taking the </--doctype start--> out soon. I'm just validating my css at the moment and it has passed but it has found 44 warnings and i would like to fix them. The warning are as follows
Warnings (44)
URI : http://www.djchapperz.co.uk/images/Ablaze.css
54 Same colors for color and background-color in two contexts textarea and ol span
54 Same colors for color and background-color in two contexts input.button and ol span
54 Same colors for color and background-color in two contexts textarea and ul span
54 Same colors for color and background-color in two contexts input.button and ul span
116 input Same color for background-color and color
126 textarea Same color for background-color and border-left-color
126 textarea Same color for background-color and border-right-color
126 textarea Same color for background-color and border-top-color
134 input.button Same color for background-color and border-top-color
134 input.button Same color for background-color and border-right-color
134 input.button Same color for background-color and border-left-color
160 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a:hover and #header-content #logo
160 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a and #header-content #logo
160 Same colors for color and background-color in two contexts #sidebar .sidebox and #header-content #logo
160 Same colors for color and background-color in two contexts #sidebar h1 and #header-content #logo
160 Same colors for color and background-color in two contexts form and #header-content #logo
160 Same colors for color and background-color in two contexts body and #header-content #logo
160 Same colors for color and background-color in two contexts #header-content li a:hover and #header-content #logo
160 Same colors for color and background-color in two contexts input and #header-content #logo
160 Same colors for color and background-color in two contexts #header-content li a#current and #header-content #logo
160 Same colors for color and background-color in two contexts #content-wrap and #header-content #logo
173 Same colors for color and background-color in two contexts body and #header-content ul
173 Same colors for color and background-color in two contexts #header-content li a:hover and #header-content ul
173 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a:hover and #header-content ul
173 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a and #header-content ul
173 Same colors for color and background-color in two contexts #content-wrap and #header-content ul
173 Same colors for color and background-color in two contexts #sidebar .sidebox and #header-content ul
173 Same colors for color and background-color in two contexts form and #header-content ul
173 Same colors for color and background-color in two contexts #header-content li a#current and #header-content ul
173 Same colors for color and background-color in two contexts #sidebar h1 and #header-content ul
173 Same colors for color and background-color in two contexts input and #header-content ul
181 #header-content li a In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
184 Same colors for color and background-color in two contexts #content-wrap and #header-content li a
184 Same colors for color and background-color in two contexts #header-content li a#current and #header-content li a
184 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a:hover and #header-content li a
184 Same colors for color and background-color in two contexts input and #header-content li a
184 Same colors for color and background-color in two contexts body and #header-content li a
184 Same colors for color and background-color in two contexts #sidebar h1 and #header-content li a
184 Same colors for color and background-color in two contexts #header-content li a:hover and #header-content li a
184 Same colors for color and background-color in two contexts #sidebar .sidebox and #header-content li a
184 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a and #header-content li a
184 Same colors for color and background-color in two contexts form and #header-content li a
288 .float-left In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
289 .float-right In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected


If someone could assist me i would be grateful. to get access to my css its located at www.djchapperz.co.uk/images/Ablaze.css

Thanks

_Aerospace_Eng_
Aug 20th, 2009, 09:34 PM
They are just warnings. They aren't errors. The warnings are there to make sure none of your colors clash or that there aren't any colors that match backgrounds. You only need to worry if they are the same element. Its going to be very hard to get rid of all warnings.

chapperzhtid
Aug 20th, 2009, 10:39 PM
I understand what you mean. Is their anyway to get rid of the warnings as it just makes me feel better. I am also currently trying to clean my html code up etc so if anyone feels like it could you look at all the pages at www.djchapperz.co.uk and tell me what needs taking out or adding.

As for my CSS. Here are the warnings what need fixing

51 Same colors for color and background-color in two contexts input.button and ol span
51 Same colors for color and background-color in two contexts textarea and ol span
51 Same colors for color and background-color in two contexts input.button and ul span
51 Same colors for color and background-color in two contexts textarea and ul span
107 input Same color for background-color and color
117 textarea Same color for background-color and border-right-color
117 textarea Same color for background-color and border-left-color
117 textarea Same color for background-color and border-top-color
125 input.button Same color for background-color and border-right-color
125 input.button Same color for background-color and border-top-color
125 input.button Same color for background-color and border-left-color
144 Same colors for color and background-color in two contexts #content-wrap and #header-content #logo
144 Same colors for color and background-color in two contexts input and #header-content #logo
144 Same colors for color and background-color in two contexts body and #header-content #logo
144 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a:hover and #header-content #logo
144 Same colors for color and background-color in two contexts #sidebar h1 and #header-content #logo
144 Same colors for color and background-color in two contexts form and #header-content #logo
144 Same colors for color and background-color in two contexts #sidebar .sidebox and #header-content #logo
144 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a and #header-content #logo
144 Same colors for color and background-color in two contexts #header-content li a#current and #header-content #logo
144 Same colors for color and background-color in two contexts #header-content li a:hover and #header-content #logo
155 Same colors for color and background-color in two contexts #sidebar h1 and #header-content ul
155 Same colors for color and background-color in two contexts #content-wrap and #header-content ul
155 Same colors for color and background-color in two contexts form and #header-content ul
155 Same colors for color and background-color in two contexts #header-content li a#current and #header-content ul
155 Same colors for color and background-color in two contexts input and #header-content ul
155 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a:hover and #header-content ul
155 Same colors for color and background-color in two contexts body and #header-content ul
155 Same colors for color and background-color in two contexts #sidebar .sidebox and #header-content ul
155 Same colors for color and background-color in two contexts #header-content li a:hover and #header-content ul
155 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a and #header-content ul
164 #header-content li a In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
167 Same colors for color and background-color in two contexts #sidebar .sidebox and #header-content li a
167 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a:hover and #header-content li a
167 Same colors for color and background-color in two contexts #header-content li a:hover and #header-content li a
167 Same colors for color and background-color in two contexts body and #header-content li a
167 Same colors for color and background-color in two contexts #sidebar ul.sidemenu a and #header-content li a
167 Same colors for color and background-color in two contexts #header-content li a#current and #header-content li a
167 Same colors for color and background-color in two contexts form and #header-content li a
167 Same colors for color and background-color in two contexts #content-wrap and #header-content li a
167 Same colors for color and background-color in two contexts input and #header-content li a
167 Same colors for color and background-color in two contexts #sidebar h1 and #header-content li a
266 .float-left In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
269 .float-right In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected


And my CSS is

* {
padding : 0;
margin : 0;
}
body {
margin : 0;
padding : 0;
font : normal 0.9em/1.5em Tahoma, 'Trebuchet MS', sans-serif;
color : #6a6a6a;
text-align : center;
background : #000;
}
a {
color : #f88f26;
background-color : transparent;
text-decoration : none;
}
a:hover {
color : #fff;
background-color : transparent;
}
h1, h2, h3 {
font : bold 1.3em 'Trebuchet MS', Arial, Sans-serif;
color : #a0080d;
}
h1 {
font-size : 1.6em;
}
h3 {
font-size : 1.3em;
}
#main h1 {
font : normal 3.5em 'Trebuchet MS', Arial, Sans-serif;
color : #dbd0a3;
}
#sidebar h1 {
font : bold 1.4em 'Trebuchet MS', Arial, Sans-serif;
background : #000 url(arrow.gif) no-repeat 10px 0.7em;
padding : 7px 0 7px 35px;
color : #a0080d;
}
p, h1, h2, h3 {
margin : 0;
padding : 10px 15px;
}
ul, ol {
margin : 10px 30px;
padding : 0 15px;
}
ul span, ol span {
color : #ccc;
}
img {
border : 0 solid #444;
}
img.no-border {
border : none;
}
img.float-right {
margin : 5px 0 5px 15px;
}
img.float-left {
margin : 5px 15px 5px 0;
}
a img {
border : 0 solid #444;
}
a:hover img {
border : 1px solid #ccc !important ;
border : 1px solid #444;
}
code {
margin : 5px 0;
padding : 10px;
text-align : left;
display : block;
overflow : auto;
font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
background : #111;
}
acronym {
cursor : help;
border-bottom : 1px solid #777;
}
blockquote {
margin : 15px;
padding : 0 0 0 20px;
background : #111;
font : bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;
}
form {
margin : 15px;
padding : 0;
background : #000;
border : 0 dashed #151515;
}
label {
display : block;
font-weight : bold;
margin : 5px 0;
}
input {
padding : 2px;
border : 0 solid #ccc;
font : normal 1em Verdana, sans-serif;
color : #000;
background : #000;
}
textarea {
width : 250px;
padding : 2px;
border : 0 solid #ccc;
font : normal 1em Verdana, sans-serif;
height : 100px;
display : block;
color : #000;
background : #ccc;
}
input.button {
margin : 0;
font : bold 1em Tahoma, Sans-serif;
border : 0 solid #ccc;
padding : 2px 3px;
color : #000;
background : #ccc;
}
#header-content, #footer-content, #content {
width : 83%;
}
#header {
background : #444 url(headerbg.jpg) repeat-x 0 0;
height : 120px;
text-align : center;
}
#header-content {
position : relative;
margin : 0 auto;
padding : 0;
}
#header-content #logo {
position : absolute;
font : bold 40px Verdana, 'Trebuchet Ms', Sans-serif;
letter-spacing : 1px;
color : #000;
margin : 0;
padding : 0;
top : 5px;
left : 10px;
}
#header-content ul {
position : absolute;
right : 0;
top : 70px;
font : bolder 1.3em 'Trebuchet MS', sans-serif;
color : #000;
list-style : none;
margin : 0;
padding : 0;
}
#header-content li {
display : inline;
}
#header-content li a {
float : left;
display : block;
padding : 3px 5px;
color : #000;
}
#header-content li a:hover {
background : #000;
color : #f88f26;
}
#header-content li a#current {
background : #000;
color : #ccc;
}
#content-wrap {
clear : both;
float : left;
background : #000;
width : 100%;
}
#content {
text-align : left;
padding : 0;
margin : 0 auto;
}
#sidebar {
float : right;
width : 260px;
margin : 10px 0;
padding : 0;
}
#sidebar ul.sidemenu {
list-style : none;
margin : 0;
padding : 5px 0 15px 0;
}
#sidebar ul.sidemenu li {
padding : 0 10px;
}
#sidebar ul.sidemenu a {
display : block;
font-weight : bold;
color : #6a6a6a;
height : 1.5em;
text-decoration : none;
padding : 0.3em 0 0.3em 15px;
background : #000;
border-bottom : 1px dashed #151515;
line-height : 1.5em;
}
#sidebar ul.sidemenu a.top {
border-top : 1px dashed #151515;
}
#sidebar ul.sidemenu a:hover {
padding : 0.3em 0 0.3em 10px;
background : #000;
border-left : 5px solid #d30f16;
color : #d30f16;
}
#sidebar .sidebox {
background : #000;
margin : 5px 15px 10px 15px;
}
#main {
margin : 10px 0;
padding : 0 270px 0 0;
}
#footer {
clear : both;
margin : 0;
padding : 0;
border-top : 1px solid #68050a;
font-size : 95%;
text-align : left;
}
#footer h2, #footer p {
padding-left : 0;
}
#footer-content {
margin : 0 auto;
}
#footer-content a {
text-decoration : none;
color : #8a8a8a;
}
#footer-content a:hover {
text-decoration : underline;
color : #fff;
}
#footer-content ul {
list-style : none;
margin : 0;
padding : 0;
}
#footer-content .col {
width : 32%;
padding : 0 5px 30px 15px;
}
#footer-content .col2 {
width : 30%;
padding : 0 0 30px 0;
}
.float-left {
float : left;
}
.float-right {
float : right;
}
.align-left {
text-align : left;
}
.align-right {
text-align : right;
}

Sorry if you can't do it and if i seem to be annoying you :)

_Aerospace_Eng_
Aug 20th, 2009, 10:44 PM
I'm not going to do it for you. Show that you've tried to do it on your own. Read the warnings. They tell EXACTLY what the problem is.

chapperzhtid
Aug 20th, 2009, 10:59 PM
Okay you don't have to help but i don't no alot about CSS. If i keep it will it affect users on different browsers and will it affect search engine indexing?

By the way the warnign dont mean nothing to me :(

SuperPhil
Aug 21st, 2009, 09:56 AM
Lol dude, do some work yourself! It's not like you're stuck at anything, it is you haven't even tried yet!