49 users online (0 members and 49 guests)  

Thread: DIV CSS problem


  Results 1 to 6 of 6
  1. #1
    albinjoseph's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2007
    Posts
    4

    DIV CSS problem

    1. I am facing a problem while creating the layout using CSS and DIV. My code renders properly in IE, but in FireFox and Opera it is a mess? Here is my code

    PHP Code:
    <style>
    body {
     
    background-color#CCCCCC;
     
    margin-left10px;
     
    margin-top10px;
     
    margin-right10px;
     
    margin-bottom10px;
    }
    #container {
     
    text-alignjustify;
     
    background-color#FFFFFF;
     
    padding-left:10px;
     
    padding-right:10px;
     
    padding-bottom:10px;
     
    padding-top:10px;
    }
    #headerTextBar {
     
    background-color#E9EAEA;
     
    width:100%;
     
    }
    #headerTextBar .text {
     
    padding-left10px;
     
    padding-right:10px;
     
    floatleft;
     
    height:20px;
     
    vertical-align:middle;
     
    padding-top:5px;
    }
    #headerTextBar img {
     
    vertical-align:middle;
     
    width:2px;
     
    float:left;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div id="container">
     <
    div id="headerTextBar">
      <
    div class="text">
       <
    strong>Home</strong></div>
      <
    div>
       <
    img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
      <
    div class="text">
       <
    strong>Articles</strong></div>
      <
    div>
       <
    img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
      <
    div class="text">
       <
    strong>Forums</strong></div>
      <
    div>
       <
    img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
      <
    div class="text">
       <
    strong>HTML</strong></div>
      <
    div>
       <
    img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
      <
    div class="text">
       <
    strong>About US</strong></div>
      <
    div>
       <
    img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
      <
    div class="text">
       <
    strong>Contact US</strong></div>
      <
    div>
       <
    img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
     
     </
    div>
     
     
    </
    div>
    </
    body
    I want my output to be looks like IE? What is wrong with my code? Please help me.

    Thanks
    Albin Joseph

  2. #2
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: DIV CSS problem

    Specify a height on your container, and move your background-color from #headerTextBar into #headerTextBar .text. This works in FF, but I don't have Opera so I can't check it. Hopefully, this will work for Opera too.

    Code:
    #container {
     text-align: justify;
     background-color: #FFFFFF;
     padding-left:10px;
     padding-right:10px;
     padding-bottom:10px;
     padding-top:10px;
     height: 30px;
    }
    #headerTextBar {
     width:100%;
     
    }
    #headerTextBar .text {
     background-color: #E9EAEA;
     padding-left: 10px;
     padding-right:10px;
     float: left;
     height:20px;
     vertical-align:middle;
     padding-top:5px;
    }
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  3. #3
    albinjoseph's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2007
    Posts
    4

    Re: DIV CSS problem

    Thanks for your reply. But this will not work in my case as I am not able to set a height for my container. The height will be wrong for different pages.

    Also I need a grey background from the start to the end, not just for the text. Open it in IE to see what exactly I need. So moving background-color from #headerTextBar into #headerTextBar .text. also will not work as it provides the background color only for the text part.

    Thanks
    Albin

  4. #4
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: DIV CSS problem

    Quote Originally Posted by albinjoseph View Post
    Open it in IE to see what exactly I need.
    I did. That's why I suggested what I did. Perhaps you need to attach a screen shot so we can see what you're seeing.

    BTW, which version of IE are you using?
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  5. #5
    albinjoseph's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2007
    Posts
    4

    Re: DIV CSS problem

    Please find the screen shots. I am using IE 6.0.

    Thanks
    Albin
    Attached Images Attached Images

  6. #6
    albinjoseph's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2007
    Posts
    4

    Re: DIV CSS problem

    In the above list the first attachment is IE screen shot and the second one is FF screen shot.



Tags for this Thread