Forum Wrapper Problem

**Reaper Charlie** · 01-31-2007, 02:12 PM

My forum wrapper (consisting of HTML and CSS) is being distorted because of the CSS applying to what is INSIDE the forum. Is there a way to make certain tds and divs act one way while having others act differently? (in the way of padding, border, and whatnot?) Because when I USE the CSS, I get this effect:
http://www.bombhq.com/wcss.jpg

The tables are distorted, and everything looks ugly on the outside, but the forum looks like it's supposed to.

When I DON'T use the CSS, I get this effect:
http://www.bombhq.com/wocss.jpg

The outside of the document (the wrapper) looks fine, but the forum goes awry...

Is there a way to assign some attributes to some tables without applying them to others?

The forum is located here:
http://www.bombhq.com/forums/index.php

This is what it's supposed to look like:
http://www.bombhq.com/forums/index.html
(I just put the forum into an iframe, which is not the solution I want.)

**Tom_M** · 01-31-2007, 02:26 PM

Just add a class to the table:

HTML Code:

<table class="whatever">

And then style it like this:

Code:

table.whatever {
    /* CSS rules in here */
}

**Reaper Charlie** · 01-31-2007, 02:33 PM

Thanks I will see where that leads me

**LadynRed** · 01-31-2007, 04:07 PM

Quote:

Is there a way to make certain tds and divs act one way while having others act differently?

Yes, it's called specificity. If you don't want the forum affected by other rules, use specificity in your rules.

For instance, instead of just h2, you'd say #forum h2 - that would apply the rules to JUST the h2's inside the div named #forum.

**Reaper Charlie** · 07:15 PM

If I insert the code

Code:

<table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="100" height="1">
  <tr class="wrapper">
    <td class="wrapper" width="100%" valign="top" height="1">
      <table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="92%" height="1">
    <tr class="wrapper">
          <td width="33%" class="wrapper" valign="top" background="http://www.webmaster-talk.com/images/border_left_grunge_bg.jpg"><img src="http://www.webmaster-talk.com/images/border_left_grunge.jpg" width="50" height="500"></td>
          <td width="33%" class="wrapper" valign="top" height="1" background="http://www.webmaster-talk.com/images/border_left.jpg"><img src="http://www.webmaster-talk.com/images/border_left.jpg" width="25" height="24"></td>
          <td width="33%" class="wrapper" height="1" valign="top">
        <table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="66%" height="21">
          <tr class="wrapper"><td class="wrapper" width="50%" background="http://www.webmaster-talk.com/images/topbg.jpg"><center><embed src="forumflash2007.swf" width=830 height=43></center></td></tr>
          <tr class="wrapper"><td class="wrapper" width="100%" colspan="2" height="75" valign="top"><img src="bomb5.jpg" width="838" height="113" alt="Band of Maniacal Brothers"></td></tr>
          <tr class="wrapper">
        <td class="wrapper" width="100%" colspan="2" valign="top" height="0">
          <table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr class="wrapper"><td class="wrapper" valign="top" width="100%"><img src="http://www.webmaster-talk.com/images/forumtopmid.jpg" width="838" height="14"></td></tr>
            <tr class="wrapper">
              <td class="wrapper" valign="top" width="100%">

<% GENERATOR %> 
<% CSS %> 
<% JAVASCRIPT %> 
</head> 
<body>
<div id="ipbwrapper">
<!-- BOARD HEADER -->
<% MEMBER BAR %>
<% NAVIGATION %>
<!--IBF.NEWPMBOX-->
<% BOARD %>
<% BOARD FOOTER %>
<% STATS %>
<% COPYRIGHT %>

              </td>
            </tr>
          </table>
            </td>
          </tr>
        </table>
          </td>
      <td width="34%" valign="top" background="http://www.webmaster-talk.com/images/border_right.jpg"><img src="http://www.webmaster-talk.com/images/border_right.jpg" width="25" height="24"></td>
      <td width="34%" valign="top" background="http://www.webmaster-talk.com/images/border_right_grunge_bg.jpg"><img src="http://www.webmaster-talk.com/images/border_right_grunge.jpg" width="50" height="500"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

with the CSS file

Code:

<style>

BODY { SCROLLBAR-FACE-COLOR: #7e7e7e; FONT-SIZE: 8.5pt; SCROLLBAR-HIGHLIGHT-COLOR: #7e7e7e; SCROLLBAR-SHADOW-COLOR: #7e7e7e; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #7e7e7e; LINE-HEIGHT: 120%; SCROLLBAR-ARROW-COLOR: #7e7e7e; SCROLLBAR-TRACK-COLOR: #7e7e7e; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif; SCROLLBAR-DARKSHADOW-COLOR: #7e7e7e; SCROLLBAR-BASE-COLOR: #7e7e7e; TEXT-DECORATION: none }

table, .wrapper
{
font-family: verdana;  font-size: 9px; color: 999999
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

tr, .wrapper
{
font-family: verdana;  font-size: 9px; color: 999999
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

td, .wrapper
{
font-family: verdana;  font-size: 9px; color: 999999
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}


p { font-family: verdana;  font-size: 9px; color: 999999 }

img { border: 0 }

a:link {color: CCCCCC; border: 0px; font-family: verdana;  font-size: 9px; text-decoration: none}
a:visited {color: CCCCCC;  font-family: verdana;  font-size: 9px; text-decoration: none} 
a:active {color: CCCCCC;  font-family: verdana;  font-size: 9px; text-decoration: none} 
a:hover {color: FFFFFF;  font-family: verdana;  font-size: 9px; text-decoration: none}

</style>

inside my "Edit Board Wrapper" editor for my forum, I get something akin to this image:

http://www.bombhq.com/wcss.jpg

If I take the

Code:

<% CSS %>

tag out, I get something like:

http://www.bombhq.com/wocss.jpg

What exactly am I doing wrong? This has had me stumped for months.