Master Page Content place holder and Cascading Style sheets

[greenMark]

Hi All,

I'm relatively new to ASP.NET and Visual Web Developer 2008.
I'm using a Master page with one content place holder.
There is a Cascading Style Sheet file which is being refered by the master page file as follws
"<link href="myStyleSheet.css" rel="Stylesheet" type="text/css"/>"

Part of the Style sheet as follows:

.textbox
{
    background-color: #FF6600;
    font-family: 'Book Antiqua';
    position: absolute;
    height: 18px;
    width: 268px;
    top: 664px;
    left: 201px;
} 
 

Initially I didn't inserted the top and left style attributes, they came up once I created a textbox and assign the CssClass of it to "textBox"

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="server">
 
<asp:TextBox ID="txtDesc" runat="server" CssClass="textbox"></asp:TextBox>
 
<asp:TextBox ID="txtRef" runat="server" CssClass="textbox"></asp:TextBox>
 
</asp:Content>
 

---------------------------------------------------------------------------

When ever I put another textbox with same CssClass it appears exactly on top of the previous textbox. Basically both of them share the same top and left attributes and their values. So when ever I try to move the textbox (left and top values change automatically) only that one can be seen.

-----------------------------------------------------------------------------

Moreover If I put another dropdown list or text area they are attached with each other with white strip. (As in the attachment)

-----------------------------------------------------------------------------

My other problem is although I created the server controls in content place holder area they are moving towards left and display on left (When displaying on the browser)

Thnaks a lot, Any help really appriciated...............

[Hamayun Khan]

Remove the below line from css class and check.

    position: absolute; 
 

Instead u can use I think not must.

    position: relative;
 

[Frinavale]

Why are you positioning your TextBoxes as absolute anyways?

This will make them appear to be on top of the rest of the content.

You could use "relative" instead of "absolute" except that you're going to have the same problem because you're specifying the exact spot that the text box should be rendered.


Basically, with your current style, you are taking your text box out of the normal flow of the web page and placing it in a specific spot (664px from the top and 201px from the left).

Since you're applying this style to more than one text box it is drawing every text box at the same position.....it Should be doing this because this is what you are telling it to do.

What do you really want to do with the text boxes?

Do you want them to appear next to each other in a group and move the group to 664px from the top and 201px from the left?
Do you want them to appear under one another?
Do you want them to be grouped at all????

In regards to the rest of your content moving, it's probably because you're telling it to as well.....