6 replies [Last post]
steve-0
Offline
newbie
Last seen: 18 years 1 week ago
Timezone: GMT-9
Joined: 2004-05-20
Posts: 5
Points: 0

So I have 6 lists in 6 column divs arranged horizontally in a container div using floats. Safari on the Mac is not displaying it correctly (it retains a big left margin or padding in the lists). I have set the margins to 0 everywhere, but nothing seems to work. Any ideas?

Here's a screenshot from Safari:
http://stevenlyons.com/clients/css_tests/safari_weird_CSS.jpg

here's the css:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
ul {
margin:0;
}
li {
list-style-type: none;
margin:0px;
}
#container {
width:720px;
padding: 5px;
border: 1px solid black;
}
#col1 {
float:left;
width:100px;
padding: 5px;
background-color:#CCFF66;
margin:0px;
}
#col2 {
float:left;
width:100px;
padding: 5px;
background-color:#CCFFFF;
margin:0px;
}
#col3 {
float:left;
width:100px;
padding: 5px;
background-color:#CCFF66;
margin:0px;
}
#col4 {
float:left;
width:100px;
padding: 5px;
background-color:#CCFFFF;
margin:0px;
}
#col5 {
float:left;
width:100px;
padding: 5px;
background-color:#CCFF66;
margin:0px;
}
#col6 {
float:left;
width:100px;
padding: 5px;
background-color:#CCFFFF;
margin:0px;
}

and the page code:
<div id="container">
<div id="col1">
<ul>
<li><strong>PORTFOLIO</strong></li>
<li>Commmissioned</li>
<li>Uncommissioned</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
</ul>
</div>
<div id="col2"><ul>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
</ul></div>
<div id="col3"><ul>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
</ul></div>
<div id="col4"><ul>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
</ul></div>
<div id="col5"><ul>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
</ul></div>
<div id="col6"><ul>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
<li>col1</li>
</ul></div>
<br clear="all" />
</div>
[/url]

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

6-columns Safari is trouble

Change your ul rule to:

ul
{
margin:0;
padding: 0;
}

Different browsers use either padding or margin for an unordered list indent.

Smile

The next sentence is true. The previous sentence is false. Discuss...

steve-0
Offline
newbie
Last seen: 18 years 1 week ago
Timezone: GMT-9
Joined: 2004-05-20
Posts: 5
Points: 0

6-columns Safari is trouble

OK that was way too easy :oops:

steve-0
Offline
newbie
Last seen: 18 years 1 week ago
Timezone: GMT-9
Joined: 2004-05-20
Posts: 5
Points: 0

shrink the container?

So my next question is:

How do I get the containing div to shrink horizontally to just enclose the divs inside?

I have tried width: auto; and width: 100%; .

Seeking enlightenment.

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

6-columns Safari is trouble

If you know/have specified the width of each div/column within the container, then can't you specify the container div's width?

The next sentence is true. The previous sentence is false. Discuss...

steve-0
Offline
newbie
Last seen: 18 years 1 week ago
Timezone: GMT-9
Joined: 2004-05-20
Posts: 5
Points: 0

6-columns Safari is trouble

That works. I thought there might be a more flexible method.

thanks for all the help.

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 6 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

6-columns Safari is trouble

You could use the min-width declaration, but it's not supported 100% throughout all browsers.

The next sentence is true. The previous sentence is false. Discuss...