|
CSS and html troubles >.<
|
|
Topic Started: May 1 2005, 09:22 PM (604 Views)
|
|
SyringeX
|
May 1 2005, 09:22 PM
Post #1
|
- Posts:
- 6,177
- Group:
- Members
- Member
- #10,063
- Joined:
- March 28, 2004
|
If anyone knows a good way to fix this, I'd be grateful if you could tell me. I've been working at this for hours and can't fix this :S
On my left navigation (code below) I have three table cells that are defined by three different classes. In these cells are links to different pages. Now when I add css to change the link color for one, it changes the color of all of them. For example, link1 needs to be blue, and it's declared that in the css. But then, when I add css to make a link red, it changes link1 to red as well. I've supplied the bits of html and css below where the problem is occuring:
Left Navigation:
- Quote:
-
<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="nav_top">Site Navigation</td></tr></table> <!-- All Links here should be gray --> <table cellpadding="0" cellspacing="0" width="100%" class="leftlink"> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">Home</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="content.php?act=hosting">Web Hosting</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">About XF</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">Staff Team</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">Resourcebase</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">Contact</a></td></tr> </table>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="nav_top">Portfolio Service</td></tr></table>
<table cellpadding="0" cellspacing="0" class="leftlink" width="100%"> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Log-in</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Register</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Featured Work</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Search-a-Folio</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Information</a></td></tr> </table>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="nav_top">Featured Site</td></tr></table> <!-- All Links here should be gray and smaller text --> <table cellpadding="0" cellspacing="0" width="100%" class="aff"><tr><td> <a href="http://www.nitekry.com/forums">NiteKry.com</a> </td></tr><tr><td> <a href="http://www.nitekry.com/forums"><img style="margin-top:1px;margin-bottom:1px;" src="http://img231.echo.cx/img231/5720/nkaff11pt.gif" alt="aff" /></a></td></tr><tr><td> NiteKry is a graphics design forum with an excellent atmosphere and design. NiteKry is great for showcasing your graphics and receiving tips to help your future productions. </td></tr></table> <!-- This link should be blue --> <table cellpadding="0" cellspacing="0" width="100%"><tr><td class="nav_top"><a href="http://www.nitekry.com/forums">Visit NiteKry!</a></td></tr></table>
CSS for three areas:
- Quote:
-
.leftlink a:link, a:active, a:visited, a:hover { font-family : verdana; font-size : 12px; color : #636262; text-decoration : none; font-weight : 0; letter-spacing : 0px; } .aff a:link, a:active, a:visited, a:hover { font-family : verdana; font-size : 10px; color : #636262; } .nav_top a:link, a:active, a:visited, a:hover { font-size : 9px; font-family : verdana; color: #80a9d6; text-decoration:none; }
Any help is appreciated
|
|
|
| |
|
Robb
|
May 1 2005, 09:56 PM
Post #2
|
- Posts:
- 4,448
- Group:
- Members
- Member
- #13,329
- Joined:
- May 14, 2004
|
i don't see anything wrong, anyway, the only think i could think of would be to add the class inside the link tags...or maybe change the tags names...those or the only suggestions i have man.
|
|
|
| |
|
michaelbenson
|
May 2 2005, 12:22 PM
Post #3
|
Zeus's Official Skin Tester
- Posts:
- 1,053
- Group:
- Members
- Member
- #12,037
- Joined:
- April 27, 2004
|
If possibly try actually adding the CSS style to the link itself. But at the moment i dont see what is wrong, but with lengthy code like that it is probally just a misplaced ; or something 
Try posting a link to your page so that we can actually see this in effect and view the rest of code to see if it is to blame?
|
|
|
| |
|
Nitrogenix
|
May 2 2005, 05:19 PM
Post #4
|
- Posts:
- 23,790
- Group:
- Members
- Member
- #15,034
- Joined:
- June 3, 2004
|
Post the whole code with links and I'll fix it for you
|
|
|
| |
|
Robb
|
May 2 2005, 05:23 PM
Post #5
|
- Posts:
- 4,448
- Group:
- Members
- Member
- #13,329
- Joined:
- May 14, 2004
|
- Ryan Fan
- May 2 2005, 09:19 PM
Post the whole code with links and I'll fix it for you
Syringe is a pretty talented scripter, so if he doesn't know how to fix it then you really have to know a lot to help him...
|
|
|
| |
|
SyringeX
|
May 2 2005, 05:43 PM
Post #6
|
- Posts:
- 6,177
- Group:
- Members
- Member
- #10,063
- Joined:
- March 28, 2004
|
That navtable is the whole area where the problem is, so it's a bit pointless to add the rest of the code, I think Anyways, yesterday I had it validated for xhtml and css, so I know that it can't be a coding where I'm missing a quote or a tag.
This one's really got me stumped I think I'm going to try and take out the tables and use divs and lists for the links instead.
|
|
|
| |
|
Nitrogenix
|
May 2 2005, 05:45 PM
Post #7
|
- Posts:
- 23,790
- Group:
- Members
- Member
- #15,034
- Joined:
- June 3, 2004
|
You will have to use a different class for the link1.
- Code:
-
<span class='classname'><a href='url'>Link</a></span>
|
|
|
| |
|
SyringeX
|
May 2 2005, 05:53 PM
Post #8
|
- Posts:
- 6,177
- Group:
- Members
- Member
- #10,063
- Joined:
- March 28, 2004
|
- Ryan Fan
- May 2 2005, 03:45 PM
You will have to use a different class for the link1. - Code:
-
<span class='classname'><a href='url'>Link</a></span>
Tried that, the link will have the value that it should when it's not hovered or visited, but it'll inherit the value of another class on when it's hovered on or visited :confused:
|
|
|
| |
|
Nitrogenix
|
May 2 2005, 06:07 PM
Post #9
|
- Posts:
- 23,790
- Group:
- Members
- Member
- #15,034
- Joined:
- June 3, 2004
|
Is it for a forum or website ?
Please post all the code -
|
|
|
| |
|
SyringeX
|
May 2 2005, 06:25 PM
Post #10
|
- Posts:
- 6,177
- Group:
- Members
- Member
- #10,063
- Joined:
- March 28, 2004
|
Good luck This problem has been bugging me for countless hours now.
html:
- Quote:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <link href="style.1.css" rel="stylesheet" type="text/css" /> <title>Title o.o</title> </head> <body> <table class="wrapper" cellpadding="0" cellspacing="0"><tr><td>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="top"> </td></tr>
<tr><td class="logo"><table width="100%" cellpadding="0" cellspacing="0"><tr><td>
<table cellpadding="0" cellspacing="0"><tr><td> <img src="images/logo.gif" alt="img" /></td><td><img src="images/logocenter.gif" alt="img" /></td><td class="center"> </td></tr></table></td>
<td class="topnav" align="right"><img class="nav_image" src="images/hometop.gif" alt="img" /> <img class="nav_image" alt="img" src="images/hostingtop.gif" /> <img class="nav_image" alt="img" src="images/portfoliotop.gif" /> <img class="nav_image" alt="img" src="images/abouttop.gif" /> <img class="nav_image" alt="img" src="images/contactop.gif" /> </td> </tr></table> </td></tr></table>
<table class="sub" cellpadding="0" cellspacing="0"> <tr><td>Welcome bla bla bla bla bla</td></tr> </table> <!-- Start Main -->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="nav_wrapper"> <table cellpadding="0" cellspacing="0" class="nav_top"><tr><td>Site Navigation</td></tr></table>
<table cellpadding="0" cellspacing="0" width="100%" class="leftlink"> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">Home</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="content.php?act=hosting">Web Hosting</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">About XF</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">Staff Team</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">Resourcebase</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/square.gif" alt="img" /></td><td><a href="index.php">Contact</a></td></tr> </table>
<table cellpadding="0" cellspacing="0" class="nav_top"><tr><td>Portfolio Service</td></tr></table>
<table cellpadding="0" cellspacing="0" class="leftlink" width="100%"> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Log-in</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Register</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Featured Work</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Search-a-Folio</a></td></tr> <tr onmouseover="this.style.background='#f0f0f0'" onmouseout="this.style.background='#fafafa'"><td><img src="images/orb.gif" alt="img" /></td><td><a href="index.php">Information</a></td></tr> </table>
<table cellpadding="0" cellspacing="0" class="nav_top"><tr><td>Featured Site</td></tr></table>
<table cellpadding="0" cellspacing="0" class="aff"><tr><td> <a href="http://www.nitekry.com/forums">NiteKry.com</a> </td></tr><tr><td> <a href="http://www.nitekry.com/forums"><img style="margin-top:1px;margin-bottom:1px;" src="http://img231.echo.cx/img231/5720/nkaff11pt.gif" alt="aff" /></a></td></tr><tr><td> NiteKry is a graphics design forum with an excellent atmosphere and design. NiteKry is great for showcasing your graphics and receiving tips to help your future productions. </td></tr></table> <table cellpadding="0" cellspacing="0" class="nav_top"><tr><td><a href="http://www.nitekry.com/forums">Visit NiteKry!</a></td></tr></table>
</td> <td class="contentwrapper">
<img src="images/hostingbanner.gif" border="0" /> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="content_top" style="border-top:1px solid #e3e3e3;"> Web Hosting </td> </tr> <tr> <td>
<table cellpadding="0" cellspacing="0" class="contentspace_2" width="100%"> <tr> <td> <b><font color="orange">Hosting</font></b> </td> </tr> <tr><td>We offer quality-grade web hosting at affordable prices. Our packages are great for users that wish to host a personal site, a free resource site, or users that wish to host their own online portfolio. With great features, space, and small prices, what could possible be better? Register today to host your own site!</td></tr> <tr> <td style="padding-top:10px;"> <b><font color="orange">Hosting: Latest News</font></b> </td> </tr> <tr><td><b>5/01/05 - Start of webhosting!</td></tr> <tr><td>We have officially started it's webhosting by offer 3 gigs of webspace and 30 gigs of bandwidth to sponsor a referral competition at <a href="http://www.nitekry.com/">NiteKry</a>. Take a look around there and compete to win one of the packages.</td></tr> </td> </tr> </table> <center> <table width="99%" cellpadding="0" cellspacing="0" style="margin-top:20px;"> <tr> <td style="margin-right:30px;" width="33%"> <table cellpadding="0" cellspacing="0" width="95%"><tr><td class="nav_top" style="border-top:1px solid #e3e3e3;" width="100%">Basic Plan</td></tr> <tr><td width="100%" class="contentspace_2"> <ul align="right" style="padding:0px;margin:0px;z-index:none;"> <li>1,000 Megabytes Space</li> <li>10,000 Megabytes Bandwidth</li> <li>Unlimited Emails</li> <li>Unlimited FTP</li> <li>Unlimited MySQL Databases</li> <li>PHP and Perl support</li> <div style="text-align:center;margin-top:5px"><b>Monthly</b>: $1.50</div> <div style="text-align:center;"><b>Yearly</b>: $14.00</div> </ul> </td></tr> </table> </td> <td style="margin-right:30px;" width="33%"> <table cellpadding="0" cellspacing="0" width="95%"><tr><td class="nav_top" style="border-top:1px solid #e3e3e3;" width="100%">Advanced Plan</td></tr> <tr><td width="100%" class="contentspace_2"> <ul align="right" style="padding:0px;margin:0px;z-index:none;"> <li>2,000 Megabytes Space</li> <li>20,000 Megabytes Bandwidth</li> <li>Unlimited Emails</li> <li>Unlimited FTP</li> <li>Unlimited MySQL Databases</li> <li>PHP and Perl support</li> <div style="text-align:center;margin-top:5px"><b>Monthly</b>: $3.00</div> <div style="text-align:center;"><b>Yearly</b>: $33.00</div> </ul> </td></tr> </table>
</td> <td width="33%"> <table cellpadding="0" cellspacing="0" width="95%"><tr><td class="nav_top" style="border-top:1px solid #e3e3e3;" width="100%">Media Plan</td></tr> <tr><td width="100%" class="contentspace_2"> <ul align="right" style="padding:0px;margin:0px;z-index:none;"> <li>3,000 Megabytes Space</li> <li>30,000 Megabytes Bandwidth</li> <li>Unlimited Emails</li> <li>Unlimited FTP</li> <li>Unlimited MySQL Databases</li> <li>PHP and Perl support</li> <div style="text-align:center;margin-top:5px"><b>Monthly</b>: $4.50</div> <div style="text-align:center;"><b>Yearly</b>: $52</div> </ul> </td></tr> </table> </td> </tr> </table> </center> </td></tr></table> <!-- End Main --> </td> </tr> </table> </body> </html>
CSS:
- Quote:
-
body { background-image : url(images/bg.gif); background-color : #fff; margin : 0; padding : 0; } a:link, a:active, a:visited, a:hover { font-family : verdana, sans-serif; font-size : 10px; text-decoration : none; color : #636262; } img a:link, a:active, a:visited, a:hover { border : 0 none inherit; } .wrapper { width : 95%; background-color : #fff; margin : 0; margin-left : auto; margin-right : auto; } .top { background-color : #90b6e1; width : 100%; border : 1px solid #858484; height : 6px; margin : 0; font-size : 4px; font-family : verdana, sans-serif; } .nav_image { margin-left : 5px; } .logo { margin : 5px; width : 100%; } .sub { color : #636262; margin-top : 8px; font-family : verdana; padding : 2px; font-size : 10px; background-image : url(images/subgrad.gif); border : 1px solid #e3e3e3; text-align : left; width : 100%; } li { list-style-type : none; } .nav_top { background-image : url(images/grad.gif); background-color : #f2f2f2; font-size : 9px; letter-spacing : 1px; color : #80a9d6; font-weight : bold; font-family : verdana; text-align : center; border-left : 1px solid #e3e3e3; border-right : 1px solid #e3e3e3; border-bottom : 1px solid #e3e3e3; width : 100%; } .content_top { background-image : url(images/grad.gif); background-color : #f2f2f2; font-size : 10px; letter-spacing : 1px; color : #80a9d6; font-weight : bold; font-family : verdana; text-align : center; border : 1px solid #e3e3e3; } .content_top_1 { background-image : url(images/grad.gif); background-color : #f2f2f2; font-size : 10px; letter-spacing : 1px; color : #80a9d6; font-weight : bold; font-family : verdana; text-align : center; border-left : 1px solid #e3e3e3; border-right : 1px solid #e3e3e3; border-bottom : 1px solid #e3e3e3; border-top : 0 none inherit; } .leftlink { vertical-align : middle; font-family : verdana; font-size : 12px; color : #636262; background-color : #fafafa; border-left : 1px solid #e3e3e3; border-right : 1px solid #e3e3e3; border-bottom : 1px solid #e3e3e3; text-align : left; } .leftlink a:link, a:active, a:visited, a:hover { font-family : verdana; font-size : 12px; color : #636262; text-decoration : none; font-weight : 0; letter-spacing : 0px; } .aff { font-family : verdana; font-size : 10px; color : #636262; border-left : 1px solid #e3e3e3; border-right : 1px solid #e3e3e3; border-bottom : 1px solid #e3e3e3; padding : 2px; text-align : center; width : 100%; } .contentwrapper { padding : 0 20px 10px; vertical-align : top; width : 85%; } .contentspace { background-color : #fafafa; font-family : verdana; font-size : 12px; padding : 4px; color : #636262; vertical-align : top; border-left : 1px solid #e3e3e3; border-right : 1px solid #e3e3e3; border-bottom : 1px solid #e3e3e3; text-align : left; } .contentspace_2 { background-color : #fafafa; font-family : verdana; font-size : 11px; padding : 4px; color : #636262; vertical-align : top; border-left : 1px solid #e3e3e3; border-right : 1px solid #e3e3e3; border-bottom : 1px solid #e3e3e3; text-align : left; } .users { background-color : #fff; } .center { background-image : url(images/tile.gif); width : 50%; } .topnav { background-image : url(images/faderight.gif); background-repeat : no-repeat; width : 50%; background-position : left top; } .image_top { margin-left : 5px; vertical-align : middle; } .news { background-color : #f2f2f2; font-size : 10px; letter-spacing : 1px; color : #80a9d6; font-weight : bold; font-family : verdana; border : 1px solid #e3e3e3; text-align : center; } .nav_wrapper { width : 15%; vertical-align : top; } .nav_top a:link, a:active, a:visited, a:hover { font-size : 9px; font-family : verdana; color: #80a9d6; text-decoration:none; }
|
|
|
| |
|
SyringeX
|
May 4 2005, 08:09 PM
Post #11
|
- Posts:
- 6,177
- Group:
- Members
- Member
- #10,063
- Joined:
- March 28, 2004
|
Sorry to double post, but fixed it.
I took out the commas on the a:link, a:active etc. and separated them, and it worked O_o No clue why, though. I'm just happy to have this kink finally worked out
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|