[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
06/19/2009 at 09:16AM PDT, ID: 24506225
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.7

CSS DIV - text of a nested DIV pushes down the parent DIV in IE, but not FF or Chrome

Asked by Ubertam in Cascading Style Sheets (CSS), Miscellaneous Web Development, Google Chrome

Tags: css, web, graphics, design

The site in question: http://redcreek.mattalbrecht.com

In Internet Explorer 8, (with compatibility mode on; by god how I hate IE8), it looks fine; how it should on all browsers.

Check it out in Chrome or Firefox to see what I mean.

Here's an abbreviated layout:

-Container
   -Header (logo and such)
   -MainBody
       -Nav (the 2 tabs)
       -LR (contains the left and right middle section)
            -Left (site nav)
            -Right
                  -Right Top (for the top image of the right white box)
                  -Right Content (margin-top is negative to pull the text to the top)
                            -Text and images using <p> tags
                  -Right Bottom (for the bottom image of the right white box)
   -Footer (pushed below MainBody)


I'm wondering why Right Content isn't expanding MainBody and pushing the beige background below the right content area like it does in IE7/8.

I appreciate any ideas. CSS and HTML Source are included, though you probably use FireBug or Dev tools anyway.  Thanks! 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:

<!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" />
<link href="/redcreek.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-icon" href="/images/rdcrkurl.ico" />
<title>Red Creek Preview Site</title>
</head>
<body>
<div id="verytop"></div>
<div id="header">
  <div id="logo"></div>
</div>
 
<div id="container">
	<div id="mainbody">
    	<div id="nav"><a href="/"><div id="nav_rc_on"></div></a>
<a href="/stonecoasters"><div id="nav_sc_off"></div></a></div>
		<div id="lr">
			<div id="left"><a href="/"><div class="button"><p>Home</p></div></a>
<a href="/pages/wearables"><div class="button"><p>Wearables</p></div></a>
<a href="/pages/promotional"><div class="button"><p>Promotional</p></div></a>
<a href="/pages/eco"><div class="button"><p>Eco-Apparel</p></div></a>
<a href="/pages/requestcatalog"><div class="button"><p>Request Catalog</p></div></a>
<a href="/pages/facilities"><div class="button"><p>Facilities</p></div></a>
<a href="/pages/aboutus"><div class="button"><p>About Us</p></div></a>
<a href="/pages/contactus"><div class="button"><p>Contact Us</p></div></a></div>
			<div id="right">
				<div id="rightt"></div>
				<div id="rightcont"><p>Red Creek Apparel &amp; Promotions has been providing apparel &amp; promotional products to the Western United States for over&nbsp;<strong>20 years</strong>. We offer a complete line of clothing ready for embroidery, screen printing &amp; full color Direct to Garment Digital printing.&nbsp; Our specialty is working with Businesses- Large &amp; Small, Organizations &amp; Special Events.</p>
<p><img src="images/photos/welcome.jpg" alt="Welcome to Red Creek Apparel" width="200" height="291" />We are now offering&nbsp;<strong><a href="ecoapp.php">Eco-Friendly apparel</a></strong>&nbsp;that includes Organic Cotton, Bamboo, cotton blends &amp; recycled fleece items.&nbsp; These items use renewable resources that are better for the environment. Go to our&nbsp;<strong><a href="ecoapp.php">Eco-Apparel</a></strong>&nbsp;page to view our on-line catalog.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p>
<p>-We offer a complete line of Ladies styles with feminine cut &amp; wide size range.</p>
<p>-We also provide advertising specialty items such as imprinted coffee mugs, water bottles, pens, magnets, rulers, stress balls &amp; much more.</p></div>
				<div id="rightb"></div>
			</div>
		</div>
        <a href="http://www.parachutetechnology.com" target="_blank"><div id="parasig"></div></a>
    </div>
    <div id="foot"><div id="footer"><p>home . wearables . promotional . Eco-Apparel . request catalog . facilities . about us . contact us . client login</p></div></div>
</div>
<div id="pload1">&nbsp;</div>
<div id="pload2">&nbsp;</div>
<div id="pload3">&nbsp;</div>
</body>
</html>
 
 
 
CSS
 
@charset "utf-8";
/* CSS Document */
 
html, body { height:100%; height:auto; background: url(/images/back_gr_cir.jpg) top center no-repeat fixed #3F4831; }
body { font-size:62.5%; line-height:1.8em; font-family: Calibri, "MS Sans Serif", "Trebuchet MS"; color:#000; }
p { font-size:1.6em; padding:0em; margin:.4em; }
h1 { font-size:2.8em;font-weight:bold;color:#4F5841;line-height:1.05em; font-family:Calibri, "MS Sans Serif", "Trebuchet MS";}
h2 { font-size:2.2em;font-weight:500;color:#5D6A50;line-height:1.05em; }
h3 { font-size:1.8em;font-style:italic;color:#93A67D;line-height:1.05em; }
a { text-decoration:none }
a:link { color:#696; }
a:visited { color:#363; }
a:hover { color:#FFF; background-color:#696; }
a:active { color:#FFF; background-color:#696; }
#verytop { position:absolute; height:3.5em; background:url(images/verytop.gif) repeat-x; top:0px; left:0px; width:100%;}
#header { position:absolute; top:3.5em; left:0px; height:20em; width:100%; background:url(images/headerback.jpg) repeat-x top center;}
#logo { position:absolute; margin-left:-50em; left:50%; top:1em; background:url(images/logo_mid_trans.png) no-repeat; width:50em; height:18.8em;}
#headercallout { position:absolute; left:50%; margin-left:10em;top:50%; margin-top:-7em; background:url(/images/headcallout.png); width:32em; height:14em; color:#FFF; font-weight:bold; text-align:center; }
#headercalloutin { margin:1.4em; text-align:center; }
#container { width:100%; position:absolute; top:23.5em; left:0em; }
/* mainbody contains the NAV, LR, and FOOT in a stacked build */
#mainbody { position: relative; top:0em; width:100%; left:0em; background:url(images/bodybg.jpg) #D2CEA0 top center no-repeat; min-height:40em; }
#nav { position:relative; width: 100%; float: left; height: 4em; }
#nav_rc_on { position:absolute; width: 22.5em; height: 2.5em; top:0em; left:50%; margin-left:-16em; z-index:101; background: url(/images/nav_tab_redcreek_on.png); }
#nav_sc_off { position:absolute; width: 22.5em; height: 2.5em; top:0em; left:50%; margin-left: 5em; z-index:100; background: url(/images/nav_tab_stonecoasters_off.png); }
#nav_sc_off:hover { background:url(images/nav_tab_stonecoasters_over.png); }
#nav_rc_off { position:absolute; width: 22.5em; height: 2.5em; top:0em; left:50%; margin-left:-16em; z-index:100; background: url(/images/nav_tab_redcreek_off.png); }
#nav_rc_off:hover { background: url(images/nav_tab_redcreek_over.png); }
#nav_sc_on { position:absolute; width: 22.5em; height: 2.5em; top:0em; left:50%; margin-left: 5em; z-index:101; background: url(/images/nav_tab_stonecoasters_on.png); }
#lr { position:relative; width: 100%; float:left; }
#left { position:relative; left:50%; margin-left: -35em; width:15em; float:left; background: #CC0; top:0em; border-bottom: #d3e9b4 .1em; }
#right { position:relative; left:50%; margin-left: -18em; width:50em; background: #FFF; top:-.4em; }
#rightt { position: relative; top: 0; background: url(images/right_top.png); width: 50em; height: 14.2em; }
#rightcont { position: relative; margin-top: -14.4em; margin-bottom: -14.4em; z-index: 10; }
#rightcont img { float: left; padding-right: 1em; }
#rightb { position: relative; bottom: 0; background: url(images/right_bottom.png); margin-top: 0em; width: 50em; height: 14.2em; }
#foot { position:relative; width:100%; float:left; background: url(images/footer.png) top repeat-x; height: 4em;}
#footer { position:relative; width:70em; left: 50%; margin-left: -35em; text-align:center;  }
#footer p { color:#FFF; font-size:1.4em; padding: .5em; }
.button { position:relative; float:left; background: url(images/buttonback.jpg) no-repeat; width: 15em; height: 2.9em; text-align: right; }
.button:hover { background: url(images/buttonbacko.jpg); }
#left a:link { color: #FFF; }
#left a:visited { color: #FFF; }
#left a:hover { color: #FFF; }
#left a:active { color: #FFF; }
#parasig { background: url(images/parasig.png) no-repeat; width: 20em; height: 1.8em; position: absolute; bottom: 0em; right: .5em; }
 
 
/* Preloading Images */
#pload1 { background: url(images/buttonbacko.jpg) no-repeat -9999px -9999px; }
#pload2 { background: url(images/nav_tab_redcreek_over.png) -9999px -9999px; }
#pload3 { background: url(images/nav_tab_stonecoasters_over.png) -9999px -9999px; }
 
Keywords: CSS DIV - text of a nested DIV pushe…
Title
1 Transparent overlay effect with overla…
 
Loading Advertisement...
 
[+][-]06/19/09 09:46 AM, ID: 24667976

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06/19/09 01:41 PM, ID: 24669854

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Cascading Style Sheets (CSS), Miscellaneous Web Development, Google Chrome
Tags: css, web, graphics, design
Sign Up Now!
Solution Provided By: Kravimir
Participating Experts: 2
Solution Grade: A
 
 
[+][-]06/20/09 03:17 AM, ID: 24673122

Assisted solutions are selected by the member who asked the question as a comment that contributed to their question's solution.

Start your 30-day free trial to view this Assisted Solution or ask the Experts your question.

 
[+][-]06/20/09 03:49 AM, ID: 24673219

Assisted solutions are selected by the member who asked the question as a comment that contributed to their question's solution.

Start your 30-day free trial to view this Assisted Solution or ask the Experts your question.

 
 
Loading Advertisement...
20091111-EE-VQP-91 - Hierarchy / EE_QW_3_20080625