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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Some Div problems

    Hello,

    On the page at the bottom I am having some Div problems. First, in FF everything looks fine except the "menu" div wont show up, and wont be height: 100%. And second, in IE7 the "top" div is screwed up, and is messing with the look of everything. How do I fix these?

    Thank You!

    http://www.eliloewen.com


    Last edited by Sman5109; 04-24-2007 at 05:33 AM.
    Not much, but its something.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Sman5109,

    I am not totally certain of the effect that you are trying to create but this may be close...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <base href="http://www.eliloewen.com/test/"/> <!--this is for coothead testing and can be removed--> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	margin: 0;
            padding: 0;
            background-image: url(images/menu.png);
    	background-repeat: repeat-y;
    }
    #logo {
    	background-image: url(images/logo.png);
    	width: 165px;
    	height: 168px;
    	float: left;
    }
    #school {
    	background-image: url(images/school.png);
    	width: 624px;
    	height: 121px;
    	float: left;
    }
    #top {
    	background-image: url(images/top.png);
    	background-repeat: repeat-x;
    	height: 121px;
    }
    #menu {
    	width: 165px;	
    	float: left;
    	clear: both;
    }
    #menu h3 {
            color:#fff;
            text-align:center;
    }
    #menu li {
            color:#fff;
    }
    #menu a:link {
            color:#fff;
    }
    #content {
            margin-left:165px;
            padding:15px 30px;
    }
    #content p {
            text-align:justify;
    }
    </style>
    
    </head>
    <body>
    
    <div id="logo"></div>
    <div id="school"></div>
    <div id="top"></div>
    
    <div id="menu">
    <h3>menu</h3>
     <ul>
      <li><a href="#">link one</a></li>
      <li><a href="#">link two</a></li>
      <li><a href="#">link three</a></li>
      <li><a href="#">link four</a></li>
     </ul>
    </div>
    
    <div id="content">
      <h2>Lorem ipsum</h2>
    
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur  elit nibh, venenatis a, ornare id, 
    elementum et, sem. Aliquam  adipiscing faucibus risus. Nulla at libero. Vivamus vitae lorem id sem  
    pellentesque euismod. Quisque libero. Etiam fermentum mattis eros.  Donec faucibus elit sed enim. Fusce 
    pulvinar tincidunt erat. Phasellus  elit. In luctus. Aliquam erat volutpat. Nullam imperdiet tellus vitae  
    magna. Proin ut purus. Cras condimentum sagittis eros. Morbi laoreet  nunc eget erat. Duis varius. 
    </p><p> 
    Phasellus eget nibh vestibulum felis tempor tincidunt. Fusce  sollicitudin tincidunt quam. Class aptent taciti
     sociosqu ad litora  torquent per conubia nostra, per inceptos hymenaeos. Mauris lectus  libero, lacinia ut, 
    tempor quis, rutrum in, arcu. Nullam fermentum  imperdiet quam. Pellentesque ut urna. Nulla facilisi. In 
    luctus felis  sed nunc. Integer id diam quis erat hendrerit pulvinar. Suspendisse a  dui. Sed eget lorem 
    pharetra enim dignissim facilisis. Vestibulum eu  nunc eu quam tincidunt convallis. Proin non ante. 
    </p><p> 
    In gravida est eget tellus. Proin auctor. Curabitur gravida  ligula ut justo. Duis a lectus. Mauris aliquet 
    lacus a diam interdum  semper. Donec tristique imperdiet diam. Donec malesuada lobortis eros.  Morbi nec felis 
    non elit tristique ultrices. Cras tempus, dui non  mollis porttitor, urna lacus laoreet felis, ac convallis 
    enim purus sed  nulla. In sagittis mi quis dolor. Integer quis neque. Mauris et magna.  Mauris id ante. 
    Vestibulum luctus lacus. 
    </p><p> 
    Sed rutrum massa quis felis. Pellentesque laoreet, sapien nec  rutrum vulputate, justo tortor ullamcorper 
    dolor, auctor pretium magna  purus in orci. Nam sit amet leo. Proin nec dui. Nunc libero enim,  tincidunt vitae,
    elementum eu, fermentum et, leo. Maecenas pede tellus,  sollicitudin vulputate, consectetuer a, iaculis id, 
    velit. Curabitur  blandit pulvinar libero. Quisque dolor. Ut nonummy leo non nulla.  Maecenas quis enim. Nunc 
    eget pede. Pellentesque habitant morbi  tristique senectus et netus et malesuada fames ac turpis egestas.  
    Maecenas vitae ligula quis elit eleifend fermentum. Morbi tempus magna  nec lectus. Vestibulum elementum. 
    Nulla malesuada, sapien non ornare  gravida, pede quam interdum ipsum, ut nonummy enim turpis vitae neque.  
    Etiam consequat mollis sapien. Nunc congue. Fusce leo nibh, tempus et,  pulvinar in, sollicitudin in, felis. 
    Sed eget est. 
    </p><p> 
    Nulla purus eros, nonummy vel, tincidunt nec, ullamcorper  malesuada, quam. Phasellus sem. In non nisi eget 
    justo hendrerit  dictum. Suspendisse pharetra leo in lectus. Duis ultricies. In  fringilla justo at pede. Ut 
    pretium nunc vel massa. Fusce arcu erat,  ultrices ac, fringilla eu, iaculis eu, turpis. Duis tempus, augue et
      tempor bibendum, est risus dapibus risus, sed sagittis nisl erat nec  nisl. Nulla venenatis placerat odio. 
    Suspendisse sed neque. Duis risus.  Etiam quis est vel neque lacinia porttitor. Integer ipsum. Mauris  tristique 
    scelerisque tortor. Aliquam erat volutpat. Vestibulum et  ipsum. Aenean eleifend pulvinar lectus. Phasellus nec 
    augue. 
    </p>
    
    </div>
    
    </body>
    </html>
    
    
    I would suggest that you use the xhtml1-strict.dtd or even html4/strict.dtd rather than the xhtml11.dtd.

    coothead
    Last edited by coothead; 04-22-2007 at 08:44 AM. Reason: removed superflous code

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Sman5109,
    I think you need to re-arrange the order of your markup.
    Like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html {
    height: 100%; /*100% height need height set in html also*/
    }
    body {
    	height: 100%;
    }
    * {
    margin: 0;
    padding: 0;
    border: none;
    }
    #logo {
    	background-image: url(http://www.eliloewen.com/test/images/logo.png);
    	width: 165px;
    	height: 168px;
    	float: left;
    }
    #top {
    	background-image: url(http://www.eliloewen.com/test/images/top.png);
    	height: 121px;
    	background-repeat: repeat-x;
    }
    #school {
    	background-image: url(http://www.eliloewen.com/test/images/school.png);
    	height: 121px;
    	width: 624px;
    	float: left;
    }
    #menu {
    	background-image: url(http://www.eliloewen.com/test/images/menu.png);
    	width: 165px;
    	height: 100%;
    	float: left;
    	clear: left;
    	background-repeat: repeat-y;
    }
    #content {
    
    }
    </style>
    </head>
    <body>
    <div id="logo"></div>
    <div id="top">
    <div id="school"></div>
    </div>
    <div id="menu"></div>
    <div id="content">
      <h2>Lorem ipsum</h2>
    
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur  elit nibh, venenatis a, ornare id, elementum et, sem. Aliquam  adipiscing faucibus risus. Nulla at libero. Vivamus vitae lorem id sem  pellentesque euismod. Quisque libero. Etiam fermentum mattis eros.  Donec faucibus elit sed enim. Fusce pulvinar tincidunt erat. Phasellus  elit. In luctus. Aliquam erat volutpat. Nullam imperdiet tellus vitae  magna. Proin ut purus. Cras condimentum sagittis eros. Morbi laoreet  nunc eget erat. Duis varius. </p>
      <p> Phasellus eget nibh vestibulum felis tempor tincidunt. Fusce  sollicitudin tincidunt quam. Class aptent taciti sociosqu ad litora  torquent per conubia nostra, per inceptos hymenaeos. Mauris lectus  libero, lacinia ut, tempor quis, rutrum in, arcu. Nullam fermentum  imperdiet quam. Pellentesque ut urna. Nulla facilisi. In luctus felis  sed nunc. Integer id diam quis erat hendrerit pulvinar. Suspendisse a  dui. Sed eget lorem pharetra enim dignissim facilisis. Vestibulum eu  nunc eu quam tincidunt convallis. Proin non ante. </p>
      <p> In gravida est eget tellus. Proin auctor. Curabitur gravida  ligula ut justo. Duis a lectus. Mauris aliquet lacus a diam interdum  semper. Donec tristique imperdiet diam. Donec malesuada lobortis eros.  Morbi nec felis non elit tristique ultrices. Cras tempus, dui non  mollis porttitor, urna lacus laoreet felis, ac convallis enim purus sed  nulla. In sagittis mi quis dolor. Integer quis neque. Mauris et magna.  Mauris id ante. Vestibulum luctus lacus. </p>
      <p> Sed rutrum massa quis felis. Pellentesque laoreet, sapien nec  rutrum vulputate, justo tortor ullamcorper dolor, auctor pretium magna  purus in orci. Nam sit amet leo. Proin nec dui. Nunc libero enim,  tincidunt vitae, elementum eu, fermentum et, leo. Maecenas pede tellus,  sollicitudin vulputate, consectetuer a, iaculis id, velit. Curabitur  blandit pulvinar libero. Quisque dolor. Ut nonummy leo non nulla.  Maecenas quis enim. Nunc eget pede. Pellentesque habitant morbi  tristique senectus et netus et malesuada fames ac turpis egestas.  Maecenas vitae ligula quis elit eleifend fermentum. Morbi tempus magna  nec lectus. Vestibulum elementum. Nulla malesuada, sapien non ornare  gravida, pede quam interdum ipsum, ut nonummy enim turpis vitae neque.  Etiam consequat mollis sapien. Nunc congue. Fusce leo nibh, tempus et,  pulvinar in, sollicitudin in, felis. Sed eget est. </p>
      <p> Nulla purus eros, nonummy vel, tincidunt nec, ullamcorper  malesuada, quam. Phasellus sem. In non nisi eget justo hendrerit  dictum. Suspendisse pharetra leo in lectus. Duis ultricies. In  fringilla justo at pede. Ut pretium nunc vel massa. Fusce arcu erat,  ultrices ac, fringilla eu, iaculis eu, turpis. Duis tempus, augue et  tempor bibendum, est risus dapibus risus, sed sagittis nisl erat nec  nisl. Nulla venenatis placerat odio. Suspendisse sed neque. Duis risus.  Etiam quis est vel neque lacinia porttitor. Integer ipsum. Mauris  tristique scelerisque tortor. Aliquam erat volutpat. Vestibulum et  ipsum. Aenean eleifend pulvinar lectus. Phasellus nec augue. </p>
    
    </div>
    </body>
    </html>
    That works in IE7 and FF anyway.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ok, i fixed up the code, now i have a few more problems.

    1. when i resize the page in FF the "school" div moves down (its fine in IE7). FIXED
    2. Theres a big gap above the "content" div in IE7.

    How do i fix these?

    Also, is there a way i can have IE6 as a standalone in Vista?
    Last edited by Sman5109; 04-22-2007 at 11:00 PM.
    Not much, but its something.

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I just fixed #1. Does anyone know how to fix #2?
    Not much, but its something.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Sman5109 View Post
    Ok, i fixed up the code, now i have a few more problems.

    1. when i resize the page in FF the "school" div moves down (its fine in IE7). FIXED
    2. Theres a big gap above the "content" div in IE7.

    How do i fix these?
    I moved/changed a lot, you'll just have to compare the two versions and see what you can use from it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Layout</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <style type="text/css">
    html {
    	HEIGHT: 100%
    }
    body {
    	BACKGROUND-IMAGE: url(http://www.eliloewen.com/test/images/menu.png); MARGIN: 0px; BACKGROUND-REPEAT: repeat-y; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 100%
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #left_col {
    	width: 165px;
    	height: 100%;
    	float: left;
    }
    #menu {
    	WIDTH: 165px; 
    	FLOAT: left; 
    	margin: 10px 0 0 0;
    	COLOR: #ffffff
    }
    #menu h3 {
    	margin: 0 0 0 30px;
    }
    #menu ul {
    	margin: 0 0 0 30px;
    }
    #menu li {
    	COLOR: #ffffff
    }
    #logo {
    	FLOAT: left; 
    	BACKGROUND-IMAGE: url(http://www.eliloewen.com/test/images/logo.png); 
    	WIDTH: 165px; 
    	HEIGHT: 168px
    }
    #top {
    	BACKGROUND-IMAGE: url(http://www.eliloewen.com/test/images/top.png); 
    	OVERFLOW: hidden; 
    	HEIGHT: 121px
    }
    #school {
    	BACKGROUND-IMAGE: url(http://www.eliloewen.com/test/images/school.png); 
    	WIDTH: 624px; 
    	HEIGHT: 121px
    }
    
    #content {
    	margin: 10px;
    }
    #content h1{
    	margin: 0 0 0 165px;
    	FONT-SIZE: 24px; 
    	TEXT-DECORATION: underline
    }
    #content p {
    	margin: 0 0 0 165px;
    }
    a:link {
    	COLOR: #ffffff
    }
    a:visited {
    	COLOR: #ffffff
    }
    a:hover {
    	COLOR: #999999
    }
    a:active {
    	COLOR: #cccccc
    }
    </style>
    </head>
    <body>
    <div id="left_col">
        <div id="logo"></div>
            <div id="menu">
                <h3>menu</h3>
                     <ul>
                          <li><a href="http://www.eliloewen.com/test/#">link one</a></li>
                          <li><a href="http://www.eliloewen.com/test/#">link two</a></li>
                          <li><a href="http://www.eliloewen.com/test/#">link three</a></li>
                          <li><a href="http://www.eliloewen.com/test/#">link four</a></li>
              </ul>
            </div>
    <!--closes left_col--></div>
        <div id="top">
        	<div id="school"></div>
    	</div>
    <div id="content">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur elit 
    nibh, venenatis a, ornare id, elementum et, sem. Aliquam adipiscing faucibus 
    risus. Nulla at libero. Vivamus vitae lorem id sem pellentesque euismod. Quisque 
    libero. Etiam fermentum mattis eros. Donec faucibus elit sed enim. Fusce 
    pulvinar tincidunt erat. Phasellus elit. In luctus. Aliquam erat volutpat. 
    Nullam imperdiet tellus vitae magna. Proin ut purus. Cras condimentum sagittis 
    eros. Morbi laoreet nunc eget erat. Duis varius.</p>
    <p>Phasellus eget nibh vestibulum felis tempor tincidunt. Fusce sollicitudin 
    tincidunt quam. Class aptent taciti sociosqu ad litora torquent per conubia 
    nostra, per inceptos hymenaeos. Mauris lectus libero, lacinia ut, tempor quis, 
    rutrum in, arcu. Nullam fermentum imperdiet quam. Pellentesque ut urna. Nulla 
    facilisi. In luctus felis sed nunc. Integer id diam quis erat hendrerit 
    pulvinar. Suspendisse a dui. Sed eget lorem pharetra enim dignissim facilisis. 
    Vestibulum eu nunc eu quam tincidunt convallis. Proin non ante.</p>
    <p>In gravida est eget tellus. Proin auctor. Curabitur gravida ligula ut justo. 
    Duis a lectus. Mauris aliquet lacus a diam interdum semper. Donec tristique 
    imperdiet diam. Donec malesuada lobortis eros. Morbi nec felis non elit 
    tristique ultrices. Cras tempus, dui non mollis porttitor, urna lacus laoreet 
    felis, ac convallis enim purus sed nulla. In sagittis mi quis dolor. Integer 
    quis neque. Mauris et magna. Mauris id ante. Vestibulum luctus lacus.</p>
    <p>Sed rutrum massa quis felis. Pellentesque laoreet, sapien nec rutrum 
    vulputate, justo tortor ullamcorper dolor, auctor pretium magna purus in orci. 
    Nam sit amet leo. Proin nec dui. Nunc libero enim, tincidunt vitae, elementum 
    eu, fermentum et, leo. Maecenas pede tellus, sollicitudin vulputate, 
    consectetuer a, iaculis id, velit. Curabitur blandit pulvinar libero. Quisque 
    dolor. Ut nonummy leo non nulla. Maecenas quis enim. Nunc eget pede. 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
    turpis egestas. Maecenas vitae ligula quis elit eleifend fermentum. Morbi tempus 
    magna nec lectus. Vestibulum elementum. Nulla malesuada, sapien non ornare 
    gravida, pede quam interdum ipsum, ut nonummy enim turpis vitae neque. Etiam 
    consequat mollis sapien. Nunc congue. Fusce leo nibh, tempus et, pulvinar in, 
    sollicitudin in, felis. Sed eget est.</p>
    <p>Nulla purus eros, nonummy vel, tincidunt nec, ullamcorper malesuada, quam. 
    Phasellus sem. In non nisi eget justo hendrerit dictum. Suspendisse pharetra leo 
    in lectus. Duis ultricies. In fringilla justo at pede. Ut pretium nunc vel 
    massa. Fusce arcu erat, ultrices ac, fringilla eu, iaculis eu, turpis. Duis 
    tempus, augue et tempor bibendum, est risus dapibus risus, sed sagittis nisl 
    erat nec nisl. Nulla venenatis placerat odio. Suspendisse sed neque. Duis risus. 
    Etiam quis est vel neque lacinia porttitor. Integer ipsum. Mauris tristique 
    scelerisque tortor. Aliquam erat volutpat. Vestibulum et ipsum. Aenean eleifend 
    pulvinar lectus. Phasellus nec augue.</p>
    </div>
    </body>
    </html>

    Also, is there a way i can have IE6 as a standalone in Vista?
    The standalone versions don't work in Vista, or at least when I tried back in Vista Beta days it wouldn't. I would say no to that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Oct 2006
    Posts
    164
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ok, I got everything to work.

    Thank You everyone
    Not much, but its something.


  •  

    Posting Permissions

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