Click here to Skip to main content
15,888,527 members
Home / Discussions / Web Development
   

Web Development

 
GeneralRe: design receiver to receive xml files Pin
perlmunger10-Feb-06 17:59
perlmunger10-Feb-06 17:59 
QuestionWeb programming Books Pin
jamest858-Feb-06 11:57
jamest858-Feb-06 11:57 
AnswerRe: Web programming Books Pin
Pete Madden9-Feb-06 16:30
Pete Madden9-Feb-06 16:30 
GeneralRe: Web programming Books Pin
jamest8510-Feb-06 10:19
jamest8510-Feb-06 10:19 
QuestionKnowing Ip address and country of client Pin
idreesbadshah8-Feb-06 6:43
idreesbadshah8-Feb-06 6:43 
AnswerRe: Knowing Ip address and country of client Pin
Pete Madden9-Feb-06 16:30
Pete Madden9-Feb-06 16:30 
GeneralRe: Knowing Ip address and country of client Pin
perlmunger10-Feb-06 12:21
perlmunger10-Feb-06 12:21 
QuestionCSS overflow: auto not producing horiz bar Pin
bjsiders8-Feb-06 6:01
bjsiders8-Feb-06 6:01 
I have a DIV and within it is a table. The table has styles for each cell. The DIV is set to overflow: scroll. If the table grows too long vertically, the vertical scrollbar kicks in. If it grows too wide horizontally, the width styles are ignored and the cells are squeezed down to fit. Example code:

<html>
<head>
<style type="text/css">
#mapTable {
background-color: #efefef;
border: solid 1px black;
}

#mapTable td {
text-align: center;
}


#mapTable td.exitHoriz {
width: 10px;
height: 30px;
border: none;
background-color: #ddd;
}

#mapTable td.exitVert {
width: 30px;
height: 10px;
background-color: #ddd;
}

#mapTable td.null {
background-color: #ddd;
width: 30px;
height: 30px;
}

#map {
margin-top: 10px;
margin-bottom: 10px;
float: left;
overflow: auto;
}
</style>


</script>
</head>
<body>
<div id="map">
<table id="mapTable">
<tbody>
<tr><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td> </tr>
<tr><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td> </tr>
<tr><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td> </tr>
<tr><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td> </tr>
<tr><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td> </tr>
<tr><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td> </tr>
<tr><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td> </tr>
<tr><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td> </tr>
<tr><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td> </tr>
<tr><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td><td class="null"> </td><td class="exitHoriz"> </td> </tr><tr><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td><td class="exitVert"> </td><td> </td> </tr>
</tbody>
</table>
</div>
</body>
</html>

If I set the height of the of the "map" div to be 100px, the vertical scrollbar appears and the table cell sizes are not mangled. If I set the width to 100px, it messes with the cell sizes, ignores my css, and doesn't put up the horiz scroll bars. This is with the latest Firefox AND with IE, and I've tried both overflow: auto and overflow: scroll, neither works properly.

Note that if I set the width the table itself, it works properly, but I don't want to have to calculate what the table width should be and set it in my styles. How do I fix this?
AnswerRe: CSS overflow: auto not producing horiz bar Pin
Shog98-Feb-06 12:31
sitebuilderShog98-Feb-06 12:31 
GeneralRe: CSS overflow: auto not producing horiz bar Pin
bjsiders13-Feb-06 6:22
bjsiders13-Feb-06 6:22 
QuestionSOAP Pin
MrChefman7-Feb-06 23:22
MrChefman7-Feb-06 23:22 
QuestionCrystal + ASP Pin
Rajkamal_dfine7-Feb-06 21:43
Rajkamal_dfine7-Feb-06 21:43 
AnswerRe: Crystal + ASP Pin
VMSSanthosh7-Feb-06 22:19
VMSSanthosh7-Feb-06 22:19 
GeneralRe: Crystal + ASP Pin
Rajkamal_dfine8-Feb-06 17:22
Rajkamal_dfine8-Feb-06 17:22 
AnswerRe: Crystal + ASP Pin
darkelv11-Feb-06 15:26
darkelv11-Feb-06 15:26 
QuestionPostback / database query / asp nightmare Pin
TofuBug247-Feb-06 11:38
TofuBug247-Feb-06 11:38 
AnswerRe: Postback / database query / asp nightmare Pin
Edbert P7-Feb-06 12:49
Edbert P7-Feb-06 12:49 
AnswerRe: Postback / database query / asp nightmare Pin
Guffa7-Feb-06 13:28
Guffa7-Feb-06 13:28 
QuestionForm button minimum width Pin
Bruce Duncan7-Feb-06 9:06
Bruce Duncan7-Feb-06 9:06 
GeneralRe: Form button minimum width Pin
Bruce Duncan8-Feb-06 7:01
Bruce Duncan8-Feb-06 7:01 
QuestionAutomatic Generation of Image Maps Pin
Kevin McFarlane7-Feb-06 5:04
Kevin McFarlane7-Feb-06 5:04 
AnswerRe: Automatic Generation of Image Maps Pin
VMSSanthosh7-Feb-06 23:00
VMSSanthosh7-Feb-06 23:00 
QuestionWeb services shares common data objects Pin
Lkotzer7-Feb-06 3:01
Lkotzer7-Feb-06 3:01 
QuestionConnection Strings Pin
Illegal Operation7-Feb-06 2:58
Illegal Operation7-Feb-06 2:58 
GeneralRe: Connection Strings Pin
Guffa7-Feb-06 8:32
Guffa7-Feb-06 8:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.