SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member branvanfan's Avatar
    Join Date
    Nov 2003
    Location
    New Haven, CT
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mac IE CSS prob from Ch 11 of sitepoint book

    Greetings. I've attached a screenshot of the result of some CSS I took from ch 11 of the sitepoint CSS book and used in a web page I maintain and am trying to convert to CSS from tables. (http://www.napts.org )

    It displays fine in Safari, but in IE the highlight that appears on hover doesn't extend all the way to the edge of my left column. Here's the CSS for the menu:

    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    ul li a:link, ul li a:visited {
    display: block;
    text-decoration: none;
    width: 88%;
    padding: 6px 6%;
    background-color: #5C6F90;
    font: bold 10pt/1.5 arial, sans-serif;
    color: #fff;
    }
    ul li a:hover {
    background-color: #43616B;
    color: #eee;
    }
    ul li {
    border-top: 1px solid #A5B5C6;
    }

    The HTML for the left column is:

    <div id="leftcontent">
    <ul id=menu>
    <li><a href="index.html">Home</a></li>
    <li><a href="pages/about.html">The Society</a></li>
    <li><a href="pages/membership.html">Membership</a></li>
    <li><a href="pages/newsletter.html">Newsletter</a></li>
    <li><a href="pages/calender.html">Calendar</a></li>
    <li><a href="pages/re_paul_tillich.html">Paul Tillich</a></li>
    <li><a href="pages/meetings.html">Meetings</a></li>
    <li><a href="pages/contact.html">Contact Us</a></li>
    <li><a href="pages/map.html">Site Map</a></li>
    </ul>
    <p>Questions or suggestions about the site? Contact the webmaster.</p>
    </div>

    This is a work in progress so please forgive my sloppiness. Any help would be greatly appreciated!
    Attached Files Attached Files

  2. #2
    SitePoint Member branvanfan's Avatar
    Join Date
    Nov 2003
    Location
    New Haven, CT
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fixed!

    I think I found a fix. I went to the list of CSS design winners at http://contest.prestontalk.com/list/ and looked for examples of designs that didn't seem to break in Mac IE 5...and found a few! (Interestingly, many did break in Mac IE5.) Using info I gleaned from one of the style sheets (thanks to the designer of Gothic, who commented the fix for IE browser) I saw that instead of using a width=88% to compensate for padding in my list (and which IE5 interpreted oddly) I used width=auto. And it worked! Thanks, Redux.


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
  •