Menu
Hello all,
a few weeks ago I started building my new homepage, but quickly ran into some problems. My coding should be w3c valid, however Internet Explorer seems to be *****ing on one table… By default I use firefox, but there’s still a majority of people who stick to Internet Explorer and such a big bug couldn’t be left unfixed I figured.
I’ve been using tables to construct the layout, the table with the content in is 75% of the user’s screen with, On the top and bottom row I used images to make a border. I didn’t use these images again for borders in the middle row scince there would be a incorrect margin.
So i made another table in the middle row, using css to make a border I’ve created the layout as I wanted it.
And then inthere , there is yet another table, this is done to make coluims filled with thext that have nbo border in ebtween etc, and some various other reasons.
That’s all for the explenation, here is the code:
[code=php]
css:
table.borderfix
{
width : 100%;
border-left-style : solid;
border-left-width : 2px;
border-left-color : #EDEDED;
border-right-style : solid;
border-right-width : 2px;
border-right-color : #EDEDED;
}
td.left
{
background-image : url(‘images/left.jpg’);
background-repeat : no-repeat;
height : 54px;
width : 15px;
}
td.right
{
background-image : url(‘images/right.jpg’);
background-repeat : no-repeat;
width : 31px;
}
.topleft
{
background-image : url(‘images/topleft.jpg’);
background-repeat : no-repeat;
height : 20px;
width : 18px;
}
.top
{
background-image : url(‘images/top.jpg’);
background-repeat : repeat-x;
}
.topright
{
background-image : url(‘images/topright.jpg’);
background-repeat : no-repeat;
width : 23px;
}
.bottomleft
{
background-image : url(‘images/bottomleft.jpg’);
background-repeat : no-repeat;
height : 19px;
width : 18px;
}
.bottom
{
background-image : url(‘images/bottom.jpg’);
background-repeat : repeat-x;
}
.bottomright
{
background-image : url(‘images/bottomright.jpg’);
background-repeat : no-repeat;
height : 19px;
width : 23px;
}
.main
{
width : 75%;
}
html:
<table class=”main” border=”0″ align=”center” cellspacing=”0″>
<tr>
<td class=”topleft”></td>
<td class=”top” nowrap=”nowrap”></td>
<td class=”topright”></td>
</tr>
<tr>
<td colspan=”3″ class=”nospace”>
<table class=”borderfix”>
<tr>
<td>
<table border=”0″>
<tr>
<td>
<!– fetch pages –>
test <a href=”#” class=”orange”>test</a> <a href=”#” class=”blue”>test</a><br />
blue urls are links to extern pages and will be opened in a popup<br />
orange urls are sponsored links, these links will also be opened in a sepperate window<br />
default <a href=”#”>urls</a> are colored red, there target is the current page<br />
some links are underlined in the default color, this means there is an explenation available for these words
<!– end fetch pages –>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class=”bottomleft”></td>
<td class=”bottom” nowrap=”nowrap”></td>
<td class=”bottomright”></td>
</tr>
</table>
Look at the aatached files for the correct output in firefox and the bugged output in IE
[upl-file uuid=1863eb3d-5516-485f-a700-233664a6f147 size=49kB]prob1.jpg
[upl-file uuid=8077b7a3-4837-4b40-bcc8-9d698a8a4591 size=47kB]prob2.jpg