4 replies [Last post]
fivemcclungs
fivemcclungs's picture
Offline
newbie
Last seen: 14 years 42 weeks ago
Timezone: GMT-5
Joined: 2007-10-05
Posts: 3
Points: 0

I'm working on a website at RadiantPlumbing.com. IE6 is causing the right column in the website (the one with the dotted boxes and truck) to display at the bottom of the other two columns. See this page in IE6 to understand what I mean: http://radiant.publishpath.com/services. I'm sure it has to do with IE6 not rendering the box model correctly, but I just can't crack the nut on the hack for the CSS. Could someone please help. I'm not a coder, so any specific code changes would be most appreciated.

The column not rendering properly is #extraCol

Here is the CSS:

/* General --------------------------------------- */

.left {float: left; margin-right: 1em;}

.right {float: right; margin-left: 1em;}

.small {font-size: smaller;}

.hide {display: none;}

p, ul, ol { font-size:1em; line-height: 1.5em; margin:0 0 .7em 0;}

ol {margin-left: 0.75em; padding-left: 2em;}

ul {margin-left: 0.75em; }

ul li { list-style: none; background: url(images/bullet.gif) no-repeat left 0.2727em; padding-left: 1.3636em;}

ol li { list-style: decimal outside;}

ol ol li {list-style: lower-alpha outside;}

ol ol, ul ul {margin-bottom: 0;}

/* Structure and Layout
--------------------------------------- */

body {
background-image: url(images/metaltile.jpg);
background-repeat: repeat-x;
background-position: top left;
margin: 0px;
padding: 0;
color: #663300;
text-align: center;
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: 85%;
line-height: 1.3em;
}

#frame {
text-align: left;
margin: 0em auto;
width: 1024px;
background: url(images/frametile_1024.jpg) repeat-y center top;
}

.oneCol #frame {background-image: url(images/cardboardtile.jpg) repeat-y;}

#header {
background: url(images/header_bg.jpg) no-repeat center top;
height: 393px;
}

#middlebar {
background: url(images/greentilemiddle.gif) no-repeat center top;
height: 54px;
}

#container {
margin: 0 0 0 0;
float: left;
display: inline;
width: 674px;
}

* html #container {margin: 0 0 0 11px;}

.oneCol #container {
width: 707px;
}

#mainCol, #feature {padding: 0 0 0 0;}

.home #mainCol {
display: inline;
float: right;
width: 485px;
}

#subCol {display: none;}

.home #subCol {
float: left;
display: inline;
width: 165px;
}

#extraCol {
float: right;
width: 350px;
display: inline;
}

.oneCol #extraCol {
display: none;
}

#footer {
clear: both;
background: url(images/footer_bg.gif) no-repeat center bottom;
height:118px;
}

/* Links
--------------------------------------- */

a, a:link, a:visited {
color: #CF660A;
font-weight: bold;
text-decoration: none;
}

a:visited {
color: #CF660A;
}

a:hover, a:active {
text-decoration: underline;
}

a img {border: none;}

/* Navigation
--------------------------------------- */

#navigation {
margin: 19px 21px;
float: right;
padding: 0 10px;
height: 1em;
}

ul.nav, ul.nav li {
margin: 0;
padding: 0;
}

ul.nav li {
display: inline;
list-style: none;
background: none;
}

#navigation .nav a, #navigation .nav a:link, #navigation .nav a:visited {
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: 1.2em;
text-transform: uppercase;
line-height: 2.5em;
height: .3em;
text-decoration: none;
padding: 0 6px;
background: none;
color: #00457C;
float: left;
}

#navigation .nav a:hover, #navigation .nav li a.selectedPage {
background: #CF660A;
}

#extraCol .nav {
display: block;
background: #CF660A;
padding: 1.9090em 0;
}

#extraCol .nav li a, #extraCol .nav li a:link, #extraCol .nav li a:visited {
display: block;
color: #F58426;
border-bottom: 0.1818em solid;
text-decoration: none;
margin: 0.4545em 0 0.4545em 21px;
padding: 0.4545em 0;
font-weight: bold;
}

#extraCol .nav li a:hover, #extraCol .nav li a:active {
color: #F58426;
}

#footer .nav a, #footer .nav a:link, #footer .nav a:visited {
margin-right: 1em;
text-transform: uppercase;
}

#footer .nav, #footer .nav li {
margin-bottom: 0;
}

/* Headers
--------------------------------------- */

h2, h3, h4 {
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2.1em;
font-weight: normal;
color: #663300;
line-height: 1.37em;
margin: 1.2em auto 0.5em;
}

h2, #extraCol h1 {
font-size: 1.4em;
line-height: 1.2em;
color: #663300;
margin: 1.1578em auto 0.5789em;
font-weight: bold;
}

h3, #extraCol h2 {
font-size: 1.2em;
color: #663300;
line-height: 1em;
margin: 1.2em auto 0.6875em;
font-weight: bold;
}

h4, #extraCol h3 {
font-size: 1.2727em;
line-height: 1.1785em;
margin: 1.57174em auto 0.7857em;
font-weight: bold;
}

h5, #extraCol h4 {
font-family: verdana, arial, helvetica, sans-serif;
color: #663300;
line-height: 1.5em;
font-weight: bold;
}

h6, #extraCol h5 {
font-family: verdana, arial, helvetica, sans-serif;
color: #663300;
text-align: right;
line-height: 1.5em;
margin: 1.5em 0 0 0;
font-style: italic;
font-weight: bold;
}

#header h1, #header h2, #header h3, #header h4 {
color: #663300;
margin: 0.75em 0 0 0;
padding: 0;
}

#header h1 {
font-size: 3em;
}

.title {
border-bottom: 0.1818em solid;
padding-bottom: 0.1818em;
}

/* Content
------------------------------------- */

#header p {
margin-top: 0;
}

#header a, #header a:link, #header a:visited, #header a:hover, #header a:active {
color: #FFF;
text-decoration: none;
}

div.content {
padding: 1.5em;
}

.eventsList ul, .linksModule ul, .blogList ul {
margin-left: 0.75em;
padding-left: 0;
}

.eventsList li, .linksModule li, .blogList li {
list-style: none;
padding-left: 18px;
margin-left: 0;
background: url(images/bullet.gif) no-repeat left 0.2727em;
margin-bottom: 1em;
}

.blogList li {
background-image: url(images/news_bullet.gif);
}

.eventsList li {
background-image: url(images/events_bullet.gif);
}

.linksModule li {
background-image: url(images/links_bullet.gif);
}

.breadCrumb {
border-bottom: 0.0909em dotted #E1DED0;
padding: 1em 0;
margin-bottom: 1em;
}

.button {
border: 2px solid #C5C3B6;
padding: 4px 8px;
background: #FFF url(/Styles/images/waterButtons_tile.gif) repeat-x left -6px;
clear: both;
text-decoration: none;
color: #6E6F71;
font-weight: normal;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
display: block;
width: auto;
float: left;
}

div.comments dd.comment {
padding: 1em 1.5em;
background: #FAF8ED;
}

div.comments dt.comment {
border-bottom: 4px double #E1DED0;
padding: 1em 1.5em;
background: #FAF8ED;
}

div.comments dd.alternate, div.comments dt.alternate {
background: #F2F2EA;
}

.postDate {
font-style: normal;
font-size: 10px;
color: #666;
}

.blogList .postInfo, .blogList .postDate {
font-style: normal !important;
font-size: 11px !important;
color: #515151 !important;
}

.blogBack, .eventBack {
border-top: 1px dotted #515151;
background: #FAF8ED;
padding: .5em 1.5em;
margin-top: 1em;
clear: both;
}

div.commentsForm input, div.commentsForm textarea {
padding: .25em;
font-size: 13px;
width: 80%;
}

.blogList h2.postTitle {
font-size: 100%;
line-height: 1.5em;
font-family: verdana, arial, helvetica, sans-serif;
margin: 0;
}

div.commentsForm {
padding: 11px 18px;
border: 4px double #E1DED0;
margin-top: 1em;
background: #FAF8ED;
}

div.commentsForm h3.addComment {
background: #E1DED0;
color: #FFF;
padding: 11px 18px;
margin: -11px -18px 1em;
}

a.commentNumber, a.commentNumber:link, a.commentNumber:visited {
text-indent: -9999px;
background: url(images/comment_icon.gif) no-repeat left top;
width:14px;
height:15px;
display: block;
}

h3.commentsHead {
background: url(images/comment_icon.gif) no-repeat 4px 4px;
padding-left: 24px;
}

/* Search
--------------------------------------- */

div.search {
background: #E1DED0;
padding: .5em 1.5em;
}

.searchInput {
width: 95%;
margin-bottom: 0.75em;
padding: 0.1818em;
font-size: 1.2727em;
font-weight: bold;
}

.searchButton {
background: #CF660A;
color: #FFF;
font-weight: bold;
padding: 0.1818em;
font-size: 1.2727em;
margin-bottom: 1.5em;
}

div.search label {
display: block;
font-size: 1.4545em;
line-height: 1.2em;
margin: 1.375em auto 0.6875em;
font-weight: bold;
}

/* Events Calendar
--------------------------------------- */

.eventsCalendar table {
border: 1px solid #807d70;
width: 100%;
border-collapse: collapse;
}

.calendarDay, .calendarToday, .calendarDayHeader, .calendarTitle td, .calendarWeekendDay, .calendarOtherMonthDay {
padding: 2px;
border: 1px solid #807d70;
}

.eventsCalendar table table, .eventsCalendar table table td {
border: none;
width: 100%;
border-collapse: collapse;
}

.calendarTitle td {
text-align: center;
background: #515151;
color: #FFF;
font-weight: bold;
padding: 6px 4px;
}

.calendarNextPrevious {
font-weight: normal;
}

.calendarNextPrevious a {
color: #CC660C !important;
font-weight: normal;
}

.calendarToday, .calendarToday {
color: #FFF;
background: #CF660A;
}

.calendarDayHeader {
color: #f2f2ea;
background: #807d70;
font-weight: bold;
height: 1px;
text-align: center;
padding: 4px 2px;
}

.calendarWeekendDay {
background: #f2f2ea;
}

.calendarOtherMonthDay {
color: #807d70;
background: #e1ded0;
}

/* Admin
--------------------------------------- */

.ajax__tab_default .ajax__tab_body {
background: #f7f7f2 url(images/tab_body_tile.gif) repeat-x left bottom;
}

.ajax__tab_default .ajax__tab_header {
border: none;
background: url(images/single_line.gif) repeat-x left bottom;
}

.ajax__tab_default .ajax__tab_inner {

}

.ajax__tab_default .ajax__tab_outer {
background: #e1ded0 url(images/tab_normal_tile.gif) repeat-x left top;
padding: 0.4545em 1.0909em;
margin-bottom: 0.0909em;
}

.ajax__tab_default .ajax__tab_active .ajax__tab_outer {
background: #f7f7f2 url(images/tab_active_tile.gif) repeat-x left top;
margin-bottom: 0;
padding-bottom: 0.5454em;
}

.ajax__tab_default .ajax__tab_active span.ajax__tab_tab {
font-weight: bold;
border: none;
padding-bottom: 0.0909em;
}

.ajax__tab_default .ajax__tab_hover .ajax__tab_tab {
border: none;
padding-bottom: 0.0909em;
}

div.helpContent {
background: #ffffe1;
color: #515151 !important;
}

div.helpContent p {margin-bottom: 0;}

.templateChooser {
background: url(images/tab_body_tile.gif) repeat-x left bottom;
border: 1px solid #e1ded0;
}
.ajax__tab_default .ajax__tab_body blockquote {

}

.actions img {vertical-align: middle;}

/* Forms
--------------------------------------- */

.formHeader h2 {
border-bottom: 0.1818em solid !important;
padding-bottom: 0.1818em !important;
font-size: 2em !important;
line-height: 1.1em;
margin: 1em auto 0.5em !important;
font-weight: bold;
}

.fieldSelected {
background: transparent !important;
border: 4px dotted #CC660C !important;
}

.fieldError {
color: #CC660C !important;
background: transparent !important;
border: 4px solid ##CC660C !important;
}

#errorSummary {
color: #CC660C !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}

#MainContent_4_4_btnSubmit {
color:#fff;
background-color:#663300;
border: fff;
padding: .5em;
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-weight: bold;
}

/* Clearing
--------------------------------------- */

#container:after, #extraCol .nav:after, #frame:after, #footer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#container, #extraCol .nav, #frame, #footer {display: inline-block;}

* html #container, * html #extraCol .nav, * html #frame, * html #footer {height: 1%;}
#container, #extraCol .nav, #frame, #footer {display: block;}

Here is the HTML code for that page's template:

<$region name='SubColumn'$> <$/region$>
<$region name='MainContent'$> <$/region$>
 
<$region name='ExtraColumn'$><$/region$>

©2007 Radiant Plumbing. Design by dotp

Thanks for the help. I'm really stuck!

Frank

fivemcclungs
fivemcclungs's picture
Offline
newbie
Last seen: 14 years 42 weeks ago
Timezone: GMT-5
Joined: 2007-10-05
Posts: 3
Points: 0

Closed

Found the offensive line of code and fixed it.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Post your solution?

It would be a Good Thing® to indicate which line it was, and how you corrected it. Others may someday be searching for a solution to the same issue.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fivemcclungs
fivemcclungs's picture
Offline
newbie
Last seen: 14 years 42 weeks ago
Timezone: GMT-5
Joined: 2007-10-05
Posts: 3
Points: 0

Solution

The solution was the opposite of what you might think. There was an earlier hack on this line in the CSS:

* html #container {margin: 0 0 0 11px;}

once I removed it, everything cleared properly.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 8 years 1 week ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

A lesson to learn then...

A lesson to learn then... all hacks are not constructive!! Smile

mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com