Float Images and LI alignment ...Code...

[buildakicker]

Hello all,

I have images I float:left on my screen, then I can write my <p> around them... however, when I put in a UL, the bullet then creeps into the image...

I can fix margins, but then the rest of the bullets on the screen move of course... I would like the UL to wrap also.

How do I get it to pick up the correct margin I have set for the image?

Here is my Image and Content CSS:

#inner{
    width:100%;
    float:left;
    margin-right:-1px;
}/* contain cleared elements from clearing other floats*/

#inner_margin{
    margin-left:8px;
    margin-right: 5px;
}

#inner_margin p{
    line-height: 1.3em;
    margin-bottom: 1.3em;
    margin-left: 5px;
    margin-right: 5px;
    font-size: .9em;
}
#inner_margin ul{
    margin-left: 2em;
    font-size: .9em;
    padding-bottom: .5em;
    padding-top: .5em;
}
#inner_margin li{
padding-bottom: .5em;
}
/*###Image Float#####*/
img.floatleft{
    _position:relative;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 0;    
}
img.floatleft_border{
    _position:relative;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;    
    border: 1px solid #000000;
}
img.floatright{
    _position:relative;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;    
    border: 0;
}
img.floatright_border{
    _position:relative;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;    
    border: 1px solid #000000;
}

Thanks

[c2uk]

Can you provide an online test-page? That at least would make it easier for me to help you.

[Shaun(OfTheDead)]

Hmm...

A quick fix would be to wrap an identified div around the offending bullets so that you can select them seperately in your stylesheet.

Or you could also give that <ul> a class all its own.

[Shaun(OfTheDead)]

...either way, once you can select those <li>'s seperately, you can style them and them alone without affecting anything else on your page.

[buildakicker]

I hear you on that SOtD, I am trying to minimize my CSS as much as possible is why I am asking. Is there not a way to make the UL recognize the the <p> does?

can I do:

#inner_margin p ul{}

is that legit?

[buildakicker]

Well putting the margin in the LI rather than the UL tag makes it work in FF not in IE6 though... Hmm....

#inner_margin ul{
    font-size: .9em;
    padding-bottom: .5em;
    padding-top: .5em;
}
#inner_margin li{
    margin-left: 2em; 
padding-bottom: .5em;
}

[Kravvitz]

No, a <ul> may not be a descendant of a <p>. The spaces between the ID and element selectors are descendant selectors, which means that the one on the right of the descendant selector is a descendant of the one on the left.

Why are you using the underscore hack (which is not valid)? Why can't you just show position:relative to all browsers?

Could you put up a test page?

[buildakicker]

I got it working great with margin: in the LI

Here is a test page:

http://www.fs.fed.us/r5/hfqlg/test/

[Kravvitz]

Oh! You removed the default left margin on the <ul>s rule for the universal selector. You could put a left margin or left padding on the list instead of left margin on the <li>s.

These three articles explain how to style lists.
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/
http://www.webreference.com/programming/css_lists/

[Shaun(OfTheDead)]

Well putting the margin in the LI rather than the UL tag makes it work in FF not in IE6 though... Hmm....

#inner_margin ul{
    font-size: .9em;
    padding-bottom: .5em;
    padding-top: .5em;
}
#inner_margin li{
    margin-left: 2em; 
padding-bottom: .5em;
}

Try...
#inner_margin ul li{}