SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    New All-CSS Design (Problems)

    I am redesigning www.2BigFeet.com to use a CSS design and be standards compliant. Below is what I have so far:

    http://www.2bigfeet.com/2bfnew/

    I have a few questions:

    Can I have the fonts be the same size in both Firefoz/Mozilla and IE?

    How do I wrap the footer to the bottom of the page?

    Can I make the top navigation NOT wrap?

    Can I make the two images at the top-right of the page NOT wrap?

    There is some spacing issue with the top list of links (space to the right of the name is missing in Firefox/Mozilla). Any clues why?

    Any help would be very appreciated...

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

    Can I make the two images at the top-right of the page NOT wrap?
    This should do it:

    Code:
    .top {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #fff;
    clear: both;
    height: 60px;
    width: 100%;
    overflow:hidden;
    white-space:nowrap;
    text-align:right;
    }
    div.top span.logo {
    position:absolute;
    left:0;top:0;
    }
    div.top span.seals {
    margin-left:236px;
    }
    Can I make the top navigation NOT wrap?
    Something like this should work:
    Code:
    #subnavlist {
     margin: 0;
     white-space:nowrap;
     height:1.8em;
     overflow:hidden;
     line-height:1.8em;
     }
    Can I have the fonts be the same size in both Firefoz/Mozilla and IE?
    They look much the same size to me already For oner of the best articles on font-sizing have a look here:

    http://www.thenoodleincident.com/tut...x_lesson/font/

    How do I wrap the footer to the bottom of the page?
    Not sure what you mean as your footer is at the bottom of the page. If you are talking about a footer that sits on the bottom even when there is no content then there is a FAQ that explains exactly how to do that.

    Hope that helps.

    Paul

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

    There is some spacing issue with the top list of links (space to the right of the name is missing in Firefox/Mozilla). Any clues why?
    First set the padding to be equal on either side.

    e.g.

    Code:
    #subnavlist li.inline {
      display: inline;
      padding-left: 8px;
      padding-right: 8px;
      border-right: 1px solid #fff;
      }
    Then close the whitespace in the html as it is producing nore space in ie. The list elements need to be back to back as follows:
    Code:
    <div id="subnav"> 
      <ul id="subnavlist">
    	<li class="inline"><a href="">About Us</a></li><li 
     class="inline"><a href="">Testimonials</a></li><li 
     class="inline"><a href="">Our Guarantee</a></li><li 
     class="inline"><a href="">Customer Service</a></li><li 
     class="inline"><a href="">Privacy Policy</a></li><li 
     class="inline"><a href="">F.A.Q.'s </a></li><li 
     class="inline"><a href="">Store Info </a></li><li 
     class="inline"><a href="">Contact Us </a></li><li 
     class="last"><a href="">View Cart </a></li>
      </ul>
    </div>
    The above must stay in that format that otherwise ie adds more space between the list items.

    Paul

  4. #4
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I got it looking pretty good except for one small problem... in Mozilla/Firefox the horizontal navigation has a space on the left side pushing the text to the right (making it not centered and sometimes pushing it off the page).

    Any clue what caused this?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Any clue what caused this?
    I had it working locally fine but I deleted the code last night. Do you have an updated link and I'll take a look.

    (I won't be back online until this evening though)

    Paul

  6. #6
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It's http://www.2bigfeet.com/2bfnew/

    It's not that big of a deal, not a large % use mozilla/firefox but it's growing (and we probably won't launch this design for a week anyway)

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

    Mozilla uses padding for its default indent in lists whereas ie uses margin so you need to set both explicitly.

    This should even things up

    Code:
    #subnavlist {
     margin: 0;padding:0;
     white-space: nowrap;
     height: 1.8em;
     overflow: hidden;
     line-height:1.8em;
     }
    Hope that helps.

    Paul


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
  •