CSS and design help

JavaScript and client side scripting.

Moderator: General Moderators

matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS and design help

Post by matthijs »

If you just want to style stuff inside forms, you don't need to put an id or class inside them. below is what you can use:

Code: Select all

 
form { }
form fieldset {}
form fieldset label {}
form fieldset input {}
form p {}
form h2 {}
// etc etc
 
Only when you have one form that you want to have styled in one way, and another form in a different way, do you need to have some "hook" to differentiate between them. That could be a class or id.
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

Ok, still not working....

here is my form page

Code: Select all

<?php 
include_once ('diffhead.inc'); 
?>
<img src="images/contact1.jpg" alt="" width="727" height="48"></td>
                                                    </tr>
                                                    <tr>
                                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" id="box4" class="box">
                                                                <tr>
                                                                    <td class="content">
 
        
<p align="left"> 
<br />
 
 
  
<FONT FACE="Arial" SIZE="-1"> 
 
 
<FORM method="post" action="sent.php">
 
 Your Forename:<br />
 <INPUT TYPE="text" name="fname" width="25" maxlength="75">
 <BR />
 Your E-mail Address:<BR />
 <INPUT TYPE="text" name="from" width="25" maxlength="75">
 <BR>
 I am contacting you due to:<BR />
 <SELECT name="interest">
  <option SELECTED> a general query</option>
  <OPTION> a Runescape related problem</option>
  <OPTION>a technical problems with the site</option>
  <OPTION>a guide on this site has been copied/is copied</option>
 </SELECT>
 <BR>
Comments/Messages:<BR />
 <TEXTAREA name="body" rows="10" cols="30" wrap="virtual"></TEXTAREA>
<BR><BR>
<INPUT TYPE="submit" value="Submit">&nbsp;&nbsp;
<INPUT TYPE="reset" value="Clear">
<BR>
</FORM>
 
</p> 
</font></a>
 
</b></font></p>
 
 
 
<?php 
include_once ('difffooter.inc'); 
?>
here is my css code

Code: Select all

/* Quest */
#quest li, .text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #efefef;}
 
#quest .qtitle {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #F8DBA6; font-weight: bold; }
 
#quest .qtitles {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #F8DBA6; text-decoration: underline; font-weight: bold; }
 
#quest .questheader {font-family: verdana; font-size: 23px; color: #F8DBA6; font-weight: bold; text-align: center;}
 
 
#contact .form textarea {
    color: #efefef;
}
 
 
/* Tables */
 
table.pass {font-family: Tahoma; font-size: 11px; color:#565866; border-left:solid #96FE96 1px;  border-top:solid #96FE96 1px;  border-bottom:solid #96FE96 1px;  border-right:solid #96FE96 1px; }
table.monster{  font-family: Verdana;   font-size: 10px;    font-style: normal; color:#FFFFFF;  }
table.blueborder{font-family: Tahoma; font-size: 11px; color:#565866; border-left:solid #d1ddff 1px;  border-top:solid #d1ddff 1px;  border-bottom:solid #d1ddff 1px;  border-right:solid #d1ddff 1px; } 
table.logfail {font-family: Tahoma; font-size: 11px; color:#565866; border-left:solid #fe9898 1px;  border-top:solid #fe9898 1px;  border-bottom:solid #fe9898 1px;  border-right:solid #fe9898 1px; }
table.calcinput {   font-family: Verdana;   font-size: 10px;    font-style: normal; color:#FFFFFF;  }
table.calc {    font-family: Verdana;   font-size: 10px;    text-align: center; font-style: normal; line-height: normal;    font-variant: normal;   text-transform: none;   color: #FFFFFF; text-decoration: none;  border: 1px solid #0099CC;  margin-left: auto;  margin-right: auto; word-spacing: normal;   white-space: normal;}
table.monsterdb {   font-family: Verdana;   font-size: 10pt;    text-align: center; font-style: normal; line-height: normal;    font-variant: normal;   text-transform: none;   color: #FFFFFF; text-decoration: none;  border: 1px solid #F8DBA6;  margin-left: auto;  margin-right: auto; word-spacing: normal;   white-space: normal;}
.forumline  {background-color: #000000; border: 1px #303F56 solid;}
td.monsterdb {  text-align: center; border: 1px solid #0099CC;}
table.monsterdb2 {
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #F8DBA6;
    border-width: 1px 1px 1px 1px;
    font-size: 10pt;
    text-align: center;
    border-collapse: separate;
}
 
 
td.calc {   text-align: center; border: 1px solid #F8DBA6;  padding: 3px;}
 
 
/** BASIC */
 
html, body {
    height: 100%;
}
 
body {
    margin: 0px;
    padding: 0px;
    background: #000000 url(images/subpage1.bg01.jpg) repeat-x left top;
}
 
/** FORMS */
 
form {
    margin: 0px;
    padding: 0px;
    fieldset input: color: #000000;
}
 
/** HEADINGS */
 
h1, h2, h3 {
    margin: 0px;
    color: #FBFAFA;
}
 
h1, h2 {
    font-weight: normal;
}
 
h1 {
    font-size: 22px;
}
 
h2 {
    font-size: 16px;
}
 
h3 {
    margin-bottom: 10px;
    font-size: 11px;
}
 
/** TEXTS */
 
body, th, td, input, textarea, select {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #CADFE6;
}
 
p, blockquote, ul, ol, dl {
    margin-top: 0px;
    margin-bottom: 1em;
    text-align: justify;
}
 
ul, ol {
    margin-left: 0px;
    padding-left: 0px;
    list-style-position: inside;
}
 
.list1 {
    margin: 0px;
    padding: 0px;
    list-style-position: outside;
    list-style: none;
}
 
.list1 li {
    margin-bottom: 1px;
    padding: 10px 15px 5px 15px;
    background: #0F2229 url(images/homepage27.jpg) no-repeat left top;
}
 
.list1 li.alt {
    background: #09151A url(images/homepage28.jpg) no-repeat left top;
}
 
.list1 .date {
    float: right;
    color: #40524D;
}
 
.list2, .list3 {
    margin: 0px;
    padding: 0px;
    list-style-position: outside;
    list-style: none;
    line-height: normal;
}
 
.list2 li, .list3 li {
    margin-bottom: 20px;
}
 
.list2 p, .list3 p {
    margin: 0px;
    padding: 0px;display: inline;
    line-height: normal;
}
 
.list3 li {
    margin-bottom: 15px;
    padding-bottom: 25px;
    background: url(images/homepage29.jpg) repeat-x left bottom;
}
 
.list3 h3 {
    display: inline;
}
 
.list3 p {
    display: block;
}
 
/** LINKS */
 
a {
    text-decoration: none;
    color: #F8DBA6;
}
 
a:hover {
    text-decoration: underline;
}
 
/** STYLES */
 
.style1 {
    margin: 0px;
    padding: 15px;
    text-align: right;
}
 
.style2 {
    text-align: center;
}
 
.style3 {
    margin: 0px;
    padding: 0px;
    text-align: right;
}
 
/** BACKGROUNDS */
 
.bg1 {
}
 
/** MISC */
 
.align-justify { text-align: justify; }
.align-right { text-align: right; }
 
img { border: none; }
 
img.left {
    float: left;
    margin: 3px 15px 0px 0px;
}
 
img.right {
    float: right;
    margin: 3px 0px 0px 15px;
}
 
hr { display: none; }
 
.hr1 {
    height: 1px;
}
 
/** WRAPPER */
 
#wrapper {
    background: url(images/subpage1.bg03.jpg) no-repeat center top;
}
 
#wrapper-bg {
    background: url(images/subpage1.bg02.jpg) repeat-y center top;
}
 
.wide-subpage #wrapper {
    background-image: url(images/subpage2.bg01.jpg);
} 
 
.wide-subpage #wrapper-bg {
    background-image: url(images/subpage2.bg02.jpg);
} 
 
/** MENU */
 
#menu {
    background: url(images/homepage02.jpg) no-repeat left top;
}
 
#menu a {
    color: #F6F4EF;
}
 
/** PAGE */
 
#page {
    background: url(images/subpage1.bg04.jpg) no-repeat left bottom;
}
 
.wide-subpage #page {
    background-image: url(images/subpage2.bg03.jpg);
}
 
/** CONTENT */
 
#content {
}
 
.wide-subpage #content {
    background: url(images/subpage2.bg01.jpg) no-repeat 50% -188px;
}
 
.wide-subpage #content .box .content {
    padding: 30px 45px;
    background: url(images/subpage2_02.jpg) no-repeat left top;
}
 
#content .box .meta {
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: normal;
    color: #52645D;
}
 
/** TWO-COLUMN SECTION */
 
.two-columns {
    background: url(images/homepage14.jpg) repeat-y left top;
}
 
.two-columns .column-one {
    width: 363px;
}
 
.two-columns .box .content {
    background: url(images/homepage26.jpg) no-repeat right top;
}
 
.two-columns .column-two {
    width: 362px;
}
 
/** SIDEBAR */
 
#sidebar {
}
 
#sidebar .box .content {
    background: url(images/homepage07.jpg) no-repeat right top;
}
 
#sidebar .box {
}
 
#sidebar .box .content {
    padding: 0px 0px 15px 0px;
}
 
#sidebar .box ul {
    margin: 0px;
    padding: 0px;
    list-style-position: outside;
    list-style: none;
}
 
#sidebar .box ul li {
    height: 20px;
    padding: 8px 0px 0px 35px;
    background: url(images/homepage11.jpg) no-repeat left top;
}
 
#sidebar .box ul li.first {
    background: none;
}
 
#sidebar .box ul li a {
    text-decoration: none;
    color: #CADFE6;
}
 
#sidebar .box ul li a:hover {
    text-decoration: underline;
    color: #F8DBA6;
}
 
#sidebar .box .padded {
    padding: 20px 35px;
}
 
 
/** FOOTER */
 
#footer {
    background: url(images/subpage1.bg05.jpg) no-repeat left top;
}
 
#footer p {
    margin: 0px;
    padding: 50px 0px 0px 0px;
    text-align: center;
    color: #354D4D;
}
 
/** BOX4 */
 
#box4 {
}
 
#box4 .content {
    padding: 20px 44px 30px 53px;
    background: url(images/subpage1_02.jpg) no-repeat left top;
    line-height: 170%;
}
 

I can not get this working....
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS and design help

Post by matthijs »

Your code is way too messy to make much sense. First thing you should do is clean it up a bit and organize the styles better. Organize the rules so it's easier to find out what does what. Work from general to more specific.

Do you use the firebug extension in Firefox? Using that, it's really easy to inspect each element and the styles each one has. That way, if you have multiple rules in your css overriding eachother, it's much easier to find out.

One thing I saw is:

Code: Select all

 
#contact .form textarea {
    color: #efefef;
}
 
But looking in the HTML you don't have a form with class form.
Just doing

Code: Select all

 
form textarea { color:#efefef; }
 
should do it. So without the dot .
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

i think i found the problem

Code: Select all

body, th, td, input, textarea, select {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #CADFE6;
}

if i change it to this,

Code: Select all

body, th, td, select {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #CADFE6;
}
if i made another one

Code: Select all

input, textarea, select {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #CADFE6;
}
would it work?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS and design help

Post by matthijs »

What do you think your self? And if it would work, why?
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

ok

I have sorted out my forums, but now have a bigger problem...

If you look here, and here you will see it. They are on the same system, why would they have back text?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: CSS and design help

Post by RobertGonzalez »

What is back text and where are you seeing it?
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

click both my links, you will see it
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: CSS and design help

Post by RobertGonzalez »

I clicked both those links before I asked the question.
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

you will see the main body of text black, and the other links main body white, why? its just a simple scirpt getting data from a mysql database, showing it on the site, and css code which uses the same...
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: CSS and design help

Post by RobertGonzalez »

The only thing I can tell you is validate your markup and your CSS. Rendering issues like these are most commonly associated with CSS or markup syntax errors.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS and design help

Post by matthijs »

You really have to learn how to do this your self.
- As Everah said, validate your HTML and CSS.
- (learn how to) Use the web developer extension
- Manual debugging: comment out pieces of HTML and/or CSS untill you find what rules effect what so that you know what the problem might be
Post Reply