WordPress.org

Ready to get started?Download WordPress

Forums

OMG tables and WordPress (5 posts)

  1. Dutch SilverShadow
    Member
    Posted 3 years ago #

    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;
    		}
  2. keesiemeijer
    moderator
    Posted 3 years ago #

    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;
    }
  3. Dutch SilverShadow
    Member
    Posted 3 years ago #

    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?

  4. Dutch SilverShadow
    Member
    Posted 3 years ago #

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

    Shit I hate Iexplorer!!!!

  5. keesiemeijer
    moderator
    Posted 3 years ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic