homepage Welcome to WebmasterWorld Guest from 54.167.185.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




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

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

 

yuval_raz




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

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

tunk




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

yuval_raz,

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

Robin_reala




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

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">

Maglez2000




msg:3167095
 3:16 pm on Nov 24, 2006 (gmt 0)

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved