ajmsake Posted April 22, 2008 Share Posted April 22, 2008 Hi,The following code renders fine in IE but not in FF. The behavior I'm trying to achieve is just a simple box with a caption bar on top, content in the middle and a footer bar on the bottom. Regardless of the length of the content I'd like the content box enclosed with a border and the footer bar to remain locked to the bottom of the content box. In FF the border doesn't grow with the size of the <div> element, I have to explicitly set a "height". Also, in both IE and FF the footer bar doesn't remain at the "min-height" value for the content box (actually, I'm not sure how to achieve this). The actual code is close (or maybe not...) I've been all over the web trying to find the solution/examples so any help will be greatly appreciated...!Thanks...Anthony <html><head> <title></title><style type="text/css">.itemsList{ border: 1px solid #000000; width: 600px; min-height: 200px; padding: 5px 5px 5px 5px; margin: 0 auto;}.itemCaption{ background-color: #EEEEEE; color: #003399; float: left; padding: 3px;}.itemCaptionLabel{ float: left; font-size: 14px; font-weight: bold;}.itemCaption a{ color: #003399; text-decoration: none;}.itemCaption a:hover{ color: #FF0000; text-decoration: underline;}.itemMenu{ float: right;}.itemContent{ float: left; text-align: left; margin: 5px 5px 15px 5px;}.itemFooter{ float: left; padding: 15px 5px 5px 5px;}.itemPost{ float: left;}.itemCommentCount{ float: right;}.itemFooter a, a:visited{ color: #000000; text-decoration: none;}.itemFooter a:hover{ color: #FF0000; text-decoration: underline;}</style></head><body><div class="itemsList"> <div class="itemCaption"> <div class="itemCaptionLabel">Caption</div><div class="itemMenu"><a href="">print</a> | <a href="">email</a> | <a href="">edit</a></div> </div> <div class="itemContent"> This is just some bogus text to put something into this box. This is just some bogus text to put something into this box. This is just some bogus text to put something into this box. </div> <div class="itemFooter"> <div class="itemPost" >Posted by Mickey Mouse on Apr 12, 2008</div><div class="itemCommentCount"><a href="">Comments (0)</a></div> </div></div></body></html> Link to comment Share on other sites More sharing options...
S@m Posted April 22, 2008 Share Posted April 22, 2008 http://www.themaninblue.com/writing/perspective/2005/08/29/ Link to comment Share on other sites More sharing options...
ajmsake Posted April 22, 2008 Author Share Posted April 22, 2008 http://www.themaninblue.com/writing/perspective/2005/08/29/Cool, thanks S@m... any idea why the div'd border doesn't render correctly in FF? It appears to render perfect in IE but in FF the border isn't drawn correctly... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.