?
Solved

Asp.net 2.0 site alignment/ css issue.

Posted on 2009-02-24
3
Medium Priority
?
898 Views
Last Modified: 2012-06-27
Hi i got some shifting alignment issue with my webpage, okay i created my site using asp.net 2.0 and is use css for the formatting. I created a masterpage and the contents are placed in the content place holder.

My problem lies here,
http://www.frostedlights.com/PhotoGallery.aspx?albumId=28
http://www.frostedlights.com/PhotoGallery.aspx?albumId=26

Its both on a same page which is PhotoGallery.aspx, but only 28 and 26 are calling the different albumId, however both pages the alignment will shift when its loaded. Its both placed on a same materpage and its loading from a same datalist, then why will the alignements shift. You can better understand as i have outline borders for the page, when you are at albumId=26, you place your hand on the border and when you enter albumId=28, you can notice that the borderlines have shifted.

Could anyone advice me on what wrong with this? Its really very wierd. I have triend in firefox, safri, ie, its all the same. The page will shift. Could it be something wrong with my .css codes? or with my masterpage or my .aspx page?
.aspx page
------------
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
    <asp:PlaceHolder ID="phBreadCrumbs" runat="server"></asp:PlaceHolder><br />
    
    <asp:DataList ID="dlPhotos" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" HorizontalAlign="Center" Width="680px">
        <ItemTemplate>
        
        <a href='<%# String.Concat("photos/", Eval("photoL")) %>' rel="lightbox[album]" style="text-decoration:none">
            <img alt="photoS" src='<%# String.Concat("photos/", Eval("photoM")) %>' style="border-style:none; border:0; padding:2px"/> 
        </a>
        
        </ItemTemplate>
    </asp:DataList>
    
</asp:Content>
 
 
 
masterpage
------------
<body>
<div class="topContainer">
<div class="container">
    <form id="form1" runat="server">
        <!-- Page Header --> 
        <div class="banner";>
            <a href="Default.aspx"><img alt="logo" src="Images/frostedlightslogo.gif"  align="right" style="border-style:none"/></a><br />
        </div>
        
        <!-- Contents Section: Left Column --> 
        <div class="menu">
           	  <a href="CategoryListing.aspx"><img alt="Portfolio" src="Images/portfolio.gif" style="border-style:none"/></a><br />
              <a href="Buyprints.aspx"><img alt="Buyprints" src="Images/buyprints.gif" style="border-style:none"/></a><br />
              <a href="News.aspx"><img alt="News" src="Images/news.gif" style="border-style:none"/></a><br />
              <a href="Services.aspx"><img alt="Services" src="Images/services.gif" style="border-style:none"/></a><br />
              <a href="About.aspx"><img alt="About" src="Images/aboutme.gif" style="border-style:none"/></a><br />
              <a href="Testimonials.aspx"><img alt="Testimonials" src="Images/testimonials.gif" style="border-style:none"/></a><br />
              <a href="Contact.aspx"><img alt="Contact" src="Images/contact.gif" style="border-style:none"/></a><br />
       </div>
   
            
        <!-- Contents Section: Right Column --> 
        <div class="content">
 
            	    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            	    </asp:ContentPlaceHolder> 
           
        </div>
           
        
    </form>
</div>
 
</div>
 
</body>
 
 
.css
-------
html{
	background-color:#BDBC9F;
	color:#FFFFFF;
	font-family:Arial;
	font-size: 13px;
} 
 
 
.hyperLinkNoStyle
{
 text-decoration:none;
 color:#FFFFFF;
 font-family:Arial;
}
 
.justify
{
    text-align: justify;
}
 
.hl
{
font-size: 16px;
font-weight: 900;
color:#DD1E00;
}
 
 .clear
 {
 clear: both; 
 }
 
 .modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}
 
.cover
{
 max-width: 800px; 
 min-height:400px;
 text-align:center;
 overflow:auto;
}
 
.topContainer
{
width: 950px;
margin: auto;
background-color:#BDBC9F;
color: #ffffff;
border: 1px solid gray;
 
}
 
.container
{
width: 900px;
background-color:#BDBC9F;
color: #ffffff;
margin: 10px auto;
}
 
.banner
{
height:70px;
background-color:#BDBC9F;
padding-top:10px;
padding-bottom:10px;
}
 
.menu
{
background-color:#BDBC9F;
float: left;
width: 150px;
padding-left: 10px;
padding-right: 10px;
}
 
.content
{
 background-color:#696849;
 border-left: 1px solid gray;
 border-right: 1px solid gray;
 overflow:auto;
 width: 680px; 
 padding: 10px;
 min-height:400px;
}
 
.contentText
{
 background-color:#696849;
 border-left: 1px solid gray;
 border-right: 1px solid gray;
 overflow:auto;
 width: 500px; 
  padding-top:10px;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
 height:380px;
 margin-right:200px;
 
}
 
.contentTextRight
{
 background-color:#000000;
 width: 208px;
 height:400px;
 float: right;
}

Open in new window

0
Comment
Question by:applefruit
  • 2
3 Comments
 
LVL 25

Expert Comment

by:Rouchie
ID: 23722281
For me it works fine in Firefox.  The shift is caused by the sidebar appearing which reduces the size of the available space, so everything moves.  Shrink the vertical size of your browser window then view them both together.
0
 

Author Comment

by:applefruit
ID: 23729836
Hi so this problem cannot be solved isit? Cause for me i am using a 20" wide screen to view it, so its quite apparent that it shifts
0
 
LVL 25

Accepted Solution

by:
Rouchie earned 2000 total points
ID: 23731396
The problem cannot be solved, and will appear the same for everybody who has to scroll down to view content.

You could try forcing the scrollbar to appear even when its not needed (when everything fits on the screen without scrolling being required).  Its not good practice though as you would be overriding the browser's defaults settings.

This CSS might not work in all browsers but try it anyway in your Master page document or style sheet:


<head>
<style type="text/css">
  html {overflow: scroll;}
</style>
</head>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Suggested Courses
Course of the Month14 days, 16 hours left to enroll

840 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