Browserssssssss

Hey,

I use to try and code quite a lot a while back but kept giving up because it wouldn't look right in either FF or IE... i know there is a load of other browsers too so how would i test the coding in all those browsers if i don't have them?

What sort of code would it be to align a box dead bang centre of the browser.. in all browsers?

Can someone write a little code for me to understand please?

+rep if u can thanks very much,
Jamie

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:

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.

Thanks very much for the great reply.

What if i wanted to move the main content holder down from the top of the screen correctly?

Thank you.
Jamie

Originally Posted by Szandor 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;'.

Originally Posted by Awesome 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.

I'm with Awesome on this. Using your method, Szandor, you have to remember to reset the margin-left if you change the width. One day you WILL forget.
And the problem with a small viewport has already been admitted. So that's two problems. The method you give is suitable for centering things inside another div, but as Awesome says, centering the entire content that way is unnecessary.

It feels better to me to target the specific element, not having to reset the alignment of every element within the <body>.

Well, that was hard.

Originally Posted by RaZoR^ Code: body{text-align:center;} #container{margin:auto;width:80%;text-align:left;} Well, that was hard.

I didn't say it was hard, I said it felt wrong. I use auto margins too, but the other method has a few advantages I like. It's also more compatible, which means I can support IE5 without having to center everything in my body.

I'm not saying you're doing it wrong, I'm just saying it's a different way.