Forum Moderators: not2easy

Message Too Old, No Replies

ul, float and positioning problem.

         

javed951

12:29 pm on Jul 12, 2008 (gmt 0)

10+ Year Member




I want to make box which have shown data in three columns through divs.
i write a code out put in IE shows well but in Mozilla Firefox are not well displayed please help me.

this is code please check it.

<!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=iso-8859-1" />
<title>Test</title>

<style type="text/css">
.box {
width:808px;
border:1px #CCCCCC solid;
padding:3px;
}
.box ul{
list-style:none;
}
.box ul li {
width:200px;
float:left;
}

</style>

</head>

<body>
<div class="box">
<ul>
<li>some data here..</li>
<li>some data here..</li>
<li>some data here..</li>
</ul>
</div>
</body>

</html>

Fotiman

2:45 pm on Jul 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Floating the list items takes them out of the flow. Add "overflow: auto;" to your .box ul styles and that will fix it.

Fotiman

2:46 pm on Jul 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Note, there are other methods to fix that issue as well. Most recently, some of these methods were discussed in depth in this thread:
[webmasterworld.com...]