/    Sign up×
Community /Pin to ProfileBookmark

centering web page for firefox..

Copy linkTweet thisAlerts:
Oct 31.2006

hi guys, im wondering if you can help me solver sumthing..

i like my web pages to be centerd if the screen res size is bigger than my page size. horizontally i mean. for IE doing this..

[code]
body{
text-align: center;
}
[/code]

works.. but in firefox my page is still left justified. can anybody tell me how i get firefox to display it centerd?

thanks in advance for any helpers ?

khuti

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelOct 31.2006 — hi guys, im wondering if you can help me solver sumthing..

i like my web pages to be centerd if the screen res size is bigger than my page size. horizontally i mean. for IE doing this..

<i>
</i>body{
text-align: center;
}


works.. but in firefox my page is still left justified. can anybody tell me how i get firefox to display it centerd?

thanks in advance for any helpers ?

khuti[/QUOTE]

Yes. Define a width, -probably in percent, like width:85%;, then define margins, like margin:0 auto;

body {width:85%; margin:0 auto;}

makes the body be 85-percent of the user's screen width wide, and it 'margins' at zero-top, and auto-centers the left-right margin.
Copy linkTweet thisAlerts:
@mshalabiOct 31.2006 — i prefer putting the main container in a div that aligned center


<body>

[B]<div align="center">[/B]

<div class="container>

....

</div>

[B]</div>[/B]

</body>[/QUOTE]
Copy linkTweet thisAlerts:
@KravvitzOct 31.2006 — The align attribute on <div> elements has been deprecated, so don't use it.

[url=http://www.dynamicsitesolutions.com/css/center_element/]Four ways to Center Elements with CSS (in IE5+/Win and other browsers)[/url]
Copy linkTweet thisAlerts:
@alangrusNov 23.2006 — Taking WebJoels excellent suggestion, I added what I need to do Page Centering in both IE and all other browers. Try This:

[INDENT][FONT=Courier New][COLOR=DarkSlateBlue]



<html>

<head>



<style type="text/css" media="screen">

<!--

div { width:600px; margin:0 auto; border: solid 1px red; }

p, td { color: black; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 150%; padding-left: 8px; padding-right: 8px; text-align: left;}

-->

</style>



<body style="text-align: center;" >

<div>



<p>The "div" style takes care of centering a 600 pixel block, substitute a percentage, if you like. Certainly, the red border is optional. This works for standards compliant browsers (Non IE).<p>

<p>The body style "text-align: center;" is a workaround for the non-standards compliant browsers like Internet Explorer.

<p>The "p, td" style serves two purposes:</p>

<p>1) It defines your standard body text (mostly).</p>

<p>2) It overrides the "text-align: center" parameter IE kludge.</p>

<p>&nbsp;</p>

<p>This method should work in ALL browsers.</p>



</div>



</body>

</html>[/COLOR][/FONT][/INDENT]





Yes. Define a width, -probably in percent, like width:85%;, then define margins, like margin:0 auto;

body {width:85%; margin:0 auto;}

makes the body be 85-percent of the user's screen width wide, and it 'margins' at zero-top, and auto-centers the left-right margin.[/QUOTE]
Copy linkTweet thisAlerts:
@KravvitzNov 23.2006 — alangrus, you should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page. That HTML 4.01 Transitional doctype which does not include the URL tells the browser to render in Quirks Mode -- a generally bad thing.

[url=http://hsivonen.iki.fi/doctype/]Activating the Right Layout Mode Using the Doctype Declaration[/url]

[url=http://www.alistapart.com/articles/doctype/]Fix Your Site With the Right DOCTYPE![/url]

[url=http://www.juicystudio.com/choosing-doctype/]Choosing a DOCTYPE[/url]

[url=http://www.webdevout.net/doctype_switching.php]Doctype switching[/url]

[url=http://www.communitymx.com/content/article.cfm?cid=85FEE]Rendering Mode and Doctype Switching[/url]

[url=http://www.ericmeyeroncss.com/bonus/render-mode.html]Picking a Rendering Mode[/url]

http://www.w3.org/QA/2002/04/Web-Quality

http://www.w3.org/QA/2002/04/valid-dtd-list.html

You should use a Strict doctype.

[url=http://www.456bereastreet.com/archive/200609/no_more_transitional_doctypes_please/]No more Transitional DOCTYPEs, please[/url]

[url=http://accessites.org/gbcms_xml/news_page.php?id=23]It's Time To Kill Off Transitional DOCTYPES[/url]

[url=http://24ways.org/advent/transitional-vs-strict-markup]Transitional vs. Strict Markup[/url]
×

Success!

Help @khuti spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...