| | |
CSS
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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
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
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:
Then assign a margin to the body.
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.
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.
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:
3. to center anything except text or an image, use the style:
4. To center an image in its container, use the styles:
Here is the code to center the image:
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.
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:
HTML and CSS Syntax (Toggle Plain Text)
.cenx {text-align: center;}
3. to center anything except text or an image, use the style:
HTML and CSS Syntax (Toggle Plain Text)
.ceno {margin-left: auto; margin-right: auto; clear: both;}
4. To center an image in its container, use the styles:
HTML and CSS Syntax (Toggle Plain Text)
.ceni {clear: both; padding: 12px;} /* put your padding for the image here */ .cenx {text-align: center;} .fxbx {margin: 0; border: none; padding: 0;}
HTML and CSS Syntax (Toggle Plain Text)
<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.
Last edited by MidiMagic; Jun 10th, 2008 at 4:12 am.
Daylight-saving time uses more gasoline
![]() |
Similar Threads
- HTML, CSS, JavaScript Developer (Web Development Job Offers)
- Layout Tables to CSS (HTML and CSS)
- CSS center vertical (HTML and CSS)
- CSS Quicky (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: CSS Style sheet
- Next Thread: browser display
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl






