SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question width differences in IE/FF

    here's the page: http://www.billbolte.com/test/template.html
    style sheet: http://www.billbolte.com/test/assets...s/style_01.css

    on the nav buttons on the left, i would like them to fit 100% across the width of the left column. I can get it to work in either FF or IE but not both at the same time. what's the trick?

  2. #2
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can someone at least point me in the right direction? i still haven't figured this out...

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

    Sorry I missed your post.

    Change the width in the nav lists and anchors to 130px and remove the margin left 1px from nav ul.
    Code:
    #nav, #nav ul{
     padding: 0 0 0 0;
     margin: 5px 0 10px 0;
     font-size: 12px;
     list-style: none;
     /*float: left;*
     position:relative;
    }
    #nav li{
     height: 25px;
     /*border-left: 1px solid Black;*/
     border-top: 1px solid Black;
     /*border-right: 1px solid Black;*/
     line-height: 22px;
     padding: 0 0 0 0;
     width: 130px;
     height: 25px;
     position:relative;
    }
    Do the same width for the anchor as well.

    Then remove the ie style as shown below as its not really necessary.

    Code:
    * html #outer{/* remove this styleblock*/
     margin-left:127px;
     margin-right:127px;
    }

    and then change left to be -2px as below.

    Code:
    #left {
     position:relative;/*ie needs this to show float */
     width:130px;
     float:left;
     margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
     left:-2px
    }
    That seems to work for me

  4. #4
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul i'll give it a try...

  5. #5
    SitePoint Addict
    Join Date
    Mar 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul I took a look at this layout and when I modified the css with your changes the result for me was that the <p> </p> that sits below the left side navigaton pushes up underneathe that navigation and does not hold its position within FF.

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

    Quote Originally Posted by keithc
    I modified the css with your changes the result for me was that the <p> </p> that sits below the left side navigaton pushes up underneathe that navigation and does not hold its position within FF.
    I'm not quite sure what you mean?

    This is the code with the changes i mentioned above.

    http://www.pmob.co.uk/temp/bbolte.htm

    Where is it coming unstuck?

  7. #7
    SitePoint Addict
    Join Date
    Mar 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Maybe I copied something in wrong or I dont have all the style sheets for the page but this is what I get if I copy the css and the source code off that page along with the changes you noted. In FF it should show that paragraph slide up underneathe the left side navigation links.

    http://ww2.tektown.net:92/NiceLayout.php

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

    Yes you've missed some stuff out here.
    Code:
     
    #nav, #nav ul{
     padding: 0 0 0 0;
     margin: 5px 0 10px 0;
     font-size: 12px;
     list-style: none;
     /*float: left;*
     position:relative;
    }
    }
    #nav li{
     height: 25px;
     /*border-left: 1px solid Black;*/
     border-top: 1px solid Black;
     /*border-right: 1px solid Black;*/
     line-height: 22px;
     padding: 0 0 0 0;
     width: 130px;
     height: 25px;
     position:relative;
    }
    You missed the finishing slash off the css comments which makes all the middle section of that code become a comment. You also have an extra bracket which will kill mozilla also.

    Code:
    #nav, #nav ul{
     padding: 0 0 0 0;
     margin: 5px 0 10px 0;
     font-size: 12px;
     list-style: none;
     /*float: left;*/
     position:relative;
    }
    /* just one bracket will do */
    #nav li{
     height: 25px;
     /*border-left: 1px solid Black;*/
     border-top: 1px solid Black;
     /*border-right: 1px solid Black;*/
     line-height: 22px;
     padding: 0 0 0 0;
     width: 130px;
     height: 25px;
     position:relative;
    }
    and there you go

  9. #9
    SitePoint Addict
    Join Date
    Mar 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks 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
  •