Advertisement

07.09.2008 at 01:46PM PDT, ID: 23551797
[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!
8.2

CSS not workng in IE 6 but works  FF

Asked by PhilAllenpja in Web Development Software, Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)

Tags: ,

I have a webste that i am creating which when i test locally n FF-layout works fine see attached file ff-layout but when i test in IE-layou it moves the three columns over to far ???

here is the css attanng to it:

@media screen, print {

body {margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; background: url(/images/container_bg1.jpg) repeat left top; text-align: center;}
#printlogotype {display: none;}
#container {
      width: 930px;
      margin: 0 auto;
      text-align: left;
      background-image: none;
      background-repeat: no-repeat;
      background-color: #000000;
      border-right-color: #FFF;
      border-left-color: #FFF;
      border-top-width: 15px;
      border-top-style: solid;
      border-top-color: #FFFFFF;
      border-left-width: 15px;
      border-left-style: solid;
      border-right-width: 15px;
      border-right-style: solid;
}
#headpeicecontainer {
      margin: 0 auto;
      text-align: left;
      background-image: none;
      background-repeat: no-repeat;
      background-color: #000000;
}
      
#contentleft {
      width:280px;
      float:left;
      padding:5px;
      float:left;
      background:#fff;
      margin: 0px 0px 15px 15px;
      height: 500px;
}
#contentcenter {
      width:280px;
      padding:5px;
      float:left;
      background:#fff;
      margin: 0px 0px 15px 15px;
      height: 500px;
}
#contentright {
      width:280px;
      float:left;
      padding:5px;
      float:left;
      background:#fff;
      margin: 0px 0px 15px 15px;
      height: 500px;
}

#contentleftdouble {
      width:585px;
      float:left;
      float:left;
      background:#fff;
      margin: 0px 0px 15px 15px;
      height: 265px;
      padding: 5px;
}
#contentrightdouble {
      width:275px;
      float:left;
      padding:5px;
      float:left;
      background:#000000;
      margin: 0px 0px 15px 15px;
      height: 260px;
      border-bottom-width: 5px;
      border-left-width: 5px;
      border-bottom-style: solid;
      border-left-style: solid;
      border-bottom-color: #FFFFFF;
      border-left-color: #FFFFFF;
}


#contentleftmain {

      width:70%;
      float:left;
      padding:5px 5px 15px;
      float:left;
      background:#35454E;
      margin: 0px 5px 5px;
}
#contentrightmain {

      width:70%;
      float:left;
      padding:5px 5px 5px;
      float:left;
      background:#35454E;
      margin: 0px 5px 5px;
}

#contentleftsmall {

      width:24%;
      float:left;
      padding:5px;
      background:#35454E;
      margin: 0px 5px 5px;
}
#contentrightsmall {

      width:24%;
      float:right;
      padding:5px;
      background:#35454E;
      margin: 0px 5px 5px;
}


#contentall {

      width:97%;
      padding:5px;
      background:#35454E;
      margin: 0px 5px 5px;
}



#header {background: #fcc;}
h1 {margin: 0; padding: 0; position: absolute; left: -9000px; top: -9000px; color: #999999;}
h2 {font: normal 160% Georgia, "Times New Roman", Times, serif; letter-spacing: -0.05em; margin: 0.2em 0em 0em; color: #999999; background: url(/images/box_h2_title.gif) no-repeat top right; height: 40px; padding-right: 3.4em; padding-bottom: 0; padding-left: 0; padding-top: 0.2em;}
h3 {clear: both; font: normal 120% Georgia, "Times New Roman", Times, serif; margin: 0; padding: 0 0 0.1em 0; color: #999999; padding-top: 0.8em;}

p {font-size: 80%; margin: 0.8em 0; padding: 0; color: #999999;}
ol {font-size: 80%;}
ul {
      font-size: 80%;
      color: #999999;
}
a:link {color: #C0A846;}
a:visited {color: #C0A846;}
a:hover {color: #C0A846;}
a:active {color: #FFFFFF;}
a:focus { outline: none; }

.imgright {float: right; margin: 0.2em 0 0.2em 0.2em;}
.imgleft {float: left; margin: 0.2em 0.2em 0.2em 0;}
.noborder {border: 0px !important;}
.centeralign {text-align: center;}
.imgright img, .imgleft img, .centeralign img  {border: 1px solid #fff;}
.dropcap {float: left; width: 52px; font-size: 62px; line-height: 51px; font-weight: normal; color:#69c; font-family: georgia, times;}



#headpiece {background: #000000 url(/images/bd_toplogo_small.gif) no-repeat left top; height: 20px; border-bottom: 1px none #fff;}
#headpiece #homebtn {float: left; width: 40px; height: 20px; margin: 0;}
#headpiece #homebtn a {display: block; text-indent: -9000px; width: 50px; height: 20px; margin: 0;}
#headpiece #helper {float: right; color: #000; text-align: right; font-size: 70%; margin: 0; padding: 0.4em 0.4em 0.3em 0; font-weight: bold; width: 300px;}
#headpiece #helper a {color: #FFFFFF;}
#headpiece #text {float: left; color: #FFFFFF; text-align: left; font-size: 70%; margin: 0; padding: 0.4em 0.4em 0.3em 0; font-weight: bold; width: 300px;}
#headpiece #text a {color: #FFFFFF;}



#flashbanner a img {border: 0px;}

#navblock {
      margin: 0;
      padding: 0 0 0 15px;
      height: 25px;
      border-top: 15px solid #FFFFFF;
      border-right: 0px none;
      border-bottom: 0px none;
      border-left: 0px none;
}

.skip {text-indent: -9000px; font-size: 70%; float: left;}

#nav {margin: 0; padding: 0; font-size: 85%; float: left;}
#nav a {display: block; width: 6em; font-size: 80%; color: #fff; margin: 0;}
#nav li {float: left; list-style: none; margin: 0; padding: 0; width: 4em;}
#nav li ul {z-index: 999; position: absolute; background: #000000; margin: 0; padding: 0; width: 8.34em; left: -999em; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000;}
#nav li ul li {width: 6em;}
#nav li ul li a {width: 9.62em; padding: 0.2em 0.4em; margin: 0.1em 0;}
#nav li ul li a.first {margin: 0 0 0.1em 0;}
#nav li ul li a.last {margin: 0.1em 0 0 0;}
#nav li:hover ul, #nav li.sfhover ul {left: auto; background-position:0 -28px;}
#nav li ul li a:link {background: #000000; text-decoration: none;}
#nav li ul li a:visited {background: #000000; text-decoration: none;}
#nav li ul li a:hover {background: #FFEF00; text-decoration: none;}
#nav li ul li a:active {background: #FFEF00; text-decoration: none;}

#navhome {width: 71px!important; height: 25px; background: url(/images/navhome_over.gif) no-repeat;}
#navhomelink {display: block; width: 71px!important; padding: 0; border: 0; margin: 0; height: 25px; background: url(/images/navhome.gif) no-repeat;}
a#navhomelink:hover {background: url(/images/navhome_over.gif) no-repeat;}

#navcon {width: 87px!important; height: 25px; background: url(/images/navconsult_over.gif) no-repeat;}
#navconlink {display: block; width: 87px!important; padding: 0; border: 0; margin: 0; height: 25px; background: url(/images/navconsult.gif) no-repeat;}
a#navconlink:hover {background: url(/images/navconsult_over.gif) no-repeat;}

#navdnp {width: 71px!important; height: 25px; background: url(/images/navdesign_over.gif) no-repeat;}
#navdnplink {display: block; width: 71px!important; padding: 0; border: 0; margin: 0; height: 25px; background: url(/images/navdesign.gif) no-repeat;}
a#navdnplink:hover {background: url(/images/navdesign_over.gif) no-repeat;}

#navdna {width: 71px!important; height: 25px; background: url(/images/navdjs_over.gif) no-repeat;}
#navdnalink {display: block; width: 71px!important; padding: 0; border: 0; margin: 0; height: 25px; background: url(/images/navdjs.gif) no-repeat;}
a#navdnalink:hover {background: url(/images/navdjs_over.gif) no-repeat;}

#navgents {width: 71px!important; height: 25px; background: url(/images/navgentsent_over.gif) no-repeat;}
#navgentslink {display: block; width: 71px!important; padding: 0; border: 0; margin: 0; height: 25px; background: url(/images/navgentsent.gif) no-repeat;}
a#navgentslink:hover {background: url(/images/navgentsent_over.gif) no-repeat;}

#navref {width: 71px!important; height: 25px; background: url(/images/navrefurb_over.gif) no-repeat;}
#navreflink {display: block; width: 71px!important; padding: 0; border: 0; margin: 0; height: 25px; background: url(/images/navrefurb.gif) no-repeat;}
a#navreflink:hover {background: url(/images/navrefurb_over.gif) no-repeat;}

#navcont {width: 71px!important; height: 25px; background: url(/images/navcontact_over.gif) no-repeat;}
#navcontlink {display: block; width: 71px!important; padding: 0; border: 0; margin: 0; height: 25px; background: url(/images/navcontact.gif) no-repeat;}
a#navcontlink:hover {background: url(/images/navcontact_over.gif) no-repeat;}

#navreg {width: 100px!important; height: 25px; background: url(/images/navreg_over.gif) no-repeat;}
#navreglink {display: block; width: 100px!important; padding: 0; border: 0; margin: 0; height: 25px; background: url(/images/navreg.gif) no-repeat;}
a#navreglink:hover {background: url(/images/navregt_over.gif) no-repeat;}

.alt {display: block; text-indent: -9000px !important;}

.breadcrumb {margin: 0 0 0em;}
.breadcrumb p {font-size: 70%; padding: 0; margin: 0; text-align: left;}
.breadcrumb span {display: block; padding-top: 0.3em; padding-right: 0; padding-left: 1em;}

#leftbias .contentleftmain {float: left; width: 35%; margin: 0;}
#leftbias .contentrightmain {float: right; width: 37%;}
#leftbias .contentleftmain p {font-size: 80%;}
#leftbias .contentrightmain p {font-size: 70%;}

#rightbias .contentleftmain {float: left; width: 35%; margin: 0;}
#rightbias .contentrightmain {float: right; width: 64%;}
#rightbias .contentleftmain p {font-size: 70%;}
#rightbias .contentrightmain p {font-size: 75%;}

#leftbias .leftbox {float: left; width: 35%; margin: 0;}
#leftbias .rightbox {float: right; width: 37%;}
#leftbias .leftbox p {font-size: 80%;}
#leftbias .rightbox p {font-size: 70%;}

#rightbias .leftbox {float: left; width: 35%; margin: 0;}
#rightbias .rightbox {float: right; width: 64%;}
#rightbias .leftbox p {font-size: 70%;}
#rightbias .rightbox p {font-size: 75%;}

/* override for greater variation in widths */
#rightbias .narrow, #leftbias .narrow {width: 25%;}
#rightbias .wide, #leftbias .wide {width: 74%;}
.fullbox {clear: both; padding-right: 0; padding-bottom: 0; padding-left: 0;}

.leftbox ul, .rightbox ul, .fullbox ul {font-size: 80%;}
.leftbox ul li, .rightbox ul li, .fullbox ul li {list-style-type: square;}

.top {padding: 0;}
.top .genericbox p {font-size: 75%;}
.fullbox p {font-size: 70%;}
.genericboxfot {
      padding: 0;
      margin: 0;
      clear: none;
      min-height: 1%;
      background-color: #FFFFFF;
      height: 85px;
      width: 930px;
}


#footerpiece {
      background: #FFFFFF left top;
      height: 85px;
      width: 960px;
      border-top-width: medium;
      border-top-style: solid;
      border-top-color: #FFFFFF;
}
#footerpiece #text {
      float: left;
      color: #000000;
      text-align: right;
      font-size: 70%;
      margin: 0;
      font-weight: bold;
}
#footerpiece #text a {color: #000000;}
#footerpiece .noborder {border: 0px !important;}
#footerpiece .centeralign {text-align: center;}
#footerpiece .imgright img, .imgleft img, .centeralign img  {border: 1px solid #fff;}

.genericbox {margin: 0; background: #35454E; border-top: 1px none #000000; border-bottom: 1px none #35454E; border-left: 1px none #000000; border-right: 1px none #000000; clear: both; height: 1%; min-height: 1%;}
.stacked {margin: 8px; font-size: 0px; display: block;}

.newsitem {padding: 0.5em 0 0 0;} /* altered in v2 to reflect client's customisations */
.rightbox .newsitem p {margin: 0.6em 0;}

.photobox {float: left; margin: 0.5em;}
.photobox img {border: 1px solid #fff;}
.photobox p {padding: 0 0.2em; text-align: center;}

.photoboxl {float: left; margin: 0.5em;}
.photoboxl img {border: 1px solid #fff;}
.photoboxl p {padding: 0 0.2em; text-align: center;}

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* added/changed in v2  ------------------------------------------------ */

#rotator {height: 170px; width: 800px; overflow: hidden; position: relative; background: url(/images/body_bg.jpg);}

h2.headline {background: none; font-size: 220%; font-weight: bold; padding: 5px 0 0 10px; margin-bottom: 0; font-style: italic; letter-spacing: normal;}
p.leader {background: transparent; color: #000; padding: 4px 10px; margin-top: 0; font-size: 75%;}
h3.headlineguest {background: none; color: #069; padding: 0 10px;}
h4 {line-height: 140%; font-size: 75%; font-weight: normal; padding: 0.6em; margin: 0.4em 0;}
.newsitem h4 {color: #0E4069; margin: 0; font-weight: bold; padding: 0;}
.newsitem p {margin: 0 0 8px 0;}
.callout {border-top: 1px solid #70A5CF; border-left: 1px solid #70A5CF; background: url(/images/guest_box.gif) right bottom no-repeat;}


#formlisting {
      clear: both;
      color: #999999;
      position: relative;
      left: 80px;
      top: 0px;
      width: 610px;
      height: 370px;
      overflow: auto;
      text-align: center;
      font-weight: bold;
}
#formlisting p {font-size: 75%;}

.formrow {clear: both; margin: 0 0 10px 0;}
.formrow label {text-align: right; float: left; width: 40%; font-size: 75%; padding: 0.2em 0 0 0;}
.formrow span {float: right; width: 58%; text-align: left;}
.formrow span input {border: 1px solid #c90; width: 50%; font-size: 90%; font-family: Arial, Helvetica, sans-serif;}
.formrow span input.cbox {width: 20px; height: 20px;}
.formrow span select, .formrow span textarea {width: 51%; font-family: Arial, Helvetica, sans-serif; font-size: 90%;  border: 1px solid #c90;}
.formrow span textarea {height: 100px;}
.readonly {border: 1px solid #F0E0B2 !important; color: #999;}
.submission {text-align: center; padding-left: 72px;}
.submission input {font-family: Arial, Helvetica, sans-serif; font-size: 75%; font-weight: bold; color: #000; background: #fc0; border: 2px outset #f90; margin-bottom: 10px;}
.formrow:after, .submission:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.formrow, .submission {display: inline-block;}
/* Hides from IE-mac \*/
* html .formrow, * html .submission {height: 1%;}
.formrow, .submission {display: block;}
/* End hide from IE-mac */

#passform {margin: 0; padding: 0;}
#passform p {font-size: 70%; margin: 0.2em 0;}
#passform form {margin: 10px 0 0 0;}
#passform .formrowx label {font-size: 70%; float: none !important;}
#passform .formrowx span {display: block; float: none !important;}
#passform .formrowx input {font-family: Arial, Helvetica, sans-serif; font-size: 75%;}
#passform .submissionx {margin: 0.6em 0 0 0;}
#passform .submissionx input {background: #fc0; padding: 0.2em; border: 2px outset #f90; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}


}

@media print {
* {background: none;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 1em; background: #fff;}
#printlogotype {display: block; text-align: center;}
#navblock, .hide, #headpiece {display: none;}
h1 {display: none;}
#container {width: 100%;}
.noprint {display: none;}
.genericbox {padding-bottom: 1em;}
}
#leftbias .contentleftdouble {
float: left; width: 575px; margin: 0;
}
#leftbias .contentrightdouble {
float: right; width: 37%;
}
 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:

HTML Code is :
 
<% pagename = "Homepage" %>
 
<!--#include file="includes/preamble.asp"-->
 
<!-- accessibility -->
<link rel="next" title="The Show" href="/what_is_memorabilia.asp" />
<!-- /accessibility -->
</head>
 
 
<%
bannerimg = "/client_images/clubentry_main1.gif"
banneralt = "BSOLID // a luxury junk label"
bannerlink = "#"
%>
 
  <!--#include file="includes/header.asp"-->
  <!--#include file="includes/nav.asp"-->
  <!-- editable -->
  <div id="contentleftdouble"><img src="/client_images/bs_feature_main.jpg" width="575" height="265" /></div>
  <div id="contentrightdouble"></div>
  <div id="contentleft"><br clear="all" />
    <h3>&nbsp;</h3>
  </div>
  <div id="contentcenter"><br clear="all" />
    <p align="right">&nbsp;</p>
  </div>
  <div id="contentright"> <br clear="all" />
      <!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
      <!-- /editable -->
  </div>
  
  
  <div class="fullbox">
<div class="boxheader"><span></span></div>
<div class="genericboxfot footermotto">
<p align="center"><a href="/">Home</a> / <a href="/consultation.asp">Consultation</a> / <a href="/designandprint.asp">Design &amp; Print </a> / <a href="/djsandartists.asp">DJs &amp; Artists  </a> / <a href="/gentlemansent.asp">Gentleman's Entertainment </a>/ <a href="#">Club Database </a> / <a href="/promotion.asp">Promotion</a></p>
<p align="center">&copy; 2006 Crossfingers Productions/ <a href="/legal.asp" accesskey="8">Legal</a> / <a href="/toc.asp" accesskey="3">Table of Contents</a></p>
</div>
</div>
 
</div>
</div>
 
</body>
</html>
Attachments:
 
ff-layout.jpg (282 KB) (File Type Details) 
Firefox layout
Firefox layout
 
 
ie-layout.jpg (283 KB) (File Type Details) 
Internet Explorer Layout
Internet Explorer Layout
 
 
Keywords: CSS not workng in IE 6 but works FF
Title
1 Margin top difference between IE and …
2 CSS - differing results in IE and FF
3 help with css
4 CSS issues in FF
5 Help with CSS margins in IE
6 Slight gaps in FF
 
Loading Advertisement...
 
[+][-]07.10.2008 at 12:44AM PDT, ID: 21971231

View this solution now by starting your 14-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: Web Development Software, Cascading Style Sheets (CSS), Hypertext Markup Language (HTML)
Tags: CSS, IE 6/7 Firefox
Sign Up Now!
Solution Provided By: xberry
Participating Experts: 1
Solution Grade: A
 
 
 
Loading Advertisement...
20081112-EE-VQP-43 / EE_QW_2_20070628