SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Complete CSS Design NS6.2 Yay, IE6.0 Boo

    Here's the page in question:

    http://www.rpgme.com/cssdev/login.html

    Please view the page with NS6.2 first. THAT is how it is supposed to look.

    Now, pull the same page up in IE6.0. Yuck!

    Am I doing something wrong with the css, or am I just missing workarounds for IE?

    I'm desperate so any suggestions you can give will be doubly blessed!

    I've provided a link to the CSS at the bottom of the page.

  2. #2
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im assuming you are talking about the section with the copyright notice down the bottom (i dont have NS, and that was the only difference beetween opera and IE)

    1 thing you need to fix is that you have <span class="left"> and then <span class="right"> but in your css, there is nothing for either class.

    span.left should be float: left;
    span.right should be float: right;

    hope that helps

  3. #3
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nick, this is what it's supposed to look like:



    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  4. #4
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by iTec

    1 thing you need to fix is that you have <span class="left"> and then <span class="right"> but in your css, there is nothing for either class.
    <span class="left"> and <span class="right"> are defined at the bottom of the css, look for div.ftffooter span.left and div.ftffooter span.right.

    One thing that I figured out is if I remove the background-color: #fff; from the #contentbox and #content then the #sectionbar divs will show up.

  5. #5
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay, how about trying this.

    css:
    Code:
    .ftffooter {
    	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
    	font-size: 8pt;
    	background-color: #eee;
    	margin: 0px, 15px;
    }
    
    span.left {
    	float: left;}
    
    span.right {
    	float: right;}
    html:
    Code:
    <div class="ftffooter">
    <span class="left">&copy; 2002 Christopher Smith</span> <span class="right"><a href="terms.jsp">Terms and Conditions</a></span>&nbsp; </div>

  6. #6
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Figuring it out...

    I've gotten it to look about 95% correct in IE6.0 on Windows and IE5.1 on Mac and it still looks perfect in NS6.2 on both systems.

    Lots of work, but well worth the result. As you say, I'm still having a bit of trouble with the footer. I'll have a look at your suggestion iTec.

    Thanks!

  7. #7
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Problems

    Here is the new footer that appears to be working on both Windows and Mac and in NS6.2 and IE6.0. It is a bit troublesome still on IE5.1 for Mac though.




    .ftffooter {
    font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
    font-size: 8pt;
    background-color: #eee;
    margin: 0px auto;
    width: auto;
    }

    div.ftffooter span.left {
    float: left;
    text-align: left;
    background-color: #eee;
    width: 49%;
    margin-left: 15px;
    }

    div.ftffooter span.right {
    float: right;
    text-align: right;
    background-color: #eee;
    width: 48%;
    margin-right: 15px;
    }


    iTec, I tried your suggestions and for some reason, it wasn't giving me proper behavior for margins, or background color. The code above does but on IE5.1 for Mac the Terms and Conditions link is on on a new line (still aligned right though).


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
  •