[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.
08/18/2009 at 05:03PM PDT, ID: 24663324
[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.0

IE7 VS Firefox Float Problem expanding html margin

Asked by MemoUribe in Cascading Style Sheets (CSS), Internet Explorer Web Browser, Extensible HTML (XHTML)

Tags: IE FF CSS float html margin

Ok guys I'm having a problem with IE browser regarding on a CSS layout with a couple of float columns.

When I render it in FF it looks fine but when I check it on IE it creates a righ margin on the html section.

when I separate the code to see what div is making this margin, I found out that the two body columns (which are floated btw) are the ones making the bottom scrollbar appear...

I have tried the hasLayout approach, and other ones listed here with no luck, I need you guys to help me why could this be happening.

Thanks in advance for your wisdom!
Memo. 
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:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<title>Executive Communication Centres | Contact</title>
	<link href="/ece/css/general.css" rel="stylesheet" type="text/css" />
	<link href="/ece/navigation/header/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?PhP include_once $_SERVER['DCOUMENT_ROOT'] . "navigation/header/header.php"; ?>
<div id="completeWrapper">
	<div id="sideColumn">
		<div id="redBox"><img src="/ece/images/redBox2.gif"  alt="" /></div>
		<div id="mapBox"><img src="/ece/images/map.gif"  alt="" /></div>
		<div id="greenBox"><img src="/ece/images/greenBox.gif"  alt="" /></div>
		<div id="imagesBox">
			<table width="100%" cellspacing="0" cellpadding="0" >
				<tr>
					<td align="left"><a href="javascript:void(0);"><img src="/ece/images/firstSmallImage.jpg"  style="border: 0;" alt="" /></a></td>
					<td align="right"><a href="javascript:void(0);"><img src="/ece/images/secondSmallImage.jpg"  style="border: 0;" alt="" /></a></td>
				</tr>
				<tr>
					<td align="left"><a href="javascript:void(0);"><img src="/ece/images/thirdSmallImage.jpg"  style="border: 0;" alt="" /></a></td>
					<td align="right"><a href="javascript:void(0);"><img src="/ece/images/fourthSmallImage.jpg"  style="border: 0;" alt="" /></a></td>
				</tr>
			</table>
		</div>
		<div id="buttonBox"><a href="/ece/contact.php?loc=london"><img src="/ece/images/inquireButton.gif"  alt="Inquire About This Centre" style="right:0px; border: 0;" /></a></div>
	</div>
	<div id="mainColumn">
		<div id="headerMain">
			<img src="/ece/images/headerImage2.jpg"  alt="" id="headerImages" />
			<p>BUNHILL ROW - LONDON: Situated adjacent to the Barbican, this new, glass fronted building offers top quality internal fittings and very high specification offices.</p>
			<p style="font-size:.8em;">Hotels, Restaurants and a wide variety of shops are easlyaccessible as are the major landmarks of the City of London. Moorgate Tube and Railway stations are a few hundred yards away.</p>
		</div>
		<div id="subColumns">
			<div class="columnBackground" id="firstBackground"></div>
			<div class="columnBackground" id="secondBackground"></div>
			<div id="leftColumn">
				<h3>about this location</h3>
				<p>3 Bunhill Row is situated adjacent to the Barbican, specifiaclly between Old Street to the North and Chiswell to the South.</p>
				<p>Communal areas include a 2,500 sq ft reception and glas external 'wall climber' lift.</p>
				<p>All offices are fitted with demountable partitioning and have individually controlled air conditioning.</p>
				<p>Boardrooms and Meeting Rooms start from &pound;15.00 per hour.</p>
				<p>3 Bunhill Row its only a few moments walk from Moorgate underground and overland railway stations.</p>
				<p>Public car parking is available in a number of locations nearby</p>
			</div>
			<div id="rightColumn">
				<h3>center highlights</h3>
				<ul>
					<li>Fully furnished office space from 100 square ft.</li>
					<li>Flexible Licences</li>
					<li>On-Site Car Parking&#42;</li>
					<li>Bureau Services</li>
					<li>Conference Facilities</li>
					<li>IT, Data and Voice Comunications</li>
					<li>CCTV Surveilance</li>
					<li>24 Hour Access</li>
					<li>Air Conditioning</li>
					<li>Free Chauffeur Service&#42;</li>
					<li>Choice of Furnishings</li>
					<li>Informal Lounge Facilities</li>
					<li>Cofee Bar</li>
				</ul>
				<span id="exceptions">&#42;Except London</span>
			</div>
			<div style="clear:both;"></div>
		</div>
	</div>
	<div id="clearer" style="clear: both;" />
</div>
<div id="footer" style="margin-top: 10px;"/>
</body>
</html>
 
CSS:
body,html
{
	width: 100%;
	height: 100%;
	
	margin:0px;
	padding:0px;
	
	font-family: verdana, arial, sans-serif;
	color: #8f8f8f;	
	font-size: 1em;
	
	position: relative;
}
 
#completeWrapper
{
	position: relative;
	
	margin: 15px auto;
	padding: 0px;
	
	width: 928px;
}
 
#completeWrapper #sideColumn
{
	position: relative;
	
	margin: 0px;
	padding:0px;
	
	width:272px;
	
	float:left;	
}
 
#completeWrapper #sideColumn img
{
	margin-bottom: 10px;	
}
 
#completeWrapper #mainColumn
{
	position: relative;
	
	margin:0px;
	padding: 0px;
	
	margin-left: 10px;
	
	float: left;
}
 
#completeWrapper #mainColumn #headerMain
{
	position: relative;
	
	margin:0px;
	margin-bottom: 1em;
	
	padding: 0px;
	
	width: 640px;
}
 
#completeWrapper #mainColumn #headerMain #headerImages
{
	padding: 3px;
	
	border:1px solid #b2b2b2;
}
 
#completeWrapper #mainColumn #subColumns
{
	position: relative;
	
	font-size: .9em;
	
	margin:0px;
	padding: 0px;
}
 
#completeWrapper #mainColumn #subColumns #firstBackground
{	
	top:0px;
	left:0px;
	
	width:317px;
}
 
#completeWrapper #mainColumn #subColumns #secondBackground
{
	width: 315px;
	
	top:0px;
	left:0px;
	
	margin-left: 327px;
}
 
/*This one is setting some right margin at html level */
#completeWrapper #mainColumn #subColumns #leftColumn
{
	width: 307px;
	position: relative;
	
	margin:0;
	margin-left: 5px;
	padding:0;
	
	float:left;
}
 
/*This one is also setting some right margin at html level */
#completeWrapper #mainColumn #subColumns #rightColumn
{
	width: 305px;
	position: relative;
	
	margin:0;
        margin-left: 20px;
	padding:0;
	
	float:left;
}
 
#completeWrapper #mainColumn #subColumns h3
{
	color:#309fcd	
}
 
#exceptions
{
	font-size: .65em;
	margin-left: 4em;
}
 
#completeWrapper #mainColumn #subColumns li
{
	list-style-image: url('/ece/images/bullet.gif');
}
 
.columnBackground
{
	position:absolute;
	
	height: 100%;
	
	border:1px solid #b2b2b2;
}
Attachments:
 
1stPic.jpg (150 KB) (File Type Details) 
On IE7
On IE7
 
 
2ndPic.jpg (170 KB) (File Type Details) 
On FF 2.0
On FF 2.0
 
 
Keywords: IE7 VS Firefox Float Problem expandin…
Title
1 IE CSS problem with position absolute
2 CSS Code - drop down menu question
3 IE6 stretching the bg image and other …
4 Same Browser, Different Display?
 
Loading Advertisement...
 
[+][-]08/19/09 06:42 AM, ID: 25132470

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

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

 
[+][-]08/19/09 08:05 AM, ID: 25133534

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.

 
[+][-]08/19/09 08:12 AM, ID: 25133637

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

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

 
[+][-]08/19/09 08:20 AM, ID: 25133756

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

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

 
[+][-]08/19/09 08:21 AM, ID: 25133763

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.

 
[+][-]08/19/09 08:25 AM, ID: 25133813

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

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

 
[+][-]08/19/09 01:54 PM, ID: 25137239

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), Internet Explorer Web Browser, Extensible HTML (XHTML)
Tags: IE FF CSS float html margin
Sign Up Now!
Solution Provided By: Kravimir
Participating Experts: 2
Solution Grade: A
 
 
[+][-]08/19/09 02:00 PM, ID: 25137288

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.

 
[+][-]08/19/09 03:35 PM, ID: 25138031

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

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

 
 
Loading Advertisement...
20090824-EE-VQP-74 - Hierarchy / EE_QW_3_20080625