...

View Full Version : Cross Browser problem with span width



kalloo
12-01-2005, 01:18 PM
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>

kalloo
12-01-2005, 01:43 PM
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

_Aerospace_Eng_
12-01-2005, 08:15 PM
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.

kalloo
12-02-2005, 05:37 AM
Thanks friend,

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

_Aerospace_Eng_
12-02-2005, 05:41 AM
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.

kalloo
12-02-2005, 06:01 AM
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?

_Aerospace_Eng_
12-02-2005, 06:05 AM
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.

kalloo
12-02-2005, 06:23 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum