Making Text box Look the same in IE and Netscape???

[DougD]

Hi,

This has frustrated me for a long time so I thought I should ask someone here.

When creating a search box, ie.
<input type="text" name="dqe" value="" size=20 maxlength=30>...

It fits perfectly in my nav bar with a little space on each side in IE (just how I want it), but when I open Netscape 4.x it pushes the nav bar way outside of where it should.

Is the a trick to making them look the same in both browsers (css or something)?

Any help much appreciated!

[cybercodeur]

In order to get both your text fields looking the same in both browsers, you simply have to get your hands on a browser detection script such as this one (found at dhtmlcentral.com) and call for a different document.write where you will apply different sizes to both your text fields so they look the same in their respective browsers (for example, 15 in Explorer and 11 in Netscape).

Here's the magic :

function lib_bwcheck(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.ns=this.ns4||this.ns5
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.ns=this.ns4||this.ns5
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}

var bw = new lib_bwcheck()

Hope this helps

[DougD]

PERFECT! That is exactly what I needed!

Thanks a lot!

[cybercodeur]

Now let's suppose you wanted to write different text fields you'd go like this:

function textField () {
if (bw.ie){
document.write("<input type='text' size='15' />")
}
if (bw.ns) {
document.write("<input type='text' size='11' />")
}
}
and call the textField function in place of your actual text field in your document.

Yopu can either put all that in an external js file or in the head of your document (in which case, you'll surround it with <script> brackets).

[mattcarter]

There is a somewhat easier way if you don't want to use JavaScript, but you have to make a concession. Using CSS, set all your input boxes to use a Courier font (or use classes). Since Courier is a uniform-spaced font, all inputs will appear the same size. Again, this dictates that the font be Courier, but often times it's good enough.

[cybercodeur]

Hey I never thought of that!!!

[DougD]

I knew this was the place to ask! (I love this site!) You guys are great! I actually read Kevins article on Style-Sheets yesterday, and added them to a couple of my sites last night. I just tried changing the input tags to courier and it worked perfect... Thanks! I am going to try the other way as well just to learn and see how it works as well!

Thanks again...

[cybercodeur]

Glad we could be of help

Let me give you a wonderful idea about the codes I've posted in here. You could also use them to specify different stylesheet to your Web site depending on browser. Say for example you're positionning stuff on your pages with ids and can't get them to work exactly the same on NS6 and IE6. No problem! You just use the browser detection script and document.write the <link rel> thingie, calling an external CSS for each of them.

It works wonders once you start using it.

[mattcarter]

DougD, for an example of what cybercodeur is talking about, check out the source at www.mattcarter.org/contact.asp

[DougD]

Very Cool...

Matt, why don't use the browser detection for "/css/common.css"? Is it because those styles can be seen by all browsers and the "css/formcool.css" can't?

Thanks...

[mattcarter]

Exactly. I usually try to create a global stylesheet for all browsers and then only conditionally include alternate or supplementary stylesheets where appropriate.

[DougD]

Make great sense...

Thanks again,

Doug

[cybercodeur]

Try it out. You'll be forever glad you did.