SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
Jun 22, 2006, 16:05 #1
no background color (sometimes) in IE6
can someone explain this strange behavior in IE? I am using a test page to illustrate:
http://www.aftermath-creative.com/test/kennedy/test.htm
Why doesn't IE6 put a background color on the top box (purple/pink) but it will on thee one further down, which is the EXACT same code. I have tried many versions of this page and it always skips the background color of the top box.
If I give the projT a width, it will give it a background color but it screws up my layout and isn't a workable solution as the same container needs to be different widths on other pages.
HTML:
Code:<!-- Begin sister site panels buttons--> <div id="sisters"> <div class="clear"></div> <div class="greyBorder"> <div class="projT"> <a href="projectT.htm" onFocus="this.blur()"><img src="images/logo_projT.gif" width="190" height="62" border="0" alt="Project T logo"/></a> <p><a href="projectT.htm" onFocus="this.blur()">Open to HIV-negative gay men and transgender women ages <br />18- 60. Get involved »</a></p> </div> </div> <div class="greyBorder"> <div class="sfReady"> <a href="sfisready.htm" onFocus="this.blur()"><img src="images/logo_sfready.gif" width="190" height="75" border="0" alt="SFisReady logo"/></a> <p><a href="sfisready.htm" onFocus="this.blur()">HIV vaccine trials are open to healthy, HIV-negative people of all sexual preferences, ages 18 - 50. Get involved »</a></p> </div> </div> <div class="greyBorder"> <div class="projT"> <a href="projectT.htm" onFocus="this.blur()"><img src="images/logo_projT.gif" width="190" height="62" border="0" alt="Project T logo"/></a> <p><a href="projectT.htm" onFocus="this.blur()">Open to HIV-negative gay men and transgender women ages <br />18- 60. Get involved »</a></p> </div> </div> <div class="greyBorder"> <div class="sfReady"> <a href="sfisready.htm" onFocus="this.blur()"><img src="images/logo_sfready.gif" width="190" height="75" border="0" alt="SFisReady logo"/></a> <p><a href="sfisready.htm" onFocus="this.blur()">HIV vaccine trials are open to healthy, HIV-negative people of all sexual preferences, ages 18 - 50. Get involved »</a></p> </div> </div> <div class="clear"></div></div>
Code:.projT { border: #FFFFFF solid 3px; text-align: left; line-height: 14px; background-color: #B71B8B; color: #FFFFFF; font-weight: bold; padding-bottom: 15px; } html>body .sfReady {padding-bottom: 0px;} .projT p { margin-left: 12px; margin-top: 5px; color: #FFFFFF;} .projT a { font-family: arial, helvetica, verdana, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none;} .projT a:visted {color: #FFFFFF;} .projT a:hover {text-decoration: underline;} .sfReady { border: #FFFFFF solid 3px; text-align: left; line-height: 14px; background-color: #51B948; color: #FFFFFF; font-weight: bold; padding-bottom: 15px; } html>body .sfReady {padding-bottom: 0px;} .sfReady p { margin-left: 12px; margin-top: 5px; color: #FFFFFF;} .sfReady a { font-family: arial, helvetica, verdana, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none;} .sfReady a:visted {color: #FFFFFF;} .sfReady a:hover {text-decoration: underline;} .greyBorder {border: #DCDDDD 3px solid; margin-left: 12px; margin-bottom: 15px;margin-top: 15px;} #sisters { position: relative;/*ie needs this to show float */ width: 213px; margin-right: 33px; float: right; text-align: center; border: none; display: inline; }
-
Jun 22, 2006, 16:16 #2
OK, giving projT a height of 1% seems to have worked, though I have no idea why. Can anyone explain this behavior?
Bookmarks