SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE-related CSS rolloever woes

    Hi,

    First time poster here and was just wondering if anyone could help me out with a problem I'm having.

    Basically, I've I'm working on a rollover map, which uses this article as a basis, and it works fine, apart from one <li> which IE (in its infinite wisdom) decides to render as being 77px across, despite the fact that in the code it's 39px:

    Here's the map:

    http://www.recycleforstaffordshire.o...d=14&Itemid=42

    and here's the (relevant) css (with loads of lovely IE hacks)

    Any help would be great!

    Code:
    #map {
    	width: 231px;
    	height: 326px;
    	background: url(../images/map.gif) no-repeat;
    	margin: -10px 0 0 0 !important;
    	margin: 0px 0px 0 -5px;
    	overflow: hidden;
    	}
    	
    #map span {
    	display: none;
    	}
    	
    #map li {
    	margin: 0px -40px !important;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	position: relative;
    	}
    	
    #map li, #map a {
    	display: block;
    	text-decoration: none;
    	}
    	
    #newcastle, #newcastle a:link, #newcastle a:visited {
    	height: 95px;
    	width: 70px;
    	top: 41px;
    	left: 7px;
    	z-index: 1;
    	text-decoration: none;
    	}
    	
    #newcastle a:hover {
    	background: transparent url(../images/map.gif) -7px -366px no-repeat;
    	text-decoration: none;
    	}
    	
    #stoke, #stoke a:link, #stoke a:visited {
    	height: 57px;
    	width: 39px;
    	left: 67px;
    	top: -41px !important;
    	top: -43px;
    	z-index: 2;
    	}
    	
    #stoke a:hover {
    	background: transparent url(../images/map.gif) -67px -705px no-repeat;
    	text-decoration: none;
    	}
    	
    #moorlands, #moorlands a:link, #moorlands a:visited {
    	height: 122px;
    	width: 106px;
    	left: 74px;
    	top: -150px !important;
    	top: -154px;
    	}
    	
    #moorlands a:hover {
    	background: transparent url(../images/map.gif) -74px -1305px no-repeat;
    	text-decoration: none;
    	}
    	
    #eaststaffs, #eaststaffs a:link, #eaststaffs a:visited {
    	width: 107px;
    	height: 115px;
    	left: 116px;
    	top: -194px !important;
    	top: -200px;
    	z-index: 2 !important;
    	z-index: 6;
    	}
    	
    #eaststaffs a:hover {
    	background: transparent url(../images/map.gif) -116px -405px no-repeat;
    	text-decoration: none;
    	}
    	
    #lichfield, #lichfield a:link, #lichfield a:visited {
    	width: 92px;
    	height: 91px;
    	left: 127px;
    	top: -223px !important;
    	top: -231px;
    	z-index: 5;
    	}
    	
    #lichfield a:hover {
    	background: transparent url(../images/map.gif) -127px -817px no-repeat;
    	text-decoration: none;
    	}
    	
    #tamworth, #tamworth a:link, #tamworth a:visited {
    	height: 26px;
    	width: 20px;
    	left: 186px;
    	top: -252px !important;
    	top: -262px;
    	z-index: 6;
    	}
    	
    #tamworth a:hover {
    	background: transparent url(../images/map.gif) -186px -553px no-repeat;
    	text-decoration: none;
    	}
    	
    #cannock, #cannock a:link, #cannock a:visited {
    	width: 37px;
    	height: 53px;
    	left: 106px;
    	top: -326px !important;
    	top: -338px;
    	z-index: 3;
    	}
    	
    #cannock a:hover {
    	background: transparent url(../images/map.gif) -106px -1809px no-repeat;
    	text-decoration: none;
    	}
    	
    #south, #south a:link, #south a:visited {
    	height: 143px;
    	width: 85px;
    	top: -384px !important;
    	top: -398px;
    	left: 37px;
    	z-index: 2;
    	}
    	
    #south a:hover {
    	background: transparent url(../images/map.gif) -37px -826px no-repeat;
    	text-decoration: none;
    	}
    	
    #stafford, #stafford a:link, #stafford a:visited{
    	height: 102px;
    	width: 115px;
    	top: -605px !important;
    	top: -621px;
    	left: 18px;
    	z-index: 1;
    	}
    	
    #stafford a:hover {
    	background: transparent url(../images/map.gif) -18px -1074px no-repeat;
    	text-decoration: none;
    	}
    	
    #countymap {
    	width: 231px;
    	height: 326px;
    	float: left !important;
    	float: right;
    	margin-left: 450px !important;
    	margin-left: 0px;
    	}

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

    Welcome to the forums

    Which link are we talking about specifically ?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you are talking about stoke then its because you have 80px margins on any image that is within contentpane. That means that the elemnts parent will be stretched by ie to accomodate the width of the image plus its margins.

    Reduce the margins.
    Code:
    	#stoke a img{margin:0}
    Hope that helps

  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! That's brilliant, cheers! I've been tearing my hair out for almost a week with this! cheers!


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
  •