SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float issues with ie

    Hi

    I don't know whether anybody has came across this problem or would be able to tell me where I'm going wrong but I'm at breaking point with this issue.

    The navigation on my site, which consists of floats works across Firefox pc & mac, Safari & Explorer on the mac, yet on Explorer on the pc I get a stepping effect. But if I remove the links, the floats line up as they should.

    I'd really appreciate some advice as I'm quite novice with markup.

    http://www.jamiegregory.co.uk

    Cheers
    Jamie

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Jamie,
    Welcome to Sitepoint!

    I think you'll find the problem gets fixed if you also float the li elements along with the a elements.
    Code:
    .about, .work, .contact { float: left;}
    Also, I would recommend using standard text and a background image for the vertical lines - a little more accessible - Though if I know graphic designers it's all about the pixels

    You can simplify the following markup
    Code:
    .work A:link {text-decoration: none; float: left; width: 100px; height: 133px; border: 0; margin: 0; padding: 0; background-position: 0 0; background-image: url(images/navigation/work_2up.gif)}
    .work A:visited {text-decoration: none; float: left; width: 100px; height: 133px; border: 0; margin: 0; padding: 0; background-position: 0 0; background-image: url(images/navigation/work_2up.gif)}
    .work A:hover {text-decoration: none; float: left; width: 100px; height: 133px; border: 0; margin: 0; padding: 0; background-position: 0 -133px; background-image: url(images/navigation/work_2up.gif)}
    .work A:active {text-decoration: none; float: left; width: 100px; height: 133px; border: 0; margin: 0; padding: 0; background-position: 0 0; background-image: url(images/navigation/work_2up.gif)}
    
    
    =
    
    .work a {display: block; float: left; width: 155px; height: 289px; border: 0; padding: 0; background-position: 0 0; background-image: url(images/navigation/work_2up.gif)}
    .work a:hover, .work a:focus { background-position: -133px 0; }
    Last edited by markbrown4; Jan 5, 2007 at 06:15.

  3. #3
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks for your help markbrown4, I'll give that go.

  4. #4
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked a treat. Thanks again.


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
  •