Reply

Join Date: Jun 2008
Posts: 1
Reputation: Rajz123 is an unknown quantity at this point 
Solved Threads: 0
Rajz123's Avatar
Rajz123 Rajz123 is offline Offline
Newbie Poster

CSS

 
0
  #1
Jun 4th, 2008
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
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 7
Reputation: kiraniru is an unknown quantity at this point 
Solved Threads: 0
kiraniru kiraniru is offline Offline
Newbie Poster

Re: CSS

 
0
  #2
Jun 4th, 2008
can you send me the code I can review your code and give you the solution
Reply With Quote Quick reply to this message  
Join Date: Nov 2007
Posts: 596
Reputation: buddylee17 has a spectacular aura about buddylee17 has a spectacular aura about 
Solved Threads: 125
buddylee17's Avatar
buddylee17 buddylee17 is offline Offline
Posting Pro

Re: CSS

 
0
  #3
Jun 4th, 2008
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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: CSS

 
0
  #4
Jun 10th, 2008
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:
HTML and CSS Syntax (Toggle Plain Text)
  1. .cenx {text-align: center;}

3. to center anything except text or an image, use the style:
HTML and CSS Syntax (Toggle Plain Text)
  1. .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)
  1. .ceni {clear: both; padding: 12px;} /* put your padding for the image here */
  2. .cenx {text-align: center;}
  3. .fxbx {margin: 0; border: none; padding: 0;}
Here is the code to center the image:
HTML and CSS Syntax (Toggle Plain Text)
  1. <div class="cenx fxbx">
  2. <img src="file.jpg" alt="pic" class="ceni" />
  3. </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
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC