Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1286 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Browserssssssss

Thread title: Browserssssssss
Closed Thread    
    Thread tools Search this thread Display Modes  
02-12-2008, 03:56 AM
#1
Awesome is offline Awesome
Awesome's Avatar
Status: Pastafarian
Join date: May 2006
Location: Duct Taped to your Ceiling
Expertise:
Software:
 
Posts: 3,440
iTrader: 26 / 93%
 

Awesome is on a distinguished road

  Old

Originally Posted by Szandor View Post
I would say you just have to get all those browsers. All the browsers that count are free anyway. Most of them have their own quirks so there is no one that can replace them all when previewing.

Internet Explorer - Is quirky as hell, but it's the most common family of browsers.
Firefox - Has few quirks in the rendering, but they do exist.
Opera - The latest version actually renders correctly and does it fast too.
Safari - Is not very quirky, but suffers from using bolder characters that can mess up menus and such. There's a Windows version as well.
Lynx - A text browser that doesn't use CSS at all, good for checking your site for blind people. Also, it renders about the same as search engines render your site, so it's good for SEO.

I always design in Firefox since there are some kick ass add-ons I use all the time, then I check the site in the other browsers from time to time. I also use the "Total Validator" plugin in Firefox which lets me get screenshots of my site in various browsers on various systems.

As for the centering, I always use the following way:

Code:
#box {
	position: relative;
	width: 500px;
	left: 50%;
	margin-left: -250px; }
position: relative;
This lets me position the element. I can use other values as well, but the "position" attribute needs to be present in order to use the "left" attribute later on.

width: 500px;
Also needed for use later on. This method can't be used on relative widths, there are other ways for that. Make sure the width is an even number for perfect placement. (Odd numbers work too, but then your box will lean one pixel to right or left.)

left: 50%;
This places the left side of the element smack in the center of the screen. If I resize the viewport it will adjust itself.

margin-left: -250px;
Now we just pull back the box to place it in the center. The number should always be half of the width.

This method works in all major browsers with the only drawback being that if the viewport is made smaller than the box the scrollbar won't extend to make the left part visible, but it's a minor problem.

Well now, that's just ridiculous.

Set 'text-align: center;' on the body element, and then when you set your wrapper width 'add margin: auto;'.

02-12-2008, 12:49 PM
#2
Szandor is offline Szandor
Status: Junior Member
Join date: Jan 2008
Location: Växjö, Sweden
Expertise:
Software:
 
Posts: 45
iTrader: 0 / 0%
 

Szandor is on a distinguished road

  Old

Originally Posted by Awesome View Post
Well now, that's just ridiculous.

Set 'text-align: center;' on the body element, and then when you set your wrapper width 'add margin: auto;'.
It feels better to me to target the specific element, not having to reset the alignment of every element within the <body>. Also, the method I use allows for more detailed positioning. I can set a block element to be 123px to the right of the center if I wish, making it easy to position stuff without having to use any extra <div> blocks or messing with floats more than absolutely neccessary.

In short, "margin: auto;" will center your content ("text-align: center;" is needed for IE6 in quirks mode), but the method I use can do a bit more than that. It's mostly a question of preference, really.

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed