homepage Welcome to WebmasterWorld Guest from 54.196.196.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Help with dropdown in IE7
damiantaylor




msg:4316158
 7:44 am on May 23, 2011 (gmt 0)

Hi guys,
I've created a css dropdown that works perfectly in IE8 and FireFox but doesn't appear in IE7 :(
The site is at [snowrepublic.co.uk...] and the CSS is as follows:

#main-nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; FONT: 1.4em Arial Narrow; WIDTH: 750px; PADDING-TOP: 0px
}
#main-nav UL {
POSITION: relative
}
#header-nav {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header-nav LI {
FLOAT: left; LIST-STYLE-TYPE: none; HEIGHT: 34px
}
#header-nav LI A.current {
BACKGROUND-POSITION: 100% -34px
}
.nav-button-home {
DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 1.1em; BACKGROUND: url(../images/navBlack.png) no-repeat right top; WIDTH: 35px; COLOR: #fff; LINE-HEIGHT: 30px; HEIGHT: 34px; TEXT-DECORATION: none
}
.nav-button {
PADDING-RIGHT: 14px; DISPLAY: block; PADDING-LEFT: 14px; FONT-WEIGHT: bold; FONT-SIZE: 1.1em; BACKGROUND: url(../images/navBlack.png) no-repeat right top; PADDING-BOTTOM: 0px; COLOR: #fff; LINE-HEIGHT: 30px; PADDING-TOP: 0px; HEIGHT: 34px; TEXT-DECORATION: none
}
.nav-button:visited {
COLOR: #fff
}
.nav-button:hover {
COLOR: #fff
}
.nav-button-sale {
PADDING-RIGHT: 14px; DISPLAY: block; PADDING-LEFT: 14px; FONT-WEIGHT: bold; FONT-SIZE: 1.1em; BACKGROUND: url(../images/navBlack.png) no-repeat right top; PADDING-BOTTOM: 0px; COLOR: #fab400; LINE-HEIGHT: 30px; PADDING-TOP: 0px; HEIGHT: 34px; TEXT-DECORATION: none
}
.nav-button-sale:visited {
PADDING-RIGHT: 14px; DISPLAY: block; PADDING-LEFT: 14px; FONT-WEIGHT: bold; FONT-SIZE: 1.1em; BACKGROUND: url(../images/navBlack.png) no-repeat right top; PADDING-BOTTOM: 0px; COLOR: #fab400; LINE-HEIGHT: 30px; PADDING-TOP: 0px; HEIGHT: 34px; TEXT-DECORATION: none
}
.nav-button-sale:hover {
PADDING-RIGHT: 14px; DISPLAY: block; PADDING-LEFT: 14px; FONT-WEIGHT: bold; FONT-SIZE: 1.1em; BACKGROUND: url(../images/navBlack.png) no-repeat right top; PADDING-BOTTOM: 0px; COLOR: #fab400; LINE-HEIGHT: 30px; PADDING-TOP: 0px; HEIGHT: 34px; TEXT-DECORATION: none
}
.nav {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; Z-INDEX: 1200; BACKGROUND: url(../images/dropdown.png) repeat-x; LEFT: -9999px; WIDTH: 995px; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; TOP: 32px; HEIGHT: 465px
}
#header-nav LI:hover .nav {
LEFT: 0px; POSITION: absolute
}
#header-nav LI UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header-nav LI LI {
CLEAR: left; FLOAT: left; MARGIN: 0px; LIST-STYLE-TYPE: none; HEIGHT: 14px
}
#header-nav LI LI A {
MARGIN: 4px; TEXT-DECORATION: none
}
.nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.nav LI {
MARGIN: 2px 0px; LIST-STYLE-TYPE: none; HEIGHT: 14px
}
.nav LI A {
DISPLAY: block; FONT-SIZE: 11px; COLOR: #000; HEIGHT: 14px
}
.nav LI A:hover {
COLOR: #fab400
}
.nav-col {
FLOAT: left; WIDTH: 141px; HEIGHT: 464px
}
.nav-heading {
POSITION: relative; TOP: 0px; HEIGHT: 28px
}
.nav-heading H3 {
FONT-SIZE: 1.2em; MARGIN: 0px
}
.nav-links {
PADDING-LEFT: 3px; BORDER-LEFT: #ccc 1px solid; POSITION: relative; TOP: 0px; HEIGHT: 438px
}
.nav-brand-links {
PADDING-LEFT: 3px; BORDER-LEFT: #ccc 1px solid; POSITION: relative; TOP: 0px; HEIGHT: 438px
}
.nav-options {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; PADDING-TOP: 15px
}
#nav-body-armour .nav-links {
TOP: 28px
}
#nav-gloves .nav-links {
TOP: 28px
}
#nav-helmets .nav-links {
TOP: 28px
}
.nav .nav-all {
FONT-SIZE: 1em
}
.nav .nav-new {
FONT-SIZE: 1em
}
.nav .nav-sale {
FONT-SIZE: 1em; COLOR: #c00000
}
.nav .nav-featured {
FONT-SIZE: 1em
}
.nav .nav-male {
FONT-SIZE: 1em
}
.nav .nav-female {
FONT-SIZE: 1em
}
.nav .nav-brand {
FONT-SIZE: 1em
}


I know the problem is with the following bit of CSS:

#header-nav LI:hover .nav {
LEFT: 0px; POSITION: absolute
}


If I change this to.....

#header-nav LI:hover .nav {
LEFT: auto
}


....the dropdown appears but it is not left aligned to the side of the page.
Is there any way I can make this work in IE7?

 

damiantaylor




msg:4316187
 10:14 am on May 23, 2011 (gmt 0)

this is sorted. IE 7 needs a margin % so....

#header-nav LI:hover .nav {
LEFT: 0px; MARGIN-LET: 0%; POSITION: absolute
}

....works!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved