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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Very strange page formatting problem

Status
Not open for further replies.
JulesBos

JulesBos

Programmer
Sep 6, 2006
68
US
Hi all,

I've got a big and complex webpage with hundreds of labels populated by a datareader, all held in multiple panels. All the data population works fine but, half way down the page, the formatting goes very strange and it doesn't look anything like it does in design mode. Background colour, label sizes and position all changed. I've had a look at the html and it seems fine (although this is something I'm not an expert at).

I've posted the html code for the part of the page where things go wrong below. Basically there are 2 panels and here's what's wrong

All panels and any labels that have a microsoft label1, label2 etc id should have a default background and any labels that have a meaningful name should have a grey background. When in run mode, everything below and including label 113 (including the panels) has a grey background.

Also below the last label in the first panel, there's a large empty space with a few random dividing lines, which don't make sense at all.

The 2 panels are sub panels in a page panel (does that make any difference).

Has anyone come across something like this before?

Thanks
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
it doesn't look anything like it does in design mode
Click to expand...
That's because the design window isn't a browser. It may give you a brief example of what it may look like but more often than not it won't as it hasn't rendered the controls. Ignore the design window and use CSS to position your page.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
Hi, I understand it's not a browser, but I have similarly complicated lengthy pages that display in the same way as they do in design mode. Why not this one?

Also, I know nothing about CSS and I'm on a very tight timescale and may not have time to learn this.

Have you any other suggestions as to why something that is supposed to have a default background (i.e.clear), shows as a grey background?

Thanks in advance.
Julia
 
Upvote 0 Downvote
Why not this one?
Click to expand...
Because as I said above it isn't a browser so it is pure guesswork from Visual Studio. Sometimes it may look like the final result, other times it may not. This is one of the many reasons why I avoid even looking at the design window.

Also, I know nothing about CSS and I'm on a very tight timescale and may not have time to learn this.
Click to expand...
You don't really have a choice. If you want to do web programming you will have to learn how the different browsers render the code that you write for them. Only when you learn this will you be able to make your page look how you want to your users. Looking at a design window will not really help you achieve this so I suggest you forget about how it looks in there and concentrate on how it looks in each browser.

Have you any other suggestions as to why something that is supposed to have a default background (i.e.clear), shows as a grey background?
Click to expand...
It could be any number of reasons. You will have to supply the HTML if you want us to look into it (and if so, the question may be better placed in the HTML forum).


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
Have found out what the problem is, from the html forum. It's related to the data that's being put into one of the labels. It contains the characters <>/ which have confused the browser.

If the data doesn't contain those characters, then the formatting of the page is fine.

Here's the source html, the problem starts with the ShippingInstructionsLabel. The other forum have suggested I now post back here and ask how to ensure any special characters are dealt with in my form populating code. Any suggestions?:

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>
 
Upvote 0 Downvote
Yes, that's why I suggested you supply the HTML as it's the browser that has the problem, not the design window. If there are special characters involved, you will need to encode them (e.g. < should become &lt;). To do this you can use the Server.HtmlEncode function.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

AhmedAzizBarbary
  • Locked
  • Question
How to pass list of checkboxes not checked on page model razor page?
Replies
0
Views
1K
AhmedAzizBarbary
AhmedAzizBarbary
AhmedAzizBarbary
  • Locked
  • Question
How to read data response body after success login razor page ?
Replies
0
Views
932
AhmedAzizBarbary
AhmedAzizBarbary
weberm
  • Locked
  • Question
How do I make a page with multiple AJAX custom controls?
Replies
2
Views
916
weberm
weberm
G12Consult
  • Locked
  • Question
Javascript from Content Pages
Replies
0
Views
797
G12Consult
G12Consult
G12Consult
  • Locked
  • Question
Different landing pages for different roles
Replies
0
Views
895
G12Consult
G12Consult

Part and Inventory Search

Sponsor

Back
Top