JamesFrancisIM

Hi,

I've just done a basic mock-up for my "coming soon" index page, but I'm having a few cross-browser problems.

On the opt-in form it looks perfectly fine with Internet Explorer, but on Firefox and probably other browsers, the flashing cursor is lower than where I positioned it in IE, and i'm a perfectionist so I need it sorted .

I've looked all over the net and done everything mentioned to no avail, including setting margin:"0px" and padding:"0px".

I'd post the HTML and CSS codes directly on here but WarriorForum wont let me post URLs until my post count reaches 15

HTML can be obtained from visiting www dot InternetMarketingProfitMachine dot com, right clicking the page, then selecting "view source".

CSS can be obtained at www dot InternetMarketingProfitMachine dot com forward slash style dot css

Any help?

Thanks in advance

James.

n7 Studios

Hi James,

Are you sure it looks fine in IE and Firefox? I've just looked at your site in IE6, IE7 and Firefox 3 - and the opt-in form on all three have their text input elements way to the left of where they should be.

When it comes down to positioning issues across multiple browsers, it's worth reading up on how IE uses the "box model" - IE6 certainly interprets its margins and paddings differently to IE6, Firefox and general WebKit browsers.

Your solutions are to either code something aimed at IE6 first - the chances are there'll be few, if any, tweaks to then make in IE7 and Firefox - or to use a conditional stylesheet for IE6, to accomodate for the differences in margins, paddings and general layout.

It's a tough one - over time, you'll get better at it and soon code semantic markup and CSS which will 95% work in IE6 out of the box.

I'd also avoid using a background image with what look like text input fields for your opt-in form. You can style text inputs quite nicely these days using other techniques, which I'd recommend.

Best of luck.

JamesFrancisIM

Thanks, i'll try that and rework it


James.