Clever Geek Handbook

CSS / table output on mac

I am having some problems with CSS and / or tables on my recently redesigned website . Because of the well-known "100% div height" usage, I have resorted to using tables as the structural element of the website. So it looks something like this:

HTML MARKUP:

<div id="header">...</div>
  <table>
  <tr>
    <td><div id="main">...</div></td>
    <td class="crighttd"><div id="cright">...</div></td>
   </tr>
</table>
<div id="footer">...</div>

AND CORRESPONDING CSS

table {
  border-top: 1px solid #6A6A6A;
  padding: 0;
  margin-top: 20px;
  border-spacing: 0
}

td {
  vertical-align: top;
  padding:0;
  margin:0
}

.crighttd {
  background: #4F4F4F;
  vertical-align:top;
  margin: 0
}

#cright {
  width: 185px;
  float: right;
  background: #4F4F4F;
  height: 100%;
  line-height: 1.2em;
  margin: 0;
  padding: 25px 0 25px 20px;
}

The problem here is that apparently the td on the right won't display at all in some browsers (seen this on Mac as well as older IE instances). Is this a CSS issue or something with tables?

+1


source to share


3 answers


Because of the well-known "100% div height" element ...

and what will it be? The one that decided here ? Basically, the important part



html, body {
    height: 100%;
}

Tables don't go as a workaround here because as far as I know they have similar problems regarding height.

+7


source


I'm pretty sure what you are trying to achieve is perfectly possible with CSS positioning and layout without having to resort to a table for layout.

It sounds like tables don't work anyway, so go for a clean CSS layout and not only will you likely find a solution, but you will also have a more suitable, standards-compliant site that you can be proud of. be easier to maintain and change in the future.



As far as I can tell, you are aiming for a fairly simple option with two fixed-width lines, centered. A quick Google search for "2 column css layout" will provide you with many examples and tutorials on approaches you can use to achieve this.

+1


source


For troubleshooting purposes, I usually provide my divs and other elements with a border so I can visually see where they are on the page.

border: 1px solid red;

I have a suspicion that this is not your td that is not displayed, but rather the div that you have inside. You can try setting the display property on it in css.

position: relative;

You can also try removing the float property from the #cright style.

This won't necessarily fix your problem, but rather just troubleshooting tips. Its hard to solve the problem without seeing the complete layout of your page.

0


source






More articles:


All Articles