CSS Forum

**pealo86** · 05-24-2010, 06:05 AM

I have a <ul> that is supposed to wrap around a floated image, but it seems to be ignoring the padding that I've set.

Notice how in the image attached, the bullets are overlapping the border of the floated image.

The bullets are supposed to line up with the heading above the list. Any <ul>'s work fine on my pages but this one won't seem to display correctly due to the image! Does anyone have any ideas?

HTML:

Code:

<!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" />
<link href="css/import.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="script/nav-active.js"></script>
<script type="text/javascript" src="script/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="script/fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="script/fancybox/call.js"></script>
<title>Investors | Power</title>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <a href="./"><img id="logo" alt="Logo" src="image/logo.gif" /></a>
            <ul id="nav">
                <li class="last"><a href="news.htm">News</a></li>
            </ul>
            <ul id="nav-home">
                <li><a href="./">Home</a></li>
                <li class="last"><a href="contact.htm">Contact</a></li>
            </ul>
        </div><!--end header-->
        <div id="page">
            <div id="content">
                <p>The returns can be structured to meet the investor’s requirements, with beneficial tax allowances (capital writedowns) enhancing the investment.</p>
                <img src="image/content-img-investor-1.jpg" class="content-img-left" />
                <h2>The opportunities may well suit:</h2>
                <ul>
                    <li>High net worth individuals</li>
                    <li>Family offices</li>
                    <li>Pension funds</li>
                    <li>Endowments</li>
                    <li>Trusts</li>
                </ul>
                
            </div><!--end content-->
            <div id="sidebar">
                <div class="divide">
                    <h6>Zero capital cost</h6>
                    <div class="content">
                        <p>green electricity with no outlay.</p>
                        <a href="#">Read more&gt;</a>
                    </div>
                </div>
                <div class="divide">
                    <h6>Why R<span class="lowercase">e</span>-N<span class="lowercase">u</span> Power?</h6>
                    <div class="content">
                        <ul>
                            <li>Strong technical knowledge</li>
                            <li>Highest quality partners</li>
                            <li>Financial firepower and    relationships</li>
                            <li>Property identification, discovery and network</li>
                            <li>Passion, energy and drive</li>
                            <li>Commitment and integrity</li>
                        </ul>
                    </div>
                </div>
            </div><!--end sidebar-->
        </div><!--end page-->
        <div id="footer">
            <p class="left">Power, Sydling Estate, Dorchester, Dorset DT2 9PH</p>
            <p class="right">Photos courtesy of Beck Energy</p>
        </div><!--end footer-->
    </div><!--end wrapper-->
</body>
</html>

CSS:

Code:

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
}

/* general //////////////////////////////////////////////////////////////////////////*/

body {
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
    color: #58595B;
    padding-bottom: 50px;
    background: #e6ecec url('../image/body.gif') repeat-x;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 14px;
    margin-top: 15px;
    color: #308E19;
    font-weight: bold;
}

h1 {
    font-size: 16px;
    margin-top: 0;
}

h6 {
    text-transform: uppercase;
}

p {
    margin: 5px 0 8px;
}

a, strong {
    color: #308E19;
}

a:hover {
    color: #444;
}

table {
    width: 550px;
    border-collapse: collapse;
    margin: 20px 0 0 1px;
}

table .row1 {
    border: #308E19 solid 1px;
}

table th, table td {
    padding: 5px 10px;
}

table th {
    background: #808080;
    color: #FFF;
    font-weight: normal;
}

table td {
    border: #308E19 solid 1px;
}

table .last {
    background: #eaf4e9;
}

#logo {
    position: absolute;
    top: 30px;
    left: 10px;
    padding: 10px 20px;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

.content-img-right, .content-img-left {
    float: right;
    border: #dde5e5 solid 10px;
    margin-left: 10px;
}

.content-img-left {
    float: left;
    margin: 0 10px 0 0;
}

.sidebar-img-first {
    margin-top: 20px;
}

.sidebar-img {
    margin-top: 10px;
}



    



/* div id //////////////////////////////////////////////////////////////////////////*/

#wrapper {
    width: 960px;
    margin: 0 auto;
    overflow: auto;
}

#header {
    position: relative;
    background: url('../image/header.jpg') no-repeat 0 center;
    height: 226px;
}

#header-contact {
    position: absolute;
    top: 10px;
    right: 10px;
}

#page {
    background: url('../image/page.png') repeat-y 0 center;
    overflow: auto;
}

#page p {
    line-height: 15px;
}

#content {
    margin-left: 80px;
    width: 560px;
    float: left;
    overflow: auto;
    padding: 30px 0;
}

#content .divide {
    background: #dde5e5;
    padding: 10px 10px 0;
    overflow: auto;
    margin-bottom: 15px;
}

#content .divide .left {
    width: 350px;
    float: left;
}

#content .divide .right {
    float: right;
    width: 180px;
}

#content .divide h3 {
    margin: 0;
}

#content .divide p {
    margin-bottom: 15px;
}

#content .divide img {
    margin-bottom: 10px;
}

#sidebar {
    float: right;
    width: 260px;
    overflow: auto;
    margin-right: 39px;
    padding: 25px 0;
}

#sidebar .divide {
    background: url('../image/sidebar-divide.gif') no-repeat 0 bottom;
    padding-bottom: 20px;
}

#sidebar .divide h6 {
    margin: 0;
    background: url('../image/sidebar-divide-h6.gif') no-repeat;
    height: 23px;
    padding: 17px 0 0 50px;
}

#sidebar .divide .content {
    padding: 0 20px 10px 50px;
    background: url('../image/sidebar-divide-content.gif') repeat-y;
    margin-right: 10px;
    overflow: auto;
}

#footer {
    clear: both;
    background: url('../image/footer.jpg') no-repeat center 0;
    height: 50px;
}

#footer p {
    margin: 5px 0 0;
    color: #97c68c;
}

#footer .left {
    float: left;
    margin-left: 80px;
}

#footer .right {
    float: right;
    margin-right: 60px;
}




/* div class //////////////////////////////////////////////////////////////////////////*/

.divide h3 {
    text-transform: uppercase;
}

.gallery {
    overflow: auto;
}

.gallery .left {
    width: 240px;
    float: left;
}

.gallery .right {
    width: 283px;
    float: right;
    background: #dde5e5;
    padding-bottom: 10px;
}

.gallery .right p a {
    background: url('../image/content-divide-a.gif') no-repeat;
    padding-left: 20px;
    margin-left: 40px;
    display: block;
    clear: both;
}




/* list //////////////////////////////////////////////////////////////////////////*/

ul {
    list-style: none;
}

ol {
    padding-left: 20px;
    margin: 5px 0 8px;
}

#nav, #nav-home {
    position: absolute;
    bottom: 0;
    left: 70px;
    width: 600px;
}

#nav-home {
    left: 692px;
    width: 150px;
}

#nav li, #nav-home li {
    display: inline;
    float: left;
    background: url('../image/nav-li.gif') no-repeat 100% center;
}

#nav li a, #nav-home li a {
    float: left;
    display: block;
    margin-right: 1px;
    padding: 6px 10px;
    background: url('../image/nav-li-a.gif') no-repeat center center;
    text-transform: uppercase;
    color: #FFF;
    text-decoration: none;
}

#nav a:hover, #nav .active, #nav-home a:hover, #nav-home .active {
    background: #ad801e;
}

#nav .first, #nav .last, #nav-home .last {
    background: none;
}

#nav-header, #nav-header-active {
    width: 230px;
    position: absolute;
    top: 25px;
    right: 60px;
    background: #308E19;
}

#nav-header li a, #nav-header-active li a {
    display: block;
    background: url('../image/nav-header-li-a.gif') no-repeat 15px center;
    padding: 5px 0  5px 40px;
    border-bottom: #6eaf5e solid 1px;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
}

#nav-header-active {
    background: #ad801e;
}

#nav-header li:hover {
    background: #ad801e;
}

#nav-header li:hover a {
    background-image: url('../image/nav-header-li-a-hover.gif');
    border-bottom-color: #F6C53D;
}

#nav-header li .last, #nav-header-active li .last {
    border: none;
}

#page ul, #page ol, #page p {
    line-height: 15px;
}

#page ul {
    list-style: disc;
}

#page ul li, #page ol li {
    margin-bottom: 5px;
}

#page ul li {
    margin: 0 0 5px 20px;
}




/* form //////////////////////////////////////////////////////////////////////////*/

form label {
    float: left;
    width: 200px;
    text-align: right;
    margin-right: 10px;
}

form input, form textarea, form select {
    float: left;
}

form div {
    overflow: auto;
    margin-top: 10px;
}

.frm-btn {
    float: right;
    width: 150px;
    height: 60px;
    background: orange;
}

Thanks

**Phunk Rabbit** · 05-24-2010, 06:23 AM

Try applying "list-style-possition:inside;" to the ul. i think this is the correct term.

**pealo86** · 05-24-2010, 07:12 AM

Thanks! That's 'sort of' fixed it, but it still seems to be ignoring the left padding for some reason.

It doesn't so much matter in this case as I can get around it, but it's still bugging me!

Thanks for the help.