...

View Full Version : CSS is misaligning in IE, works in Firefox



Evario
10-03-2007, 05:53 AM
Hi I am (slowly) re-writing what I have done thus far on a website to avoid tables and use CSS only. The problem can be found at http://www.techlimelight.com/beta in the top right login box. The box displays correctly in Firefox but gets shifted down in IE. Safari works for the most part, however the password field is slightly misaligned.

Any suggestions on how to fix this/avoid this in the future? How can I make sure my code works as intended in most browsers? Particularly Firefox, Safari, and IE?

I've uploaded the css file.

Thanks in advance,
Marc

jlhaslip
10-03-2007, 06:14 AM
Begin by recognizing that the "remember me" and the "enter" are floated, so IE will handle them differently than a more compliant Browser.

Use the same approach on them as the rest of the form elements and see how you make out.

Evario
10-03-2007, 06:19 AM
Thanks for the quick reply! Ok I just tried that and it didn't seem to make any difference. I also tried completely getting rid of "remember me" and "enter" and the box is still misaligned so the problem must be elsewhere. Hmm

jlhaslip
10-03-2007, 06:26 AM
Put this at the top of your css to remove all the stray margins and padding


* html { margin:0; padding:0; }

_Aerospace_Eng_
10-03-2007, 06:28 AM
Put this at the top of your css to remove all the stray margins and padding


* html { margin:0; padding:0; }


No not that, that only targets IE. You want this

* {
margin:0;
padding:0;
}

Evario
10-03-2007, 06:28 AM
Ok well I seemed to have fixed the problem. I'm not sure if this is the correct way to go about it, or why it even fixed the problem though. Instead of applying a style to the login_rule.jpg image (the ruler below "Login" and "Forgot Password") via the <img id="">, I wrapped the <img> in a <div> tag and assigned the id to the div element. That seemed to fix the problem in IE. Still don't know why though. I have updated the website to reflect the result.

-Marc

vtjustinb
10-03-2007, 06:31 AM
I wouldn't be too scared of floats in IE. Most of IE's problems come from positioned elements and their proprietary "layout" concept.

Anyways you might want to check out:

http://www.456bereastreet.com/archive/200705/why_styling_form_controls_with_css_is_problematic/

LOTS of information about form styling with CSS, and how it can look on other browsers. There's also some pretty practical links to articles about formatting forms with CSS (as well as some good best-practices).

Also, "best viewed in Firefox" is a cop-out. :P It's easy to evangelize web-standards as a designer, but the responsibility still lies with you to provide a consistent experience for your users. Once designers let go of the need for pixel precision cross-browser and just focus on creating accessible, semantic content presented in a consistent presentation all of the OCD will go away. =) For all its faults, IE6 really isn't bad to develop for--IE5/Mac is another beast entirely though.

jlhaslip
10-03-2007, 06:33 AM
ff2, ie6 and ie7 all look good.

Evario
10-03-2007, 06:36 AM
@vtjustinb, haha yeah I was thinking of getting rid of that. I just put it up with all my frustrations in IE. Firefox just seems to "work better."

Does the style of coding look decent? Is what I am doing considered good practice both in the stylesheet and in the code itself? I just want to make sure I get this all sorted out before I convert the rest of my code from tables. Any suggestions to avoid browser conflicts, coding style suggestions, etc?

Thanks again,
Marc

jlhaslip
10-03-2007, 06:39 AM
No not that, that only targets IE. You want this

* {
margin:0;
padding:0;
}

yup, my bad... thanks for correcting that one, AE



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum