SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member Richardo P's Avatar
    Join Date
    Dec 2003
    Location
    Newcastle, Selby. UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 :hover double margin bug?

    Hi there,

    My site: http://nafae.sonafuture.co.uk/latest/

    has a strange bug specific to IE6. I'm pretty sure its something to do with the broken box model, but the curious thing is its only rearing its ugly head when you rollover the lvl 1 and lvl 2 nav.

    The bug isthis:

    Page Displays fine.
    User hovers mouse over lvl 1 or 2 nav
    Both lvl 1 and 2 add a margin to their wrapping divs on the side that is closest to the edge of the browser.
    User stops moves mouse away from the nav.
    Nav stays in the new (incorrect) position

    I would appreciate any pointers at all on this.

    Thanks in advance

    Richard

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

    IE doesn't like all those h3's floated.

    Try this code to check if it fixes it for you and if it does then change the h3's to non floated as they don't need to be floated.

    Code:
    h3{float:none!important}

  3. #3
    SitePoint Member Richardo P's Avatar
    Join Date
    Dec 2003
    Location
    Newcastle, Selby. UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess you're not called a guru for nothing.

    Tried it and it imediately fixed the issues.

    Thanks very much

  4. #4
    SitePoint Member Richardo P's Avatar
    Join Date
    Dec 2003
    Location
    Newcastle, Selby. UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    http://nafae.sonafuture.co.uk/news/2/52/

    This takes me back to the original reason I floated so many items.

    In IE6 you can see paragraphs sporadically not filling the area they are in. Perhaps you could point me to the solution for this as well? Thanks in advance.

    Richard

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

    The problem is still the fact that you are floating loads of elements without widths when they don't even need to be floated. IE doesn't like it when floats hold lots of content and they do not have widths defined as following content often gets misplaced.

    Only float elements when you need them floated and use other clearing methods instead (if that was the reason for the floating). At the least just float the main containers and don't float things like paragraphs when they don't need to be floated.

    I think you can fix IE by adding this:

    Code:
    * html #content p{float:none!important;display:block!important;}
    However I think you should perhaps go back and design the content without all those floats (except the ones needed for the structure). Make sure that any containers that are holding complicated content (such as floats) are in "haslayout" mode which can be done by assigning a suitable dimension.

    You have empty divs holding content which is also a worry as that can cause problems with "haslayout".

    Code:
                    </table>
                    </div>
                    <div>
                        <h3>News Title 1 - More info:</h3>
    Why the extra div when its not needed ?

    Apart from your negative float structure the rest of the layout is reasonably simple and you should not be getting these problems if you structure logically and carefully.

    Hope it helps anyway

  6. #6
    SitePoint Member Richardo P's Avatar
    Join Date
    Dec 2003
    Location
    Newcastle, Selby. UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,

    The code you provided didnt work, but with the feedback you gave I was able to find the offending pieces of code and you right as to your diagnosis.

    The problem came from not planning my css well enough and also going back to my dark days of 'trial and error' without 110% understanding what's going on. Not a mistake I plan on making again. Also I'll now be going through all the css for the site with a fine tooth comb and deleting any styling like the floats that are irrelevant.

    Thanks once again,

    Richard


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
  •