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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE backgorund color problems with two DIVs..

    good day.

    I spent some time designing my wordpress blog, and I've been testing it in firefox all the time, since thats what I use.

    But now i'm checking it in IE, and its a total mess.. I'm looking for some help on the code, I can't figure it out.

    First, check out the site: www.freshbasilcrew.com

    At first, I was having a big problem with the column on the left side. I wanted the white background to extend all the way down the page, but it would stop after the menu listing was done. I searched for a solution on this board before asking, and found it would be easier to just put them in the same DIV, that way the menu on the left would be forced to go past the content on the right.

    Therefore, I split up the header into 2 sections (left/right), and have 2 images, since there are 2 columns. The left column contains part of the header, and the left menu. The right column contains the right header, and the main content.

    So everything looks fine in firefox and opera, but in IE, even the background of the right div is white. And the header is positions wrong. Any thing in specific I should look out for to fix this? It also seems liek the menu disappeared in teh IE browser.

    here's some code:

    CSS:
    Code:
    /******** BODY OF WHOLE PAGE ********/
    body {
    background: #000000;
    color: #cccccc;
    font-family: Tahoma, Verdana, Sans;
    font-size: 12px;
    }
    
    #leftPage {float:left; width:140px;background-color:#FFFFFF; }
    #rightPage {float:left; width:820; margin-left: 140px; margin-top:-350px; position:relative;}
    /********* MAIN CONTENT (WHERE POSTS ARE) ********/
    #content {
    text-align: justify;
    padding: 0px 15px 0px 17px;
    margin: 0px;
    width: 530px;
    display: block;
    /*border-right: dashed #00CC33 1px;*/
    }
    
    .postTitle { display: block; border: solid #FFFFFF 1px; background-color:#005c99; padding: 1em;}
    .postTitleText {padding-top: .8em; padding-bottom: .4em;line-height: 1.7em;}
    .postdata { display: inline;position:relative; left: 5px; padding: .2em; color: #000000; font-size: 12px; font-weight:bold;}
    .entry { background-color:#a7a7a7; color:#000000; border: #FFFFFF solid 1px; border-top: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.2em;}
    .entry object, .entry img { display: block; margin: auto;}
    .entry p { padding: .5em 1em;}
    .cats { display: block; background-color:#7f7f7f; border: #FFFFFF solid 1px; border-top: none; font-size: 1em; padding: .5em;}
    .divider { display: block; background-color:#000000; padding-top: 25px;}
    
    /****************** SIDEBAR LEFT ***************/
    #container-Menu {
    position: absolute;
    left: 0px;
    top: 285px;
    width: 140px;
    }
    #menu {           
    background-color: #FFFFFF;
    color: #000000;
    padding-top: 5px;
    padding-left:15px;
    text-align: left;
    }
    tried to paste the relevant code.. Let me know what else is needed. Thanks a lot!
    vega.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Well, for starters you could try actually adding a background color to the right div. And add display: inline; to the right div.
    .
    .

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm.. I been trying to figure it out some more.. THikn i might need to use the box model hack??

    I'm not quite sure how it works though.

    And maybe it won't work in my situation, cause to fix the left border issue, I had to place the main content area (right div) inside of the left div wich contains the menu.

  • #4
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Jutlander View Post
    Well, for starters you could try actually adding a background color to the right div. And add display: inline; to the right div.
    haha wow man! that seemed to fix the spacing issues.

    great. thanks!

    but take a look at it again.. the left menu is still missing for some reason.. And there is this white border around the flash menu in the middle. Is there some IE flash hack I don't know about? Its the first time i use flash for any of my sites.


  •  

    Posting Permissions

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