Centering DIVs Options

[annalucky]

When I attempt to center my DIV for all resolutions, it moves all the way to the left. Help?
I got the code from here.


http://www.createblog.com/forums/index.php...mp;hl=centering

[*WHIMSICAL 0NE*]

The positioning might be different. I know that I use PSP and I have to change up the numbers. It can be confusing.

Would you mind sharing your code?

[annalucky]

CODE

<style>td td object {position:absolute; left:0px; top:0px; display:block;}</style>

<style type="text/css">    table, tr, td {background:transparent;}
    table table table table, table table table table td.text, table.contactTable {display:none;}
    td.text table, .orangetext15 {visibility:hidden;}
    td.text table table {display:inline; visibility:visible;}
    td.text td.text table {display:none;}
    div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}

body {
background-color: FFFFFF;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color: FFFFFF;
scrollbar-shadow-color: 000000;
scrollbar-face-color:000000;
scrollbar-highlight-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-3dlight-color:000000;}

.head {
font-family: georgia;
font-size: 15px; color: FFFFFF;
background-color: none;
text-align:right;
font-weight:bold;
text-transform: lowercase;
background-image: url(http://i52.photobucket.com/albums/g37/juicyblush/barshort.gif);
background-repeat: no-repeat;
height: 18px;
width: 254px;
padding-top: 2px;}





.header {
font-family: georgia;
font-size: 15px; color: FFFFFF;
background-color: none;
text-align:right;
font-weight:bold;
text-transform: lowercase;
background-image: url(http://i52.photobucket.com/albums/g37/juicyblush/title.gif);
background-repeat: no-repeat;
height: 16px;
width: 376px;
padding-top: 2px;}

table table {border: 0px;}
table table table table{border: 0px;}



{The actual modules}
table table table {border: 0px solid; border-color: FFFFFF; background-color: FFFFFF; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px georgia; color:FFFFFF; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px georgia; color:FFFFFF; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

{style for the number of comments you have. The actual ..}
.redtext{font-family:georgia; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}  
.redbtext{font-family:georgia; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: georgia; color: FFFFFF; font-weight: bold; font-size: 20px; letter-spacing: -2px;}  

{”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style}
.lightbluetext8{font-family:georgia; font-size:9px;  color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}  
.whitetext12{font-family:georgia; font-size:9px;  color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}  

{”In your extended network” style}
.blacktext12{font-family: georgia; color: FFFFFF; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }  
.nametext{font-family: georgia; color: FFFFFF; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}  

{date stamp on comments}  
.blacktext10{font-family:georgia; font-size:9px;  color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}  

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}  
a.redlink{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.redlink:link{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:georgia; font-size:9px;  color:000000; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:link{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:active{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  

{Default Links}
a:link, a.man{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: lowercase; letter-spacing: 0px;}  
a:active{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: lowercase;}  
a:visited{font-family:georgia; font-size:9px; color:000000; font-weight:bold;border:0px; text-transform: uppercase;}
a:hover{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}

div table td font {visibility:hidden;}
div table table td font a {visibility:visible;}
table td div {visibility:hidden;}
table table td div {visibility:visible;}


b {background-color: none;
     color: 43C6FD;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:-1pt;
     font-weight:bold; }
i,em{
    background-color: none;
     color: F329B8;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:0pt;
     font-weight:normal;  }
u{
     color: 32AC32;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:1pt;
     font-weight:normal; }


</style>



<div class="bg" style="position:absolute; left:45%; top:0%;
margin-left:-175px; margin-top:150px; width:700px; height:536px;border-style:solid; border-width:0px; border-color:000000;overflow:hidden;">
<img src="http://i52.photobucket.com/albums/g37/juicyblush/lay.jpg">

</div>




<div class="content" style="position: absolute; left:365;  top:410px; width:290px; height:138px; overflow: hidden;">
<embed allowScriptAccess="never" allowNetworking="internal" enableJSURL="false" enableHREF="false" saveEmbedTags="true" src="http://www.myflashfetish.com/myflashfetish-mp3-player.swf?myid=1108026&mycolor=0xeae0de&mycolor2=0x000000"         menu="false" quality="best" scale="noscale" bgcolor="#ffffff" wmode="transparent" width="218" height="155" name="MyFlashFetish.com" align="middle" allowScriptAccess="never" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></center>


</div>


<div class="content" style="position: absolute; left:365;  top:510px; width:290px; height:185px; overflow: auto;">
<center><a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=5574579">Send Message</a> // <a href="http://home.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=5574579">My Friends</a> // <a href="http://comments.myspace.com/index.cfm?
fuseaction=user&circuitaction=viewProfile_commen
tForm&friendID=5574579&name=Anna.&MyToken=4f8379c
d-2184-4452-a4dd-138894d20fb2">Comment</a> // <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=5574579&MyToken=83f0dc91-92b2-4fa8-ad61-a0ec7f0d70e6"> Photos</a></center>
<BR><center><span class="head">&hearts;Comments</span><BR>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="5574579" type="hidden"><input value="comment" style="width: 215px; border-width: 1px; border-style: solid; border-color: FFFFFF; font-family: Tahoma; font-size: 10px; color: FFFFFF; background-color: transparent;" type="submit"><BR><textarea name="f_comments" cols="40" rows="2" style="border-width: 1px; border-style: solid; border-color: FFFFFF; font-family: trebuchet ms; font-size: 10px; color: FFFFFF; background-color: transparent;" style="overflow:auto;">Say What?</textarea></form>



<span class="head">
&hearts;Anna is infatuated with..</span><BR>
//him.<BR>//turtles<BR>
//the green earth and the big blue
<BR>//asian goods. <BR>//Cute Things. <BR>

<BR><BR><span class="head">&hearts;Anna Dislikes..</span><BR>

//Horror Movies<BR>
//very cloudy&hazy days :[<br>
//High Places<br>
<BR><span class="head">Friends</span><BR>
<img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/supastar898">Steven.</a>  <img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/xker">Ker.</a>  <img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/cybersweet89">Rosemary.</a>  <img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/nakunarimasu">Christine.</a>  <img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/awesome_sadie07">Sadie.</a>  <BR><img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=135396523">Charanjeet.</a><Br><BR>More Later.
</div>

<div class="content" style="position: absolute; left:555px;  top:250px; width:400px; height:200px; overflow: auto;">
<span class="header">About Her</span><BR>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=5574579&MyToken=83f0dc91-92b2-4fa8-ad61-a0ec7f0d70e6"><img align="left" src="http://myspace-363.vo.llnwd.net/01270/36/31/1270871363_l.jpg" width="100" border="0"></a>


</div>

I haven't positioned the content yet; I was still working on getting the image itself centered.

[annalucky]

bump?

[*WHIMSICAL 0NE*]

CODE

<style>td td object {position:absolute; left:0px; top:0px; display:block;}</style>

<style type="text/css">    table, tr, td {background:transparent;}
    table table table table, table table table table td.text, table.contactTable {display:none;}
    td.text table, .orangetext15 {visibility:hidden;}
    td.text table table {display:inline; visibility:visible;}
    td.text td.text table {display:none;}
    div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}

body {
background-color: FFFFFF;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color: FFFFFF;
scrollbar-shadow-color: 000000;
scrollbar-face-color:000000;
scrollbar-highlight-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-3dlight-color:000000;}

.head {
font-family: georgia;
font-size: 15px; color: FFFFFF;
background-color: none;
text-align:right;
font-weight:bold;
text-transform: lowercase;
background-image: url(http://i52.photobucket.com/albums/g37/juicyblush/barshort.gif);
background-repeat: no-repeat;
height: 18px;
width: 254px;
padding-top: 2px;}





.header {
font-family: georgia;
font-size: 15px; color: FFFFFF;
background-color: none;
text-align:right;
font-weight:bold;
text-transform: lowercase;
background-image: url(http://i52.photobucket.com/albums/g37/juicyblush/title.gif);
background-repeat: no-repeat;
height: 16px;
width: 376px;
padding-top: 2px;}

table table {border: 0px;}
table table table table{border: 0px;}



{The actual modules}
table table table {border: 0px solid; border-color: FFFFFF; background-color: FFFFFF; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px georgia; color:FFFFFF; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px georgia; color:FFFFFF; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

{style for the number of comments you have. The actual ..}
.redtext{font-family:georgia; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}  
.redbtext{font-family:georgia; font-size:9px; color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: georgia; color: FFFFFF; font-weight: bold; font-size: 20px; letter-spacing: -2px;}  

{”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style}
.lightbluetext8{font-family:georgia; font-size:9px;  color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}  
.whitetext12{font-family:georgia; font-size:9px;  color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}  

{”In your extended network” style}
.blacktext12{font-family: georgia; color: FFFFFF; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }  
.nametext{font-family: georgia; color: FFFFFF; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}  

{date stamp on comments}  
.blacktext10{font-family:georgia; font-size:9px;  color:FFFFFF; font-weight:none;border:0px; text-transform: uppercase;}  

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}  
a.redlink{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.redlink:link{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:georgia; font-size:9px;  color:000000; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:link{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:active{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}  

{Default Links}
a:link, a.man{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: lowercase; letter-spacing: 0px;}  
a:active{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: lowercase;}  
a:visited{font-family:georgia; font-size:9px; color:000000; font-weight:bold;border:0px; text-transform: uppercase;}
a:hover{font-family:georgia; font-size:9px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}

div table td font {visibility:hidden;}
div table table td font a {visibility:visible;}
table td div {visibility:hidden;}
table table td div {visibility:visible;}


b {background-color: none;
     color: 43C6FD;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:-1pt;
     font-weight:bold; }
i,em{
    background-color: none;
     color: F329B8;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:0pt;
     font-weight:normal;  }
u{
     color: 32AC32;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:1pt;
     font-weight:normal; }


</style>



<div class="bg" style="position:absolute; left:45%; top:0%;
margin-left:-175px; margin-top:150px; width:700px; height:536px;border-style:solid; border-width:0px; border-color:000000;overflow:hidden;">
<img src="http://i52.photobucket.com/albums/g37/juicyblush/lay.jpg">

</div>




<div class="content" style="position: absolute; left:50%; top:0%;
margin-left:-365px; margin-top:410px;width:290px; height:138px; overflow: hidden;">
<embed allowScriptAccess="never" allowNetworking="internal" enableJSURL="false" enableHREF="false" saveEmbedTags="true" src="http://www.myflashfetish.com/myflashfetish-mp3-player.swf?myid=1108026&mycolor=0xeae0de&mycolor2=0x000000"         menu="false" quality="best" scale="noscale" bgcolor="#ffffff" wmode="transparent" width="218" height="155" name="MyFlashFetish.com" align="middle" allowScriptAccess="never" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></center>


</div>


<div class="content" style="position: absolute;left:50%; top:0%;
margin-left:-365px; margin-top:510px;width:290px; height:185px; overflow: auto;">
<center><a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=5574579">Send Message</a> // <a href="http://home.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=5574579">My Friends</a> // <a href="http://comments.myspace.com/index.cfm?
fuseaction=user&circuitaction=viewProfile_commen
tForm&friendID=5574579&name=Anna.&MyToken=4f8379c
d-2184-4452-a4dd-138894d20fb2">Comment</a> // <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=5574579&MyToken=83f0dc91-92b2-4fa8-ad61-a0ec7f0d70e6"> Photos</a></center>
<BR><center><span class="head">&hearts;Comments</span><BR>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="5574579" type="hidden"><input value="comment" style="width: 215px; border-width: 1px; border-style: solid; border-color: FFFFFF; font-family: Tahoma; font-size: 10px; color: FFFFFF; background-color: transparent;" type="submit"><BR><textarea name="f_comments" cols="40" rows="2" style="border-width: 1px; border-style: solid; border-color: FFFFFF; font-family: trebuchet ms; font-size: 10px; color: FFFFFF; background-color: transparent;" style="overflow:auto;">Say What?</textarea></form>



<span class="head">
&hearts;Anna is infatuated with..</span><BR>
//him.<BR>//turtles<BR>
//the green earth and the big blue
<BR>//asian goods. <BR>//Cute Things. <BR>

<BR><BR><span class="head">&hearts;Anna Dislikes..</span><BR>

//Horror Movies<BR>
//very cloudy&hazy days :[<br>
//High Places<br>
<BR><span class="head">Friends</span><BR>
<img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/supastar898">Steven.</a>  <img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/xker">Ker.</a>  <img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/cybersweet89">Rosemary.</a>  <img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/nakunarimasu">Christine.</a>  <img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://myspace.com/awesome_sadie07">Sadie.</a>  <BR><img src="http://i52.photobucket.com/albums/g37/juicyblush/heart.gif"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=135396523">Charanjeet.</a><Br><BR>More Later.
</div>

<div class="content" style="position: absolute;left:50%; top:0%;
margin-left:-555px; margin-top:250px;width:400px; height:200px; overflow: auto;">
<span class="header">About Her</span><BR>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=5574579&MyToken=83f0dc91-92b2-4fa8-ad61-a0ec7f0d70e6"><img align="left" src="http://myspace-363.vo.llnwd.net/01270/36/31/1270871363_l.jpg" width="100" border="0"></a>


</div>

You'll probably have to mess around with the positioning of the actual divs. It's been a while since I've used that code.

[adafsdfasdfadasd...]

The easiest way to center divs on all resolutions is of course with absolute positioning. The trick is to use +/- margins, 50% left positioning, and and IE hack...

CODE

Example:

<style type="text/css">

.exampe1 {
position: absolute;
left: 50%;
margin-left: -50px;
/* Note: If you're using only one centered div on a page you would set the margin-left to 1/2 of it's width. By doing so you would be telling the browser to line up the left side of the square (with or without a border) with the pixel which is at the 50% mark of the page starting from the left, which of course isn't fully centered because the div itself takes up space to the right of the 50% mark. By adding in the negative margin (1/2 of the div's width) you're telling the browser to move the div left that many pixels thus making the half way point of the div line up with the half way point of the page */
height: 100px;
width: 100px;
}

</style>

<div class="example1"></div>

That will give you a centered page on Firefox and other moderns browsers I believe, but IE uses padding and margins differently then Firefox and other modern browsers. So for IE you get to go back into your coding and edit it again to make up for IE. But 1st I'll explain the difference between IE and Firefox's padding, borders and margins.

When adding a border with Firefox it simply adds onto the width of the box, whereas our buddy IE substracts the border's width and height [top+bottom width of the border from height and left+right width of the from the width]. Say you have a box with a height & width of 50 pixels and a border of 1 pixel. This is telling Firefox to simply adds on 2 pixels to the width and height (because 1pixels on each side would be 2 pix on opposite sides) and the new total width and height would be 52 pixels, but of course IE the screw up browser doesn't add a width it instead subtracts the border from the width you specify so you start with 50 pixels and add a border of 1 pixel to IE this means subtract from the space of the div, not add to make room for a border. IE would have the 1 pixel border, but the blank space inside of the div would be 1 pixel smaller then what you wanted. In relation to aligning a div this will throw off the width and heights and positioning of objects with absolute positioning. To make up for this we simply calculate a width for the modern browsers and go back and recalculate for IE.

Note#1: Firefox ignores any CSS property starting with and underscore "_", but IE doesn't so you can set up your CSS using the underscore for IE's settings.

Note#2: IE reads the CSS starting from top to bottom. Any value placed after another value for the same property is the one it uses. So IE will be reading both the property with the underscore and without the underscore. In order to for things to work you'll have to place the property with the underscore after the property for Firefox thus giving you one property with two values and each value is depending on which browser you're using.

Now I'll throw it together to get a box with a width/height of 100px and a one pixel border on IE and Firefox having it look the same

CODE

Example:

<style type="text/css">

.example1 {
position: absolute;
left: 50%;
margin-left: -50px;
_margin-left: -51px;
top: 0;
margin-top: 100px;
height: 100px;
_height: 102px;
width: 100px;
_width: 102px;
border: 1px solid;
border-color: black;
background-color: white;
}


</style>

<div class="example1"></div>

An example is on my test profile here