Topic: CSS half-breaking with Rails

Hello!

I am in the middle of coding my first Rails website and I've run into a snag. I have coded a page in XHTML Trans 1.0 and I have it the way I want it so I am beginning to add in the Rails code.

Unfortunately, I have hit a snag. The first time I booted up the server I discovered the page's style was half-broken. Some subclasses in the css file were working others were not, specifically two subclasses of table. Colors work in other classes, but not in these. They inherit attributes fine as well.

The only similarities between the two classes, other than being from table, is that they are both supposed to center the table. Could this have any effect?


Any help would be greatly appreciated!

Re: CSS half-breaking with Rails

Post your view code and your CSS (don't forget the [ code ] tags!) and I'll be happy to take a look.

Re: CSS half-breaking with Rails

a:link.menu
{
    color : #CCCCCC;
    text-decoration: none;
}

a:hover.menu
{
    color : #EEEEEE;
    text-decoration: underline;
}

a:visited.menu
{
    color : #999999;
    text-decoration: none;
}

body
{
    background-color : #AAAAAA;
    background-image : url("./pinstripes.gif");
    font-family : myriad pro;
}

table.banner
{
    background-image : url("./banner.jpg");
    height : 100px;
    vertical-align : top;
    width : 900px;
}

table.info
{
    background-color : none;
    font-size : 12px;
    margin-left : auto;
    margin-right : auto;
    text-align : center;
    vertical-align : top;
}

table.main
{
    background-color : #222222;
    margin-left : auto;
    margin-right : auto;
    width : 900px;
}

td.navigation
{
    background-color : #555555;
    text-align : center;
    vertical-align : top;
    width : 180px;
}


<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>twdc - home</title>
    <%= stylesheet_link_tag "standard" %>
   
</head>

<body>
    <table class="main">
        <tr>
            <table class="banner">
                <!-- Banner Table-->
            </table>
        </tr>
        <tr>
            <table width="900px">
                <tr>
                    <td class="navigation">
                        <!--Navigation-->
                                <a class="menu" href="/index.xhtml">home</a><br/>
                                <a class="menu" href="/about/index.xhtml">about</a>
                    </td>
                    <td width="720px">
                        <table align="left">
                            <!--Content-->
                            Test
                        </table>
                    </td>
                </tr>
            </table>
        </tr>
       
    </table>
   
    <table class="info">
        Copyright &copy; 2009, <a class="menu"  href="mailto:tyler@tylerwack.com">Tyler M. Wack</a> North Haven, Connecticut, USA. All rights reserved. <br/>
        <a class="menu" href="mailto:tyler@tylerwack.com">Contact Tyler</a>
    </table>
<%= yield %>
</body>
</html>


Sorry about that! I should have posted it in the first place.

Again, any help would be appreciated!

Re: CSS half-breaking with Rails

This might not be so much a Rails problem as a general coding problem. There are TABLEs that don't have enclosing TDs, and there are some TABLEs that don't even have TRs. The typical way to specify a table is:

<table>
<tr>
<td>
... cell content ...
</td>
</tr>
</table>

For the "cell content" you can have a table in there. If you fix that, does the page layout properly?

Re: CSS half-breaking with Rails

It works now!

Thanks so much!



I was quite puzzled because I had it working as it ought to have in regular XHTML, but when I converted it to comply with Rails it broke. I figured that if it worked in compliance to XHTML, it must work with Rails.

Anyway, thank you!