2 replies [Last post]
burns.aj
Offline
newbie
Last seen: 13 years 26 weeks ago
Joined: 2007-07-17
Posts: 2
Points: 0

This site is a three column site, I'm trying an all css layout.

This site views perfectly in FF and IE7.

But in IE6, it seems I am having some width issues on the columns that I don't quite know how to resolve.

The far left box is pushed to the side, off of the layout background and there is a strange piece of text outside of the box.

I have tried to look for IE 6 hacks that are suppose to fix the box elements but I can't seem to get them to work.

The ids/classes for the columns are:

.navbar { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #0A5F9E; width: 200px; margin-left: 10px; float: left; line-height: normal; } #middle { width: 450px; height: auto; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; top: 5px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #0A5F9E; border-bottom-color: #0A5F9E; }

#left {
background-color: #EEEEEE;
border: 1px solid #0A5F9E;
height: auto;
float: left;
margin-left: 10px;
padding: 10px;
width: 160px;
text-align: center;
}

Here is the full css code:

* { padding: 0; margin: 0; }

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
background-image: url(../images/bg_grad.gif);
background-repeat: repeat-x;
line-height: 16px;
}
#wrapper {
width: 928px;
background-image: url(../images/bg_main.gif);
margin-left: 30px;
background-repeat: repeat-y;
position: absolute;
}
#footer_img {
margin: 0px;

}
#footer {
height: auto;
background-image: url(../images/bg_main.gif);
background-repeat: repeat-y;
padding-top: 30px;
}
.style7 {
color: #0A5F9E
}
#footer_contain {
margin-right: 20px;
margin-left: 20px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #0A5F9E;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: normal;
margin-top: 0px;
margin-bottom: 0px;
}
#container {
margin-left: 14px;
margin-right: 14px;
background-repeat: repeat-y;
background-position: 200px;
height: auto;
}
#middle {
width: 450px;
height: auto;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
top: 5px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #0A5F9E;
border-bottom-color: #0A5F9E;
} */this is the problem area/*
.content {
margin: 0px;
}
.content p {
margin-bottom: 10px;
}

#left {
background-color: #EEEEEE;
border: 1px solid #0A5F9E;
height: auto;
float: left;
margin-left: 10px;
padding: 10px;
width: 160px;
text-align: center;
}

.clearer {
font-size: 0px;
height: 0px;
width: 100%;
display: block;
clear: both;
}
#left_grad {
float: left;
}
#header {
width: 900px;
height: 138px;
float: left;
background-color: #FFFFFF;
}

#right_grad {
float: left;
}
.contentbox {
background-color: #EEEEEE;
border: 1px solid #0A5F9E;
height: auto;
padding: 10px;
}
#address {
float: left;

}
#email {
float: right;
}
.ulist_style {
list-style-position: outside;
margin-left: 10px;
margin-bottom: 20px;
}
.ulist_style ul li {
list-style-image: none;
list-style-type: disc;
margin-bottom: 0px;
}

.ulist_style li {
margin-left: 30px;
margin-bottom: 10px;
list-style-image: url(../images/bullet.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #0A5F9E;
margin-bottom: 10px;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #0A5F9E;
margin-bottom: 10px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0A5F9E;
}

h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #CC6600;
}

#tel {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.style6 {font-family: Georgia, Times New Roman, Times, serif; font-size: 14px; color: #0A5F9E; font-weight: bold; }
.olist_style {
list-style-position: outside;
margin-left: 10px;
margin-bottom: 20px;
}
.olist_style li {
margin-left: 30px;
margin-bottom: 10px;
}

body {
behavior: url(file:///C|/Program%20Files/Apache%20Software%20Foundation/Apache2.2/htdocs/csshover2.htc);
}

.navbar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0A5F9E;
width: 200px;
margin-left: 10px;
float: left;
line-height: normal;
}
.navbar ul {
list-style: none;
margin-left: 30px;
}
.navbar ul a {
color: #0A5F9E;
text-decoration: none;
display: block;
background-color: #FFFFFF;
}
.navbar ul li {
}
.navbar ul li a {
width: 145px;
height: 20px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #CC6600;
background-color: #FFFFFF;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.navbar ul li a:hover {
width: 145px;
height: 20px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #0A5F9E;
background-color: #CCCCCC;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.navbar ul #eftpayer a {
height: 30px;
}
.navbar ul #eftpayer a:hover {
height: 30px;
}
.navbar ul #patpay a {
height: 30px;
}
.navbar ul #patpay a:hover {
height: 30px;
}
.navbar ul #rxprog a {
height: 30px;
}
.navbar ul #rxprog a:hover {
height: 30px;
}

.navbar2 {
position: absolute;
left: 689px;
top: -21px;
z-index: 3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.navbar2 ul {
list-style: none;
}
.navbar2 ul a {
color: #000000;
text-decoration: none;
display: block;
background-color: #FFFFFF;
}
.navbar2 ul li {
/*border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;*/
float: left;
}
.navbar2 ul li a {
width: 70px;
height: 105px;
}
.navbar2 ul li span {
display: none;
}
.navbar2 ul li#home a {

}
.navbar2 ul li#contactus a {

}
.navbar2 ul li#aboutus a {

}

And here is the html:

title







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





To see the problem in action go to:
http://newsite.medlink.net/template2.html

Thanks!

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 36 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Add display:inline; in

burns.aj
Offline
newbie
Last seen: 13 years 26 weeks ago
Joined: 2007-07-17
Posts: 2
Points: 0

Hey Thanks!

Thanks DanA,

That worked great.