ie6 strikes back [Archive] - WebDeveloper.com

MrMJS

12-14-2007, 09:47 PM

hello,

I have another ie6 problem.

I have a main content container div
#main-content-container {
background-image: url(../images/content-background.gif);
background-repeat: repeat-y;
width: 790px;
float: left;

i then have two nested divs, left and right content...

main-content-left div
#main-content-left {
width: 240px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

<div id="main-content-left">

<p><img src="image.gif" alt="sidebar image" width="222" height="191" class="sidebar-image" /></p>

</div>

main-content-right div
#main-content-right {
float: left;
width: 550px;
}

!<-- start main-content-right --><div id="main-content-right">

<p>lots of text.. text.. text.. </p>
<p>lots of text.. text.. text.. </p>
<p>lots of text.. text.. text.. </p>
<p>lots of text.. text.. text.. </p>
<p>lots of text.. text.. text.. </p>

</div>

ok... now everything works just fine in ff, ie7 and even ie6 until my right content container gets to much text. Once it gets to much text it acts like the float is removed from the right container and it pushes everything below the left content container div.

anyone have the answer as to what is causing this?

thanks for the help.

Fang

12-15-2007, 04:25 AM

It works as expected unless margins or padding is applied.

Why the main-content-container when the background image can be applied to the body?

MrMJS

12-15-2007, 07:38 AM

im not using margins or padding on those divs.. or am i misunder standing what you are saying :confused:

as for the container. the site is a fixed width site that is centered.

A quick fix I did was to wrap the text is a table and it fixed the problem in ie6, but i'm sure there is a better way to fix this, I just don't know what it is :)

Fang

12-15-2007, 08:28 AM

The code you gave works in all browsers without a problem. Obviously the problem is else where.
Can you give the full document?

MrMJS

12-15-2007, 10:18 AM

<div id="wrapper">

<div id="logo-container"></div>

<div id="top-menu-container">

<ul>
<li><a href="index.html" target="_self">HOME</a></li>
<li>|</li>
<li><a href="about-us.html" target="_self">ABOUT US</a></li>
<li>|</li>
<li><a href="our-vision.html" target="_self">OUR VISION</a></li>
<li>|</li>
<li><a href="hospital_shalom.html" target="_self">HOSPITAL SHALOM</a></li>
<li>|</li>
<li><a href="links.html" target="_self">LINKS</a></li>
<li>|</li>
<li><a href="contact-us.html" target="_self">CONTACT US</a></li>
</ul>

</div>

<divid="side-menu-banner-container">

<div id="side-menu">

<ul>
<li><a href="about-el-peten.html" target="_self">ABOUT EL PETÉN</a></li>
<li><a href="plan-a-mission-trip.html" target="_self">PLAN A MISSION TRIP</a></li>
<li><a href="newsletter.html" target="_self">MONTHLY NEWSLETTER</a></li>
<li><a href="teaching-with-tim.html" target="_self">TEACHING WITH TIM</a></li>
<li><a href="touching-lives.html" target="_self">TOUCHING LIVES </a></li>
<li><a href="statement-of-faith.html" target="_self">STATEMENT OF FAITH</a></li>
<li><a href="how-i-can-help.html" target="_self">HOW I CAN HELP </a></li>
</ul>

</div>



<div id="banner"><img src="images/NCWM banners/banner_image1.jpg" alt="newsletter banner" width="550" height="200" />

</div>

</div>

<div id="top-bar"><img src="images/top-bar-background.gif" alt="top bar" width="790" height="13" /></div>

<div id="main-content-container">

<div id="main-content-left">

<p><img src="images/hospital-shalom-sidebar-ima.gif" alt="sidebar image" width="222" height="191" border="0" usemap="#Map" class="sidebar-image" />
<map name="Map" id="Map">
<area shape="poly" coords="58,155,120,150,120,160,60,166" href="hospital_shalom.html" target="_self" alt="link" />
</map></p>

</div>

<div id="main-content-right">

***this is where all the text would be***

</div>

</div>

</div>

</div>

#wrapper {
width: 790px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
}
#footer {
clear: both;
background-color: #342208;
height: 30px;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #DAD4C5;
line-height: 30px;
text-align: right;
padding-right: 10px;
}
#footer a {
text-decoration: none;
color: #DAD4C5;
}
#footer a:hover {
color: #82ABAD;
text-decoration: none;
}
#footer a:visited {
color: #DAD4C5;
text-decoration: none;
}
body {
background-color: #999999;
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-image: url(../images/ncwm-background.jpg);
}
.welcome-text {
font-family: "Times New Roman", Times, serif;
font-size: 11px;
color: #FFFFFF;
text-align: justify;
}
#logo-container {
height: 65px;
width: 240px;
background-image: url(../images/ncwm-logo-240x65.gif);
background-repeat: no-repeat;
background-position: 5px 5px;
background-color: #FFFFFF;
float: left;
}
#main-content-right h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin-right: 15px;
margin-left: 15px;
color: #000000;
}
#main-content-right h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
margin-left: 15px;
color: #000000;
margin-top: 10px;
}
#main-content-left-text-container {
width: 210px;
text-align: justify;
margin-left: 20px;
font-family: "Times New Roman", Times, serif;
font-size: 11px;
color: #FFFFFF;
line-height: 16px;
font-weight: bold;
letter-spacing: .75px;
margin-bottom: 10px;
}
.hospital-shalom-index-image {
margin-left: 10px;
}

#top-menu-container {
height: 65px;
background-color: #FFFFFF;
background-image: url(../images/top_menu_bg.gif);
background-repeat: no-repeat;
width: 550px;
float: left;
background-position: 10px;
}
#top-menu-container ul {
padding: 0px;
margin-top: 38px;
margin-left: 57px;
}
#top-menu-container li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
list-style-type: none;
float: left;
}
#top-menu-container a {
text-decoration: none;
color: #FFFFFF;
padding-right: 4px;
padding-left: 4px;
}
#top-menu-container a:hover {
color: #342208;
}
#menu-wrapper {
height: 20px;
width: 425px;
margin-top: 35px;
margin-left: 85px;
}
#side-menu-banner-container {
clear: left;
height: 200px;
}
#side-menu {
height: 200px;
width: 240px;
background-color: #DAD4C5;
float: left;
}
#banner {
height: 200px;
width: 550px;
float: left;
}
#side-menu ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#side-menu li {
background-image: url(../images/side-menu-dot.jpg);
background-repeat: no-repeat;
background-position: 25px 15px;
width: 100%;
}
#side-menu a {
font-family: "Times New Roman", Times, serif;
font-size: 11px;
color: #342208;
text-decoration: none;
display: block;
padding-top: 7px;
padding-left: 35px;
font-weight: bold;
letter-spacing: 1px;
line-height: 20px;
height: 20px;
}
#wrapper #side-menu-banner-container #banner img {
display: block;
}
#side-menu a:hover {
font-weight: bold;
background-color: #b8ae95;
background-image: url(../images/side-menu-dot.jpg);
background-position: 25px 15px;
background-repeat: no-repeat;
}
#wrapper #top-bar {
background-color: #342208;
width: 790px;
}
.welcome-image {
margin-left: 30px;
margin-top: 20px;
}
#main-content-container {
background-image: url(../images/content-background.gif);
background-repeat: repeat-y;
width: 790px;
float: left;
}
#main-content-left {
width: 240px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.tim-dorris-image {
margin-top: 10px;
margin-left: 18px;
margin-bottom: 5px;
}
#main-content-right {
float: left;
width: 550px;
}
#main-content-right p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;
line-height: 18px;
margin-top: 15px;
margin-right: 25px;
margin-bottom: 15px;
margin-left: 25px;
}
#form-container {
width: 790px;
height: 342px;
}
#form-container img {
display: block;
}
.sidebar-image {
margin-left: 12px;
margin-top: 10px;
}

Centauri

12-15-2007, 10:57 AM

You have a typo in the code :<divid="side-menu-banner-container">missing space.

With that fixed, seems to be fine in IE6 with heaps of content.

MrMJS

12-15-2007, 11:17 AM

thank you for the help Centauri

I have another question. I want to set my container to be the same height on all pages except those with really log text. say I want it to be 400px height, but on pages that have lots of text it goes more then 400px so it over flows outside my container. can I set the container to expand automatically?

Centauri

12-15-2007, 11:27 AM

use min-height:400px; in the container's css for "proper" browsers. For IE6, you would need to add * html #container {height: 400px;} as an extra rule.

MrMJS

12-15-2007, 11:49 AM

that did it! thanks again