Quantcast
Channel: Visual Studio and Visual Web Developer Express
Viewing all articles
Browse latest Browse all 3509

Master Page Table Cell Overlap

$
0
0

I have a Master Page with three tables, each one row and two columns.  Second table, second column has the ContentPlaceHolder.  Second table, first column has a menu.

(I did have one table with three rows, two columns, but separated it rather than figure out why properties turned up where they shouldn't)

If the content in the referenced page exceeds the content in the menu cell, it spreads down the page and overwrites the third table, rather than pushing it down the page.

Second table looks like:-

<table class="cellstyle1">
<tr>
<td class="cellstyle2" style="width:20%;">
<span class="textstyle7"><br />&nbsp;<a style="color:inherit" href="Default.aspx">Home</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="WhatWeDo.aspx">What We Do</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="ContactUs.aspx">Contact Us</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="FAQ.aspx">Frequently Asked Questions</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="News.aspx">News</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="Gifting.aspx">Gifting Our Services</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="NotWantToKnow.aspx">Things You May Not Want to &nbsp;Know!</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="Pricing.aspx">Pricing</a>&nbsp<br />
<br />&nbsp;<a style="color:inherit" href="Terms.aspx">Terms and Conditions</a>&nbsp;<br />
</span>
</td>
<td class="cellstyle5" style="position: absolute; vertical-align: top;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>

Styles are:-

.cellstyle1{border-style: none;border-width: 1px;background-color: #26706c;width: 100%;}
.cellstyle2{font-size: x-large;text-align: center;}

.cellstyle5{background-color:White;width: 80%;}

.textstyle7{color: #FFFFFF;font-size: large;text-align: center;}

The HTML of the page I see is:-

<link href="Styles/Site.css" rel="stylesheet" type="text/css" /></head>
<body>
<form method="post" action="FAQ.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRknz1Ms/+I32+vD0vIm06LBvdsUI4jEFx0gOfPSdoMn9s=" />
</div>

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="5B411042" />
</div>
<table class="cellstyle1">
<tr>
<td class="cellstyle3" style="background-image: url('/Images/bg_clouds_top.png'); background-repeat: repeat-x; " >
<div class="outerCloudsTop">
<div class="pageInner logoInner">
<div class="textLeft">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
<div class="textRight">YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</div>
<h1 class="textstyle16" style="clip: rect(auto, auto, 50px, auto)" >AAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
<h2 class="textstyle16" style="clip: rect(auto, auto, 50px, auto)" >BBBBBBBBBBBBBBBBBBBBBBBB</h2>
</div>
</div>
</td>
</tr>
</table>
<table class="cellstyle1">
<tr>
<td class="cellstyle2" style="width:20%;">
<span class="textstyle7"><br />&nbsp;<a style="color:inherit" href="Default.aspx">Home</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="WhatWeDo.aspx">What We Do</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="ContactUs.aspx">Contact Us</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="FAQ.aspx">Frequently Asked Questions</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="News.aspx">News</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="Gifting.aspx">Gifting Our Services</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="NotWantToKnow.aspx">Things You May Not Want to &nbsp;Know!</a>&nbsp;<br />
<br />&nbsp;<a style="color:inherit" href="Pricing.aspx">Pricing</a>&nbsp<br />
<br />&nbsp;<a style="color:inherit" href="Terms.aspx">Terms and Conditions</a>&nbsp;<br />
</span>
</td>
<td class="cellstyle5" style="position: absolute; vertical-align: top;">

<h1 class=".ContentTitle"><span class="ContentTitle">Questions You Might Ask</span></h1>
<p >&nbsp;</p>
<p ><span class="Question">First question</span></p>
<p ><span class="Answer">First answer <a href="Pricing.aspx">pricing page</a>.</span>&nbsp;</p>


Lots more of the same......



<p></p>

</td>
</tr>
</table>
<table class="cellstyle6">
<tr>
<td style="height:1px">&nbsp;</td>
</tr >
<tr>
<td class="cellstyle6" style="font-size: medium;">
&nbsp;&copy QQQQQQQQQQQQQQQQQQQQQQ &nbsp;|&nbsp; Sales Phone
(111) 1234567&nbsp;|&nbsp; <a style="color:inherit" href="mailto:oursales@our address">
our address</a> &nbsp;|&nbsp; <a style="color:inherit" href="http://www.facebook.com/qqqqqqq">www.facebook.com/qqqqqqqq</a>
<br />
<br />
</td>
</tr >
</table>
</form>
</body>
</html>

I'm new to this, and can't see how the second table, second column can overlap and hide the third table.

Your help apprecdiated.

Later edit:

I've replaced the top and bottom table by an image.  The single table still spills over the bottom image.  I guess the question is - how do I make a table expand to fit the contents?


Viewing all articles
Browse latest Browse all 3509

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>