Solved

Remove spaces in web page programmed in asp.net

Posted on 2009-07-09
3
256 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

734 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