CSS

[bozoReese]

Hi everyone,

I'm trying to display a weekly schedule using ASP.NET...to simplify I used a nested tables design with one table serving as a container for other table (one for each day of the week)

Since Firefox and IE doesn't display the GridLines the same way I decided to use GridLines=none and use CSS to format the border.

I have the following in my .aspx page

    <asp:Table ID="tblHolder" runat="server" Width="95%" CssClass="tblSchedule" CellPadding="0" Cellspacing="0">
        <asp:TableRow ID="main" runat="server" CssClass="tblNestedSchedule">
            
            <asp:TableCell ID="col1" runat="server" Width="15%">
                <asp:Table ID="tblPeriode" runat="server" Width="100%" GridLines="None" CellPadding="0" CssClass="tbl-no-margin" Height="100%">
                <asp:TableHeaderRow><asp:TableHeaderCell Text="Période"></asp:TableHeaderCell></asp:TableHeaderRow>
                </asp:Table>
            </asp:TableCell>
            
            <asp:TableCell ID="col2" runat="server" Width="17%">
                <asp:Table ID="tblMonday" runat="server" Width="100%" GridLines="None" CellPadding="0" CssClass="tbl-no-margin" Height="100%">
                <asp:TableHeaderRow><asp:TableHeaderCell Text="Lundi"></asp:TableHeaderCell></asp:TableHeaderRow>
                </asp:Table>
            </asp:TableCell>

            <asp:TableCell ID="col3" runat="server" Width="17%">
                <asp:Table ID="tblTuesday" runat="server" Width="100%" GridLines="None" CellPadding="0" CssClass="tbl-no-margin" Height="100%">
                <asp:TableHeaderRow><asp:TableHeaderCell Text="Mardi"></asp:TableHeaderCell></asp:TableHeaderRow>
                </asp:Table>
            </asp:TableCell>

		<...snip...>

	</asp:TableRow>
     </asp:Table>

I format my borders using the following CSS:

.tbl-no-margin
{
	border-collapse:collapse;
	margin:0px 0px 0px 0px;
}

.tbl-no-margin td, th
{
	border: solid 1px black;
}

My standard rows' height is 20px, if I have an event spanning over multiple rows I use 20*nbRows for my height.

This work just fine in FireFox but in IE the entire table height is smaller. It's a little hard to put in word, so
I took the following screenshots, you can see the second column being off in IE since two rows are taller.

FireFox:

IE:

 

[BillyRayPreachersSon]

Have you tried also setting "cellspacing" to "0" on the tables?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

My guess is that it's something to do with using percentages to calculate height.

IE has a habit of rounding numbers differently to Firefox.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[bozoReese]

Hiya,

I did try cellspacing="0" it didn't change anything as I was still loosing n pixels in the columns that had row "spanning" over multiple rows.

As it was bad design to start with (nested tables) I decided to write a new layer to get my data in the correct format so I could only write in one table using the correct rowspan.

Thanks for the replies!