Member Avatar for anand4160

i use nowrap="nowrap" attribuate to fix my UI for IE 6 , now when i am trying to run the same code in IE 8 its not working.

The code is simple to display table.

nowrap="nowrap" is written in the main CSS file , and its get applied to all site. its working fine with IE6 and 7 , but problem is in IE 8.

In IE8 text in table <td /> displaying in one line and and crossing the window layout.

Can any of you suggest me how to fix it?

Two screenshot are attached.

One is correct Layout display and other one is having problem.

When i am using below code? Page
<td class="itTD" nowrap="nowrap" width="90%" style="padding-right: 0px">
Pgae display is fine with IE6.0 and 7.0.
But not in IE8.0.

Now when i am removing nowrap="nowrap" its fine with IE8 but showing problem in IE6 and 7.

Correct_UI.JPG 19.3 KB Problem_UI.JPG 22.09 KB
  • 4 Contributors
  • 5 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

The overflow you see in IE8 is expected: the td nowrap attribute forces a single unbroken line, so long values spill out of the layout. That attribute is obsolete; standards recommend controlling wrapping via CSS instead. Also note that a valid doctype puts IE8 into Standards mode, which can change table layout behavior compared to IE6/7. (w3c.github.io)

A practical, CSS-first fix is to let very long tokens (URLs, IDs, hashes) break while keeping the table constrained. Drop the HTML nowrap, keep your markup clean, and add rules like these:

/* Keep the table within its container */
table { table-layout: fixed; width: 100%; }

/* Allow long, unbroken strings to wrap instead of overflowing */
td, th { overflow-wrap: break-word; word-wrap: break-word; }

/* Optional: for edge cases with machine-generated IDs only */
.long-ids { word-break: break-all; }

This combination prevents horizontal overflow in modern engines and in old IE that supports word-wrap. Use break-all sparingly since it can split words in the middle. (developer.mozilla.org)

If removing nowrap breaks IE6/7 layouts, isolate those legacy tweaks instead of applying them sitewide. Load an old-IE stylesheet with a conditional comment and keep Standards-mode styles as the default:

<!--[if lte IE 7]>
<link rel="stylesheet" href="/css/ie-old.css">
<![endif]-->

Conditional comments are parsed by IE 5–9 only, so this neatly limits hacks to the browsers that need them. As an emergency fallback, you can force an earlier IE document mode on a specific page with X-UA-Compatible, but prefer the CSS approach above. (quirksmode.org)

+1 to for pointing out the attribute’s deprecation, and to and for steering the fix into CSS. The steps above should keep IE8 from blowing past the window while preserving your IE6/7 layout where required.

Recommended Answers

All 5 Replies

Member Avatar for ko ko

Attach your css file and enter specific properties.
Here is CSS:

#id {
white-space: normal }

And check your validation which version do you use?

Member Avatar for anand4160

CSS and HTML file is attached in mail.

Plz see attachment

/* Sphinx CSS Document */

/* General Applicablility */
BODY {
	padding: 0px;
	margin: 0px;
	font-family: Arial, sans-serif;
	font-size: 8pt;
}

FORM {
	margin: 0px;
}

IMG {
	border: 0px;
}

.inline { 
	margin-right: 5px; /* Both browsers */ 
}

TR.collapsed, TR.hidden {
	display: none;
}

.highlight TD {
	background-color: #FFE;
}

.section TD {
	text-align: left;
}
	
TABLE.dbox, TABLE.cbox, TABLE.fbox, TABLE.gbox {
	margin-top: 10px; 
	width: 100%;
}

DIV.sbox, DIV.bbox, DIV.ptext {
	margin-top: 10px; /* IE Only */
}

TEXTAREA {
	font-family: Arial, sans-serif;
	font-size: 10pt; /* Needed for Firefox */
}

.cbox TH, .fbox TH, .gbox TH  {
	width: 1%; /* Recommended Layout */
	white-space: nowrap;
	text-align: left;
	vertical-align: top;
}

.cbox TD, .fbox TD, .gbox TD  {
	padding-right: 10px;
}

TH  {
	font-size: 8pt;		
}

TD {
	font-size: 8pt;
}

INPUT {
	font-size: 8pt;
}

.button, BUTTON {
	border: 1px solid Black;
	font-size: 9pt;
	height: 20px; /* To align with Form inputs */
	margin-bottom: 1px; /* To align with Form inputs */
}

H1 {
	font-size: 15pt;
}

/* ButtonDiv */
.bbox {
	margin-top: 10px;
	font-size: 10pt;
	height: 30px; /* Needed for Firefox */
}

.bbox .button {
	font-size: 9pt;
	font-weight: bold;
	padding-left: 2px;
	padding-right: 2px;
	margin-left: 2px;
}

.bbox .primary {
	float: right;
	position: absolute;
	right: 0%;
}

.bbox .secondary {
	float: left;
}

/* Charts */
.chart {
	border: 1px solid #CCC;
}

/* ContentTable */
.cbox {
	border-collapse: collapse;
}

.cbox td {

}

.cbox th {
	font-weight: bold;
}
	
.cbox .buttonstack {
	width: 90px;
	vertical-align: top;
	float: left;
	margin-left: 3px;
}
	
.cbox .buttonstack .button {
	width: 100%;	
	border: 1px solid Black;
	font-size: 9px;
	height: 17px; /* To align with Form inputs */

}

.cbox .field {
	font-weight: bold;
}

/* DataTable */
.dbox {
	border: 1px solid #D2D2D2;
	border-spacing: 1px; /* Not applicable to IE */
}

.dbox .altrow {
	background-color: #F3F3F3;
}

.dbox .row {
	background-color: #E9E9E9;
}

.dbox .section {
	font-weight: bold;
	text-align: left;
}

.dbox .total {
	background-color: #D2D2D2;
	font-weight: bold;
}

.dbox .onrow TD { /* Selected Rows */
	background-color: #FFFACD;
	color: #000000;
	cursor: pointer;
	padding: 1px;
}

.dbox TH {
	background-color: #D2D2D2;
}

.dbox TH A {
	color: Black;
}

.dbox .gbox { /* GridTable inside a DataTable */
	border-collapse: collapse;
	margin-top: 0px;
}

.dbox .gbox td {
	background-color: white !important;
	border: 0px;
	padding: 1px;
}

.dbox .gbox th {
	background-color: white !important;
	border: 0px;
	font-weight: bold;
	padding: 1px;
}

.dbox .highlight { /* To highlight the individual column */
	background-color: #FFE;	
	border: 0px;
	cursor: pointer;	
	padding: 0px;
}

/* DataTable Column Controls */
.cgControl { /* IE only */
	text-align: center;
	width: 1%;
}

.cgCurrency { /* IE only */
	text-align: right;
}

.cgDate { /* IE only */
	text-align: left;
}

.cgFirst { /* IE only */
	background-color: #000000;
	text-align: left;
}

.cgImage { /* IE only */
	text-align: center;
}

.cgNumber { /* IE only */
	text-align: right;
}

.cgPercent { /* IE only */
	text-align: right;
}

.cgText { /* IE only */
	text-align: left;
}

.cgTime { /* IE only */
	text-align: left;
	white-space: nowrap;
}

.cgTree { /* IE only */
	text-align: center;
	width: 10px;
}

/* DisclaimerDiv */
.disclaim {
	margin-top: 15px;
	padding-left: 3px;
	font-size: 8pt;
	clear: both;
	margin-right: 15px;
}

.disc {
	margin-bottom: 10px;
}

/* ErrorDiv */
.ebox {
	border: 2px solid red;
	background-color: #FFF8DC;
	border-collapse: collapse;
	width: 100%;
	margin: 0px; /* Sets both browsers equal */
	margin-bottom: 15px;
}

.ebox CAPTION {
	text-align: left;
	font-weight: bold;
	color: red;
}

.ebox TH {
	display: none;
}

.ebox TD {
	padding-left: 10px;
}

/* FunctionBox */
.fbox {
	border: 1px solid Black;
	padding: 2px;
	background-color: #C2C2C2;
}

/* FooterDiv */
.foot {
	margin-top: 10px;
	padding: 3px;
	height: 15px; /* Needed for Firefox */
	clear: both;
	margin-right: 15px;	
}

.footcopy {
	float: left;
}

.footmenu{
	float: right;
}

/* GridTable */
.gbox {
	background-color: #F1F1F1;
	font-size: 9pt;
}

.gbox td {
	background-color: #FFFFFF;
	color: #000000;
}

.gbox td.warning {
	background-color: #808080;
	color: #FFFFFF;
}

.gbox th {
	background-color: #FFFFFF;
	font-weight: bold;
	vertical-align: top;
}

/* PageDiv (for free form page text) */
.ptext {
	margin-bottom: 5px;
	font: 8pt Arial;
}

.ptext .field {
	font-weight: bold;
}

.ptext A {
	color: Black;
	font-size: 8pt;
}

.ptext H1 {
	font-size: 16pt;
	font-weight: bold;
}

.ptext H2 {
	font-size: 14pt;
	font-weight: bold;
}

/* PageHeader */
.hbox {
	border-bottom: 1px solid Black;
	width: 792px;
	margin-top: 8px;
	min-height: 25px; /* Needed for Firefox */
}

.hbox .functions {
	float: right;
	white-space: nowrap;
}

.hbox .title {
	float: left;
	font-size: 13pt;
	font-weight: bold;
}

.hbox .id {
	color: Gray;
}

.hbox IMG.highlight { /* Highlights images in the PageHeader Functions (for alternate list layouts) */
	border: 2px solid black;
}

/* InfoDiv */
.ibox {
	margin-left: 0px; /* IE Only */
	padding-left: 0px; /* Firefox Only */
	list-style-position: inside;
}

.ibox .info {  /* For first order bullets */
	list-style-image: url(../images/info.gif);  /* IE only */
}

.ibox .warning {  /* For first order bullets */
	list-style-image: url(../images/warn.gif); 
}

.ibox li li {  /* For second order bullets */
	list-style-image: none; 
	list-style-type: square; /* IE only */
}

/* PageMenu */
.pagemenu {
	border: 1px solid #CCCCCC;
	padding: 5px;
	background-color: #F1F1F1;
	font-size: 10pt;
	margin-left: 0px; /* IE Only */
	padding-left: 0px; /* Firefox Only */
	list-style: none;	
}

.pagemenu .title {
	font-size: 11pt;
	font-weight: bold;
}

.pagemenu A {
	font-weight: bold;
}

.pagemenu A:hover {
	background-color: #E6E6E6;
}

.pagemenu UL {
	margin-left: 0px; /* IE Only */
	padding-left: 0px; /* Firefox Only */
	list-style: none;
}

.pagemenu UL UL {
	margin-left: 15px; /* IE Only */
	padding-left: 15px; /* Firefox Only */
	list-style: none;
}

/* PageTree - Not checked for Firefox yet */
.tree {
	font-size: 10pt;
	margin: 0px;
	margin-top: 10px;
}

.tree .branch {
	padding-left: 15px;
}

.tree ul {
	margin: 0px;
	padding: 0px;
}

.tree .title {
	font-weight: bold;
}

.tree li {
	list-style-type: none;
	padding: 2px;	
	padding-left: 15px;
	background-image: url(../images/treestem.gif);
	background-repeat: repeat-y;	
}

/* HoverNote - Not checked for Firefox yet */
.nbox {
	background-color: #B2B2B2;
	border: 1px solid #000000;
	font-size: 12px;
	text-align: left;
	width: 140px;
}

.nbox th {
	font-weight: bold;
}

/* Needs to be incorporated into Sphinx */

.pmbox   { 
	border: 1px solid black; 
	background-color:#CCCCCC;
	position:absolute;
	visibility:hidden;	
/*
	filter:
		progid:DXImageTransform.Microsoft.Shadow(Color='#999999', Direction=135, Strength=4)
		progid:DXImageTransform.Microsoft.Alpha(Opacity=92, FinishOpacity=0, Style=0, StartX=0, FinishX=100, StartY=0, FinishY=100)
*/
	}

.pmrowhi {
	background-color: #AA0000;
	color: White;
	cursor: pointer;
}

/* RecordTable */
.rbox {
	margin-top: 5px;
	margin-bottom: 10px;
	height: 10px; /* Needed for Firefox */
}

.rbox .links {
	float: right;
}

.rbox .record {
	float: left;
}

.rbox .button {
	padding: 1px;
}

/* SectionHeader */
.sbox {
	background-color: #00008B;
	color: white;	
	height: 10px; /* Needed for IE */
	min-height: 25px; /* Needed for Firefox; ignored by IE */
}

.sbox .functions {
	float: right;
	white-space: nowrap;
	font-size: 8pt;
	padding: 2px;		
}

.sbox .title {
	float: left;
	font-weight: bold;
	padding: 3px;	
}

.sbox .title A {
	text-decoration: none;
	color: white;
}

.sbox .functions A {
	color: white;
}

.sbox .title A:hover {
	color: #AA0000;
}

.sbox .listbox, .sbox .listbox A { /* Needed for Auto-Completer */
	color: black;
}

/* PageMenu */
.menu {
	margin-top: 10px;
}

.menu .itemoff {
	background-color: #E6E6E6;
	border: 1px ridge;
	font-size: 10px;
	padding: 2px;
	text-decoration: none;
}

.menu .itemon {
	background-color: white;
	font-weight: bold;
	border: 1px ridge;
	font-size: 10px;
	padding: 2px;
	text-decoration: none;
}

.menu a:hover {
	background-color: #CCCCCC;
	color: #000000;
}

/* SideMenu */
.sidemenu {
	font-size: 8pt;
}

.sidemenu LI {
	padding: 1px;
	background-color: #E8E8E8;
	margin: 1px;
}

.sidemenu LI LI {
	margin-left: 0px; /* IE Only */
	padding-left: 0px; /* Firefox Only */
}

.sidemenu UL {
	margin: 0px; /* IE Only */
	padding: 0px; /* Firefox Only */	
	list-style: none;
}

.sidemenu .itemoff A {
	color: black;
	text-decoration: none;
	width: 100%;
	display: block;
}

.sidemenu .itemoff A:hover {
	color: blue;
	background-color: #F1F1F1;
}

.sidemenu .itemon A {
	color: black;
	font-weight: bold;
	text-decoration: none;
	width: 100%;
}

.sidemenu .itemon {
	background-color: white;
	border: 1px solid black;
}

.sidemenu .itemoff {
	border: 1px solid #CCC;
}

.sidemenu LABEL {
	font-size: 8pt;
}

.collapsed img.collapsed {
	display: none; /* Necessary for Sidemenu */
}

.collapsed UL { 
	display: none; /* Necessary for Sidemenu */
}

.expanded img.expanded { 
	display: none; /* Necessary for Sidemenu */
}

.sidemenu .title {
	font-weight: bold;
	display: block;
	padding: 2px;
	background-color: #00008B;
	color: white;
	margin-top: 8px;
}

LI.submenu .title {
	font-weight: bold;
	padding: 0px;	
	background-color: white;
	color: black;	
	margin-top: 0px;		
}

.sidemenu INPUT,
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	
 
 
	<title>SunGard xStation</title>
	
 
 
 
 
 
 
	
	
	
	
 
 
	
<link rel="stylesheet" href="/go/implement/csa/css/sphinx.css"/>
<link rel="stylesheet" media="print" href="/go/implement/csa/css/sphinxPrint.css"/>
	
 
 
 
 
	
	
	
		<script type="text/javascript" src="/go/implement/gzip_137356221/bundles/main.js?minified" ></script>
 
	
	
 
 
 
 
 
 
 
 
 
 
<script type="text/javascript"> 
 
function init() {}
 
sphinx.addOnLoad(function() {init();});
sphinx.addOnLoad(function() { if( self.setInitialValue ) self.setInitialValue(); });
 
 
function setMenuSelection ( menuTop, menuLeft ){
		var menuValueForTop = null;
		var menuValueForLeft = null;
 
      // Done so that if menuTop doesnt exist just keep the current tab selected.
      if (document.getElementById( menuTop ) == null ) {
            return;
      }
      //Verify if the side menu is not loaded
      if ( menuValueForTop != null && menuValueForTop  != menuTop)
            document.getElementById( menuValueForTop ).className = "itemoff";
      //Verify if we jump into another tab.
      if ( menuValueForTop  != menuTop && menuValueForTop!=null){
            document.getElementById( menuTop ).className = "itemon";
            document.location.href = "/go/implement/RenderSideMenuAction.do?topMenu=" + menuTop;
            menuValueForTop = menuTop;
            menuValueForLeft = null;
            
            return;           
      }
      if ( menuValueForLeft != null && menuValueForLeft != ""){
            try {
                  document.getElementById( menuValueForLeft ).className = "itemoff";
            } catch ( e ){
                  //alert( e.message + ", " + menuValueForLeft)
            }
      }
      menuValueForLeft = menuLeft;
      if( menuLeft != null && document.getElementById( menuLeft ) != null && document.getElementById( menuLeft ) != "" ) {
            document.getElementById( menuLeft ).className = "itemon";
            if(menuTop=='itemUser'){
                  var sdMenu=sidemenus['sidemenu'];
                  if(sdMenu!=null) sdMenu.selected=document.getElementById( menuLeft );
            }           
      }
}
 
function getSelectedFirm()
{
	return getInput(document.form1.firms, "value");
}
</script>
</head>
 
<body class="shownavigation">
 
 
 
 
 
	<div class="header">
		
 
 
 
 
 
 
 
 
 
 
 
<script type="text/javascript" src="/go/implement/gzip_1162840535/bundles/common.js?minified" ></script>
 
 
<link rel="stylesheet" type="text/css" href="/go/implement/csa/css/calendar.css" id="calendarcss" media="all" />
<script language="JavaScript"> 
var path = "/go/implement/";  //This variable is use to modify the src of an object.
var dateFormat = "MM/dd/yyyy";
var monthArray = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
</script>
<iframe id="calendarBox" class="calendar" name="calendarFrame" style="Visibility: hidden" scrolling="no" src="/go/implement/csa/include/calendar.jsp">
</iframe>
 
 
 
 
 
 
<script language="JavaScript" type="text/javascript" src="/go/implement/javascript/ITCPGeneral.js"></script>
<script language="JavaScript" type="text/javascript" src="/go/implement/itportal/javascript/RoboHelp_CSH.js"></script>
 
<script type="text/javascript"> 
 
 
 
	
		
		
	
	
	
 
	
 
	
 
 
function showHelp()	{
	var initURL = "itportal/help/SP_User_Help/IT_CP_OnlineHelp_ImplementUser.htm";
	var port = window.location.port;
	
	helpURL = window.location.protocol + "//" + window.location.hostname;
 
	if(port != "")
		helpURL = helpURL + ":" + port;
 
 	helpURL = helpURL + "/" + initURL;
 
	var role = 2;
 
	try	{
		showHelpWindow(helpURL, role);
	} catch(err)	{
		if(role == 0)
			openHelpWindow(helpURL, -1);
		else if(role == 1)
			openHelpWindow(helpURL, -1);
		else if(role == 2)
			openHelpWindow(helpURL, -1);
	}
}
 
 
 
 
<!--
var firstUrl;
 
 
/*
 
	// 
	
 
*/
 
function ProcessOnUnload()
{
/*
 
	
 
*/
}
 
function ProcessInitialPageLoad()
{
	parent.document.title = "SunGard xStation";
	
	/*
	
		
	
	*/
    // location.href="/go/implement/DisplayContentManagement.do";
    
	if (firstUrl.indexOf(".do") == -1) {
		eval(firstUrl);
	} else {
		location.href=firstUrl;
	} 
	
	
}
 
<!-- Parameter: date in US or EURO format -->
function stripDateFormat(myDate) {
 
	//myDate = document.getElementById(date_to_parse);
	var dateVal = myDate.value;
	if(dateVal.indexOf("/") != -1)
	{
		df = new Date(dateVal)
		yyyy = df.getYear();
		mm = df.getMonth() + 1;
		dd = df.getDate();
		mySQLformatDate = "" + yyyy + "-" + mm + "-" + dd + " 00:00:00";	
		myDate.value = mySQLformatDate;
		return true;
	}
	return false;
}
 
function ShowHideCalendar()
{
	var myFrameset = parent.document.getElementById("xStationMain");
	if( myFrameset == null || myFrameset.getAttribute("cols") == null ) {
		return;
	}
 
	var colArr = myFrameset.getAttribute("cols").split(/,/);
 
	if ( colArr[colArr.length-1] != "0" ) {
		colArr[colArr.length-1] = 0;    // Remove last frame
		document.images["calImg"].src = "/go/implement/csa/images/calon.gif";
	} else {
		colArr[colArr.length-1] = 221;  // Add last frame
		document.images["calImg"].src = "/go/implement/csa/images/caloff.gif";
	}
 
	myFrameset.setAttribute("cols", colArr.join(",") );
}
 
function SetLeftMenuSize(size)
{
	var myFrameset = parent.document.getElementById("xStationMain");
	if( myFrameset == null || myFrameset.getAttribute("cols") == null ) {
		return;
	}
 
	var colArr = myFrameset.getAttribute("cols").split(/,/);
 
	colArr[0] = size;    // Hide first frame
 
	myFrameset.setAttribute("cols", colArr.join(",") );
}
 
function submitForm(form) {
 
	form.submit();
}
 
function displaySearch(form,action){
	var searchText = Trim(form.searchString.value);
	var reg1 = /[^*?\/.]/;
	var temp = new Array();
	temp =searchText.split(' ');
		
	if((searchText.substring(0,1) != '"' || searchText.substring(searchText.length -1)!= '"') && temp.length > 1) {
		var tempArray = new Array();
		tempArray = searchText.split(' ');
		for (count = 0; count < tempArray.length; count++){
				if(!reg1.test(tempArray[count])){
					alert('Search critera is too broad, please remove the characters like *,?,.,/ or multiple spaces');
					return;
				}
		}
		if(action != ""){
		form.action=action;
		}
		form.submit();
	}
	else{
		if(searchText.substring(0,1) == '"' && searchText.substring(searchText.length -1) == '"'){
		   searchText = searchText.substring(1,searchText.length -1);
		} 
		if(isWhiteSpace(Trim(searchText)) == true){
			alert('Keyword for search is required');
		}else if(!reg1.test(searchText)){
			alert('Search critera is too broad, please narrow your criteria');
		}else{
			if(action != ""){
				form.action=action;
			}
			form.submit();
		}
	} 
}
 
function logout(Form) 
{
   document.logoutButtonForm.method = "POST";
   /* Making explicit `POST` call */
   	
		
	
   document.logoutButtonForm.submit();
}
	
function singleLogout() 
{
	document.Form.action= '/go/implement/globalLogout.do';
	document.Form.submit();
}
 
 
 
	var arr = new Array(1);
	arr[0] = '';
	var counter = 0;
 
function ping()	{
	var value = '';
	setInterval("changeImgs()", '');
}
function changeImgs()	{
	
	document.getElementById('imgTarget').src=arr[counter++] + "?RAN=" + Math.random();
	if(counter == 3)
		counter=0;
}
 
 
 
 
 
//-->
</script>
 
  <span class="logo">
  
<!--/*
 * Changed By			Reference					Description
 * --------------		--------------------		----------------------
 * Sarang.Rajale        RQ-CS01-0000093				Added a null check for firmhomepageurl so as to remove the hyperlink if it is null.
 */-->
 
 
 
 
 
	
		
	
	
 
 
 
<a href="#" onclick="submitPage()"><img src="/go/implement/csa/images/logo_main.gif"/></a>
 
 
<script>	
var homePageURL = 'http://www.sungard.com/csa';
 
function submitPage() {
	if ((homePageURL) && (homePageURL!='')) {
		parent.location = homePageURL;
	}
}
</script>
  </span>
 
 
 
 
 
 
    <ul class="messages">
      <li><label for="useragent">User:</label><a href="/go/implement/admin/user/view.do?loginName=IMPLEMENT" id="userAgent">Implement  User</a></li>
      
      
 
 
 
 
<li id="notifArea" class="notifications">
</li>
<script type="text/javascript"> 
sphinx.ajax.loadContent("/go/implement/admin/webnote/webnoteNotification.do", "notifArea", { indicator: 'none', nocache: true });
</script>
 
    </ul>
    
    <form name="Form">
    <input type="hidden" name="ID"/>
    <input type="hidden" name="startDay"/>
    <input type="hidden" name="startMonth"/>
    <input type="hidden" name="startYear"/>
    </form>
    
    <ul class="functions">
<!-- 
 
	
 
 -->
	 
	<form name="quickSearchForm" id="topSearchForm" method="post" action="/go/implement/admin/qsearch/view.do">
	<li>
		<input type="text" name="searchString" size="15" value="">
	</li>
	<li>
		<button id="searchButton" onclick="javascript:displaySearch(topSearchForm,'');">Search</button>
	</li>
	<input type="hidden" name="recordsPerSection" value="10">
	</form>
	
 
	<li>
		<form name="helpButtonForm">
			
			
			
				
			
			
			
 
			<button id="helpButton" onclick='javascript:showHelp();'>Help</button>
		</form>
	</li>
 
		
				
				
	<li>
		<form name="logoutButtonForm" action="/go/implement/admin/login/logout.do">
			<button id="logoutButton" onclick="javascript:logout(this)">Logoff</button>
		</form>
	</li>
				
		
	
	</ul>
 
<div class="topmenu">
	<ul id="topmenu">
		<li class="itemoff" id="itemAdmin"><a href="/go/implement/DisplayContentManagement.do">Admin</a></li><li class="ite
Member Avatar for Troy III

CSS and HTML file is attached in mail.

Plz see attachment

I think that you are not understanding the issue here. For so many years, people, not even knowing the meaning of the word, has been yelling and shouting "standards - standards!" ecessively and for so long that it makes me go throw up out from it.

Now: this is STANDARDS and NOWRAP attribute is not standard -threfore - not allowed in standards compliant browser mode!

Nowrap is a HTML3.2 deprecated attribute not avbailable in HTML4 or XHTML and later.

You should use CSS instead or HTML 3.2 DTD for that to work.

Member Avatar for dipak_passion

CSS and HTML file is attached in mail.

Plz see attachment

Use "white-space:normal" that will solved your issue, and obviously you have to use CSS here for maintain the web standard. Though your file is not that much capable for same right now.

Attached is the file with corrected mentioned issue.

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>SunGard xStation</title>
<style type="text/css">
	
	/* Sphinx CSS Document */

/* General Applicablility */
BODY {
	padding: 0px;
	margin: 0px;
	font-family: Arial, sans-serif;
	font-size: 8pt;
}

FORM {
	margin: 0px;
}

IMG {
	border: 0px;
}

.inline { 
	margin-right: 5px; /* Both browsers */ 
}

TR.collapsed, TR.hidden {
	display: none;
}

.highlight TD {
	background-color: #FFE;
}

.section TD {
	text-align: left;
}
	
TABLE.dbox, TABLE.cbox, TABLE.fbox, TABLE.gbox {
	margin-top: 10px; 
	width: 100%;
}

DIV.sbox, DIV.bbox, DIV.ptext {
	margin-top: 10px; /* IE Only */
}

TEXTAREA {
	font-family: Arial, sans-serif;
	font-size: 10pt; /* Needed for Firefox */
}

.cbox TH, .fbox TH, .gbox TH  {
	width: 1%; /* Recommended Layout */
	white-space: nowrap;
	text-align: left;
	vertical-align: top;
}

.cbox TD, .fbox TD, .gbox TD  {
	padding-right: 10px;
}

TH  {
	font-size: 8pt;		
}

TD {
	font-size: 8pt;
}

INPUT {
	font-size: 8pt;
}

.button, BUTTON {
	border: 1px solid Black;
	font-size: 9pt;
	height: 20px; /* To align with Form inputs */
	margin-bottom: 1px; /* To align with Form inputs */
}

H1 {
	font-size: 15pt;
}

/* ButtonDiv */
.bbox {
	margin-top: 10px;
	font-size: 10pt;
	height: 30px; /* Needed for Firefox */
}

.bbox .button {
	font-size: 9pt;
	font-weight: bold;
	padding-left: 2px;
	padding-right: 2px;
	margin-left: 2px;
}

.bbox .primary {
	float: right;
	position: absolute;
	right: 0%;
}

.bbox .secondary {
	float: left;
}

/* Charts */
.chart {
	border: 1px solid #CCC;
}

/* ContentTable */
.cbox {
	border-collapse: collapse;
}

.cbox td {

}

.cbox th {
	font-weight: bold;
}
	
.cbox .buttonstack {
	width: 90px;
	vertical-align: top;
	float: left;
	margin-left: 3px;
}
	
.cbox .buttonstack .button {
	width: 100%;	
	border: 1px solid Black;
	font-size: 9px;
	height: 17px; /* To align with Form inputs */

}

.cbox .field {
	font-weight: bold;
}

/* DataTable */
.dbox {
	border: 1px solid #D2D2D2;
	border-spacing: 1px; /* Not applicable to IE */
}

.dbox .altrow {
	background-color: #F3F3F3;
}

.dbox .row {
	background-color: #E9E9E9;
}

.dbox .section {
	font-weight: bold;
	text-align: left;
}

.dbox .total {
	background-color: #D2D2D2;
	font-weight: bold;
}

.dbox .onrow TD { /* Selected Rows */
	background-color: #FFFACD;
	color: #000000;
	cursor: pointer;
	padding: 1px;
}

.dbox TH {
	background-color: #D2D2D2;
}

.dbox TH A {
	color: Black;
}

.dbox .gbox { /* GridTable inside a DataTable */
	border-collapse: collapse;
	margin-top: 0px;
}

.dbox .gbox td {
	background-color: white !important;
	border: 0px;
	padding: 1px;
}

.dbox .gbox th {
	background-color: white !important;
	border: 0px;
	font-weight: bold;
	padding: 1px;
}

.dbox .highlight { /* To highlight the individual column */
	background-color: #FFE;	
	border: 0px;
	cursor: pointer;	
	padding: 0px;
}

/* DataTable Column Controls */
.cgControl { /* IE only */
	text-align: center;
	width: 1%;
}

.cgCurrency { /* IE only */
	text-align: right;
}

.cgDate { /* IE only */
	text-align: left;
}

.cgFirst { /* IE only */
	background-color: #000000;
	text-align: left;
}

.cgImage { /* IE only */
	text-align: center;
}

.cgNumber { /* IE only */
	text-align: right;
}

.cgPercent { /* IE only */
	text-align: right;
}

.cgText { /* IE only */
	text-align: left;
}

.cgTime { /* IE only */
	text-align: left;
	white-space: nowrap;
}

.cgTree { /* IE only */
	text-align: center;
	width: 10px;
}

/* DisclaimerDiv */
.disclaim {
	margin-top: 15px;
	padding-left: 3px;
	font-size: 8pt;
	clear: both;
	margin-right: 15px;
}

.disc {
	margin-bottom: 10px;
}

/* ErrorDiv */
.ebox {
	border: 2px solid red;
	background-color: #FFF8DC;
	border-collapse: collapse;
	width: 100%;
	margin: 0px; /* Sets both browsers equal */
	margin-bottom: 15px;
}

.ebox CAPTION {
	text-align: left;
	font-weight: bold;
	color: red;
}

.ebox TH {
	display: none;
}

.ebox TD {
	padding-left: 10px;
}

/* FunctionBox */
.fbox {
	border: 1px solid Black;
	padding: 2px;
	background-color: #C2C2C2;
}

/* FooterDiv */
.foot {
	margin-top: 10px;
	padding: 3px;
	height: 15px; /* Needed for Firefox */
	clear: both;
	margin-right: 15px;	
}

.footcopy {
	float: left;
}

.footmenu{
	float: right;
}

/* GridTable */
.gbox {
	background-color: #F1F1F1;
	font-size: 9pt;
}

.gbox td {
	background-color: #FFFFFF;
	color: #000000;
}

.gbox td.warning {
	background-color: #808080;
	color: #FFFFFF;
}

.gbox th {
	background-color: #FFFFFF;
	font-weight: bold;
	vertical-align: top;
}

/* PageDiv (for free form page text) */
.ptext {
	margin-bottom: 5px;
	font: 8pt Arial;
}

.ptext .field {
	font-weight: bold;
}

.ptext A {
	color: Black;
	font-size: 8pt;
}

.ptext H1 {
	font-size: 16pt;
	font-weight: bold;
}

.ptext H2 {
	font-size: 14pt;
	font-weight: bold;
}

/* PageHeader */
.hbox {
	border-bottom: 1px solid Black;
	width: 792px;
	margin-top: 8px;
	min-height: 25px; /* Needed for Firefox */
}

.hbox .functions {
	float: right;
	white-space: nowrap;
}

.hbox .title {
	float: left;
	font-size: 13pt;
	font-weight: bold;
}

.hbox .id {
	color: Gray;
}

.hbox IMG.highlight { /* Highlights images in the PageHeader Functions (for 

alternate list layouts) */
	border: 2px solid black;
}

/* InfoDiv */
.ibox {
	margin-left: 0px; /* IE Only */
	padding-left: 0px; /* Firefox Only */
	list-style-position: inside;
}

.ibox .info {  /* For first order bullets */
	list-style-image: url(../images/info.gif);  /* IE only */
}

.ibox .warning {  /* For first order bullets */
	list-style-image: url(../images/warn.gif); 
}

.ibox li li {  /* For second order bullets */
	list-style-image: none; 
	list-style-type: square; /* IE only */
}

/* PageMenu */
.pagemenu {
	border: 1px solid #CCCCCC;
	padding: 5px;
	background-color: #F1F1F1;
	font-size: 10pt;
	margin-left: 0px; /* IE Only */
	padding-left: 0px; /* Firefox Only */
	list-style: none;	
}

.pagemenu .title {
	font-size: 11pt;
	font-weight: bold;
}

.pagemenu A {
	font-weight: bold;
}

.pagemenu A:hover {
	background-color: #E6E6E6;
}

.pagemenu UL {
	margin-left: 0px; /* IE Only */
	padding-left: 0px; /* Firefox Only */
	list-style: none;
}

.pagemenu UL UL {
	margin-left: 15px; /* IE Only */
	padding-left: 15px; /* Firefox Only */
	list-style: none;
}

/* PageTree - Not checked for Firefox yet */
.tree {
	font-size: 10pt;
	margin: 0px;
	margin-top: 10px;
}

.tree .branch {
	padding-left: 15px;
}

.tree ul {
	margin: 0px;
	padding: 0px;
}

.tree .title {
	font-weight: bold;
}

.tree li {
	list-style-type: none;
	padding: 2px;	
	padding-left: 15px;
	background-image: url(../images/treestem.gif);
	background-repeat: repeat-y;	
}

/* HoverNote - Not checked for Firefox yet */
.nbox {
	background-color: #B2B2B2;
	border: 1px solid #000000;
	font-size: 12px;
	text-align: left;
	width: 140px;
}

.nbox th {
	font-weight: bold;
}

/* Needs to be incorporated into Sphinx */

.pmbox   { 
	border: 1px solid black; 
	background-color:#CCCCCC;
	position:absolute;
	visibility:hidden;	
/*
	filter:
		progid:DXImageTransform.Microsoft.Shadow(Color='#999999', 

Direction=135, Strength=4)
		progid:DXImageTransform.Microsoft.Alpha(Opacity=92, 

FinishOpacity=0, Style=0, StartX=0, FinishX=100, StartY=0, FinishY=100)
*/
	}

.pmrowhi {
	background-color: #AA0000;
	color: White;
	cursor: pointer;
}

/* RecordTable */
.rbox {
	margin-top: 5px;
	margin-bottom: 10px;
	height: 10px; /* Needed for Firefox */
}

.rbox .links {
	float: right;
}

.rbox .record {
	float: left;
}

.rbox .button {
	padding: 1px;
}

/* SectionHeader */
.sbox {
	background-color: #00008B;
	color: white;	
	height: 10px; /* Needed for IE */
	min-height: 25px; /* Needed for Firefox; ignored by IE */
}

.sbox .functions {
	float: right;
	white-space: nowrap;
	font-size: 8pt;
	padding: 2px;		
}

.sbox .title {
	float: left;
	font-weight: bold;
	padding: 3px;	
}

.sbox .title A {
	text-decoration: none;
	color: white;
}

.sbox .functions A {
	color: white;
}

.sbox .title A:hover {
	color: #AA0000;
}

.sbox .listbox, .sbox .listbox A { /* Needed for Auto-Completer */
	color: black;
}

/* PageMenu */
.menu {
	margin-top: 10px;
}

.menu .itemoff {
	background-color: #E6E6E6;
	border: 1px ridge;
	font-size: 10px;
	padding: 2px;
	text-decoration: none;
}

.menu .itemon {
	background-color: white;
	font-weight: bold;
	border: 1px ridge;
	font-size: 10px;
	padding: 2px;
	text-decoration: none;
}

.menu a:hover {
	background-color: #CCCCCC;
	color: #000000;
}

/* SideMenu */
.sidemenu {
	font-size: 8pt;
}

.sidemenu LI {
	padding: 1px;
	background-color: #E8E8E8;
	margin: 1px;
}

.sidemenu LI LI {
	margin-left: 0px; /* IE Only */
	padding-left: 0px; /* Firefox Only */
}

.sidemenu UL {
	margin: 0px; /* IE Only */
	padding: 0px; /* Firefox Only */	
	list-style: none;
}

.sidemenu .itemoff A {
	color: black;
	text-decoration: none;
	width: 100%;
	display: block;
}

.sidemenu .itemoff A:hover {
	color: blue;
	background-color: #F1F1F1;
}

.sidemenu .itemon A {
	color: black;
	font-weight: bold;
	text-decoration: none;
	width: 100%;
}

.sidemenu .itemon {
	background-color: white;
	border: 1px solid black;
}

.sidemenu .itemoff {
	border: 1px solid #CCC;
}

.sidemenu LABEL {
	font-size: 8pt;
}

.collapsed img.collapsed {
	display: none; /* Necessary for Sidemenu */
}

.collapsed UL { 
	display: none; /* Necessary for Sidemenu */
}

.expanded img.expanded { 
	display: none; /* Necessary for Sidemenu */
}

.si
Member Avatar for Troy III

When i am using below code? Page
<td class="itTD" nowrap="nowrap" width="90%" style="padding-right: 0px">

Do it the Standard way - and don't pay attention to kids making jokes on you with white-space: normal.


If you really demand that the text in those TD elements does not wrap and brak in a new line as this code... (

<td class="itTD" nowrap="nowrap" width="90%" style="padding-right: 0px">

)... instructs the quirks mode browsers to do, -
you should correct that into this:

<td class="itTD" style="width:90%; [B]white-space:nowrap;[/B] padding-right: 0px">

That's all!

Edited by Troy III because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.