Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2007
    Location
    NW USA
    Posts
    63
    Thanks
    0
    Thanked 2 Times in 1 Post

    DIVs and ULs conflicting

    I wasn't sure whether this is actually a "box model" question, but basically, I have a left-floated DIV with text riding next to it on the right. The text contains an unordered list--and the UL does not indent as it ordinarily should.

    See the test page here...
    CSS file here...

    You can also see I have a couple of other questions regarding why some elements respect the floated DIV and others do not...

    Any help appreciated,
    lorie

    p.s. View the test page with browser maximized; I am not yet ready to tackle a fluid layout; though if suggestions on that would help me understand my original question, fire away... thnx

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try

    Code:
    li {
    text-indent:20px;
    }
    see what that does

  • #3
    New Coder
    Join Date
    May 2007
    Location
    NW USA
    Posts
    63
    Thanks
    0
    Thanked 2 Times in 1 Post
    jcdev:

    It sort of fixes it in IE (but text-indent works only for 1st line; in the UL with multiple lines, it turns it into a typewriter-style paragraph with 1st line indented...) In FF, it moves the text over but leaves the bullets behind 20px further to the left. The bullets disappear altogether in the multi-lined example.

    So, I'll play around with text-indent, but I don't think that is quite the answer. Thanks for your quick response.

    lorie

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    sorry try this
    Code:
    li {
    text-indent:20px;
    display:block;
    }
    see if that helps

  • #5
    New Coder
    Join Date
    May 2007
    Location
    NW USA
    Posts
    63
    Thanks
    0
    Thanked 2 Times in 1 Post
    Still no cigar, jcdev:

    The bullets completely disappear in FF; the text does move right a little further, but in the multi-line example, it is still 1st line indented in both browsers...

    thnx again

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    hmm, maybe im going about it all wrong, maybe instead of li, replace it with ul.. it can get confusing at some times!!

  • #7
    New Coder
    Join Date
    May 2007
    Location
    NW USA
    Posts
    63
    Thanks
    0
    Thanked 2 Times in 1 Post
    Well, the best answer seems to be to just wrap the whole section above the clear in another left-floating DIV. (Which is what I will do on my real page...)

    I would like to understand why this happens, though, if anyone can explain it or suggest something other than another DIV...

    Thnx, jcdev, for your quick responses and suggestions.

    lorie

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    no problem good luck with it!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •