Advertisement

08.10.2008 at 05:30PM PDT, ID: 23636712 | Points: 500
[x]
Attachment Details

Unknown horizontal gap in IE6 between divs

Asked by tolvor in Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Web Browsers

I've got 3 horizontal divs, a float left (in blue), a float right (lt blue and pink), and a center set by margins (in red). However the center div has a unwanted 3 px gap that occurs in IE6 but not in FF.  

I did a lot of research and one answer is that setting a conditional css rule for IE6 for a -3px margin would make it work, but this doesn't seem to work as the center is being set by the margins.  Another suggestion is to use absolute positioning, but the layout is percentage based, and thus there are no constant values.

I would appreciate an answer on how to make the 3 divs to be adjacent and without gaps.  Help would be appreciated.Start Free Trial 
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:

<!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" />
<title>Untitled Document</title>
<style type="text/css"> 
<!-- 
 
body{
  font: 100% Arial, Helvetica, sans-serif;
  background-color: #414141;
  font-size: large;
  margin: 0; 
  padding: 0;
  text-align: center; 
}
 
h1 {
  margin: 0;
}
 
#title_line {
  background-color: #000;
  color: #0f0;
  text-align: center;
}
 
#container {
  margin: 0 auto;
  text-align: left;
  width: 85%;
}
 
/* ========================= Banner ========================= */
 
#headbanner {
  float: left;
  background-color: #00f;
  height: 211px;
  width: 383px;
}
 
/* ========================= Center =================== */
 
#welcomewrapper {
  float: left;
  width: 100%;
}
 
#welcome {
  margin: 0 240px 0 383px;
  background-color: #f00;
  height: 211px;
  color: #00f;
}
 
#welcome h2 {
  text-align: center;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
}
 
#welcome p {
  font-size: smaller;
  color: black;
 
  margin-left: 0px;
}
 
/* ========================= Login + Info ==================== */
 
#logininfo {
  float:  right;
  width:  240px;
  height: 211px;
}
 
#login {
  background-color: #0ff;
  height: 91px;
  width: 240px;
 
}
 
#stats {
  background-color: #f0f;
  height: 120px;
  width: 240px;
}
 
/* =================================================================== */
 
 
 
--> 
</style><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColLiqHdr #sidebar2, .thrColLiqHdr #headbanner { padding-top: 30px; }
#welcome { zoom: 1;  padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
 
</head>
 
<body>
<div id="container">
  <div id="title_line">
    <h1>Sitename</h1>
  </div>
 
  <div id="headbanner">
    <p>testing 1 2 3 </p>
  </div>
 
  <div id="logininfo">
    <div id="login">
    </div>
    <div id="stats">
    </div>
  </div>
 
  <div id="welcome">
  </div>
 
  <br class="clearfloat" />
 
</div>
</body>
</html>
[+][-]08.11.2008 at 04:43AM PDT, ID: 22203455

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 14-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]08.11.2008 at 01:01PM PDT, ID: 22207659

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 14-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]08.12.2008 at 04:37AM PDT, ID: 22211851

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 14-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]08.18.2008 at 11:27AM PDT, ID: 22254323

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 14-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20081112-EE-VQP-43 / EE_QW_2_20070628