Grow your CSS skills. Land your dream job.

ul renders ABOVE the div containing them

  • # November 20, 2009 at 6:41 pm

    Hi,
    I’m creating a template, strict, that I have two issues I just can’t crack,

    *the ul/li-items of the first-row top-menu renders ABOVE the div containing them, this
    happens both in safari4 and ff3, however, in ie6(!) everything looks as I was expceting.

    * the right margin of the search-box is very unstable over different browsers and I
    can’t find out why

    thankful for any advices. If the CSS contain other errors than that, please feel free to
    pick on me, it does validate at w3. The code contain no external references, to
    the benefit of anyone who’s willing to look into it.

    Thanks in anvance,
    //t

    Code:
    < ?xml version="1.0" encoding="utf-8"?>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


     
     
     
    page..


    # November 20, 2009 at 7:55 pm

    From looking over your code it looks like it’s because all of your main content above it is floated to the right and left.

    Try giving the UL a "clear:both"

    # November 22, 2009 at 5:35 am

    Hi Ashton and thank You for your quick reply, :-D

    I’ve tried the suggested code, both at #tr1 ul and #tr1, separatly and combined,
    and it seems to have no effect, neither in safari or ff.

    The concept of the theme is quite simple I belive, but I’m new to strict,
    I’ve made some clarifications colouring, (and restoring logo size through css),
    see below

    * The ul still behaves odd,

    * There are added margins and ignored heights in ie6 and (but that’s a minor issue)

    Code:
    < ?xml version="1.0" encoding="utf-8"?>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


     
     
     
    page..


    Thanks again Ashton, or anyone else for interest of looking in to it,

    All the best,
    /tjelvar

    # November 22, 2009 at 7:18 pm

    you give your ul and li different paddings and margins as you go through the code. clean the code up and it may help.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".