Solved

Remove spaces in web page programmed in asp.net

Posted on 2009-07-09
3
254 Views
Last Modified: 2013-11-26
I have a web page built in asp.net that I am having issues with.  I want the top two menu bars to expand 100% left to right in the views web browswer.  I want only a 20px height between the middle sections of the web page, but for some reason, the space is more like 100px of white space.  I built the web page using tables and rows.  I can't seem to fix the issue.  I am using css style sheets to control the height of rows and other attributes.  I have attached the code below.  Thanks for the help.
<<webpage below>>
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="temp_home.aspx.vb" Inherits="aa_templates_Default" %>
 
<!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">
<head runat="server">
    <title></title>
    <style type="text/css"></style>
    <link href="../main_site.css" rel="stylesheet" type="text/css" />    
</head>
<body>
    <asp:Table ID="tb_Body" Width="100%" Height="100%" BackColor="White" runat="server">
        <asp:TableRow>
            <asp:TableCell HorizontalAlign="Center" VerticalAlign="Top">
            <asp:Table ID="tb_Body2" width="100%" CellPadding="0" CellSpacing="0" runat="server">
                <asp:TableRow CssClass="TopRow1">                    
                    <asp:TableCell>
                        <asp:Table ID="tb_Top_Menu" width="866" HorizontalAlign="Center" runat="server">
                            <asp:TableRow HorizontalAlign="Right">
                                <asp:TableCell>
                                <!-- #Include virtual="../aa_includes/menu_top1.txt" -->
                                </asp:TableCell>
                            </asp:TableRow>                            
                        </asp:Table>                                                                                                        
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow CssClass="TopRow2">                    
                    <asp:TableCell>
                        <asp:Table ID="Table1" width="866" HorizontalAlign="Center" runat="server">
                            <asp:TableRow HorizontalAlign="Right">
                                <asp:TableCell>
                                <!-- #Include virtual="../aa_includes/menu_top2.txt" -->
                                </asp:TableCell>
                            </asp:TableRow>                            
                        </asp:Table>                                                                                                        
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow CssClass="SpacerRow">
                    <asp:TableCell></asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>                    
                    <asp:TableCell>
                        <asp:Table ID="Table2" width="866" Height="413" HorizontalAlign="Center" runat="server">
                            <asp:TableRow HorizontalAlign="Right">
                                <asp:TableCell BackColor="Yellow">                                
                                </asp:TableCell>
                            </asp:TableRow>                            
                        </asp:Table>                                                                                                                                                                    
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow CssClass="SpacerRow">
                    <asp:TableCell>&nbsp;</asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>                    
                    <asp:TableCell>
                        <asp:Table ID="Table3" width="866" Height="413" HorizontalAlign="Center" runat="server">
                            <asp:TableRow HorizontalAlign="Right">
                                <asp:TableCell>
                                    <asp:Table ID="Table4" height="175" runat="server">
                                        <asp:TableFooterRow>
                                            <asp:TableCell Width="275" BackColor="Aqua"></asp:TableCell>
                                            <asp:TableCell Width="20"></asp:TableCell>
                                            <asp:TableCell Width="275" BackColor="Blue"></asp:TableCell>
                                            <asp:TableCell Width="20"></asp:TableCell>
                                            <asp:TableCell Width="275" BackColor="Maroon"></asp:TableCell>                                        
                                        </asp:TableFooterRow>                                                                            
                                    </asp:Table>                                                                                                
                                </asp:TableCell>
                            </asp:TableRow>                            
                        </asp:Table>                                                                                                                                                                                                            
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow CssClass="SpacerRow">
                    <asp:TableCell></asp:TableCell>
                </asp:TableRow>
                <asp:TableRow CssClass="BottomRow">
                    <asp:TableCell CssClass="TopRowMenu">Copyright 2008-2009 © LW 9900 
                    Almeda Genoa Rd Thomas, LA 77075 (337) 910-1911</asp:TableCell>
                </asp:TableRow>                       
            </asp:Table>                        
            </asp:TableCell>    
        </asp:TableRow>
    </asp:Table>
</body>
</html>
 
 
<<style sheet below>>
body {
}
tr.TopRow1
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	height: 30px;
	background-repeat: repeat;
	background-image: url('//aa_images/top_menu1_bg.gif');
	background-attachment: fixed;
	background-color: #75bee7;
}
tr.TopRow2
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	background-color: #0997cc;
	height: 85px;
}
tr.BottomRow
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	background-color: #75bee7;
	height: 85px;
}
tr.SpacerRow
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	height: 20px;
}
td.TopRowMenu
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	color: #FFFFFF;
	background-image:url('//aa_images/top_menu1_bg.gif');
}
td.TopRowMenu:hover
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	color: #FFFF00;
	background-image: url('//aa_images/top_menu1_bg.gif');
	text-decoration: underline;
}
td.TopRowMenu:link
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	color: #FFFF00;
	background-image: url('//aa_images/top_menu1_bg.gif');
	text-decoration: underline;
}
td.TopRowMenu2
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	color: #FFFFFF;
}
td.TopRowMenu2:hover
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	color: #FFFF00;
	text-decoration: underline;
}
td.TopRowMenu2:link
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	color: #FFFF00;
}
td.TopRowMenuSeperators
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	line-height: normal;
	vertical-align: middle;
	background-color: #99CCFF;
	color: #FFFFFF;
}

Open in new window

main-site.zip
0
Comment
Question by:OB1Canobie
3 Comments
 
LVL 7

Accepted Solution

by:
Randy Wilson earned 500 total points
ID: 24816585
Change the line:

<asp:Table ID="Table3" width="866" Height="413" HorizontalAlign="Center" runat="server">

to:

<asp:Table ID="Table3" width="866"  HorizontalAlign="Center" runat="server">

Remove the Height attribute on Table3.
0
 
LVL 6

Expert Comment

by:ahmad2121
ID: 24816648
In addition to the above, check that the width you are using is not too big. If you have a higher resolution screen (1600x1200) it should fit. To be sure, reduce that width.
0
 

Author Closing Comment

by:OB1Canobie
ID: 31601728
That worked. Thanks.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question