SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird CSS problem

    Got a weird CSS error I don't understand while trying to move a site from tables to CSS only.

    The site is Insurance Daily:
    http://www.insurancedaily.co.uk/

    When I click any nav links, the site displays fine in IE7, but in Firefox the content is shunted down below the left hand nav and the bottom border doesn't display in the header.

    The weird thing is, if I then refresh the browser, the content moves back into place and the header is corrected.

    However, just left clicking any link (and hlding) brings everything back into line as well. Very weird.

    Not seen a CSS issue like this before - any pointers very very welcome.
    Internet Business Forums - free business help & advice

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixing the validation errors may well fix the problem also.

  3. #3
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope - all that tells me is that it doesn't like the feed data.
    Internet Business Forums - free business help & advice

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You have a massive horizontal scrollbar in firefox caused by the 100% width in these elements.

    Code:
    div#innerWrapper #midContent #related ul li.head {
        width:100%;
        padding:2px 0 2px 2px;
        background:#ffffff;
        color:#333333;
    text-transform: uppercase;
    }
    
    div#innerWrapper #rhtContent .boxes ul li.head{
        width:100%;
        padding:2px 0 2px 2px;
        background:#ffffff;
        color:#333333;
    text-transform: uppercase;
    font-weight: bold;
    }
    div#innerWrapper #midContent #related ul li.head {
        width:100%;
        padding:2px 0 2px 2px;
        background:#ffffff;
        color:#333333;
    text-transform: uppercase;
    }
    Remove the widths from the above elements and see if it makes a difference.

    I couldn't see any dropping problem in Firefox though, although in IE6 the layout is completely broken.

  5. #5
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the reply, Paul - that's exactly what was causing the Firefox issue.

    Funny, I always had it in my head that mixing width values in % and px caused problems for Macs rather than PC's. You live and learn.

    Will attempt to isolate issues with IE6 - if necessary, recode where possible. It doesn't sound pretty, though I'm not able to view the site in IE6 as yet.
    Internet Business Forums - free business help & advice


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
  •