Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: not2easy

text-align: center is not the working in firefox? . I dont think so.

   
8:28 am on Nov 24, 2006 (gmt 0)

5+ Year Member



couple things seem not to working properly with firefox like wondow.focus() (in some version of firefox like in version 2)

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;
}

9:34 am on Nov 24, 2006 (gmt 0)

5+ Year Member



the fact that IE renders text-align: center as a way to center block type elements is beyond me... is is not the right way to center elements in the flow.

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

9:47 am on Nov 24, 2006 (gmt 0)

5+ Year Member



yuval_raz,

Thank you very much for your help. It is now working perfectly right in the middle of the firefox. Thank you :)

10:56 am on Nov 24, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If your original code was working in IE then it means IE is in 'quirks mode'. While this can be useful in certain circumstances, as a beginner you'll be much better off working in 'standards mode' (as you've found out with these rendering differences already). Make sure you're using a complete DOCTYPE and you'll have less of these problems. You'll probably want to be using HTML4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3:16 pm on Nov 24, 2006 (gmt 0)

5+ Year Member



Tunk, you say that it's not right in the middle on FireFox, that may be because you have defined a width of 700px for the body, actually for everything, so the content will be right in the middle of those 700px.

Miguel Gonzalez.

[edited by: Maglez2000 at 3:22 pm (utc) on Nov. 24, 2006]

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month