CSS Fix (500-700 credits)

[Christopher]

I need a fix for the menu problem you can see in the screenshot at http://exchangecore.com/ieProblem.jpg

The menu should look like it does in opera (to the right).

CSS code is below.
I will pay 500 credits for a fix. 700 if one is given to me by 7:30pm CST.

* {padding:0; margin:0;}

a:link {
	color: #FFFFCC;
}

a:visited {
 	color: #FFFFCC;
}

a:hover {
	color: #FFFF99;
}

body {
	background: #63b8d7 url(images/background.png) repeat-x;
}

#wrap {
	width: 698px;
	margin:auto;
}

#wrap #header {
 	position: relative;
	margin-top: 117px;
	height: 99px;
	background: #639fbb url(images/header.png) no-repeat;
}

#wrap #header #left {
	float: left;
	width: 317px;
	height: 99px;
	font: 30px Century Gothic, cursive;
	text-align: center;
	line-height: 99px;
	color: white;
}

#wrap #header #right {
 	float: right;
	width: 380px;
	height: 99px;
	font: 14px Century Gothic, cursive;
	text-align: center;
	line-height: 99px;
	color: white;
}

#wrap #menu {
 	position: relative;
 	width: 698px;
	height: 33px;
	background: #5998b6;
}

#wrap #menu #top {
 	position: relative;
 	width: 698px;
	height: 1px;
	background: url(images/menuTop.png) no-repeat;
}

#wrap #menu ul {
 	position: relative;
 	height: 31px;
 	margin-top: 3px;
	padding-left: 0;
	margin-left: 0;
	color: white;
	float: left;
	width: 100%;
}

#wrap #menu ul li {
	display: inline;
 }

#wrap #menu ul li a {
	padding: 0.2em 1em;
	color: white;
	text-decoration: none;
	float: left;
	border-right: 1px solid #5791ac;
}

#wrap #menu ul li.last a {
	border-right: 0px;
}

#wrap #menu ul li a:hover {
	background-color: #80cef3;
	color: #fff;
}

#wrap #menu #bottom {
 	position: relative;
 	margin-top: 31px;
 	width: 698px;
	height: 1px;
	background: url(images/menuBottom.png) no-repeat;
}

#wrap #content {
 	position: relative;
 	width: 698px;
	background: #4f92b1;
}

#wrap #content #leftS {
 	position: absolute;
 	width: 1px;
 	height: 110px;
 	background: url(images/side.png) no-repeat;
 	bottom: 0px;
}

#wrap #content #text {
 	padding: 5px 10px 5px 10px;
	color: white;
}

#wrap #content #rightS {
 	position: absolute;
 	width: 1px;
 	height: 110px;
 	background: url(images/side.png) no-repeat;
 	bottom: 0px;
 	right: 0px;
}

#wrap #content #bottom2 {
 	position: absolute;
 	width: 698px;
 	height: 1px;
 	background: url(images/contentBottom.png) no-repeat;
}

#wrap #copyright {
 	padding-top: 10px;
 	width: 698px;
	text-align: center;
	color: white;
	font-size: small;
}

 

[GTKILLA]

Umm it works fine in my internet explorer........ maybe its ie not your css

See look http://img341.imageshack.us/img341/2729/iekp2.jpg proof

ie is messed up crap lol

mines is Internet Explorer 8 maybe if you don't have it you can upgrade, I didnt have any problems yet only because theres a 1 in 500 chance I use IE.

 

[De.velo.per]

I need a fix for the menu problem you can see in the screenshot at http://exchangecore.com/ieProblem.jpg

The menu should look like it does in opera (to the right).

CSS code is below.
I will pay 500 credits for a fix. 700 if one is given to me by 7:30pm CST.

* {padding:0; margin:0;}

a:link {
    color: #FFFFCC;
}

a:visited {
     color: #FFFFCC;
}

a:hover {
    color: #FFFF99;
}

body {
    background: #63b8d7 url(images/background.png) repeat-x;
}

#wrap {
    width: 698px;
    margin:auto;
}

#wrap #header {
     position: relative;
    margin-top: 117px;
    height: 99px;
    background: #639fbb url(images/header.png) no-repeat;
}

#wrap #header #left {
    float: left;
    width: 317px;
    height: 99px;
    font: 30px Century Gothic, cursive;
    text-align: center;
    line-height: 99px;
    color: white;
}

#wrap #header #right {
     float: right;
    width: 380px;
    height: 99px;
    font: 14px Century Gothic, cursive;
    text-align: center;
    line-height: 99px;
    color: white;
}

#wrap #menu {
     position: relative;
     width: 698px;
    height: 33px;
    background: #5998b6;
}

#wrap #menu #top {
     position: relative;
     width: 698px;
    height: 1px;
    background: url(images/menuTop.png) no-repeat;
}

#wrap #menu ul {
     position: relative;
     height: 31px;
     margin-top: 3px;
    padding-left: 0;
    margin-left: 0;
    color: white;
    float: left;
    width: 100%;
}

#wrap #menu ul li {
    display: inline;
 }

#wrap #menu ul li a {
    padding: 0.2em 1em;
    color: white;
    text-decoration: none;
    float: left;
    border-right: 1px solid #5791ac;
}

#wrap #menu ul li.last a {
    border-right: 0px;
}

#wrap #menu ul li a:hover {
    background-color: #80cef3;
    color: #fff;
}

#wrap #menu #bottom {
     position: relative;
     margin-top: 31px;
     width: 698px;
    height: 1px;
    background: url(images/menuBottom.png) no-repeat;
}

#wrap #content {
     position: relative;
     width: 698px;
    background: #4f92b1;
}

#wrap #content #leftS {
     position: absolute;
     width: 1px;
     height: 110px;
     background: url(images/side.png) no-repeat;
     bottom: 0px;
}

#wrap #content #text {
     padding: 5px 10px 5px 10px;
    color: white;
}

#wrap #content #rightS {
     position: absolute;
     width: 1px;
     height: 110px;
     background: url(images/side.png) no-repeat;
     bottom: 0px;
     right: 0px;
}

#wrap #content #bottom2 {
     position: absolute;
     width: 698px;
     height: 1px;
     background: url(images/contentBottom.png) no-repeat;
}

#wrap #copyright {
     padding-top: 10px;
     width: 698px;
    text-align: center;
    color: white;
    font-size: small;
}

What the other guy said, it works fine on IE here as well.

 

[Christopher]

Sorry. I meant IE6. It works fine in 7 and 8.

 

[GTKILLA]

IE6 Is messed up then =P

can be a bug or its just like that....

 

[xPlozion]

but with a large population still using internet explorer 6, it's always good to break your back fixing msie's bugs.

i remember using li's for link nav was a pain to setup, and i eventually went w/ css image rollovers instead.

 

[Christopher]

It is not the li. I removed it and the area was still too big.

 

[Christopher]

Never mind. I found a fix finally.