Forum Moderators: not2easy
But that's javascript stuff and I have already given up on it.
Now with the css (well this is my very first css as I am not allowed to use table for layout anymore)
the code below working fine in IE (as usual) but I am a firefox user
so I expect my own webapp to be able to work on my preferred web browser too.
I put each <div> in roll header, menubar, content-main and footer in the <body> and I expected them to be displayed on the center of the page as I put text-align: center; in the body. It does appears to the center of IE but to the left of firefox... why?
Please take my stupidity away thank you.
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
background-image: url( ../images/darkbg.gif );
text-align: center;
}
div.header {
width: 700px;
height: 100px;
background-image: url( ../images/header.jpg );
}
div.menubar {
width: 700px;
height: 30px;
background-image: url( ../images/menubar.jpg );
}
div.content-main {
width: 700px;
height: 450px;
background-image: url( ../images/lightbg.jpg );
text-align: center;
}
div.footer {
width: 700px;
height: 30px;
border: 1px solid #bbb;
background-image: url( ../images/menubar.jpg );
text-align: right;
}
text-align: center is for centering inline type elements in a block type element
the right way of doing it is giving the DIV elements margin: 0 auto.
hope this helps.
have a nice weekend,
yuval
Thank you very much for your help. It is now working perfectly right in the middle of the firefox. Thank you :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Miguel Gonzalez.
[edited by: Maglez2000 at 3:22 pm (utc) on Nov. 24, 2006]
