Jump to content

Homogenizing Browser Displays


eggrock
 Share

Recommended Posts

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 by eggrock
Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :thumbup1:

Edited by eggrock
Link to comment
Share on other sites

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 by eggrock
Link to comment
Share on other sites

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 by eggrock
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...