I’m having a particular issue that I was able to zero in on with a particular structure, and I’m not entirely sure why.
Here’s the situation: designing a site that is served specifically to iPads, so I do most of my development in Windows Safari (other browsers don’t matter). jQTouch generally creates pages of <ul>‘s with <li> items for each, so my forms contain all of these. The particular issue I am having is that when I have a <ul> block outside of a <form> tag, it displays correctly (as in, it stretches the <ul> to match whatever height it’s contents takes). An easy way to visually check this is to see the background color of the <ul>. However, whenever I put it into a form tag, the <ul> can no longer tell the height of its contents, and Safari assigns it height: 0px (in the first instance, its assigned a pixel amount that is calculated with its contents’ heights, == correct)
Tried to pull out only the important HTML tags and CSS styling in the example – copied the composite CSS that Safari was applying to each tag in order to show precisely what my application is generating across all classes etc., and uses purposefully vague selectors for the example:
CSS:
div {
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-user-select: none;
background-color: #DADFE3;
background-image: -webkit-repeating-linear-gradient(left, transparent, transparent 1px, #D4DADF 1px, #D4DADF 7px);
bottom: auto;
display: -webkit-box;
font-family: 'Helvetica Neue', Helvetica;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 100%;
overflow-x: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
right: auto;
top: 0px;
width: 1406px;
z-index: 10;
}
form {
-webkit-margin-after-collapse: separate;
-webkit-margin-before-collapse: separate;
-webkit-user-select: none;
bottom: auto;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica;
height: 671px;
left: auto;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
top: auto;
width: 1406px;
}
ul {
-webkit-box-shadow: rgba(255, 255, 255, 0.148438) 0px 1px 0px 0px;
-webkit-margin-after-collapse: separate;
-webkit-margin-before-collapse: separate;
-webkit-user-select: none;
background-color: maroon;
border-bottom-color: #CACFD6;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #CACFD6;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #CACFD6;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #CACFD6;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-style: solid;
border-top-width: 1px;
bottom: auto;
box-shadow: rgba(255, 255, 255, 0.148438) 0px 1px 0px 0px;
color: gray;
display: block;
font-family: 'Helvetica Neue', Helvetica;
font-size: 18px;
font-style: normal;
font-variant: normal;
font-weight: bold;
left: auto;
line-height: normal;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
text-shadow: white 0px 1px 0px;
top: auto;
width: 1335px;
clear: both;
}
li {
width: 40%;
float: left;
display: inline-block;
height: 30px;
}
HTML:
<html>
<head>
<title>Test</title>
<style type="text/css">
/* CSS above here */
</style>
</head>
<body>
<div>
<form action="/some/action" method="GET">
<ul>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
</ul>
</form>
<ul>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
</ul>
</div>
</body>
</html>
I can attempt to provide more information if needed – but putting together the above code in Safari (Win) will replicate the issue: UL inside of form has no height, UL outside does.
Edit: To quickly show what I’m seeing visually, I took a screenshot and pointed out what I’m seeing:
Edit: Apparently this occurs the same way in Firefox. Was doing some heavy AJAX work and am more familiar with Firefox’s Firebug extension for that purpose, so I checked what it looked like in Firefox and it occurs there, too. The UL has a height of 0 if its not explicitly set.
Add
overflow:auto;to you list of rules for theULtag, or remove thefloat:left;rule for yourLItag.jsFiddle example of the
overflow:auto;rule added.