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*/
}
why my text body is off in FireFox
Moderator: General Moderators
Re: why my text body is off in FireFox
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:
You can use this CSS:
This specific code hasn't been tested, but it's right along the lines of the commonly practiced method.
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>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
}Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: why my text body is off in FireFox
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;
/*-------------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;