25 users online (2 members and 23 guests)  


  Results 1 to 11 of 11

Related

  1. Replies: 1
  2. Replies: 5
  3. Help with Netscape    Forum: CSS Forum
    Replies: 1
  4. Replies: 7
  5. Replies: 1
  1. #1
    brsdja's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Reading
    Posts
    16

    Question CSS working differently in Netscape and IE

    hi

    working on an input form, using css, but although its looking kool in IE, it looks crap in Netscape, and it dont even appear in Opera.

    appreciate any advice given. I'm also looking to line up all the left hand text, so any thoughts on best way would be appreicated.

    here u go...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Layered Form with no Tables</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .col2 {
    left: 40%;
    position: absolute;
    }
    fieldset {
    margin-top : 8px;
    margin-bottom : 8px;
    margin-left : 8px;
    margin-right : 8px;
    /*padding : 10px 10px 10px 10px;*/
    border-color : #fcfcfc #f6f6f6 #f6f6f6 #fcfcfc;
    border-style : solid;
    border-width : 1px;
    background-color : #f9f9f9;
    }
    body {
    height : 100%;
    margin : 0px;
    padding : 0px;
    background-color : #88D3F9;
    color : #001133;
    }
    #divBackdrop {
    position : absolute;
    z-index : 0;
    width : 100%;
    height : 100%;
    background-color : #2F7699;
    filter: progidXImageTransform.Microsoft.Alpha(opacity=100,style=1,startX=0,finishX=0,startY=10,finishY=60);
    }
    #divForm {
    position:absolute;
    margin: 0px;
    padding: 0px;
    left:16px;
    top:53px;
    width:500px;
    z-index:1;
    border: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    background-color: #FDFBD9;
    }
    h1 {
    font-size: large;
    font-weight: bold;
    background: #88D3F9;
    margin: 0px;
    padding: 10px 10px 10px 10px;
    width : 100%;
    }
    h2 {
    font-size: x-large;
    margin: 0px;
    padding: 10px;
    width : 100%;
    }
    h3 {
    font-size: medium;
    margin: 0px;
    padding: 10px;
    width : 100%;
    }
    p {
    font-size: small;
    font-weight: normal;
    margin: 0px;
    padding: 10px;
    width : 100%;
    }

    </style>
    </head>

    <body>

    <div id="divBackdrop"></div>

    <div id="divForm">
    <h1>Registration</h1>
    <h2>Registration Step 2</h2>
    <h3>General info about you</h3>
    <p>Yowsar will not share membership information with anyone else. If you would like other members of Yowsar to see information on your profile page, put a tick next to it.</p>

    <form name="form1" method="post" action="">

    <fieldset>
    <p>first name <span class="col2"> <input name="textfield" type="text"></span></p>
    <p>surname <span class="col2"><input name="textfield2" type="text"></span></p>
    </fieldset>
    <fieldset>
    <p>field 3 <span class="col2"> <input name="textfield" type="text"></span></p>
    <p>field 4 <span class="col2"><input name="textfield2" type="text"></span></p>
    </fieldset>
    <fieldset>
    <p>field 5 <span class="col2"> <input name="textfield" type="text"></span></p>
    <p>field 6 <span class="col2"><input name="textfield2" type="text"></span></p>
    </fieldset>
    </form>
    </div>

    </body>
    </html>

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hiya,

    Most probably, the reason it does not show in Opera at all is that you omitted the //--> from the end of your stylesheet. Try adding this to see if it helps.
    I notice some Microsoft-only code in there (The 'filter' bit), this probably only affects a very cosmetic difference tho.

    Looking at it in Mozilla Firebird, the form looks okay, tho the position is slightly different. What version of Netscape are you using?
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    brsdja's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Reading
    Posts
    16
    Looking at it in Mozilla Firebird, the form looks okay, tho the position is slightly different. What version of Netscape are you using?[/QUOTE]


    Using Netscape 7.1

    added the missing code, but still not working in Opera!!??

    Jon

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Lets treat them as two problems, one at a time I think.

    When you say it doesn'y show in opera, is the page literally blank?
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  5. #5
    brsdja's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Reading
    Posts
    16
    Quote Originally Posted by QuietDean
    Lets treat them as two problems, one at a time I think.

    When you say it doesn'y show in opera, is the page literally blank?
    yea, like a white screen!!

  6. #6
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    right, Im just gonna download opera. brb.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  7. #7
    brsdja's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Reading
    Posts
    16
    Quote Originally Posted by QuietDean
    right, Im just gonna download opera. brb.
    k, its now workin in Opera, but not displaying as i want it to, cause the items in the layer overlap the side.

    what is Mozilla Firebird btw? and where can i get it?
    also, do u know where i can get older versions of Netscape and IE for testing purposes?

    any thoughts on the probs im havin?

    Jon

  8. #8
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hmm.

    Having a look into this, I think our problem arises from Internet Explorer treating the <fieldset> tag differently to all the other browsers (IE is incorrect, I think). Whilst its 'bad' html, I tried changing the <fieldset></fieldset> to <div class="badger"></div> and renamed

    fieldset {
    }

    to

    div.badger {
    }

    and it seems to work fine in both browsers now

    You can get Firebird from www.mozilla.org , I recommend it highly.

    As for old version, I don't know many off-hand (I am not a fan of writing horrible code just to get old browsers working) but maybe one of our other members knows somewhere you can download them.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  9. #9
    brsdja's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Reading
    Posts
    16
    well, i was a bit sceptical when i read ur reply, but as if my magic it has sorted out the fieldset. Dont understand why, but it works, thank yous...

    However...

    The <h1>registration<h1> bit is still over lapping the side of the layer... I tried the same solution as for the fieldset - removing the <h1> tag and converting it to a <div class>, but because of the padding it overlaps. so in Netscape it overlaps and in IE it dosent.

    Also, what is the best way in CSS to line up the left hand side text elements?

    thanks again - Jon

  10. #10
    brsdja's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Reading
    Posts
    16
    Well I think i found out why it was displaying differently. Netscape and IE handle the width command differently.

    Setting width to 100% and including padding increases the overall width in Netscape to greater that 100%, while in IE it remains at 100%.

    I've removed the width command now, and it works really well.

    thanks for your help

    Jon

  11. #11
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Great. Thanks for sharing the solution too.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread