homepage Welcome to WebmasterWorld Guest from 54.161.197.188
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE 6: my CSS shows gap between images
Perfect in IE7, IE* beta, FF2 and FF3 on Win. Also ok in safari, FF3 on mac
immols




msg:3845516
 12:10 pm on Feb 9, 2009 (gmt 0)

This is my website code:

<div class="wrapper" >
<div class="kop">
<div class="title">
<h1><a class="motto" title="terug naar de homepage" href="/">text here</a></h1>
<h4><a class="more" href="about" title="Read more about">About ...</a></h4>
</div>
</div>
<div class="tabs">
<ul class="menulist">
<li class="menu column_one"><a class="menulink" href="" title="">one</a></li>
<li class="menu column_two"><a class="menulink" href="" title=""><br/>two</a></li>
<li class="menu column_three"><a class="menulink" href="" title=""><br/></a></li>
<li class="menu column_four"><a class="menulink" href="" title="">four en<br/></a></li>
<li class="clear"></li>
</ul>
</div>
<div class="page c_<?php echo $color; ?>">
<div class="content">
<a name="anchorcontent"><!-- main content --></a>
<div class="column column_one">
<h3 class="print">One</h3>
<p>content of first column here</p>
</div>
<div class="column column_two">
<h3 class="print">Two</h3>
<p>content of second column here</p>
</div>
<div class="column column_three">
<h3 class="print">Three</h3>
<p>content of third column here</p>
</div>
<div class="column column_four">
<h3 class="print">Four</h3>
<p>content of fourth column here</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="noprint footer<?php if($color=='rainbow') echo $color; ?>"><br/>
</div>
</div>

And the CSS:

.wrapper{width:1000px;margin:0px auto;font-family:"Trebuchet MS",sans-serif;font-size:0.9em}
/* header with motto and about-kim-alders*/
.wrapper .kop {height:165px;background-image:url('./img/header.png');background-repeat:no-repeat; background-position:-7px top;}
.wrapper .kop .title {padding:46px; text-align:center;}
.wrapper .kop .motto {color:white;text-decoration:none; font-size: 2.6em; font-weight:bold;letter-spacing:1px;}
.wrapper .kop .more {color:#d1d1d1;text-decoration:none; font-size: 1em; font-weight:normal;letter-spacing:1px; float:right;margin-right:72px;}
/* menu en column_#*$! are the same entity. The entity has a double class*/
.wrapper .tabs {height:80px;background-color:black;margin:0;padding:0;}
.wrapper .tabs .menulist {height:80px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;}
.wrapper .tabs .menulist .menu {float:left;text-align:center;width:222px;height:72px;margin:0 0 0 26px;padding:8px 0 0 0;background-repeat:no-repeat;}
.wrapper .tabs .menulist .column_one {margin-left:17px;}
.wrapper .tabs .menulist .column_one {background-image:url('./img/yellowmenu.png');}
.wrapper .tabs .menulist .column_two {background-image:url('./img/greenmenu.png');}
.wrapper .tabs .menulist .column_three {background-image:url('./img/bluemenu.png');}
.wrapper .tabs .menulist .column_four {background-image:url('./img/pinkmenu.png');}
.wrapper .tabs .menulist .menu .menulink {color:white;text-decoration:none;font-size:1.5em;font-weight:bold;letter-spacing:1px;}
/*
.page and .c_#*$! are the same entity. The entity has a double class.
.column and .column_#*$! are the same entity. The entity has a double class.
.page .content refers to all pages but the homepage
.c_rainbow refers to the homepage
homepage has 4 columns, all other pages have 3.
*/
.wrapper .page{background-color:#feffff;width:966px;margin-left:17px;}
.wrapper .page .content{}
.wrapper .page .content .column{text-align:justify;margin:10px 10px 0 10px;}
.wrapper .page .content .column_one,
.wrapper .page .content .column_two,
.wrapper .page .content .column_three{float:left;width:455px;}
.wrapper .page .content .column_portfolio_one{float:left;width:555px;}
.wrapper .page .content .column_portfolio_two{float:left;width:355px;}
.wrapper .page .content .column_contact_one{float:left;width:355px;}
.wrapper .page .content .column_contact_two{float:left;width:555px;}
/* homepage */
.wrapper .c_rainbow {padding:0px;width:1000px;background-color:transparent;margin-left:0px;}
.wrapper .c_rainbow .content{color:white;margin:0 10px 0 10px;padding:0px;background-color:black;background-image:url('./img/gradienthome.png');background-position: bottom left;background-repeat:repeat-x;}
.wrapper .c_rainbow .content .column {height:350px;margin:0px;padding:0;float:left;width:222px;}
.wrapper .c_rainbow .content .column_one {margin-left:7px;}
.wrapper .c_rainbow .content .column_two,
.wrapper .c_rainbow .content .column_three,
.wrapper .c_rainbow .content .column_four {margin-left:26px;}
.wrapper .c_rainbow .content .column a{color:white;text-decoration:none;}
/* this is the backgroundcolor of the 4 columns at the homepage */
.wrapper .c_rainbow .content .column_one{background-image:url('./img/yellowbg.png');}
.wrapper .c_rainbow .content .column_two{background-image:url('./img/greenbg.png');}
.wrapper .c_rainbow .content .column_three{background-image:url('./img/bluebg.png');}
.wrapper .c_rainbow .content .column_four{background-image:url('./img/pinkbg.png');}
/* this is the background of the textarea on all following pages. No color (c_) is for utils and about_kimalders */
.wrapper .c_pink{background-position:0 0px; background-image:url('./img/pinktop.png');background-repeat:no-repeat;}
.wrapper .c_blue{background-position:0 0px; background-image:url('./img/bluetop.png');background-repeat:no-repeat;}
.wrapper .c_yellow{background-position:0 0px; background-image:url('./img/yellowtop.png');background-repeat:no-repeat;}
.wrapper .c_green{background-position:0 0px; background-image:url('./img/greentop.png');background-repeat:no-repeat;}
.wrapper .c_{background-position:0 0px; background-image:url('./img/graytop.png');background-repeat:no-repeat;}

What happens in IE6 but not the other browser i mentioned is that there is a gap between the div.tabs and the div.page/div.c_color.

Second prob is that he background image './img/gradienthome.png'only shows once :S Also, just in IE6, not on other browsers Can anyone shed some light on this please?

[edited by: tedster at 8:08 pm (utc) on Feb. 9, 2009]
[edit reason] moved from another location [/edit]

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved