links different in firefox/IE

[kurazi]

hey guys, i have a problem. im new to css, ive never even read a book on it (which i know i need to now) but i still decided to try and make a site out of it. right now, the problem i am having is the month links on this page <snip>
look different in firefox, than they do internet explorer. the problem is, it is taking the css for the links from another div(#modernbricksmenu), and using that instead of what i thought(#info). im not sure what im doing wrong in the structure, but im sure it is something. does anyone have any suggestions as to what i am doing wrong?

here is the css

body,td,th {
color: #333333;

}

#wrapper {
width: 920px;
margin-left: auto;
margin-right: auto;
height: 740px;
background-color: #FFFFFF;

}

#Layer1 {
position:absolute;
left:1px;
top:151px;
width:221px;
height:163px;
z-index:1;
}
#content {
margin: 10px 10px 0px 10px;
width: 900px;
position: absolute;
background-color: transparent;
height: 162px;

}

#blue {
width: 227px;
position: absolute;
background: #000099 url(shadow.jpg) right no-repeat;
height: 551px;
z-index: 3;
margin: 152px 0px 0px 22px;
left: 2px;
top: 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform:uppercase;
}

#blue a:link{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#blue a:visited{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;

}

#blue a:hover{
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#blue a:active{ /*currently selected tab*/
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#modernbricksmenu{
padding: 0;
width: 900px;
position: absolute;
margin-top: 220px;
voice-family: "\"}\"";
voice-family: inherit;
left: -1px;
top: -12px;
height: 525px;
}

#modernbricksmenu ul{
font: bold 12px Arial, Helvetica, sans-serif;
margin:0;
margin-left: 270px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: #000099; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #f1f125; /*Brown color theme*/
border-color: #f1f125;
color: #000000;
}

#modernbricksmenuline{
width: 900px;
height: 486px;
background: #f1f125;
z-index: 2;

}

#info{
width: 598px;
height: 431px;
margin: 30px 43px 30px 260px;
background-color: #FFFFFF;
overflow: auto;
left: 17px;
top: 27px;
z-index: 1;
font-family:Verdana, Arial, Helvetica, sans-serif;
position: absolute;
clear: none;
font-size: 12px;
}
}

#info a:link{
color: #333333;
font-size: 12px;
background-color:#FFFFFF;
padding: 0;
border: 0;
margin: 0 0 0 0;
text-decoration: none;
}

#info a:visited{
color: #333333;
font-size: 12px;

background-color:#FFFFFF
padding: 0;
padding: 0;
border: 0;
background-color: #FFFFFF;
margin: 0 0 0 0;
text-decoration: none;
}

#info a:hover{
color: #666666;
font-size: 12px;

background-color:#FFFFFF
padding: 0;
padding: 0;
border: 0;
background-color: #FFFFFF;
margin: 0 0 0 0;
text-decoration: none;
}

info#n a:active{ /*currently selected tab*/
color: #333333;
font-size: 12px;

background-color:#FFFFFF
padding: 0;
padding: 0;
border: 0;
background-color: #FFFFFF;
margin: 0 0 0 0;
text-decoration: none;
}

#blueblock{
width: 160px;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Arial, sans-serif;
font-size: 90%;
color: #333;
position: absolute;
left: 32px;
}

* html #blueblock{ /*IE 6 only */
w\idth: 115px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 38px;
text-decoration: none;
width: 100%;
color: #000000;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
color: #FFFFFF;
background-image:url(play.gif);
background-repeat: no-repeat;
}

[edited by: SuzyUK at 8:36 am (utc) on Jan. 10, 2008]
[edit reason] Please No URI's [/edit]

[Setek]

Your problem is simple: at the end of the closing bracket for

#info

, you have two brackets instead of one.

#info {

...

}
}

Remove the second bracket and it will work fine.

Just as a simple checker, try to validate all your documents: html and css.

W3C's CSS Validator [jigsaw.w3.org]
W3C's HTML Validator [validator.w3.org]

It will help you pick up simple spelling mistakes/syntax errors such as this one.

Also, you are not allowed to post URIs like that: it goes against the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

[edit]

I forgot to mention why! Firefox has stricter parsing than IE. Because of the extra closing bracket, Firefox will strip out and not render a few of the rules that follow the bungled syntax, as a precautionary measure to not apply the wrong properties to the wrong rules.

IE continues on its merry way after the bungle, however...

[/edit]

[edited by: Setek at 6:04 am (utc) on Jan. 10, 2008]

[kurazi]

sorry, didn't realise. guess i have alot more reading to do :P
thanks for your help!

[Setek]

No problem :)