homepage Welcome to WebmasterWorld Guest from 67.202.56.112
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Centering a positioned div tag
Div centers but content doesn't
Red_Eye




msg:3254353
 12:27 pm on Feb 16, 2007 (gmt 0)

I am developing a web application. I have a popup div tag that displays a text box and a couple of buttons. I want the div tag to be centred on the page. To do this i have selected this method

div#comment
{
position:absolute;
margin-left:-200px;
left:50%;
top:30%;
width: 400px;
background-color: white;
}

<div id="comment" class="panel">
<h2>Add Comment</h2><br />
<asp:TextBox ID="txtBox1" runat="server" Rows="10" TextMode="MultiLine"></asp:TextBox><br />
<asp:Button ID="button1" runat="server" Text="Add" OnClick="btnAdd_Click" />
<asp:Button ID="button2"runat="server" Text="Cancel" OnClick="btnCancel_Click" />
</div>

which does centre the div tag. However not the text box it is left off to one side of the div tag. This only happens in IE7 it works fine in Firefox (no surprise). Any suggestions?

 

darrengeorge




msg:3254412
 1:47 pm on Feb 16, 2007 (gmt 0)

Try setting the stuff that wouldnt position properly to position:relative

This is a reasonably common problem with IE, in my experience.

Might work, might not eh!

cmarshall




msg:3254435
 2:08 pm on Feb 16, 2007 (gmt 0)

Here's what I do. This seems to work for everything.

<div id="invisible_wrapper" style="text-align:center;width:100%"><div id="visible_content" style="margin-left:auto;margin-right:auto"></div></div>

SuzyUK




msg:3254510
 3:18 pm on Feb 16, 2007 (gmt 0)

interesting.. here's a test I set up is this what you're meaning?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
div#comment {
position:absolute;
left:50%;
top:30%;
width: 400px;
background-color: #cfc;
margin-left:-200px;
border: 1px solid #000;
}
textarea {width: 196px;}
#comment * {margin: 10px 0;}
</style>
</head>
<body>
<div id="comment" class="panel">
<h2>Add Comment</h2>
<select><option>select box</option></select><br />
<textarea>text in textarea</textarea><br />
<input type="submit" value="submit" /><br />
<span>text in a span</span>
<p>text in a paragraph</p>
</div>
</body>
</html>

Only the textarea and input stick out left, (by 200px) - don't know why it's happening, but a quick and dirty fix wrap the form controls, or all of the content of #comment in another element - a wrapper div or even the <form> element itself if it's there.

e.g.

<div id="comment" class="panel">
<form><!-- or any other element -->

.. your content..

</form>
</div>

added: just playing around and noticed that adding float: left to affected elements brings them back into line too..

[edited by: SuzyUK at 3:26 pm (utc) on Feb. 16, 2007]

Red_Eye




msg:3254578
 4:08 pm on Feb 16, 2007 (gmt 0)

SuzyUK,

Thanks for the help I simply put a span tag round the text box and buttons and now it works in both IE and firefox.

Thanks for your help.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved