I'm trying to get a list of page links for a report, and I'm running into a problem with IE. I have a group of nested left-floating DIVs for the page menu, inside a table. Firefox expands the size of the table to see the entire menu, but IE does not, the last few are cut off. After a couple of hours of testing, I have determined that IE is not using the min-width when calculating the width of the DIV, but does use the min-width when displaying the nested DIVs. If I remove the min-width all links are visible, and the table's width is exactly the same with and without the min-width. I've looked for a fix for this bug but I have not found anything yet. Here is the relevant code.
The red background and table border are just for debugging purposes. And the empty CSS classes are just for future expandability.
Any ideas?
(And yes, I realize using the table to center align the div is taking the easy way out, but unless anyone knows of a way to center a dynamic width DIV across all browsers I'm stuck with the table. If I ever find the guy who decided that <div align='center'> means nothing...)
Code:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en-us" />
<title>Test</title>
<style type='text/css'>
.rpt_page_menu{
border-style: solid;
border-width:1px;
background-color:#FF0000;
}
/* Common to all */
.rpt_prev,
.rpt_number,
.rpt_next{
float:left;
clear:right;
margin:2px;
}
/* Common to all */
a.rpt_prev_link,
a.rpt_number_link,
a.rpt_number_link_active,
a.rpt_next_link{
text-decoration:none;
color:#0000FF;
}
.rpt_prev{}
a.rpt_prev_link{}
.rpt_number{
border-style:solid;
border-width:1px;
border-color:#666666;
background-color:#CCCCCC;
min-width:20px; /* add and remove this line to see bug */
padding-left:1px;
padding-right:1px;
}
a.rpt_number_link{}
a.rpt_number_link_active{
font-weight:bold;
color:#000000;
}
.rpt_next{}
a.rpt_next{}
.float_fix{
clear:left;
height:0px
}
</style>
</head>
<body>
<table border='1' align='center'><tr><td align='center'>
<div class='rpt_page_menu'>
<div class='rpt_prev'><a class='rpt_prev_link' href=''><< Prev</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>1</a></div>
<div class='rpt_number'><a class='rpt_number_link_active' href=''>2</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>3</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>4</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>5</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>6</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>7</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>8</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>9</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>10</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>11</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>12</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>13</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>14</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>15</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>16</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>17</a></div>
<div class='rpt_number'><a class='rpt_number_link' href=''>18</a></div>
<div class='rpt_next'><a class='rpt_next_link' href=''>Next >></a></div>
<div class='float_fix'> </div>
</div>
</td></tr></table>
</body>
</html>
Any ideas?
(And yes, I realize using the table to center align the div is taking the easy way out, but unless anyone knows of a way to center a dynamic width DIV across all browsers I'm stuck with the table. If I ever find the guy who decided that <div align='center'> means nothing...)