SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    London
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and Mac IE5...

    Hi folks,

    I am in the process of building a site that requires high accessibility standards, and in line with this have embarked on building the navigation bar using CSS. The layout (using a series of ULs and LIs) renders perfectly in IE/Mozilla on the PC, but on a MAC using IE5 it goes all messy, with the navbars all over the place.

    There's probably a simple fix out there, but I'm pretty lost at the moment! I've provided a link below to a screenshot showing two versions of the same file, one in Safari (which renders fine) and the other in IE5.

    http://www.mook.co.uk/public/mac_ie_and_safari.gif

    If anyone can help, it would be much appreciated!

    Cheers
    Rick

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The screenshots are helpful, but you should also post your HTML and CSS code so we can find out exactly what's wrong.

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    London
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    URL for

    Hi,

    I guess you're right, it may help

    http://www.mook.co.uk/public/youth_n...ticlepage.html

    Thanks
    R

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

    I haven't had time to look at this properly but it seems that the orange navbar can be brought inline with the following code;
    Code:
    #nav li {
    float: left;
    display: block;
    position:relative;
    }
    #nav ul ul {position:absolute; left:0; top:-10px; margin:3.7em 0 0 11px; width:58.5em; font-weight:normal;z-index:100;}
    
    #breadcrumb {
    font-size: 0.65em;
    color: #333; 
    padding: 0.4em 0;
    margin: 4.5em 0 10px 10px;clear:both}
    You will have to give iepc and mozilla slightly different margin offsets as they are different. You can use the existing mac hiding techniques to hide the styles etc.

    However I think the problem is something to do with mac liking widths on its floats and its problem with positioning things correctly. (I don't use my mac enough to get to know these bugs I'm afraid.)

    see here for some more bug info.

    http://www.macedition.com/cb/ie5macbugs/

    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
  •