Wowebmaster.com » Css

CSS Centering Web Page

sguler — Sat, 02 May 2009 20:40:02 +0000

If you are new to CSS, you may be having diffucult to center web pages horizontally. I remember I was trying to center the page by defining extra divs with align:center attributes. That is not necessary though. Just adding a margin attribute which is set to “auto” for left and right would do the trich to center your pages. See the following css code:

^?View Code CSS

/* CSS Document */
body { text-align:center } /*For IE6 Shenanigans*/
#content { width:907px; margin:0 auto; text-align:left } /* Centering Page */

You see the margin attribute ? By setting it to auto, the margins to the left and right will be automatic, which means your page will be centered. Of course, you have to specify a width for your div, otherwise the browser will not be able to calculate the margins to the left and right. The following shows the HTML code.

^?View Code HTML

That’s it. Enjoy.

Testing Your Web Design in IE6 & IE7

sguler — Wed, 03 Dec 2008 08:45:30 +0000

If you are a designer, then you know how it is complicated to code sites with cross-browser support. IE6 hacks, Safari support, CSS resets and so on… You keep trying to balance your website across all browsers. Half of pain is because of installing and testing all of the browsers at the same time. However you also know that you can’t install internet explorer 6 and internet explorer 7 at the same time to your computer.

Installing IE6 and IE7 Side by Side

With a few googles, i found out that you can actually install IE6 and IE7 in one computer. A few hacks to windows registry database, and a few file additions and deletions. Don’t be afraid, because someone has simplified it. Tredosoft is offering a software that supports Multiple IEs in one computer . Just download and run the file at this page and start testing your web designs in multiple internet explorer versions ( IE5, IE6 and IE7). Enjoy.

IE6 Negative Margin Problem

sguler — Tue, 02 Dec 2008 07:46:06 +0000

Designers should have faced with the problem of creating cross-browser designs. We have to serve to all of the visitors. Some may use Mozilla, some Internet Explorer 6 or IE7.

Usually, problem is related to IE6’s rendering engine. One of the most common problem with IE6 is that it doesn’t render the negative margins as IE7 and Mozilla does. Negative margins is rendered hidden out of the layer in IE6. Setting overflow to visible does not work and you go crazy.

The work around, making the negative margins visible, is so simple, it is even one of the simplest work arounds of the problems in IE6. Just add position:relative to your element with negative margins. This is it. Enjoy.

position:relative