...

View Full Version : Stuck with clear:both in IE



zis
12-08-2005, 12:08 AM
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

<!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


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

ronaldb66
12-08-2005, 09:25 AM
It would help if you could supply a link that actually works.

zis
12-08-2005, 10:38 AM
sorry the link works for me. try this:
http://www.culturebuffs.com/2/

using username: tester
and password: tester

:) thx

zro@rtv
12-08-2005, 10:51 AM
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...

zis
12-08-2005, 11:29 AM
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


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.

zis
12-09-2005, 01:47 AM
no one has any idea how to fix it?
thx

Dolphin123
12-09-2005, 05:35 AM
Try these sites: :)


http://css.maxdesign.com.au/listamatic/
http://glish.com/css/

:thumbsup:

drhowarddrfine
12-09-2005, 03:32 PM
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.

zis
12-09-2005, 06:15 PM
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/

zis
12-10-2005, 01:59 PM
It worked :D

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

Thanks everyone for your help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum