SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Final Straw

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Final Straw

    Today has been a nightmare. Your system is slowing to a complete halt, the ftp uploads when it bloody well feels like it, and then top it all of your nav bar looks crap in IE.

    http://hollymount.psclientarea.com/

    Can anyone see why this works in FF but not in IE. I can't seem to find it, and if I worked for an agency I'm quite liable to go on a rampage and smash up any monitor in my way.

    Thanks for maintaining my sanity.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to set the line-height to be the same as the height for all your anchors and if you set up your CSS this way:

    HTML Code:
    ul#nav li a { 
    display: block;
    height: 21px;
    line-height: 21px;
    }
    you'd only have to edit one line instead of 17.

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, done that, but now I've got a load of space under my main section. When I take the navigation out, the space vanishes. Its like it doubles the space.

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Double Space

    Anyone know why the space beneath the nav is doubled? Only in IE

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

    Ie has a bug in that when absolute elements come before static content it gets all confused and lays the page out incorrectly.

    I always put my absolute elements at the end of the section in which they have a stacking context and this avoids the problem.

    You would need to move the nav as follows.

    Code:
    </div>
    <!-- end of counter -->
    <p class="link"><a href="http://www.primarysite.net">Designed by PrimarySite.net</a></p>
    </div>
    <!-- end of footer -->
    <ul id="nav">
    <li id="homeBtn"><a href="index.asp" class="current">Home</a></li>
    <li id="welcomeBtn"><a href="welcome.asp">Welcome</a></li>
    <li id="aboutusBtn"><a href="aboutus.asp">About Us</a></li>
    <li id="whoswhoBtn"><a href="whoswho.asp">Who's Who</a></li>
    <li id="tourBtn"><a href="tour.asp">Tour</a></li>
    <li id="newsBtn"><a href="news.asp">Latest News</a></li>
    <li id="newslettersBtn"><a href="newsletters.asp">Newsletters</a></li>
    <li id="lettershomeBtn"><a href="lettershome.asp">Letters Home</a></li>
    <li id="calendarBtn"><a href="calendar.asp">Calendar</a></li>
    <li id="galleryBtn"><a href="gallery.asp">Gallery</a></li>
    <li id="yeargroupsBtn"><a href="yeargroups.asp">Year Groups</a></li>
    <li id="clubsBtn"><a href="clubs.asp">Clubs</a></li>
    <li id="curriculumBtn"><a href="curriculum.asp">Curriculum</a></li>
    <li id="kidszoneBtn"><a href="kidszone.asp">Kids Zone</a></li>
    <li id="governorsBtn"><a href="governors.asp">Governors</a></li>
    <li id="ptaBtn"><a href="pta.asp">PTA</a></li>
    <li id="teachersBtn"><a href="teachers.asp">Teachers</a></li>
    </ul>
    </div>
    <!-- end of wrap -->
    </body>
    </html>

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    OK i've done that:

    http://hollymount.psclientarea.com/index.asp

    But now i've still got loads of space below the nav.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    No you haven't

  8. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I meant below the footer I have a load of space. Look at the pics.
    Attached Images Attached Images

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

    You are going about this the wrong way and if we simplify it then it will start working properly

    Absolutely place the nav itself and not all the children. This will save you about 30 lines of code in one go.

    Code:
    ul#nav{position:absolute;left:0;top:0;list-style:none}
    ul#nav li a { 
    display: block;
    height: 21px;
    line-height: 21px;
    }
     
    ul#nav li {
    text-indent: -3000px;
    }
     
    ul#nav li a:hover, ul#nav li a.current {background-position: 0 -21px;}
     
    #homeBtn a {
    width: 125px;
    background: url(http://hollymount.psclientarea.com/_images/homeBtn.gif) no-repeat top left;
    } 
    #welcomeBtn a {
    width: 129px;
    background: url(http://hollymount.psclientarea.com/_...welcomeBtn.gif) no-repeat top left;
    } 
     
    #aboutusBtn a {
    width: 133px;
    background: url(http://hollymount.psclientarea.com/_...aboutusBtn.gif) no-repeat top left;
    } 
     
    #whoswhoBtn a {
    width: 135px;
    background: url(http://hollymount.psclientarea.com/_...whoswhoBtn.gif) no-repeat top left;
    } 
    #tourBtn a {
    width: 135px;
    background: url(http://hollymount.psclientarea.com/_images/tourBtn.gif) no-repeat top left;
    } 
    #newsBtn a {
    width: 135px;
    background: url(http://hollymount.psclientarea.com/_images/newsBtn.gif) no-repeat top left;
    } 
    #newslettersBtn a {
    width: 134px;
    background: url(http://hollymount.psclientarea.com/_...lettersBtn.gif) no-repeat top left;
    } 
     
    #lettershomeBtn a {
    width: 132px;
    background: url(http://hollymount.psclientarea.com/_...ershomeBtn.gif) no-repeat top left;
    } 
    #calendarBtn a {
    width: 128px;
    background: url(http://hollymount.psclientarea.com/_...alendarBtn.gif) no-repeat top left;
    } 
    #galleryBtn a {
    width: 124px;
    background: url(http://hollymount.psclientarea.com/_...galleryBtn.gif) no-repeat top left;
    } 
    #yeargroupsBtn a {
    width: 119px;
    background: url(http://hollymount.psclientarea.com/_...rgroupsBtn.gif) no-repeat top left;
    }
    #clubsBtn a {
    width: 113px;
    background: url(http://hollymount.psclientarea.com/_images/clubsBtn.gif) no-repeat top left;
    } 
    #curriculumBtn a {
    width: 106px;
    background: url(http://hollymount.psclientarea.com/_...riculumBtn.gif) no-repeat top left;
    } 
    #kidszoneBtn a {
    width: 98px;
    background: url(http://hollymount.psclientarea.com/_...idszoneBtn.gif) no-repeat top left;
    } 
    #governorsBtn a {
    width: 89px;
    background: url(http://hollymount.psclientarea.com/_...vernorsBtn.gif) no-repeat top left;
    } 
    #ptaBtn a {
    width: 80px;
    background: url(http://hollymount.psclientarea.com/_images/ptaBtn.gif) no-repeat top left;
    } 
    #teachersBtn a {
    width: 69px;
    background: url(http://hollymount.psclientarea.com/_...eachersBtn.gif) no-repeat top left;
    }
    The positioning has been removed from all those anchors in the code above.

    Next make a stacking context on #main because thats where you want it placed.

    Code:
    #main {
    width: 760px;
    height: 356px;
    background: url(http://hollymount.psclientarea.com/_images/main.jpg) no-repeat top left;
    position:relative;
    }
    Then position the nav html at the end of #main.

    Code:
    <li id="guestbookTeaser"><a href="guestbook.asp">Sign the guestbook</a></li>
    <li id="clubsTeaser"><a href="clubs.asp">Visit the clubs</a></li>
    <li id="tourTeaser"><a href="tour.asp">Take the tour</a></li>
    <li id="yeargroupsTeaser"><a href="yeargroups.asp">Visit the year groups</a></li>
    </ul>
    <ul id="nav">
    <li id="homeBtn"><a href="index.asp" class="current">Home</a></li>
    <li id="welcomeBtn"><a href="welcome.asp">Welcome</a></li>
    <li id="aboutusBtn"><a href="aboutus.asp">About Us</a></li>
    <li id="whoswhoBtn"><a href="whoswho.asp">Who's Who</a></li>
    <li id="tourBtn"><a href="tour.asp">Tour</a></li>
    <li id="newsBtn"><a href="news.asp">Latest News</a></li>
    <li id="newslettersBtn"><a href="newsletters.asp">Newsletters</a></li>
    <li id="lettershomeBtn"><a href="lettershome.asp">Letters Home</a></li>
    <li id="calendarBtn"><a href="calendar.asp">Calendar</a></li>
    <li id="galleryBtn"><a href="gallery.asp">Gallery</a></li>
    <li id="yeargroupsBtn"><a href="yeargroups.asp">Year Groups</a></li>
    <li id="clubsBtn"><a href="clubs.asp">Clubs</a></li>
    <li id="curriculumBtn"><a href="curriculum.asp">Curriculum</a></li>
    <li id="kidszoneBtn"><a href="kidszone.asp">Kids Zone</a></li>
    <li id="governorsBtn"><a href="governors.asp">Governors</a></li>
    <li id="ptaBtn"><a href="pta.asp">PTA</a></li>
    <li id="teachersBtn"><a href="teachers.asp">Teachers</a></li>
    </ul>
    </div>
    <!-- end of main -->
    <div id="footer">
    <div id="counter">

    When you do things logically and simply then they usually work

  10. #10
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All sold out of logic today.

    Cheers Paul, however in my defence, that bug that you mentioned is suspicious by its absence. Never heard of it before, but i will as always make a note.

    Ta


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
  •