SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: IE6 Issue

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 Issue

    http://test.nicktoye.co.uk/bzmarketi...lobal-network/

    Now you can see I have a nice world map. In Safari and FF it works fine. The outlines are to show the elements. Red for the map, and yellow is for the hidden list, well I say hidden, its list elements are pushpins on the map.

    Now my issue is obviously with IE6. For some reason, nations like Iceland, Czech, El Salvador and Guatemala - are all 11px by 11px blocks. For some reason they are showing the rollover state too. But when I change the positioning of the background to match the hover state it only shows the hover state, so 0 -11px shows the hover state. 0 0 shows the normal state plus half of the hover state. Why does it do that?

    Second issue is the list in IE6 is taking up space below the map and thus causing a gap to appear between the map and the details that are displayed when the map is interacted with.

    Any help would be most appreciated.

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've not had chance to check this but suspect this is the problem.

    IE6 won't render any element smaller in height than it's base font size. Therefore if you specify a height: 11px but the base font is larger than this then the element will remain at a larger size.

    The fix I usually use for this is to set font-size: 0; on any elements that I'm setting a small height so that it can collapse to the specified height.

    As for the other problem, it seems as though IE6 is taking up space for each menu item due to the text being indented.

    You might be able to get around this by setting the display of the list to inline for IE6 alone.

    Try adding the following line...

    Code:
    * html div#worldMap li {
    	display: inline;	
    }
    I'm not sure whether this will conflict with your other styles as I can't see your images when trying this locally but give it a try.

    I'd usually do image replacement with a span though and you might find this useful...

    CSS Image Replacement

    Hope that helps.

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I discovered this ten mins ago.

    Seems simple now doesn't it.

    Thanks


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
  •