SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [HELP] CSS design only works in IE!

    HELP!

    I've got some problems with my css obviously. It looks fine in IE but is all wacked out in FireFox, NetScape 7.1, Mozilla 1.6, and Opera 7.23. The link to my test site is:

    http://design.dvdfuture.com/index.htm

    below is the css that I have for the page.

    layout.css
    Code:
    body {
    text-align: center;
    background: url(../images/background3.jpg) repeat-x bottom fixed;
    background-color: #C1D8E2;
    margin: 0;
    padding: 0;
    }
    #wrap {
    top: 0px;
    margin: auto;
    width: 770px;
    text-align: left;
    }
    #header {
    top: 0px;
    width: 770px;
    height: 100px;
    z-index: 10;
    background: url(../images/header.jpg) no-repeat top;
    }
    #subnavigation {
    position: relative;
    top: -25px;
    z-index: 20;
    width: 770px;
    height: 30px;
    background: url(../images/sub-nav-bg.jpg) no-repeat fixed;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 7pt;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    }
    #subnavigation a {
    text-decoration: none;
    color: #FFFFFF;
    }
    #subnavigation a:hover {
    text-decoration: underline;
    color: #FF9900;
    }
    #subnavleft {
    float: left;
    width: 470px;
    text-align: left;
    padding: 8px;
    }
    #subnavright {
    float: right;
    width: 250px;
    text-align: right;
    padding: 8px;
    }
    #content {
    position: relative;
    top: -25px;
    z-index: 10;
    float: right;
    width: 770px;
    background: url(../images/content-bg.jpg) repeat-y top;
    }
    #footer {
    position: relative;
    top: -25px;
    width: 770px;
    height: 30px;
    background: url(../images/footer-bg.jpg) no-repeat fixed;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 7pt;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
    padding: 3px;
    }
    #footer a {
    text-decoration: underline;
    color: #FFFFFF;
    }
    #footer a:hover {
    text-decoration: none;
    color: #FF9900;
    }
    navigation.css
    Code:
    #navigation {
    float:left;
    width:100%;
    background: url("../images/nav-bg.gif") no-repeat bottom;
    font-size:10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height:normal;
    overflow: hidden;
    z-index: 20;
    position: relative;
    top: -25px;
    }
    #navigation ul {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0;
    list-style:none;
    }
    #navigation li {
    float:left;
    background:url("../images/nav-left.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    }
    #navigation a {
    float:left;
    display:block;
    background:url("../images/nav-right.gif") no-repeat right top;
    padding:5px 15px 4px 5px;
    text-decoration:none;
    font-weight:bold;
    color:#999999;
    }
    /* Commented Backslash Hack
    hides rule from IE5-Mac \*/
    #navigation a {float:none;}
    /* End IE5-Mac hack */
    #navigation a:hover {
    color:#000000;
    }
    #navigation #current {
    background-image:url("../images/nav-left_on.gif");
    }
    #navigation #current a {
    background-image:url("../images/nav-right_on.gif");
    color:#000000;
    padding-bottom:5px;
    }
    nav-right.css
    Code:
    #navright {
    float:right;
    width:200px;
    font-size:10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    line-height:normal;
    overflow: hidden;
    }
    #navright p {
    margin: 0;
    padding: 0px 0px 0px 10px;
    }
    #navright p.title {
    font-weight: bold;
    background: url("../images/nav-bg.gif") no-repeat bottom;
    margin: 0;
    padding: 10px 0px 3px 3px;
    }
    #navright img {
    border: 1px;
    border-style: solid;
    border-color: #000000;
    padding: 0;
    margin: 0;
    }
    #navright .sep {
    font-size: 2px;
    margin: 2px 0px 2px 0px;
    width: 119px;
    }
    content-left.css
    Code:
    #contentleft {
    float:left;
    width:570px;
    }
    #advertisement {
    width: 570px;
    text-align: center;
    }
    #firstrow {
    width: 570px;
    }
    #secondrow {
    position: relative;
    top: 0px;
    width: 570px;
    text-align: center;
    }
    #news {
    text-align: center;
    float: left;
    width: 190px;
    }
    #frs {
    text-align: center;
    float: right;
    width: 190px;
    }
    #feature {
    text-align: center;
    float: right;
    width: 190px;
    }
    #dvd {
    text-align: center;
    float: left;
    width: 285px;
    }
    #theatrical {
    text-align: center;
    float: right;
    width: 285px;
    }
    Thanks for any help!!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've made a few little changes that make it work in firefox/mozilla and opera7 as well as ie6.

    You have used relative positioning to move your layout up a bit but the trouble is that you then have to chase that 25px all around the page as it never goes away. You could simply have used a negative margin top and then forget about it.

    You failed to specify all the co-ordinates for your background images which could cause problems in how the browsers interpret it.

    Anyway here it is (you will have to take all the css back out to the external files and change the image references back to relative.)
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>dvdfuture.com :: Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /**** LINK-tag style sheet layout.css ****/
    body {
     text-align: center;
     background: #C1D8E2 url(http://design.dvdfuture.com/images/background3.jpg) repeat-x fixed left bottom;
     margin: 0;
     padding: 0;
     min-width:770px;
    }
    #wrap {
     position:relative;
     margin:-25px auto 0;
     width: 770px;
     text-align: left;
     z-index:20;
    }
    #header {
     position:relative;
     margin:auto;
     width: 770px;
     height: 100px;
     z-index: 10;
     background: url(http://design.dvdfuture.com/images/header.jpg) no-repeat left top;
    }
    #subnavigation {
     position: relative;
     z-index: 20;
     height: 30px;
     background: url(http://design.dvdfuture.com/images/sub-nav-bg.jpg) no-repeat left top;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 7pt;
     font-weight: bold;
     color: #FFFFFF;
     margin: 0;
     padding: 0;
    }
    #subnavigation a {
     text-decoration: none;
     color: #FFFFFF;
    }
    #subnavigation a:hover {
     text-decoration: underline;
     color: #FF9900;
    }
    #subnavleft {
     float: left;
     width: 470px;
     text-align: left;
     padding: 8px;
    }
    #subnavright {
     float: right;
     width: 250px;
     text-align: right;
     padding: 8px;
    }
    #content {
     position: relative;
     z-index: 10;
     float: right;
     width: 770px;
     background: url(http://design.dvdfuture.com/images/content-bg.jpg) repeat-y left top;
    }
    #footer {
     position: relative;
     width: 770px;
     height: 30px;
     background: url(http://design.dvdfuture.com/images/footer-bg.jpg) no-repeat left top;
     text-align: center;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 7pt;
     font-weight: bold;
     color: #FFFFFF;
     margin: 0;
     padding: 3px;
    }
    #footer a {
     text-decoration: underline;
     color: #FFFFFF;
    }
    #footer a:hover {
     text-decoration: none;
     color: #FF9900;
    }
    
    /**** LINK-tag style sheet navigation.css ****/
    #navigation {
     float:left;
     width:100%;
     background: url("http://design.dvdfuture.com/images/nav-bg.gif") no-repeat left bottom;
     font-size:10px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     line-height:normal;
     overflow: hidden;
     z-index: 20;
     position: relative;
    }
    #navigation ul {
     margin:0;
     padding:0;
     list-style:none;
    }
    #navigation li {
     float:left;
     background:url("http://design.dvdfuture.com/images/nav-left.gif") no-repeat left top;
     margin:0;
     padding:0 0 0 9px;
    }
    #navigation a {
     float:left;
     display:block;
     background:url("http://design.dvdfuture.com/images/nav-right.gif") no-repeat right top;
     padding:5px 15px 4px 5px;
     text-decoration:none;
     font-weight:bold;
     color:#999999;
    }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #navigation a {float:none;}
    /* End IE5-Mac hack */
    #navigation a:hover {
     color:#000000;
    }
    #navigation #current {
     background-image:url("http://design.dvdfuture.com/images/nav-left_on.gif");
    }
    #navigation #current a {
     background-image:url("http://design.dvdfuture.com/images/nav-right_on.gif");
     color:#000000;
     padding-bottom:5px;
    }
    
    /**** LINK-tag style sheet nav-right.css ****/
    #navright {
     float:right;
     width:200px;
     font-size:10px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #FFFFFF;
     line-height:normal;
     overflow: hidden;
    }
    #navright p {
     margin: 0;
     padding: 0px 0px 0px 10px;
    }
    #navright p.title {
     font-weight: bold;
     background: url("http://design.dvdfuture.com/images/nav-bg.gif") no-repeat left bottom;
     margin: 0;
     padding: 10px 0px 3px 3px;
    }
    #navright img {
     border: 1px;
     border-style: solid;
     border-color: #000000;
     padding: 0;
     margin: 0;
    }
    #navright .sep {
     font-size: 2px;
     margin: 2px 0px 2px 0px;
     width: 119px;
    }
    
    /**** LINK-tag style sheet content-left.css ****/
    #contentleft {
     float:left;
     width:570px;
    }
    #advertisement {
     width: 570px;
     text-align: center;
    }
    #firstrow {
     width: 570px;
    }
    #secondrow {
     position: relative;
     width: 570px;
     text-align: center;
    }
    #news {
     text-align: center;
     float: left;
     width: 190px;
    }
    #frs {
     text-align: center;
     float: right;
     width: 190px;
    }
    #feature {
     text-align: center;
     float: right;
     width: 190px;
    }
    #dvd {
     text-align: center;
     float: left;
     width: 285px;
    }
    #theatrical {
     text-align: center;
     float: right;
     width: 285px;
    }
    </style>
    </head>
    <body>
    <div id="header"></div>
    <!-- wrap -->
    <div id="wrap"> 
      <!-- navigation -->
      <div id="navigation"> 
    	<ul>
    	  <li id="current"><a href="#">Home</a></li>
    	  <li><a href="#">News</a></li>
    	  <li><a href="#">Reviews</a></li>
    	  <li><a href="#">Features</a></li>
    	  <li><a href="#">Forum</a></li>
    	  <li><a href="#">About Us</a></li>
    	  <li><a href="#">Links</a></li>
    	</ul>
      </div>
      <!-- /navigation -->
      <!-- subnavigation -->
      <br style="clear:both" />
      <div id="subnavigation"> 
    	<div id="subnavleft"><a href="#">Front Row, Sofa!</a> | <a href="#">Top 50 
    	  Read Reviews</a> | <a href="#">Top 10 Weekly Reviews</a></div>
    	<div id="subnavright"><a href="#">Help</a> | <a href="#">Contests</a> | First 
    	  time visitor? <a href="#">Click Here</a>.</div>
      </div>
      <!-- /subnavigation -->
      <!-- content -->
      <div id="content" > 
    	<!-- contentleft -->
    	<div id="contentleft"> 
    	  <!-- advertisement -->
    	  <div id="advertisement"> advertisement </div>
    	  <!-- /advertisement -->
    	  <!-- first row -->
    	  <div id="firstrow"> 
    		<div id="news"> news </div>
    		<div id="frs"> frs </div>
    		<div id="feature"> feature </div>
    	  </div>
    	  <!-- /first row -->
    	  <!-- second row -->
    	  <div id="secondrow"> alapha links 
    		<div id="dvd"> dvd </div>
    		<div id="theatrical"> theatrical </div>
    	  </div>
    	  <!-- /second row -->
    	</div>
    	<!-- /contentbody -->
    	<div id="navright"> 
    	  <p class="title">Contests</p>
    	  <div class="sep">&nbsp;</div>
    	  <p><img src="http://design.dvdfuture.com/images/contests/contest.gif" alt="" /></p>
    	  <p class="title">News Search</p>
    	  <p>News Search Form</p>
    	  <p class="title">Title Search</p>
    	  <p>Title Search Form</p>
    	  <p class="title">Messages</p>
    	  <p>&raquo;&nbsp;message forums</p>
    	  <p class="title">Front Row, Sofa!</p>
    	  <p>&raquo;&nbsp;list of frs!</p>
    	  <p class="title">Features</p>
    	  <p>&raquo;&nbsp;list of features</p>
    	</div>
      </div>
      <!-- /content -->
      <!-- footer -->
      <br style="clear:both" />
      <div id="footer"> Copyright &copy; 1998-2004 <a href="http://www.dvdfuture.com">dvdfuture.com</a>. 
    	<a href="http://www.dvdfuture.com/tos.php">Terms of Use</a> | <a href="http://www.dvdfuture.com/privacy.php">Privacy 
    	Statement</a>. All Rights Reserved. Want to be a writer? Email to <a href="mailto:writer@dvdfuture.com">writer@dvdfuture.com</a>. 
    	Problems? Bugs? Comments? <a href="mailto:webmaster@dvdfuture.com">webmaster@dvdfuture.com</a>. 
    	<a href="http://www.dvdfuture.com/adinfo.php">Advertising Information</a>. 
      </div>
      <!-- /footer -->
    </div>
    <!-- /wrap -->
    </body>
    </html>
    Hope that helps.

    paul

  3. #3
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well after taking a break from looking at my code i started back into it and thought of some new ways of doing things. i finally got the page working

    here's the css now and i have commented out the parts that were messing with the page.

    I basically took out the z-index and the top: -25px as that was throwing everything off. I then put the navigation div tags inside the header div tag and positioned it 78px from the top and everything worked!

    Now I have got to remember from now on to take an hour or two break from looking at code and come back to it fresh. That seems to help a lot

    Thanks for all of you that took the time to look at this!

    http://design.dvdfuture.com

    layout.css
    Code:
    body {
     text-align: center;
     background: url(../images/background3.jpg) repeat-x bottom fixed;
     background-color: #C1D8E2;
     margin: 0;
     padding: 0;
    }
    #wrap {
     top: 0px;
     margin: auto;
     width: 770px;
     text-align: left;
    }
    #header {
     top: 0px;
     width: 770px;
     height: 100px;
     z-index: 10;
     background: url(../images/header.jpg) no-repeat top;
     padding: 0 0 0 0;
     margin: 0 0 0 0;
    }
    #subnavigation {
     position: relative;
     /*top: -25px;*/
     /*z-index: 20;*/
     width: 770px;
     height: 30px;
     background: url(../images/sub-nav-bg.jpg) no-repeat top;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 7pt;
     font-weight: bold;
     color: #FFFFFF;
     margin: 0;
     padding: 0;
     clear: both;
     /*border-style: solid;
     border-width: 1px;
     border-color: red;*/
    }
    #subnavigation a {
     text-decoration: none;
     color: #FFFFFF;
    }
    #subnavigation a:hover {
     text-decoration: underline;
     color: #FF9900;
    }
    #subnavleft {
     float: left;
     width: 470px;
     text-align: left;
     padding: 8px;
    }
    #subnavright {
     float: right;
     width: 250px;
     text-align: right;
     padding: 8px;
    }
    #content {
     position: relative;
     /*top: -25px;*/
     /*z-index: 10;*/
     float: right;
     width: 770px;
     background: url(../images/content-bg.jpg) repeat-y top;
    }
    #footer {
     position: relative;
     /*top: -25px;*/
     width: 770px;
     height: 30px;
     background: url(../images/footer-bg.jpg) no-repeat top;
     text-align: center;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 7pt;
     font-weight: bold;
     color: #FFFFFF;
     margin: 0;
     padding: 0;
     clear: both;
    }
    #footer a {
     text-decoration: underline;
     color: #FFFFFF;
    }
    #footer a:hover {
     text-decoration: none;
     color: #FF9900;
    }
    navigation.css
    Code:
    #navigation {
     float:left;
     width:100%;
     background: url("../images/nav-bg.gif") no-repeat bottom;
     font-size:10px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     line-height:normal;
     overflow: hidden;
     z-index: 20;
     position: relative;
     top: 78px;
     vertical-align: bottom;
    }
    #navigation ul {
     margin:0px 0px 0px 0px;
     padding:0px 0px 0;
     list-style:none;
    }
    #navigation li {
     float:left;
     background:url("../images/nav-left.gif") no-repeat left top;
     margin:0;
     padding:0 0 0 9px;
    }
    #navigation a {
     float:left;
     display:block;
     background:url("../images/nav-right.gif") no-repeat right top;
     padding:5px 15px 4px 5px;
     text-decoration:none;
     font-weight:bold;
     color:#999999;
    }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #navigation a {float:none;}
    /* End IE5-Mac hack */
    #navigation a:hover {
     color:#000000;
    }
    #navigation #current {
     background-image:url("../images/nav-left_on.gif");
    }
    #navigation #current a {
     background-image:url("../images/nav-right_on.gif");
     color:#000000;
     padding-bottom:5px;
    }

  4. #4
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I've made a few little changes that make it work in firefox/mozilla and opera7 as well as ie6.

    .....

    Hope that helps.

    paul
    man you are freak'n awesome at CSS. i would have never done it the way you did it as you can see by the what i came up with to fix the problem. one of these days i'm going to get good enough to where i can at least figure out your css quizes you put on line here. i love those things as i try to do them every week you put them up of course me being a noobie at css i can never get them yet!

    thanks again for your help! i really do appreciate it!!!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Glad you got it working


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •