Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross Browser problem with span width

    Code : CSS/DIV

    Hi friends,

    This is kalloo, from india. I am designer. I m converting my application design to html. i m stuck with the following problem.

    i have tabular data (grid). which is well displayed in IE but in FF in NS browsers the width is not taken.

    Can anyone try to find out the mistake i m doing in the following code. Its very urgent. Thanks in advance.

    here is the code ( HTML and CSS ):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="copyright" content="2006 copyright Toshiba Corp.">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">

    /* Style1 CSS Document */

    .regular { font-family: tahoma, verdana, arial; font-size: 11px; color: #000000; }
    .regular_small { font-family: tahoma, verdana, arial; font-size: 10px; color: #000000; }
    .regular_big { font-family: tahoma, verdana, arial; font-size: 12px; color: #000000; }
    .regular_vbig { font-family: tahoma, verdana, arial; font-size: 14px; color: #000000; }



    #title {
    position:relative;
    width:950px;
    padding:0px;
    margin:0px;
    border: 0px solid #cccccc;
    text-align:left;
    font-family: tahoma, verdana, arial;
    font-size: 14px;
    color: #000000;
    font-weight:bold;
    }
    #navigator {
    position:relative;
    width:950px;
    border: 0px solid #cccccc;
    }


    #heading1 {
    position:relative;
    border:0 solid #cccccc;
    width:950px;
    text-align:left;
    font-family: tahoma, verdana, arial;
    font-size: 14px;
    color: #000000;
    font-weight:bold;
    margin-top:20;
    }

    #heading2 {
    position:relative;
    border:0 solid #cccccc;
    width:950px;
    text-align:left;
    font-family: tahoma, verdana, arial;
    font-size: 14px;
    color: #000000;
    font-weight:bold;
    margin-top:20;
    }

    #subheading {
    position:relative;
    border:0 solid #cccccc;
    width:950px;
    height:24px;
    padding:5px;
    text-align:left;
    font-family: tahoma, verdana, arial;
    font-size: 14px;
    color: #000000;
    font-weight:bold;
    background-color: #E2E2C6;
    margin-top:20;
    }

    #alphabet {
    position:relative;
    font-family: tahoma, verdana, arial;
    font-size: 11px;
    color: #000000;
    width: 950px;
    padding:5px;
    text-align:left;
    border-top: 2px solid #cccccc;
    border-bottom: 1px solid #ff0000;
    background-color: #e5e5e5;
    left: 0;
    top: 0;
    }

    #contactDetails {
    position:relative;
    font-family: tahoma, verdana, arial;
    font-size: 11px;
    color: #000000;
    width: 950px;
    padding:5px;
    text-align:left;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #ff0000;
    background-color: #e5e5e5;
    left: 0;
    top: 0;
    }


    #searchbox {
    position:relative;
    border-left: 10px solid #ff0000;
    background-color: #E2E2C6;
    width:950px;
    padding:15px;
    text-align:left;
    font-family: tahoma, verdana, arial;
    font-size: 14px;
    color: #000000;
    margin-top:2;
    }

    .linkButtons {
    position:relative;
    top:2px;
    background-color:#e7e7e7;
    width:100%;
    height:24px;
    }

    #gridtop {
    position:relactive;
    width:950px;
    height:25px;
    background-color:#E2E2C6;
    border: 0px solid #cccccc;
    text-align:left;
    border: 1px solid #9F9F83;
    }
    #gridtop span {

    height:24px;
    vertical-align: middle;
    padding:5px;
    margin: 0px;
    border-left: 0px solid #ffffff;
    border-top: 0px solid #ffffff;
    border-right: 1px solid #ffffff;
    font-family: tahoma, verdana;
    font-weight:bold;
    font-size:11px;
    }
    #grids {
    position:relative;
    width:950px;
    height:152px;
    text-align:left;
    background-color: #e7e7e7;
    border: 1 solid #9F9F83;
    border-top: 1 solid #ffffff;
    }
    #grid1 {
    position:relative;
    top:0;
    width:930px;
    height:23px;
    }
    #grid2 {
    position:relative;
    width:930px;
    height:24px;
    background-color: #ffffff;
    }

    #grid1 span {
    height:24px;
    padding: 5px;
    margin: 0px;
    border-left: 0px solid #ffffff;
    border-top: 0px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-bootm: 0px solid #e7e7e7;
    font-family: tahoma, verdana;
    font-size:11px;

    }
    #grid2 span {
    height:24px;
    padding: 5px;
    margin: 0px;
    border-left: 0px solid #ffffff;
    border-top: 0px solid #ffffff;
    border-right: 1px solid #e7e7e7;
    border-bottom: 0px solid #e7e7e7;
    font-family: tahoma, verdana;
    font-size:11px;
    background-color: #ffffff;
    }
    .links {
    display: inline;
    width:150px;
    height:24px;
    cursor:hand;
    padding-left: 3px;
    padding-right: 7px;
    border-left: 5px solid #FF0000;
    border-right: 1px solid #9F9F83;
    background-color: #E2E2C6;
    font-family: tahoma, verdana;
    font-size:11px;
    font-weight:bold;
    padding:5px;
    margin-left:5px;
    text-align:left;
    }
    div.linkButtons span.leftData {
    float: left;
    padding:5px;
    font-family: tahoma, verdana, arial;
    font-size: 11px;
    color: #000000;
    }

    div.linkButtons span.rightData {
    float: right;
    padding:0px;
    font-family: tahoma, verdana, arial; font-size: 11px; color: #000000;
    }



    #navButton {
    width: 12em;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90bade;
    color: #333;
    }


    .input1 { border-style: inset; font-family: tahoma, verdana, arial; font-size: 11px; color: #000000; }

    .btn1 { font-family: tahoma, verdana, arial; font-size: 11px; color: #000000; background-color: #cccccc;}

    .btn2 { font-family: tahoma, verdana, arial; font-size: 11px; font-weight: bold; color: #000000; background-color: #cccccc; }

    </style>
    <script type="text/javascript" src="js/dd.js"></script>

    <title>CSS Layout</title>
    </head>
    <body>
    <br /><br /><br /><br />
    <div id="ddmenu1" class="ddcss">
    <a href="#">Partner Administration</a>
    <a href="#">Contact Administration</a>
    <a href="#">User Administration</a>
    <a href="#">Change Password</a>
    </div>
    <div id="ddmenu2" class="ddcss">
    <a href="#">Standard Reporting</a>
    <a href="#">Financial Reporting</a>
    </div>
    <div id="ddmenu3" class="ddcss">
    <a href="#">Repair</a>
    </div>
    <div id="ddmenu4" class="ddcss">
    <a href="#">Trespo Parts Ordering</a>
    <a href="#">Knowledgebase</a>
    </div>
    -->
    <div id="title"><img src="images/tt_contadmin.gif" border="0" alt="" title="" width="180" height="20" />
    </div>
    <div id="navigator">
    <div class="linkButtons"> <span class="leftData">You are logged in as : Supervisor</span>
    <span class="rightData">
    <li class="links" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'ddmenu1')">Administration</a></li>
    <li class="links" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'ddmenu2')">Reporting</li>
    <li class="links" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'ddmenu3')">Service</li>
    <li class="links" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'ddmenu4')">Tools</li>
    </span> </div>
    </div>
    <div id="heading1">Search for Contacts</div>
    <div id="alphabet"><b>Search by Alphabets :</b> <a href="#">View All</a> | <a href="#">A</a>
    | <a href="#">B</a> | <a href="#">C</a> | <a href="#">D</a> | <a href="#">E</a>
    | <a href="#">F</a> | <a href="#">G</a> | <a href="#">H</a> | <a href="#">I</a>
    | <a href="#">J</a> | <a href="#">K</a> | <a href="#">L</a> | <a href="#">M</a>
    | <a href="#">N</a> | <a href="#">O</a> | <a href="#">P</a> | <a href="#">Q</a>
    | <a href="#">R</a> | <a href="#">S</a> | <a href="#">T</a> | <a href="#">U</a>
    | <a href="#">V</a> | <a href="#">W</a> | <a href="#">X</a> | <a href="#">Y</a>
    | <a href="#">Z</a> </div>
    <div id="searchbox">
    <span><b class="regular_big">Advance Search</b><br /></span>
    <span class="regular">Search for</span>
    <span class="regular"><input type="text" class="input1" /></span>
    <span class="regular">in</span>
    <span class="regular"><input type="radio" /></span>
    <span class="regular">Name</span>
    <span class="regular"><input type="radio" /></span>
    <span class="regular">Phone</span>
    <span class="regular"><input type="radio" /></span>
    <span class="regular">Email</span>
    <span class="regular"><input type="button" value="search" class="btn1" style="width:100px;"></span>
    </div>
    <div id="heading2">Contact List</div>

    <div id="gridtop">
    <span style="width:75px;">First Name</span>
    <span style="width:75px;">Last Name</span>
    <span style="width:110px;">Phone (Business)</span>
    <span style="width:110px;">Phone (Home)</span>
    <span style="width:110px;">Phone (Mobile)</span>
    <span style="width:100px;">Fax</span>
    <span style="width:200px;">Email</span>
    <span style="width:50px;">Delete</span>
    <span style="width:50px;">Edit</span>
    </div>
    <div id="grids" style="overflow-y:scroll;">
    <div id="grid1">
    <span style="width:75;">Ralf</span>
    <span style="width:75;">Halbiter</span>
    <span style="width:110;">123-0456-7890</span>
    <span style="width:110;">Phone (Home)</span>
    <span style="width:110;">Phone (Mobile)</span>
    <span style="width:100;">Fax</span>
    <span style="width:200;">Email</span>
    <span style="width:50;">Delete</span>
    <span style="width:50;">Edit</span>
    </div>
    <div id="grid2">
    <span style="width:75;">First Name</span>
    <span style="width:75;">Last Name</span>
    <span style="width:110;">Phone (Business)</span>
    <span style="width:110;">Phone (Home)</span>
    <span style="width:110;">Phone (Mobile)</span>
    <span style="width:100;">Fax</span>
    <span style="width:200;">Email</span>
    <span style="width:50;">Delete</span>
    <span style="width:50;">Edit</span>
    </div>
    <div id="grid1">
    <span style="width:75;">Ralf</span>
    <span style="width:75;">Halbiter</span>
    <span style="width:110;">123-0456-7890</span>
    <span style="width:110;">Phone (Home)</span>
    <span style="width:110;">Phone (Mobile)</span>
    <span style="width:100;">Fax</span>
    <span style="width:200;">Email</span>
    <span style="width:50;">Delete</span>
    <span style="width:50;">Edit</span>
    </div>
    <div id="grid2">
    <span style="width:75;">First Name</span>
    <span style="width:75;">Last Name</span>
    <span style="width:110;">Phone (Business)</span>
    <span style="width:110;">Phone (Home)</span>
    <span style="width:110;">Phone (Mobile)</span>
    <span style="width:100;">Fax</span>
    <span style="width:200;">Email</span>
    <span style="width:50;">Delete</span>
    <span style="width:50;">Edit</span>
    </div>
    <div id="grid1">
    <span style="width:75;">Ralf</span>
    <span style="width:75;">Halbiter</span>
    <span style="width:110;">123-0456-7890</span>
    <span style="width:110;">Phone (Home)</span>
    <span style="width:110;">Phone (Mobile)</span>
    <span style="width:100;">Fax</span>
    <span style="width:200;">Email</span>
    <span style="width:50;">Delete</span>
    <span style="width:50;">Edit</span>
    </div>
    <div id="grid2">
    <span style="width:75;">First Name</span>
    <span style="width:75;">Last Name</span>
    <span style="width:110;">Phone (Business)</span>
    <span style="width:110;">Phone (Home)</span>
    <span style="width:110;">Phone (Mobile)</span>
    <span style="width:100;">Fax</span>
    <span style="width:200;">Email</span>
    <span style="width:50;">Delete</span>
    <span style="width:50;">Edit</span>
    </div>
    <div id="grid1">
    <span style="width:75;">Ralf</span>
    <span style="width:75;">Halbiter</span>
    <span style="width:110;">123-0456-7890</span>
    <span style="width:110;">Phone (Home)</span>
    <span style="width:110;">Phone (Mobile)</span>
    <span style="width:100;">Fax</span>
    <span style="width:200;">Email</span>
    <span style="width:50;">Delete</span>
    <span style="width:50;">Edit</span>
    </div>
    <div id="grid2">
    <span style="width:75px;">First Name</span>
    <span style="width:75px;">Last Name</span>
    <span style="width:110px;">Phone (Business)</span>
    <span style="width:110px;">Phone (Home)</span>
    <span style="width:110px;">Phone (Mobile)</span>
    <span style="width:100px;">Fax</span>
    <span style="width:200px;">Email</span>
    <span style="width:50px;">Delete</span>
    <span style="width:50px;">Edit</span>
    </div>
    </div>

    <div id="subheading">Add/Remove Contact Details</div>
    <div id="contactDetails">
    <span class="regular">Title <input type="text" class="input1" /></span>
    <span class="regular">First Name <input type="text" class="input1" /></span>
    </div>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Kalloo again !

    As the code is very long, let me point out the problem clearly. the problem is the width not accepted in FF and NS Brosers for following id selectors :

    #link

    #gridtop span (Width is mentioned in inline style of the span tag)

    #grid1 span (Width is mentioned in inline style of the span tag)

    #grid2 span (Width is mentioned in inline style of the span tag)


    the scroll is also not working for the overflow-y:scroll

    regards,
    kalloo

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay first of all, a span is an inline element. No width can be set to it. 2nd if you want to set a width to it then make it display:block; in which case you might as well use a div instead. 3rd even if a span was able to have a width set to it without using display:block; you would need to set units on your widths.

  • #4
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks friend,

    But when i give display:block or replace span to div, everything comes one below other.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes this is how display:block; works. You will need to make them float:left; if you want them on the same line. You seem to be displaying data so maybe a table would be appropiate in this case.

  • #6
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks friend,

    You are a real Coding guru. SALUTE !

    Its taking the width. GREAT ! i ll try to implement it in all the places. But still there are align issues and others. i need to make it display same in all the browsers (Latest IE, FF, NS). will it be possible?

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Put your code on a webpage somewhere, give us the link then tell us what alignment problems you are having. I still recommend a table for this since you ARE display tabular data. A table is still okay to use if you are going to be displaying data.

  • #8
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, even i recommended tables, atleast for the tabular data. but these people are against the tables. i dont know whats wrong. anyways i ll try to solve other issues. if any problem i ll come bakc to you again.

    Thanks and regards,
    Kalloo


  •  

    Posting Permissions

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