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 10 of 10
  1. #1
    zis
    zis is offline
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stuck with clear:both in IE

    Hello everyone

    I'm new here and hope to find some help.

    I'm currently redesigning a page in my site using css.. and i'm stuck. the problem only occurs with IE6. i tested it in firefox and Opera and it seems to be working.

    The page is here http://culturebuffs.com/2/

    In IE, when the right column (div id rightc) is longer than the left one (div id widec), the white background (div id mainc) covers the greenish one(div id cbshell) on the left side only!

    It only occurs when the right column is longer. The problem seems to be coming from the footer div. I added in this div the property clear:both so that the white background contiues to even when the right column which is floating is going down.

    Anyhow i think you will see the problem. The code is still very buggy and untidy. But i've been trying to fix this for hours and can't seem to find a solution.

    Any help will be great.. and if you have any suggestions for the code..

    I'll paste below the html and css

    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="cbshell">
    	<div id="topper">Welcome <b>mike</b>, you have 0 new messages.</div>
    	<div id="logo"><img src="logo.png"></div>
    	<div id="header">
    		<ul>
    		
    			<li id="current"><a href="index.php">Home</a></li>
    			<li><a href="movies.php">Movies</a></li>
    			<li><a href="theaters.php">Theaters</a></li>
    			<li><a href="/forum">Forum</a></li>
    			<li><a href="search.php">Search</a></li>
    			<li><a href="feeds.php">Feeds</a></li>
    			<li><a href="Help.php">Help</a></li>
    		</ul>
    	</div>
    	<span id="searchbox"><input type="text" class="minisearch" /><input name="" type="button" value="Search" class="minisearch"></span>
    
    	<div id="mainc">
    	
    		<div id="rightc"> 
    		  <div class="channel">
    				<div class="chantit">Test chan 1</div>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula
    				  lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.
    				  Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce
    				  ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo
    				  vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem
    				  non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere,
    				  pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros
    				  sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque
    				  sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis.
    				  Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla
    				  at, lacinia ut, augue. Nullam nunc.</p>
    			</div>
    			<div class="channel">
    				<div class="chantit">Test chan 2</div>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula
    				  lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.
    				  Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce
    				  ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo
    				  vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem
    				  non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere,
    				  pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros
    				  sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque
    				  sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis.
    				  Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla
    				  at, lacinia ut, augue. Nullam nunc.</p>
    			</div>
    			<div class="channel">
    				<div class="chantit">Test chan 3</div>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula
    				  lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.
    				  Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce
    				  ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo
    				  vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem
    				  non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere,
    				  pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros
    				  sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque
    				  sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis.
    				  Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla
    				  at, lacinia ut, augue. Nullam nunc.</p>
    			</div>
    			<div class="channel">
    				<div class="chantit">Test chan 4</div>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula
    				  lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.
    				  Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce
    				  ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo
    				  vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem
    				  non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere,
    				  pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros
    				  sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque
    				  sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis.
    				  Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla
    				  at, lacinia ut, augue. Nullam nunc.</p>
    			</div>
    		</div>
    		<div id="widec">
    		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem,
    			consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce
    			aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam.
    			Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan
    			aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.
    			Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae
    			lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec
    			sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet,
    			ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet
    			posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut,
    			augue. Nullam nunc.</p>
    		  <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin
    			non, euismod a, adipiscing a, est. Mauris diam metus, varius nec,
    		    faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna.
    		    Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam
    		    interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis
    		    fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent
    		    per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec,
    		    blandit ac, rutrum ac, lectus.Lorem ipsum dolor sit amet, consectetuer
    		    adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor
    		    quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra
    		    malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam.
    		    Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in
    		    condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat
    		    iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum
    		    orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices
    		    commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget
    		    erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper
    		    eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
    		  <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin
    		    non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus
    		    at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum
    		    tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum
    		    ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla
    		    ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per
    		    conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit
    		    ac, rutrum ac, lectus.</p>
    		  <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi
    		    egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum
    		    purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus,
    		    accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a
    		    elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor
    		    sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh.
    		    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    		    inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis.
    		    Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam
    		    dui eget purus.</p>
    		  <p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo.
    		    Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit.
    		    Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus
    		    at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi
    		    molestie nibh dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis
    		    laoreet, feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras
    		    nisl diam, dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend,
    		    dui in dapibus congue, mi diam luctus velit, eu imperdiet pede elit nec
    		    lorem. Proin laoreet, eros a dictum faucibus, nunc wisi rhoncus nunc, at
    		    rhoncus lectus tellus vitae urna. Curabitur a turpis at ligula lobortis
    		    cursus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula
    		    lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.
    		    Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce
    		    ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo
    		    vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem
    		    non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere,
    		    pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros
    		    sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque
    		    sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis.
    		    Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla
    		    at, lacinia ut, augue. Nullam nunc.</p>
    		  <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin
    		    non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus
    		    at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum
    		    tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum
    		    ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla
    		    ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per
    		    conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit
    		    ac, rutrum ac, lectus.</p>
    		  <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi
    		    egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum
    		    purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus,
    		    accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a
    		    elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor
    		    sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh.
    		    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    		    inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis.
    		    Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam
    		    dui eget purus.</p>
    		</div>
    <div id="footer">&copy; 2005</div>
    	</div>
    	<br />
    </div>
    
    </body>
    </html>
    and the CSS
    Code:
    body {
    background-color: #DDD;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    padding: 0;
    margin: 0px;
    }
    
    #cbshell {
    background-color:#CCCC00;
    width: 87%;
    margin-left:auto;
    margin-right:auto;
    }
    #logo {
    float:left;
    text-align:left;
    margin-left:10px;
    }
    
    #header {
    
      font-size:93%;
      line-height:normal;
      position:relative;
      }
    #header ul {
      margin:0;
      padding:13px 10px 0;
      list-style:none;
      }
    #header li {
      float:left;
      background:url("left.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      }
    #header a {
      float:left;
      display:block;
      background:url("right.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#765;
      }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #header a {float:none;}
    /* End IE5-Mac hack */
    #header a:hover {
      color:#333;
      }
    #header #current {
      background-image:url("left_on.gif");
      }
    #header #current a {
      background-image:url("right_on.gif");
      color:#333;
      padding-bottom:5px;
      }
    .minisearch {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    float:left;
    margin-left:10px;
    }
    #searchbox {
    float:right;
    margin-right:10px;
    }
    #topper {
    text-align:right;
    font-size:smaller;
    margin-right:10px;
    
    }
    #mainc {
    background-color: #FFFFFF;
    margin-top:24px;
    margin-left:10px;
    margin-right:10px;
    text-align:left;
    }
    
    
    #widec {
    width:auto;
    margin-right:290px;
    margin-left:5px;
    padding-top:1em;
    }
    #rightc {
    float:right;
    width:275px;
    margin-left:auto;
    margin-right:5px;
    margin-top:1em;
    }
    
    #footer {
    width:auto;
    margin-left:10px;
    margin-right:10px;
    text-align:center;
    clear:right;
    }
    
    .chantit {
    height:16px;
    background-color:#333333;
    color:#FFFFFF;
    padding-left:1em;
    font-size:90%;
    font-weight:bold;
    }
    .channel {
    text-align:justify;
    }
    Thanks in advance
    Last edited by zis; 12-08-2005 at 05:15 PM. Reason: fixed link

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link?

    It would help if you could supply a link that actually works.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    zis
    zis is offline
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry the link works for me. try this:
    http://www.culturebuffs.com/2/

    using username: tester
    and password: tester

    thx

  • #4
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    ya the pw protected stuff is sorta annoying especially when tryin to validate it....


    Also (and i havent identified the prob yet, but...) at first glance it at least seems like yr over div'ing.... your logo can just be an id..... doesnt have to be an img inside an id'd div. and also i think yr gunna wanna clear both a couple more times in there considering the amount of floating that looks like is goin on in the top.... like clear:both on mainc. .... I assume you just dove in and started whippin this up.... why not start with a two column template ? I'll post back if i figure out what specifically is doin that.... im assuming its some box model something or other in there.... margins and paddings that dont match up some where, also i see a few unnecessary rules in there, 2, i think.... not sure yet tho..... its late and ive been staring at this **** too long 2nite to be helpful, prolly.... sry...
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #5
    zis
    zis is offline
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thx for the reply

    first i just removed the protection. anyhow it's the only thing in the folder and doesnt really need to be protected

    I removed the logo's div and it worked fine.

    i tried adding a clear both in mainc but it just messed things up a little in firefox so i removed it

    as for the extra rules yeah the code is very messy and im no css expert.. any how thanks for the help. Oh and i commented the css a bit

    Quote Originally Posted by zro@rtv
    its late and ive been staring at this **** too long 2nite to be helpful, prolly.... sry...
    Tell me about it.. i think i memorized the whole code by now.

    I'm going to get some more cofee.

  • #6
    zis
    zis is offline
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no one has any idea how to fix it?
    thx

  • #7
    New Coder
    Join Date
    Jun 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Set a width for mainc and the right column. Your margins will still mess you up though so you will have to adjust them cause they are pushing one into the other. Start by eliminating them altogether and add in as necessary.

  • #9
    zis
    zis is offline
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I finally got it to work with IE. but now Firefox changed its mind. but i think this must be easier to solv.. the green backround is not going all the way.. an idea anyone??

    PS: hanging is more painful than opening my vains?

    edit: the address is the same.. http://www.culturebuffs.com/2/

  • #10
    zis
    zis is offline
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    It worked

    What i had to do is set a width for the mainc div.. and it worked great..

    Thanks everyone for your help


  •  

    Posting Permissions

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