CSS

[Rajz123]

Hello

I have been working as a Design and Web for 5 years. I have designed a login page in html using css and when I view it using IE and everything looks perfectly aligned center but When I view it on Firefox (2), it gets aligned left and I dont know what is reason behind
could you please guide me.

Thanks

[kiraniru]

can you send me the code I can review your code and give you the solution

[buddylee17]

I had this problem with a site. Turns out, IE has some type of default body margin that attempts to center the page when you don't instruct it to. There is no sure fire way to center a page without the use of the deprecated center tags and they will only validate in xhtml 1.0 transitional. Using the css: text-align:center, will center your text inside the element but won't center the element. I'm sure that Midi can shed more light on the subject. Firefox and most other good browsers, by default, aligns everything left(0,0). Did you put any margin on the body or position it? If not, I bet it's also aligned left in NetScape, Opera, and Safari.

For a consistent look across all browsers, first reset the margins: html,body{margin:0;padding:0;} Then assign a margin to the body. body{margin:10%;} Depending on the current width of you page content, this number may need to be increased or decreased. This will take some trial and error and also some testing on different browsers and screen resolutions to find a happy medium.
Here's a read that I often post when people ask about cross browser consistency. I've found that the only way to a consistent look across all browsers is to reset the default margin and padding on the elements you plan to use and then assign them a new value.

[MidiMagic]

Several tips:

1. Don't use size styles (width, height) in the same tag or style that contains nonzero surrounding styles (margin, border, padding). This is guaranteed to make IE render the page differently than other browsers. If both are needed, nest tags in the order you want them nested.

2. To center text, apply this style to the text, or to an overall div:

.cenx {text-align: center;}

3. to center anything except text or an image, use the style:

.ceno {margin-left: auto; margin-right: auto; clear: both;}

4. To center an image in its container, use the styles:

.ceni {clear: both; padding: 12px;} /* put your padding for the image here */
.cenx {text-align: center;}
.fxbx {margin: 0; border: none; padding: 0;}

Here is the code to center the image:

<div class="cenx fxbx">
  <img src="file.jpg" alt="pic" class="ceni" />
</div>

The text-align is necessary to get IE to work right. You can also put a title over or under the image and it will center with the image.

You can also use the fxbx style (fix the box) to create the 0 size surrounding styles for the problem in number 1 above.

5. If you use tables, you must set the vertical-align and text-align styles explicitly for the td and th tags, because IE behaves differently from other browsers here too.

6. Be aware that IE renders fonts thicker than other browsers do.