fusioninternet
asked on
CSS min-height issue with Safari & Firefox
I am having a problem getting the min-height parameter to work correctly in Firefox and Safari
I have tried changing the attribute to height and also height: auto but still the when the enclosed text breaks the height of the box it is not pushing down the container.
I am sure i am missing something really obvious and basic, but i cannot see the problem now matter how hard i look!
Any help is greatly appreciated
I have tried changing the attribute to height and also height: auto but still the when the enclosed text breaks the height of the box it is not pushing down the container.
I am sure i am missing something really obvious and basic, but i cannot see the problem now matter how hard i look!
Any help is greatly appreciated
<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#boxesrow2 {
width: 238px;
float:left;
}
#boxesrow2 #boxesrow2header {
width: 238px;
height: 28px;
background-image:url(http://www.taylormadedesign.co.uk/samplefile/minheight/boxes_header_orange.png);
background-repeat:repeat-y;
z-index:100;
}
#boxesrow2 #boxesrow2header #boxheader {
width: 210px;
padding: 7px 13px 0px 13px;
margin-right:11px;
float: left;
}
#boxesrow2 #boxesrow2header #boxheader p{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #ffffff;
margin-top: 0px;
margin-bottom: 5px;
}
#boxesrow2content {
width: 238px;
height: 110px;
background-image:url(http://www.taylormadedesign.co.uk/samplefile/minheight/boxes_background.png);
background-repeat:repeat-y;
}
#boxesrow2content #boxtext {
width: 210px;
padding: 5px 13px 3px 13px;
margin-right:11px;
float: left;
}
#boxesrow2content #boxtext p,li{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin-top: 0px;
margin-bottom: 5px;
list-style:disc #f36f21;
}
#boxesrow2content #boxtext li{
padding: 0px 0px;
margin-bottom: 0px;
}
#boxesrow2content #boxtext ul{
padding: 0px 13px;
margin-top: 0px;
margin-bottom: 0px;
}
#boxesrow2footer {
width: 238px;
height: 8px;
background-image:url(http://www.taylormadedesign.co.uk/samplefile/minheight/boxes_footer.png);
background-repeat:repeat-y;
}
</style>
</head>
<body>
<div id="boxesrow2">
<div id="boxesrow2header">
<div id="boxheader"><p>Our Services</p></div>
</div>
<div id="boxesrow2content">
<div id="boxtext">
<img src="http://www.taylormadedesign.co.uk/samplefile/minheight/box_info.png" width="50" height="94" align="right" />
<p>We offer a professional legal advice service with free consultations and best advice.</p>
<p>Read our No Win No Fee Guarantee.
100% of compensation with no deductions.</p>
<p>Read our No Win No Fee Guarantee.
100% of compensation with no deductions.</p>
<p>Read our No Win No Fee Guarantee.
100% of compensation with no deductions.</p>
<p>Read our No Win No Fee Guarantee.
100% of compensation with no deductions.</p>
<p>Read our No Win No Fee Guarantee.
100% of compensation with no deductions.</p>
<ul>
<li>No Win No Fee</li>
<li>Accident Claims</li>
<li>Free Initial Consultation</li>
<li>Compensation Claims</li>
</ul>
</div>
</div>
<div id="boxesrow2footer"></div>
</div>
</body>
</html>
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
The solution does work very well, although unfortunately the solution causes another issue i have (which i didn't mention in the original posting)
i probably should have posted the code as below first... sorry!
the layout require is a 3 column layout, therefore i need to keep the float:left in place... is there another solution i can use?
Open in new window