...

View Full Version : IE Hack Needed



fivemcclungs
10-03-2007, 11:58 PM
Help. My boxes that should be in the right column on this page:

http://www.radiantplumbing.com/services

Are displaying incorrectly at the bottom of the page in IE 6 and earlier. IE 7 and Firefox 2 are fine. Do I need a hack for IE or am I just missing something more basic in the CSS? Please advise.

Frank

effpeetee
10-04-2007, 11:05 AM
Maybe this will help you.

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

Frank

fivemcclungs
10-04-2007, 03:27 PM
I'm still lost. I know it has to do with the three columns and clearing, but can't diagnose it. Could someone be more specific?

jlhaslip
10-07-2007, 01:26 AM
It is very difficult to assist you when there are several css files, scripts and junk to work with. If you could delete the bulk of the un-necessary information andpare the problem down to its core, and present the css as a workable file, someone might take a stab at it, but you are correct, it would appear to be an IE6 float issue.

Might be easily fixed, but I don't feel like wading through all those fluffy CSS files to do that. We are here to help you, so please help us do that.

fivemcclungs
10-07-2007, 04:09 PM
No problem. Here is the applicable style sheet (main.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;}


And here is the applicable HTML for the template of that page:


<body class="home">
<div id="frame">
<div id="header">
<div id="navigation">
<$rootmenu cssClass='nav'/$>
</div>
</div>
<div id="middlebar">
</div>
<div id="container">
<div id="subCol">
<$region name='SubColumn'$>
<$/region$>
</div>
<div id="mainCol">
<$region name='MainContent'$>
<$/region$>
</div>
<hr class="hide" />
<div style="clear: both;">&nbsp;</div>
</div>
<div id="extraCol">
<div class="content">
<$region name='ExtraColumn'$><$/region$>
</div>
<p align="center">&copy;2007 Radiant Plumbing. Design by <a href="http://drawingonthepromises.com"><strong>dotp</strong></a></p>
</div>
<hr class="hide" />
<div id="footer">
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>

Thanks for the help.

fivemcclungs
10-08-2007, 01:12 AM
Issue found and solved. Thanks for the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum