Page 2 of 2
Re: CSS and design help
Posted: Sat May 03, 2008 3:32 am
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.
Re: CSS and design help
Posted: Sat May 03, 2008 6:25 am
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">
<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....
Re: CSS and design help
Posted: Sat May 03, 2008 6:36 am
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
should do it. So without the dot .
Re: CSS and design help
Posted: Sat May 03, 2008 7:30 am
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?
Re: CSS and design help
Posted: Sat May 03, 2008 8:16 am
by matthijs
What do you think your self? And if it would work, why?
Re: CSS and design help
Posted: Tue May 13, 2008 4:11 pm
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?
Re: CSS and design help
Posted: Tue May 13, 2008 4:45 pm
by RobertGonzalez
What is back text and where are you seeing it?
Re: CSS and design help
Posted: Tue May 13, 2008 6:05 pm
by gaogier
click both my links, you will see it
Re: CSS and design help
Posted: Tue May 13, 2008 6:15 pm
by RobertGonzalez
I clicked both those links before I asked the question.
Re: CSS and design help
Posted: Tue May 13, 2008 6:58 pm
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...
Re: CSS and design help
Posted: Tue May 13, 2008 7:43 pm
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.
Re: CSS and design help
Posted: Wed May 14, 2008 6:58 am
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