WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS problem freaking me out :-( (7 posts)

  1. orangeguru
    Member
    Posted 9 years ago #

    Hello!

    I have build many sites & stylesheets - but this one just drives me nuts! HELP greatly appreciated:

    http://www.galizia.de/blog/

    Contrary to the usual situation it shows perfectly in IE - but NOT in FF.

    The CSS is pretty simple - but I must be missing something?!

    I already tried clear:both in all styles in different combinations - but it simply won't work.

    Thanks!


    body {
    margin: 30px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background:#fff url(http://www.galizia.de/log/media/bg_verlauf.jpg) repeat-x left top;
    }

    #header {
    padding: 0 0 0 0px;
    margin: 0 auto;
    width: 750px;
    padding: 0px 0px 0px 0px;
    background: white url(http://www.galizia.de/blog/media/header_white_cube.gif) no-repeat;
    text-align: center;
    height: 120px;
    }

    #wrapper {
    padding: 0 0 0 0px;
    width: 750px;
    margin: 0 auto;
    background: white url(http://www.galizia.de/blog/media/bg_main_outline.gif) repeat-y;
    }

    #content {
    background-color: none;
    position: relative;
    width: 400px;
    margin: 0px;
    padding-right: 20px;
    padding-left: 20px;
    float: left;
    }

    #sidebar {
    color: black;
    background-color: none;
    text-align: left;
    padding-right: 10px;
    padding-left: 20px;
    width: 200px;
    float: right;
    border-left: 1px dotted gray;
    }

    With in the template the 'order' of events is pretty simple as well:

    Body

    Header

    wrapper

    content

    sidebar

    all div's seem to be closed.

    Hmmmm. Any idea / feedback greatly appreciated.

    Thanks!

  2. Beel
    Member
    Posted 9 years ago #

    Getting beyond all the "minor" xhtml errors, you have improperly set your ul list in the sidebar:
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.galizia.de%2Fblog%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1#line-162

    In the future, no need to post all your css code as we can "see" it perfectly fine.

  3. orangeguru
    Member
    Posted 9 years ago #

    Thanks for looking.

    Even when I remove all LI/ULs - the problem persists.

  4. HugoA
    Member
    Posted 9 years ago #

    I'm assuming that your referring to the lack of the wrapper background? if so you need to clear the wrapper as at the moment the floats are escaping and not causing the wrapper to expand with them, this is correct behaviour.
    Best technique is:

    .clearfix:after {
    display:block;
    content:".";
    height:0;
    visibility:hidden;
    clear:both;
    }
    .clearfix {display:inline-table;}/* for IEMac only */

    /* this line hides these rules from IEMac \*/
    * html .clearfix{height:1%;} /* for IE*/
    .clearfix {display:block;} /* resets to block */
    /* end hide from IEMac */

    Apply the class 'clearfix' to the wrapper element.

    Hugo.

  5. orangeguru
    Member
    Posted 9 years ago #

    YES! YES! YES!

    Thank you so much - can I marry you?

    It's fucking working.

  6. orangeguru
    Member
    Posted 9 years ago #

    Hugo - send me your Amazon-Whishlist - I'like to thank you with a little gift.

    dieter@orangeguru.net

  7. HugoA
    Member
    Posted 9 years ago #

    :) my pleasure.

Topic Closed

This topic has been closed to new replies.

About this Topic