D
Damien Cymbal
I've stripped this down from a larger page to make it as simple as
possible. The relevant bits are supposed to represent a sort of context
menu down the left hand side of the page. When I render this on IE and
Opera and then shrink the browser window width, the strings in the menu
display ok. When I render it in Firefox/Safari/Epiphany/Konqueror the
strings start to overflow/overlap and just become a jumbled mess as I
squeeze the window. Is there a cross-platform way to achieve the IE
behavior?
------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Bad Content Menu
</title>
<style type="text/css">
..menu-container ul
{
padding: 1px 1px 1px 1px;
margin: 0 0 /*1em*/ 0.5em 0;
list-style-type: none;
background-color: #666666;
color: #FFFFFF;
font: 12px arial;
text-align: left;
}
..menu li a
{
padding: 0 0 0 0.25em;
display:block;
height:1.5em;
text-decoration: none;
background-color: #9E9EA2;
color: #FFFFFF;
border-top: solid 1px #575757;
border-left: solid 1em #575757;
}
..menu li a:hover
{
background-color: #A5C3DE;
color: #000000;
}
table#layout
{
width:100%;
background-color:White;
}
#container-menu-layout
{
width:20%;
border-style: solid;
border-color: #999999;
border-width: 1px;
border-right-style:none;
padding-top:0.25em;
padding-left:0.25em;
padding-right:0.25em;
vertical-align:top;
background-color:#BDC0C8;
}
#container-layout
{
vertical-align:top;
border-style: solid;
border-color: #999999;
border-width: 1px;
border-left: none;
}
</style>
</head>
<body>
<table id="layout" align="center" border="0" cellpadding="0"
cellspacing="0" width="100%" summary="foo">
<tr>
<td id="container-menu-layout">
<h2>Menu Title</h2>
<div class="menu-container">
<ul class="menu">
<li><a href="#String1">String1</a></li> <li><a
href="#String2">String2 a bit longer</a></li> <li><a
href="#String3">String3 which is really really long</a></li>
</ul>
</div>
</td>
<td id="container-layout">
<div id="container">
</div>
</td>
</tr>
</table>
</body>
</html>
possible. The relevant bits are supposed to represent a sort of context
menu down the left hand side of the page. When I render this on IE and
Opera and then shrink the browser window width, the strings in the menu
display ok. When I render it in Firefox/Safari/Epiphany/Konqueror the
strings start to overflow/overlap and just become a jumbled mess as I
squeeze the window. Is there a cross-platform way to achieve the IE
behavior?
------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Bad Content Menu
</title>
<style type="text/css">
..menu-container ul
{
padding: 1px 1px 1px 1px;
margin: 0 0 /*1em*/ 0.5em 0;
list-style-type: none;
background-color: #666666;
color: #FFFFFF;
font: 12px arial;
text-align: left;
}
..menu li a
{
padding: 0 0 0 0.25em;
display:block;
height:1.5em;
text-decoration: none;
background-color: #9E9EA2;
color: #FFFFFF;
border-top: solid 1px #575757;
border-left: solid 1em #575757;
}
..menu li a:hover
{
background-color: #A5C3DE;
color: #000000;
}
table#layout
{
width:100%;
background-color:White;
}
#container-menu-layout
{
width:20%;
border-style: solid;
border-color: #999999;
border-width: 1px;
border-right-style:none;
padding-top:0.25em;
padding-left:0.25em;
padding-right:0.25em;
vertical-align:top;
background-color:#BDC0C8;
}
#container-layout
{
vertical-align:top;
border-style: solid;
border-color: #999999;
border-width: 1px;
border-left: none;
}
</style>
</head>
<body>
<table id="layout" align="center" border="0" cellpadding="0"
cellspacing="0" width="100%" summary="foo">
<tr>
<td id="container-menu-layout">
<h2>Menu Title</h2>
<div class="menu-container">
<ul class="menu">
<li><a href="#String1">String1</a></li> <li><a
href="#String2">String2 a bit longer</a></li> <li><a
href="#String3">String3 which is really really long</a></li>
</ul>
</div>
</td>
<td id="container-layout">
<div id="container">
</div>
</td>
</tr>
</table>
</body>
</html>