SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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!

  2. #2
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by cybercodeur; Feb 12, 2002 at 16:15.
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net

  3. #3
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PERFECT! That is exactly what I needed!

    Thanks a lot!

  4. #4
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net

  5. #5
    SitePoint Member
    Join Date
    Feb 2002
    Location
    Boulder, CO
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey I never thought of that!!!
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net

  7. #7
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  8. #8
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net

  9. #9
    SitePoint Member
    Join Date
    Feb 2002
    Location
    Boulder, CO
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DougD, for an example of what cybercodeur is talking about, check out the source at www.mattcarter.org/contact.asp

  10. #10
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  11. #11
    SitePoint Member
    Join Date
    Feb 2002
    Location
    Boulder, CO
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly. I usually try to create a global stylesheet for all browsers and then only conditionally include alternate or supplementary stylesheets where appropriate.

  12. #12
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make great sense...

    Thanks again,

    Doug

  13. #13
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try it out. You'll be forever glad you did.
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •