Page 1 of 1

why my text body is off in FireFox

Posted: Thu Aug 13, 2009 9:15 am
by drdokter
PLZ HELP! I am not going to pull my hair out over this, but I finally got my page to center in both FireFox and IE and now the body text is off (leaning too far to left) in Firefox but perfect in IE. This is the URL: http://ap.com.msu.edu/NEW/index2.php
Here is my CSS

body {
width: 800px;
margin:20px 0px;
padding:0px;
background-color:#FFFFFF;
}

div#container {
position: absolute;
top: 50%;
left: 50%;
width: 50em;
height: 50em;
margin-top: -25em; /*always take 1/2 from the size of the height, they have to be negative*/;
margin-left: -25em; /*always take 1/2 from the size of the width, they have to be negative*/
}

Re: why my text body is off in FireFox

Posted: Thu Aug 13, 2009 10:58 am
by pickle
It looks like you need to add some margin or padding to your .lead_text paragraph.

By the way, the method you've used to center your page is not ideal - there's much easier ways to do it. Also, your navigation should be a floated div.

With HTML like this:

Code: Select all

<body>
  <div id = "container">
    <div id = "header">
      Header info goes here
    </div>
    <div id = "nav">
      Put navigation here
    </div>
    <div id = "content">
      Put page content here
    </div>
  </div>
</body>
You can use this CSS:

Code: Select all

#container{
  width:800px;
  margin:0 auto;
}
#nav{
  float:left;
  width:150px;
}
#content{
  margin-left:160px;//this will create a 10 pixel space between the right edge of the menu and the left edge of the content
}
This specific code hasn't been tested, but it's right along the lines of the commonly practiced method.

Re: why my text body is off in FireFox

Posted: Thu Aug 13, 2009 4:05 pm
by drdokter
well darn, I did that but the text still won't move: http://ap.com.msu.edu/NEW/index2.php

/*-------------BODY CONTENT----------*/
#content {
width: 650px;
float: center;
padding-top: 10px;
padding-left: 5px;
position: relative;
}
#content li {
font-family: Verdana, Arial, Helvetica, sans-serif;
float: center;
font-size:10px;
margin-left:160px;