Homogenizing Browser Displays

[eggrock]

Example: http://up-nort.com/test/tctest.html - simple login form with a background image.

 

Testing in Firefox & IE6.

 

Some differences I've seen:

 

IE uses bullets in password boxes and sizes them accordingly. Firefox uses asterisks so type="text" and type="password" display exactly the same.

 

IE's input boxes are 1 pixel taller than Firefox's.

 

IE spaces input boxes (or <p>?) farther apart than Firefox.

 

IE's type="button" is wider (and I think taller) than Firefox's.

 

So... How the heck do I get them to display the same? Specify width/height for everything on the page?

Edited September 28, 2005 by eggrock

[abinidi]

Ok, first, cool login form. I LOVE the white border in the top right and bottom left corners. Way cool. (This is really why I'm posting: to tell you that I love the login form.)

 

Second, I'm not an expert here, but I think you really only have a couple of choices: (1) accept that there will be differences in broswers, and you can't make the experience identical in all browsers using conventional tools, (2) use JavaScript to detect the browser and then use "if" statements for different browser types, (3) use a browser-independent method for displaying your site (e.g. Flash).

 

I'm sure there are other options as well. Those are just the first three that come to mind for me.

 

As far as your example page goes, I'd be willing to live with the subtle differences you point out. But if you can't, then I guess you do have some options...

 

Best wishes,

[eggrock]

The problem is, those differences are going to add up and I'm not sure what the best method of keeping things aligned would be. Absolute positioning on <div> sections?

 

If you like the box (thanks!), it's from a little script I've been playing around with. Feel free to experiment (but it'll break here and there since I'm still coding it. And I'm not doing error checking now so you can run into div/0 errors.

 

http://up-nort.com/cgi-bin/test/boxBlend.cgi

 

Use hex values (000000-FFFFFF) for everything but width/height parameters. 'Sub-box' is used to get partial shading effects on the borders.

[carbonize]

Use CSS to specify exact heights and widths for the inputs etc.

[eggrock]

Yuck (the page is full of input boxes, sometimes hundreds).. but thanks.

[carbonize]

Using CSS made the page fill with input boxes?

[eggrock]

No, the page can have that many boxes, checkboxes, radio buttons etc. on it.

 

I guess that part doesn't matter since nothing's below it.

 

For a vague idea of the layout (the login form will be in the far upper-right):

 

up-nort.com/cfb/pics/themes/cfbm/bg.png

 

Nevermind the colors, just playing.

Edited September 30, 2005 by eggrock

[abinidi]

I get a 404 error, eggrock, when I try to follow your link; Actually, it is a 403 error (Forbidden) with an additional 404 error.

Edited September 30, 2005 by abinidi

[carbonize]

You don't have permission to access /cfb/pics/themes/cfbm/bg.png on this server.

[eggrock]

Yeah, that's odd. It's an image so there's probably some security setting or another that won't allow .png's to be opened directly. Try it without the BB code.

 

[edit]

 

Dunno the image size commands in BB so I didn't link it directly.

Edited September 30, 2005 by eggrock

[carbonize]

We cannot access that image. The .htaccess file you have in there may be preventing us.

[abinidi]

I can see it now, when I go to the url directly.

 

How are you going to accomplish that cool background without making you pages huge?

[eggrock]

Crap, thumbs don't work here. Grrr..

 

That image is only 17k.

Edited September 30, 2005 by eggrock

[carbonize]

Obviously you have anti hotlinking and it was blocking the page because of th ereferer.

 

Anyway you could use CSS to set the size of the login box and inputs then use CSS to position it in top right using

 

position: absolute; right: 0; top: 0;

[eggrock]

Would applying position/right/top to a <div> be good practice? The entire form will be in a particular area and other content in other areas.

 

I didn't try to use the IMG BB tag, just entered the URL (and had the URL tag applied automatically.) But yes, hotlinking protection is on...

Edited September 30, 2005 by eggrock

[eggrock]

Okay, here's a rough outline of a test page:

 

Test Page

 

If you View->Source you'll see a bunch of 'empty' <div> tags, eg:

 

<div class="bgtopleft"></div>

 

I put the CSS into it's own file for right now; all class 'bgtopleft' does is set an image at a certain point.

 

The login form is in its own <div> and is also absolutely placed, as well as the score table at the bottom.

 

The source & CSS is a rough draft; it's going to be dynamically generated eventually.

 

Is that acceptible/efficient/preferred to set things this way?

[abinidi]

On an ulrelated note, I noticed that currently when users enter their username and password and click submit, their username and password are passed to the URL;

 

Are you going to be securing your username and password so they aren't sent in clear text over the internet?

[eggrock]

On an ulrelated note, I noticed that currently when users enter their username and password and click submit, their username and password are passed to the URL;

 

Are you going to be securing your username and password so they aren't sent in clear text over the internet?

 

Yep.

[abinidi]

cool. just checking, because I noticed that when I was looking at your page.