Help please?

  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

Mkay so, I'm converting my website to XHTML, and I have a problem..

I have a table layout but the XHTML validator won't accept, "bordercolor."

Code: [ Select ]
Line 15, column 20: Attribute "bordercolor" is not a valid attribute


... Or, "border-color."

Code: [ Select ]
Line 15, column 21: Attribute "border-color" is not a valid attribute


So, I tried to put the table style on my style sheet; Now the validator accepts it, but the style of the table won't show up at all.

Here's what I have on my style sheet.

Code: [ Select ]
 .table1     {cellpadding: 0px;
            width: 800px;
            background-color: #b9fbcd;
            border: 1px solid #000000; } 
  1.  .table1     {cellpadding: 0px;
  2.             width: 800px;
  3.             background-color: #b9fbcd;
  4.             border: 1px solid #000000; } 


And the actual page.

Code: [ Select ]
 <table class="table1">
-didn't copy all the stuff in the table-
</table>
  1.  <table class="table1">
  2. -didn't copy all the stuff in the table-
  3. </table>


Can anyone help? c:
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

Have you tried using table.table1 instead of just .table1?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

is it accepting the width, background-color, and cellpadding properties? Or no styles whatsoever?
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

@CXLink: I have, no help.

@mindfullsilence: The validator or the table? The validator accepts the styles, and the table isn't excepting any of them.
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

switch up your html

Code: [ Select ]
<table class="table1">
<tr>
    <td>didn't copy all the stuff in the table</td>
</tr>
</table>
  1. <table class="table1">
  2. <tr>
  3.     <td>didn't copy all the stuff in the table</td>
  4. </tr>
  5. </table>


got it working in ff3.5 on OSX
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

What did you change? Should I just paste everything I have in the table so it would be easier for you to see what I did wrong. Because that looks the same. o.o
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Sure, post what you got here
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

Alright.

Code: [ Select ]
<table class="table1">
<tr>
<td height="250" width="800" colspan="3" valign="top">
<img src="http://i25.tinypic.com/15hif42.jpg" alt="banner" /></td>
</tr>
<tr>
<td height="600" width="150" valign="top">
 
<div id="nav">
<h1>Site</h1>
<a href="">Test</a>
</div>
 
</td>
<td height="600" width="500" valign="top">
 
</td>
<td height="600" width="150" valign="top">
 
</td>
</tr>
<tr>
<td height="50" width="800" colspan="3" valign="top">
 
</td>
</tr>
</table>
  1. <table class="table1">
  2. <tr>
  3. <td height="250" width="800" colspan="3" valign="top">
  4. <img src="http://i25.tinypic.com/15hif42.jpg" alt="banner" /></td>
  5. </tr>
  6. <tr>
  7. <td height="600" width="150" valign="top">
  8.  
  9. <div id="nav">
  10. <h1>Site</h1>
  11. <a href="">Test</a>
  12. </div>
  13.  
  14. </td>
  15. <td height="600" width="500" valign="top">
  16.  
  17. </td>
  18. <td height="600" width="150" valign="top">
  19.  
  20. </td>
  21. </tr>
  22. <tr>
  23. <td height="50" width="800" colspan="3" valign="top">
  24.  
  25. </td>
  26. </tr>
  27. </table>


Code: [ Select ]
table1      {width: 800px;
            background-color: #b9fbcd;
            border: 1px solid #000000; }
  1. table1      {width: 800px;
  2.             background-color: #b9fbcd;
  3.             border: 1px solid #000000; }
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

so... what is your problem again? I checked the CSS in the validator and it found it valid...

The HTML though, you can't have height and width in the HTML... gotta do that with CSS using classes or ids.
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

The problem is the style for the table won't work.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

What doesn't work? It works for me...


Or do you mean the border for the cells? If so, do the following.
Code: [ Select ]
.table td {
    border: 1px solid #000000;
}
  1. .table td {
  2.     border: 1px solid #000000;
  3. }
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

None of the style for the whole table is working. I think it might be something within the rest of the code or something.. I'm going to just paste everything.

Code: [ Select ]
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<link rel="stylesheet" type="text/css" href="http://neopets.metrellie.comuv.com/style.css" />
<title>Metrellie~</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
 
<body>
 
<center>
 
<table class="table1">
<tr>
<td height="250" width="800" colspan="3" valign="top">
<img src="http://i25.tinypic.com/15hif42.jpg" alt="banner" /></td>
</tr>
<tr>
<td height="600" width="150" valign="top">
 
<div id="nav">
<h1>Site</h1>
<a href="">Test</a>
</div>
 
</td>
<td height="600" width="500" valign="top">
 
</td>
<td height="600" width="150" valign="top">
 
</td>
</tr>
<tr>
<td height="50" width="800" colspan="3" valign="top">
 
</td>
</tr>
</table>
 
</center>
 
</body>
 
</html>
  1.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6. <link rel="stylesheet" type="text/css" href="http://neopets.metrellie.comuv.com/style.css" />
  7. <title>Metrellie~</title>
  8. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  9. </head>
  10.  
  11. <body>
  12.  
  13. <center>
  14.  
  15. <table class="table1">
  16. <tr>
  17. <td height="250" width="800" colspan="3" valign="top">
  18. <img src="http://i25.tinypic.com/15hif42.jpg" alt="banner" /></td>
  19. </tr>
  20. <tr>
  21. <td height="600" width="150" valign="top">
  22.  
  23. <div id="nav">
  24. <h1>Site</h1>
  25. <a href="">Test</a>
  26. </div>
  27.  
  28. </td>
  29. <td height="600" width="500" valign="top">
  30.  
  31. </td>
  32. <td height="600" width="150" valign="top">
  33.  
  34. </td>
  35. </tr>
  36. <tr>
  37. <td height="50" width="800" colspan="3" valign="top">
  38.  
  39. </td>
  40. </tr>
  41. </table>
  42.  
  43. </center>
  44.  
  45. </body>
  46.  
  47. </html>


Stylesheet:

Code: [ Select ]
body        {background-color: #0b140f;
            font-family: century gothic;
            color: #000000;
            font-size: 12px}
           
h1          {font-family: century gothic;
            text-transform: none;
            text-align: center;
            margin: 1;
            border-bottom: 1px #42815b dashed;
            color: #42815b;
            font-size: 14px; }
h2          {font-family: Century Gothic;
            text-transform: none;
            text-decoration: none;
            font-weight: none;
            text-align: center;
            margin: 4;
            border: 1px #f09e25 solid;
            color: #fff18b;
            font-size: 12px;
            width: 200px;
            background: #ffbe4e; }
 
b           {color: #f6cb03; }
i           {color: #f6cb03; }
u           {color: #f6cb03;
            border-bottom: 1px dashed #fffa97; }
li          {font-family: century gothic;
            color: #f6cb03; }
 
a:link      {font-family: century gothic;
            font-size: 12px;
            color: #adfffe;
            text-decoration: none; }
a:hover     {font-family: century gothic;
            font-size: 12px;
            color: #f8886f;
            text-decoration: none; }
a:visited   {font-family: century gothic;
            font-size: 12px;
            color: #adfffe;
            text-decoration: none; }
a:active    {font-family: century gothic;
            font-size: 12px;
            color: #adfffe;
            text-decoration: none; }
           
#nav        {background-color: #63b28e;
            border: solid 1px #000000;
            text-align: left;
            width: 125px;
            margin: 3px;
            padding: 2px; }
           
table1      {width: 800px;
            background-color: #b9fbcd;
            border: 1px solid #000000; }
  1. body        {background-color: #0b140f;
  2.             font-family: century gothic;
  3.             color: #000000;
  4.             font-size: 12px}
  5.            
  6. h1          {font-family: century gothic;
  7.             text-transform: none;
  8.             text-align: center;
  9.             margin: 1;
  10.             border-bottom: 1px #42815b dashed;
  11.             color: #42815b;
  12.             font-size: 14px; }
  13. h2          {font-family: Century Gothic;
  14.             text-transform: none;
  15.             text-decoration: none;
  16.             font-weight: none;
  17.             text-align: center;
  18.             margin: 4;
  19.             border: 1px #f09e25 solid;
  20.             color: #fff18b;
  21.             font-size: 12px;
  22.             width: 200px;
  23.             background: #ffbe4e; }
  24.  
  25. b           {color: #f6cb03; }
  26. i           {color: #f6cb03; }
  27. u           {color: #f6cb03;
  28.             border-bottom: 1px dashed #fffa97; }
  29. li          {font-family: century gothic;
  30.             color: #f6cb03; }
  31.  
  32. a:link      {font-family: century gothic;
  33.             font-size: 12px;
  34.             color: #adfffe;
  35.             text-decoration: none; }
  36. a:hover     {font-family: century gothic;
  37.             font-size: 12px;
  38.             color: #f8886f;
  39.             text-decoration: none; }
  40. a:visited   {font-family: century gothic;
  41.             font-size: 12px;
  42.             color: #adfffe;
  43.             text-decoration: none; }
  44. a:active    {font-family: century gothic;
  45.             font-size: 12px;
  46.             color: #adfffe;
  47.             text-decoration: none; }
  48.            
  49. #nav        {background-color: #63b28e;
  50.             border: solid 1px #000000;
  51.             text-align: left;
  52.             width: 125px;
  53.             margin: 3px;
  54.             padding: 2px; }
  55.            
  56. table1      {width: 800px;
  57.             background-color: #b9fbcd;
  58.             border: 1px solid #000000; }


I've previewed it in firefox, safari, and my html editor program but the table is border-less and background-less. :\ -doesn't get what I'm doing wrong-

Oh and the style sheet isn't complete yet because I am changing the styles from my last style sheet, so some of the colors won't match right.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Maybe it requires that dot in front of the class name? .table1
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

Yea it does. Idk how that keeps getting erased. Anyway, Still nothing. :\
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Check your CSS... .table1 is not defined there. Don't forget to actually upload the CSS to your site

Also, add the following to your CSS (I think it would make the menu a little better :)
CSS Code: [ Select ]
#nav a   {display: block;
         width: 100%;}
  1. #nav a   {display: block;
  2.          width: 100%;}
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I just took your code and pasted into dreamweaver to test it. It works fine, although agains a background color like you have for your body, it's extremely difficult to see.

If you still aren't sure, try changing the code around to something more visible to test it. Change your css to this:
Code: [ Select ]
 
.table1      {
    width: 800px;
    background-color: #b9fbcd;
    border: 10px solid #0f0;
}
 
  1.  
  2. .table1      {
  3.     width: 800px;
  4.     background-color: #b9fbcd;
  5.     border: 10px solid #0f0;
  6. }
  7.  


this will show you where the border is.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Bogey wrote:
Check your CSS... .table1 is not defined there. Don't forget to actually upload the CSS to your site

Also, add the following to your CSS (I think it would make the menu a little better :)
CSS Code: [ Select ]
#nav a      {display: block;
            width: 100%;}
  1. #nav a      {display: block;
  2.             width: 100%;}

You must not have read my previous post ;)
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I did, I don't think she's uploaded it yet. What I think she meant when she said:
iveysaur wrote:
I've previewed it in firefox, safari, and my html editor program but the table is border-less and background-less. :\ -doesn't get what I'm doing wrong-


is that she tested it locally on her computer. If this is the case it wouldn't be on a host yet until she gets it working.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

mindfullsilence wrote:
I did, I don't think she's uploaded it yet. What I think she meant when she said:
iveysaur wrote:
I've previewed it in firefox, safari, and my html editor program but the table is border-less and background-less. :\ -doesn't get what I'm doing wrong-


is that she tested it locally on her computer. If this is the case it wouldn't be on a host yet until she gets it working.

If she is getting the problem where the table doesn't read anything (border and the background color), then there is a major flaw somewhere... especially if others having the exact same code (CSS and HTML) are seeing it perfectly... I don't see how that works.

Maybe it's that dot that keeps magically disappearing.

Anyway, she gave us the HTML she was using and in it, she was linking a CSS hosted online... she either didn't upload the CSS or didn't change the href part when she was linking her document to a stylesheet.



@iveysaur: What kind of editor are you using to create your site?
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

<.< I see what happened. -idiot-
I changed hosts and I forgot to change the url for the style sheet from comuv to x10hosting. xDD

And um.. now the styles work but the cells don't have a border. x.x -no sure how to do that-

I use.. FrontPage. xD
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

.. How did I double post? <.< -this was a double post but I edited it to say that-
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Don't you have it when a simple problem gets the best of you? :lol:
Bogey wrote:
What doesn't work? It works for me...


Or do you mean the border for the cells? If so, do the following.
Code: [ Select ]
.table td {
     border: 1px solid #000000;
}
  1. .table td {
  2.      border: 1px solid #000000;
  3. }

Read the post I posted earlier to make cells have borders.

Sometimes, the system glitches and makes you double-post.
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

>.< Not working. D;
Sorry I feel so... bothersome. o:
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

iveysaur wrote:
>.< Not working. D;
Sorry I feel so... bothersome. o:

I didn't add the 1 after table... (.table1) I hope you caught that.

Code: [ Select ]
.table1 td { border: 1px solid #000000; }


And don't worry, you're not bothersome... I do what you are doing even as we speak :lol: (My site review thread haha )
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

xD
Yea, I caught that. Lemme try it now. xD

Edit:

Ahh. I got it now. c:
All I had to do was add "border-collapse: collapse;" to the css and now it's all bordered. c:

xD Anyway, I'll just post here again if I have anymore trouble. ^^ Thanks.
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

I have another question. :x

Xhtml doesn't allow html tags in text areas, so is there another way to display the html to the visitor?

Sorry for the double post. >.<
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

You can sub all of your <> with &lt; and &gt;
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

Would it copy right for them? o:
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Ehh, not really. Another mod recently recommended Google Syntax Highlighter in another section. It could perhaps aid you in what you're attempting to do.
  • iveysaur
  • Novice
  • Novice
  • User avatar
  • Posts: 18
  • Loc: Florida

Post 3+ Months Ago

I tested it and when I copied the code on firefox and safari through the text area it copied the < and > as normal.

o: So thanks. xD
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 30 posts
  • Users browsing this forum: No registered users and 20 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.