WordPress.org

Support

Support » How-To and Troubleshooting » OMG tables and WordPress

OMG tables and WordPress

  • Dutch SilverShadow

    @dutch-silvershadow

    Dear forummembers,

    I have a big problem with a website i’m building for a client. The client has made an app to intergrate Google Maps and Google Earth into your TomTom. With this app he offers finished routefiles for your TomTom. Because he has so many routefiles he insisted to put every routefile in a table. You can find an example here.

    As you can see there are many different countries. The problem exists when you choose a country. Let’s look at Germany. You can see the table aligns good and everything seems to be nice, but if you scroll down, you’ll see some links that will ‘fall’ out of the td!?!?!

    Does anyone know how to fix this. I’ve entered the tables through html-editor in the WordPress CMS and styled them with CSS like this:

    <table class="tableRouteFiles">
    <tbody>
    	<tr>
    		<td class="tdHeadRouteFiles">
    			<a href="../maps/Tyre_D.html" target="_blank">
    				Would you like to see the available itineraries in real? Click here!
    			</a>
    		</td>
    	</tr>
    	<tr>
    		<td class="tdHeadCountry">
            	Files
            </td>
    		<td class="tdHeadRoutes">
            	Region / Description
            </td>
    	</tr>
    	<tr class="trRouteFile">
    		<td class="tdRouteFile">
            	<a href="files/D-Allgautour%201.itn">D-Allgautour 1</a><br clear="all"/>
                <a href="files/D-Allgautour%202.itn">D-Allgautour 2</a>
    		</td>
    		<td class="tdRouteDesc">
    		     Region: Bayern.<br clear="all"/><br clear="all"/>No description.
    		</td>
    	</tr>
    </tbody>
    </table>

    This is the CSS belonging to the table:

    table,
    .tableCountries,
    .tableRoutefiles
    {
    	float: left;
    	margin: 0;
    	padding: 0;
    	position: relative;
    	width: 510px;
    }
    .tableCountries,
    .tableRouteFiles
    {
    	border: 1px solid #333;
    	margin: 0 0 10px 0;
    }
    	.trRouteFile
    	{
    		border-bottom: 2px solid #333;
    		float: left;
    		position: relative;
    		width: 504px;
    	}
    		.tdRouteFile,
    		.tdRouteDesc
    		{
    			float: left;
    			position: relative;
    		}
    			.tdRouteFile
    			{
    				width: 220px;
    			}
    			.tdRouteDesc
    			{
    				border-left: 1px solid #333;
    				padding: 0 5px 0 5px;
    				width: 269px;
    			}
    			.tdRouteDesc p
    			{
    				width: 200px;
    			}
    			.tdRouteDesc p a
    			{
    				width: 50px;
    			}
    
    	.tdHeadCountry,
    	.tdHeadRoutes,
    	.tdHeadRoutefiles
    	{
    		background: #AEA294;
    		color: #333;
    		float: left;
    		font-size: 1em;
    		font-weight: bold;
    		height: 20px;
    		position: relative;
    		text-align: center;
    	}
    	.tdHeadCountry
    	{
    		border-bottom: 1px solid #333;
    		border-right: 1px solid #333;
    		width: 220px;
    	}
    	.tdHeadRoutes
    	{
    		border-bottom: 1px solid #333;
    		width: 279px;
    	}
    	.tdHeadRouteFiles
    	{
    		background: #3f3a34;
    		border-bottom: 1px solid #333;
    		height: 50px;
    		padding: 0;
    		width: 504px;
    	}
    		.tdHeadRouteFiles a
    		{
    			display: block;
    			text-align: center;
    			width: 100%;
    		}
    		.tdContentCountry,
    		.tdContentLink
    		{
    			float: left;
    			position: relative;
    		}
    		.tdContentCountry
    		{
    			border-bottom: 1px solid #333;
    			border-right: 1px solid #333;
    			font-weight: bold;
    			text-indent: 20px;
    			width: 220px;
    		}
    		.tdContentLink
    		{
    			border-bottom: 1px solid #333;
    			text-align: center;
    			width: 279px;
    		}

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator keesiemeijer

    @keesiemeijer

    use word-wrap in your theme’s style.css to break very long words. like so:

    .blogTheContent a {
    color: #ff9547;
    font-weight: bold;
    word-wrap: break-word;
    text-decoration: none;
    }
    Dutch SilverShadow

    @dutch-silvershadow

    Nice job KeesieMeijer!!! But i still have a problem with the table in Iexplorer compitablitiy mode… Check it… the table falls out of the div class blogTheContent…. Very strange. And it doesn’t seem to pick up my style for the class .tdHeadRouteFiles in my css…

    Have a solution for that problem 2?

    Dutch SilverShadow

    @dutch-silvershadow

    It has a problem adjusting the links without comp-mode in Iexplorer 2….

    Shit I hate Iexplorer!!!!

    Moderator keesiemeijer

    @keesiemeijer

    I think that is because you float your tables and the with of the table is larger than blogTheContent:

    table,
    .tableCountries,
    .tableRoutefiles
    {
    	float: left;
    	margin: 0;
    	padding: 0;
    	position: relative;
    	width: 510px;
    }

    You can leave the float out and on blogTheContent leave the width out. or give it a overflow hidden like so:

    .blogTheContent{
    color: #eeebe6;
    float: left;
    margin: 0;
    position: relative;
    width: 490px;
    overflow: hidden;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘OMG tables and WordPress’ is closed to new replies.
Skip to toolbar