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 5 of 5

Thread: DIV Issues

  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    DIV Issues

    I'm not really all that proficient in CSS - I took a few classes on HTML, but that's about it. Most of my knowledge of CSS is second-hand, copied off of other sites and gleaned from tutorials. So you may not be surprised to know that I have no idea why the current layout for the site I'm working on for my father is working just fine in firefox, but will not display correctly in Internet Explorer. My whole reason for using CSS was entirely on the basis that IE wouldn't pull this crap with <div> tags like it did with tables.

    Though as much as I'd like to blame IE, I'm pretty sure I just coded it wrong. ><

    http://antleritis.com/

    Code:
    <html>
    <head>
    <title>
    ANTLERITIS
    </title>
    <style type="text/css">
    <!--
    #part1 {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 200px;
      height: 124px
    }
    #part2 {
      position: absolute;
      top: 0px;
      left: 200px;
      right: 0px;
      height: 124px;
      background-attachment: fixed;
      background-image: url(http://www.antleritis.com/images/antleritis_piece2.png);
      background-repeat: repeat;
      background-position:top;
    }
    html>body #part2 {
    background-position:200px 0px;
    }
    
    #part3 {
      position: absolute;
      top: 124px;
      left: 0px;
      width: 200px;
      height: 25px;
    }
    #button1 {
      position: absolute;
      top: 149px;
      left: 0px;
      width: 200px;
      height: 50px;
    }
    #button2 {
      position: absolute;
      top: 199px;
      left: 0px;
      width: 200px;
      height: 50px;
    }
    #button3 {
      position: absolute;
      top: 249px;
      left: 0px;
      width: 200px;
      height: 50px;
    }
    #button4 {
      position: absolute;
      top: 299px;
      left: 0px;
      width: 200px;
      height: 50px;
    }
    #button5 {
      position: absolute;
      top: 349px;
      left: 0px;
      width: 200px;
      height: 50px;
    }
    #button6 {
      position: absolute;
      top: 399px;
      left: 0px;
      width: 200px;
      height: 50px;
    }
    #part4 {
      position: absolute;
      top: 449px;
      bottom: 100px;
      left: 0px;
      width: 200px;
      background-attachment: fixed;
      background-image: url(http://www.antleritis.com/images/antleritis_piece4.png);
      background-repeat: repeat;
      background-position:top;
    }
    html>body #part4 {
    background-position:0px 449px;
    }
    #part5 {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 200px;
      height: 100px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="part1"><img src="http://www.antleritis.com/images/antleritis_piece1.png"></div>
    <div id="part2" style="background-image: url(http://www.antleritis.com/images/antleritis_piece2.png);" ></div>
    <div id="part3"><img src="http://www.antleritis.com/images/antleritis_piece3.png"></div>
    <div id="button1"><img src="http://www.antleritis.com/images/antleritis_button1.png"></div>
    <div id="button2"><img src="http://www.antleritis.com/images/antleritis_button2.png"></div>
    <div id="button3"><img src="http://www.antleritis.com/images/antleritis_button3.png"></div>
    <div id="button4"><img src="http://www.antleritis.com/images/antleritis_button4.png"></div>
    <div id="button5"><img src="http://www.antleritis.com/images/antleritis_button5.png"></div>
    <div id="button6"><img src="http://www.antleritis.com/images/antleritis_button6.png"></div>
    <div id="part4" style="background-image: url(http://www.antleritis.com/images/antleritis_piece4.png);"></div>
    <div id="part5"><img src="http://www.antleritis.com/images/antleritis_piece5.png"></div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    First thing you need is to include a doctype at the very top of your html. Without this IE will revert to "quirks mode".

    Try adding the following to the very top - before the html tag:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,706
    Thanks
    0
    Thanked 235 Times in 230 Posts
    Hi there Kruegera,

    and a warm welcome to these forums.
    I'm not really all that proficient in CSS...
    Perhaps this example will help your understanding a little...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.antleritis.com/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>ANTLERITIS</title>
    
    <style type="text/css">
    html,body {
        height:100%;
        padding:0;
        margin:0;
        font-family:arial,verdana,helvetica,sans-serif;
        font-size:1em;
     }
    img {
        display:block;
        border:0;
     }
    #container {
        height:100%;
        background-color:#fda;
        background-image:url(images/antleritis_piece4.png);
        background-repeat:repeat-y;
        overflow:auto;
     }
    #header {
        position:relative;
        z-index:1;
        height:124px;
        background-image:url(images/antleritis_piece2.png);
        background-repeat:repeat-x;
        background-position:200px 0;
     }
    #navigation {
        position:relative;
        z-index:1;
        float:left;
        width:200px;
     }
    #navigation ul {
        padding:0;
        margin:0;
        list-style-type:none;
     }
    #navigation li {
        float:left;
        display:block;
     }
    #content {
        padding:26px;
        margin-left:200px;
     }
    #piece5 {
        position:absolute;
        z-index:0;
        bottom:0;
        left:0;
     }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    #container {
        position:relative;
        overflow:visible;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header"><img src="images/antleritis_piece1.png" alt=""></div>
    
    <div id="navigation">
    
    <img src="images/antleritis_piece3.png" alt="">
    
    <ul>
     <li><a href="main.html"><img src="images/antleritis_button1.png" alt="MAIN"></a></li>
     <li><a href="shedbed.html"><img src="images/antleritis_button2.png" alt="SHED BED"></a></li>
     <li><a href="apparal.html"><img src="images/antleritis_button3.png" alt="APPARAL"></a></li>
     <li><a href="shedphotos.html"><img src="images/antleritis_button4.png" alt="SHED PHOTOS"></a></li>
     <li><a href="contactus.html"><img src="images/antleritis_button5.png" alt="CONTACT US"></a></li>
     <li><a href="aboutus.html"><img src="images/antleritis_button6.png" alt="ABOUT US"></a></li>
    </ul>
    
    </div><!-- end #navigation -->
    
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p>
    </div><!-- end #content -->
    
    <img id="piece5" src="images/antleritis_piece5.png" alt="">
    
    </div><!-- end #container -->
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    Kruegera (12-27-2009)

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you! I've been stumped with this for a week!

    Now I just have to look it all over and figure out what you changed. This might require some unlearning. ><

    Nice use of lorem ipsum. =P

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,706
    Thanks
    0
    Thanked 235 Times in 230 Posts
    No problem, you're very welcome.


  •  

    Posting Permissions

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