Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page layout looks strange

Status
Not open for further replies.
JulesBos

JulesBos

Programmer
Sep 6, 2006
68
US
Hi,

I've got a webpage developed in Visual Studio designer. It's a copy of another page, modified slightly. The original page formatting is fine. However the copied page, which consists of multiple panels and hundreds of labels, looks fine until half way down when the formatting goes very strange. 1/2 of the labels are supposed to have a clear background, as are the panels, and the other 1/2 of the labels are supposed to have grey backgrounds. When the page is displayed in the browser, from half way down, everything (all panels and all labels) have grey backgrounds and there's also an inexplicable empty grey space placed slap bang in the middle of one of the sections. I'm not an html expert at all, and know nothing about CSS, so I'm wondering if anyone can help me.

I'm posting the HTML for the bit of the page where it all goes drastically wrong below. If you think I should post all of the HTML, please let me know.

Thanks in advance.
Julia

Code: 
<asp:Panel id="TextPanel" runat="server" Height="522px" Width="856px">
                    <asp:label id="Label114" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="30px"
                        Width="856px" Font-Bold="True" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"
                        BorderColor="Black">Text</asp:label>
                    <asp:label id="Label113" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px">Shipping instructions:</asp:label>
                    <asp:label id="ShippingInstructionsLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="48px" Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label111" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px">Packing instructions:</asp:label>
                    <asp:label id="PackingInstructionsLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="48px" Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label110" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px">Routing instructions:</asp:label>
                    <asp:label id="RoutingInstructionsLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="48px" Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label109" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px">Billing instructions:</asp:label>
                    <asp:label id="BillingInstructionsLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="48px" Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label108" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px">Text for packing list:</asp:label>
                    <asp:label id="PackingListLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="48px"
                        Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label107" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px">Ship marks:</asp:label>
                    <asp:label id="ShipMarksLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="48px"
                        Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label106" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px"> End use (platform):</asp:label>
                    <asp:label id="EndUsePlatformLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="48px" Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label105" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px">Intermediate consignees:</asp:label>
                    <asp:label id="IntermediateConsigneesLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="48px" Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label104" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="40px"
                        Width="96px">General information:</asp:label>
                    <asp:label id="GeneralInformationLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="48px" Width="704px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label103" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="48px"
                        Width="224px">Instructions to be flowed down by GS order inter-co purchasing:</asp:label>
                    <asp:label id="InstructionsLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="48px"
                        Width="600px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                </asp:Panel>
                <asp:Panel id="ADataPanel" runat="server" Height="114px" Width="856px">
                    <asp:label id="Label120" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="30px"
                        Width="856px" Font-Bold="True" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"
                        BorderColor="Black">Additional data A</asp:label>
                    <asp:label id="Label119" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="16px"
                        Width="120px">Sold to category:</asp:label>
                    <asp:label id="SoldToCatLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="24px"
                        Width="240px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label118" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="16px"
                        Width="160px">Sold to business type:</asp:label>
                    <asp:label id="SoldToBusinessLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="24px" Width="240px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label117" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="16px"
                        Width="120px">Contract type:</asp:label>
                    <asp:label id="ContractTypeLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="24px"
                        Width="240px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label116" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="16px"
                        Width="160px">Country of end use:</asp:label>
                    <asp:label id="CountryEndUseLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana"
                        Height="24px" Width="240px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                    <asp:label id="Label115" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="16px"
                        Width="120px">Pricing type:</asp:label>
                    <asp:label id="PricingTypeLabel" runat="server" Font-Size="X-Small" Font-Names="Verdana" Height="24px"
                        Width="240px" BackColor="#D9D5D2" BorderWidth="1px" BorderStyle="Solid"></asp:label>
                </asp:Panel>
 
Sort by date Sort by votes
There's probably an error with the closing of a label somewhere that causes all subsequent labels to be children of the unclosed one. I would suggest you study the code in detail where the all grey happens.

And if you want more help from us, you will need to post the real html code (obtained from doing View -> View Source and saving what you get) and not the .Net unprocessed code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
OK, that helps thanks. I'm new to this and didn't realise that I needed to check the processed html. It's helped me narrow the problem down. It appears that the problem is the data that is populating one of the labels where things go wrong. I just tested it with different data and the page formats fine. I was using a record with data that has loads of unusual characters in it. Here's the html from the source when the page is populated. It screws up at the ShippingInstructionsLabel. How I resolve this I have no idea, but I'm pretty sure that's the problem. If anyone has any ideas, I'd be very grateful!

Thanks
Julia

Code: 
<div id="TextPanel" style="height:522px;width:856px;">
		
                    <span id="Label114" style="background-color:#D9D5D2;border-color:Black;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;font-weight:bold;height:30px;width:856px;">Text</span>
                    <span id="Label113" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;">Shipping instructions:</span>
                    <span id="ShippingInstructionsLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label111" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;">Packing instructions:</span>
                    <span id="PackingInstructionsLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label110" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;">Routing instructions:</span>
                    <span id="RoutingInstructionsLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label109" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;">Billing instructions:</span>
                    <span id="BillingInstructionsLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label108" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;">Text for packing list:</span>
                    <span id="PackingListLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label107" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;">Ship marks:</span>
                    <span id="ShipMarksLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label106" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;"> End use (platform):</span>
                    <span id="EndUsePlatformLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label105" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;">Intermediate consignees:</span>
                    <span id="IntermediateConsigneesLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label104" style="font-family:Verdana;font-size:X-Small;height:40px;width:96px;">General information:</span>
                    <span id="GeneralInformationLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                    <span id="Label103" style="font-family:Verdana;font-size:X-Small;height:48px;width:224px;">Instructions to be flowed down by GS order inter-co purchasing:</span>
                    <span id="InstructionsLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:600px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?></.,#';][=-</span>
                
	</div>
                <div id="ADataPanel" style="height:114px;width:856px;">
		
                    <span id="Label120" style="background-color:#D9D5D2;border-color:Black;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;font-weight:bold;height:30px;width:856px;">Additional data A</span>
                    <span id="Label119" style="font-family:Verdana;font-size:X-Small;height:16px;width:120px;">Sold to category:</span>
                    <span id="SoldToCatLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:24px;width:240px;">Int'l Rkwl Subsidiary</span>
                    <span id="Label118" style="font-family:Verdana;font-size:X-Small;height:16px;width:160px;">Sold to business type:</span>
                    <span id="SoldToBusinessLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:24px;width:240px;">Domestic Other</span>
                    <span id="Label117" style="font-family:Verdana;font-size:X-Small;height:16px;width:120px;">Contract type:</span>
                    <span id="ContractTypeLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:24px;width:240px;">Cost plus incentive</span>
                    <span id="Label116" style="font-family:Verdana;font-size:X-Small;height:16px;width:160px;">Country of end use:</span>
                    <span id="CountryEndUseLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:24px;width:240px;">US</span>
                    <span id="Label115" style="font-family:Verdana;font-size:X-Small;height:16px;width:120px;">Pricing type:</span>
                    <span id="PricingTypeLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:24px;width:240px;">Negotiated</span>
                
	</div>
 
Upvote 0 Downvote
Code: 
<span id="ShippingInstructionsLabel" style="background-color:#D9D5D2;border-width:1px;border-style:Solid;font-family:Verdana;font-size:X-Small;height:48px;width:704px;">this is a test to see if everything enters properly !"£$%^&*()_+_{}:~@~?[!]></[/!].,#';][=-</span>
Hard to say exactly what it is, but most probably the browsers get confused by the highlighted signs. Those are the begining and end signs of tags in html so the parser will surely get confused by it. If you need to use characters like that, make sure that you properly encode them into their html entities. The forum855 should help with how to do that.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
205
tyutghf
tyutghf
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
155
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
151
Carlvic
Carlvic
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
219
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top