Forum Moderators: not2easy
a.list {
background: #f2eee6;
border: 1px solid #c3c3c1;
display: block;
font-size: 10px;
padding: 6px;
text-decoration: none;
width: 280px;
min-height: 70px;
margin: 4px 8px 2px 8px;
}
I am using it to create a box that, when hovered on, has a changing border color. The box can be clicked to navigate. Inside the box is a basic span (with no formatting).
In Internet Explorer it stretches vertically to take whatever is inside it. In Firefox it does not, so if whatever is inside is too high it overflows the box.
What can I do to make FF stretch like IE?
<a href="title.php?id=110" class="list"><span><img src="books/thumbs/bookcover.jpg" align="left" style="padding-right: 6px;" /><strong>Book Title</strong> by Author<br />1 Review</span></a>
So the entire a.list becomes a clickable box...
I took your CSS and Html and has been trying it for a while, with different combinations and always getting the same result : it does not stretch in firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>asdf</title>
<style type="text/css">
a.list {
background: #f2eee6;
border: 1px solid #c3c3c1;
display: block;
font-size: 10px;
padding: 6px;
text-decoration: none;
width: 280px;
min-height: 70px;
margin: 4px 8px 2px 8px;
overflow:hidden;
}
</style></head>
<body>
<br>
<a href="title.php?id=110" class="list">
<span style="float:left">
<img src="imagen.jpg" style="padding-right: 6px;">
</span>
<span style="float:left">
<strong>Book Title</strong> by Author<br>
1 Review
</span>
</a></body>
</html>
When you float an element, you pull it out of the flow, so that it no longer interacts with other elements on the page (except in very limited ways), including the element's container. In compliant browsers, this means that a float has no influence on the height of it's container. (IE auto-encloses floats in direct violation of the float specs).
In order to get a float to control the height of it's container, you can (a) use a clearing element, (b)float the container, or (c) use fischermx's overflow fix (any value other than overflow:visible will do it).
Which one to use depends entirely upon which fits better into your particular application.
cEM
So, this works :
<style type="text/css">
a.list {
background: #f2eee6;
border: 1px solid #c3c3c1;
display: block;
font-size: 10px;
padding: 6px;
text-decoration: none;
width: 280px;
min-height: 70px;
margin: 4px 8px 2px 8px;
float:left;
clear:both;
}
But "float:left" alone does not do the job since it starts to stack the boxes on the same row.
So, it is (a) and (b) together, or (c).
I only mentioned the float option to provide as wide a selection as possible. This way tchallies can pick the one that best suits his circumstances.
By clearing element, I meant adding an element to the bottom of the block level <a>nchor set to clear the left floated <span>. This element (<br />s and <hr />s set to visibility:hidden are most common) acts as a sort of wedge to prop open the float container. I'm not crazy about this method, but sometimes when floats or overflows would interfere with other CSS, it's necessary.
Your overflow solution is definitely one of the best. :)
cEM
