PDA

View Full Version : IE6 layout problem?



jarv
Dec 11th, 2008, 12:18 PM
in IE6 there seems to be some white space between my DIVs?!

http://www.animalwelfareplatform.eu/test.htm

does anyone know why?

abduraooft
Dec 11th, 2008, 12:35 PM
Add font-size:0; to your #topgreencurves

btw, why do you need all those floats? Never use a float unless you really want to float something.

hkp819
Dec 11th, 2008, 02:00 PM
Hi, I have searched the other posts about this but wasn't able to find a solution to my issue here.

I have a white space between the left div (div id="sidebar) and the right div (div id="page")
This only occurs with IE6. FF2, Safari and IE7 work fine.

I guess this is a issue with double margins in IE6 but I can't figure out how to fix it. Any ideas?


/*
Name : Holzbau Ableiter
Description: A two-column, fluid-width design.
*/

body {
margin: 20px;
padding: 0;
background: #CCCCCC;
}

body, th, td, input, textarea, select {
font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

h1, h2, h3 {
color: #3A570F;
}

h1 {
letter-spacing: -2px;
font-size: 3em;
}

h2 {
font-size: 2em;
}

h3 {
font-size: 1em;
}

input, textarea, select {
color: #000000;
}

a {
color: #3A570F;
}

a:hover {
text-decoration: none;
}

/* Sidebar */

#sidebar {
float: left;
width: 190px;
display:inline;
}

/* Logo */

#logo {
height: 368px;
background: url(images/img_tl.gif);
}

#logo h1, #logo p {
margin: 0;
padding: 0;
text-transform: lowercase;
text-align: center;
font-weight: normal;
color: #FFFFFF;
}

#logo h1 {
padding-top: 30px;
background: url(images/img01.gif) no-repeat;
}

#logo p {
padding-bottom: 30px;
background: url(images/img03.gif) no-repeat left bottom;
}

#logo a {
text-decoration: none;
color: #FFFFFF;
}

/* Wrapper */
#wrapper {
width: 783px;
text-align:left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
}

#banner {
height: 154px;
padding-bottom:0px;
background: url(images/img_tr.gif) no-repeat;
}
/* Widgets */

#widgets {
height: 294px;
background: url(images/img_bl.gif);
}

#widgets-top {
height: 20px;
background: url(images/img01.gif) no-repeat;
}

#widgets * {
color: #FFFFFF;
}

#widgets ul {
margin: 0;
padding: 0 20px 100px 20px;
background: url(images/img04.jpg) no-repeat left bottom;
list-style: none;
}

#widgets li {
}

#widgets li ul {
padding: 0 0 20px 6px;
background: none;
line-height: 180%;
}

#widgets li li {
padding-left: 12px;
background: url(images/spacers/img05.gif) no-repeat left center;
}

#widgets h2 {
margin: 0;
padding: 0 0 20px 0;
font-size: 1em;
}

/* Page */

#page {
margin-left: 190px;
width: 589px;
}


/* Content */

#content {

}

#content h1, #content h2 {
font-weight: normal;
margin-top: 0;
}

.pagetitle {
margin: 0 0 10px 0;
padding-top: 27px;
}

.post {

height: 508px;
width: 586px;
margin-bottom: 0px;
background: #333333 url(images/spacers/img09.gif) repeat-y right top;
}

.title {
margin: 0;
padding: 0 20px;
}

.byline {
margin: 0 20px;
border-top: 2px solid #C2C9B6;
}

.entry {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

.meta {
margin: 0;
padding: 0 20px;
}

/* Rounded Corners */

.ct {
}

.ct .l {
background: url(images/corners/img10.gif) no-repeat;
}

.ct .r {
height: 15px;
background: url(images/corners/img11.gif) no-repeat right top;
}

.cb {
background: url(images/spacers/img12.gif) repeat-x left bottom;
}

.cb .l {
background: url(images/corners/img13.gif) no-repeat left bottom;
}

.cb .r {
height: 15px;
background: url(images/corners/img14.gif) no-repeat right bottom;
}

/* Footer */

#footer {
clear:both;
font-size: smaller;
height: 59px;
width: 776px;
background:url(images/img_footer.gif);
}

#footer p {
margin: 0;
}

abduraooft
Dec 11th, 2008, 02:12 PM
Please don't hijack other's threads. Start a new thread to get help on your issue. And use
][/COLOR] tags to wrap your code while posting here. (Also, include a link to your page in your post. if possible.)

jarv
Dec 11th, 2008, 04:17 PM
Please don't hijack other's threads. Start a new thread to get help on your issue. And use
][/COLOR] tags to wrap your code while posting here. (Also, include a link to your page in your post. if possible.)


yes, i was first and yes do use [code] tags grr!

can anyone help me?

abduraooft
Dec 11th, 2008, 04:22 PM
can anyone help me? Have you tried my first reply?

Excavator
Dec 11th, 2008, 05:52 PM
Hello jarv,
Yes, fewer floats since a few of those are not needed. Just this helps a lot:

#mainholder {
width:866px;
margin:7px 15px 7px 15px;
overflow: auto; /*clears the floats*/
}

#leftcollumn { float:left; width:190px; background-color:#FF0000;}

#centercollumn {
margin: 0 0 0 190px;
width:516px;
}

#rightcollumn { float:right; width:146px; background-color:#eff3f7;}


#rightcollum will need moved in your markup so it comes before #centercollum

read about clearing floats here. (http://www.quirksmode.org/css/clearing.html)

By the way, good job on the valid code!
.

Excavator
Dec 11th, 2008, 06:42 PM
I changed a few things... Look how your curved topgreen image is done now.
You can just copy/paste this into a new .html document - it has attached CSS and complete paths so it will work on it's own.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html {
background: #E5E5E5;
font: 12px Arial, Helvetica, sans-serif;
color: #00467f;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
margin: 0px auto;
background: #FFFFFF;
width: 895px;
border: #CCCCCC 1px solid;
}
#top {
width:866px;
height:98px;
margin: 15px 15px 0px 15px;
}

.contact a {
float:right;
height:29px;
text-decoration:none;
margin-top:65px;
}
#topgreenmain{
float: left;
width: 866px;
height: 40px;
background: #98bf0d url(http://www.animalwelfareplatform.eu/images/topgreen.gif) no-repeat top;
margin: 0 15px;
padding: 10px 0 0 0;
font: 14px Arial, Helvetica, sans-serif;
color: #FFF;
}
.newsticker {
margin: 10px 0px 10px 70px;
width: 550px;
}
.newsticker b {
font-weight: bold;
color: #00467f;
}
.search {
float: right;
margin: 10px 15px 10px 0px;
}
.search a { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFFFFF; text-decoration:underline;}

#mainholder {
width: 866px;
margin: 7px 15px 7px 15px;
overflow: auto; /*clears the floats*/
}
#leftcollumn {
float: left;
width: 190px;
background: #FF0000;
}
#centercollumn {
margin: 0 0 0 197px;
width: 516px;
}
#rightcollumn {
float:right;
width:146px;
background-color:#eff3f7;
}
.left{float:left;}
.right{float:right;}
</style>
<title>EAWP</title>
</head>
<body>
<div id="wrapper">
<div id="top">
<div class="left">
<img src="http://www.animalwelfareplatform.eu/images/logo.jpg" width="272" height="94" alt="Logo for EAWP" />
</div>
<div class="contact">
<a href="#">Contact information&nbsp;&nbsp;<img src="http://www.animalwelfareplatform.eu/images/contact-icon.gif" width="29" height="29" alt="Contact EAWP" /></a>
</div>
<!--end top--></div>
<div id="topgreenmain">
<div class="search"><input name="" type="text" />&nbsp;&nbsp;<a href="#">Search</a></div>
<div class="newsticker"><b>BREAKING NEWS:</b> more text here more text here more text here more text here</div>
</div>
<div id="mainholder">
<div id="leftcollumn">&nbsp;</div>
<div id="rightcollumn">&nbsp;</div>
<div id="centercollumn"><img src="http://www.animalwelfareplatform.eu/images/mainpic.jpg" width="516" height="265" alt="Main EAWP picture" />&nbsp;</div>
Welcome to Animal Welfare Website - Website opening soon.
<!--end mainholder--></div>
Website opening soon.
<!--end wrapper--></div>
</body>
</html>

jerry62704
Dec 11th, 2008, 08:07 PM
yes, i was first and yes do use [code] tags grr!

can anyone help me?

I think he wasn't referring to you.

jarv
Jan 21st, 2009, 12:36 PM
can a moderator please delete this topic?