Forums

Wkevco

Hello,
Newbie to the site and getting familiar with CSS.
I have had a lingering problem with the difference between the way IE and Firefox display my website menu.
First the code:

#modernbricksmenu
{
	height:20px;
	width:100%;
	background:transparent;
	voice-family:inherit;
	text-align:center;
	padding:0;
}

#modernbricksmenu ul
{
	font:bold 11px Arial;
	list-style:none;
	margin:0;
	padding:0;
}

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

#modernbricksmenu a
{
	display:inline-block;
	color:#FFF;
	text-decoration:none;
	letter-spacing:1px;
	background-color:#000;
	border-bottom:1px solid #FFF;
	margin:0 1px 0 0;
	padding:5px 10px;
}

#modernbricksmenu a:hover
{
	background-color:gray;
}

#modernbricksmenu #current a
{
	background-color:#00f;
	border-color:#00f;
}

#modernbricksmenuline
{
	clear:both;
	width:100%;
	height:5px;
	line-height:5px;
	background:#00f;
	padding:0;
}

body,td,th,tr
{
	color:#00f;
	font-size:14pt;
	font-family:verdana, sans-serif;
}

body
{
	background-color:#d4d0c8;
	margin:0;
	padding:12px 30px 4px;
}

h1
{
	font-family:Georgia, \"Times New Roman\", Times, serif;
	font-size:28px;
	color:red;
}

#topofpage
{
	margin:0;
}

And here are the differences:

IE-

http://wkevin.com/img/ie.jpg

Firefox-

http://wkevin.com/img/firefox.jpg

Internet explorer seems to handle this better than Firefox for whatever reason. I would like to have the same result with Firefox.
My site: http://wkevin.com
Any takers?
Thanks,
Kevin

apostrophe

This works in FF, though I'm not sure what it will do to IE (I'm on a Mac). I just got rid of the white bottom border and adjusted the padding.

#modernbricksmenu a {
background-color:#000000;
color:#FFFFFF;
display:inline-block;
letter-spacing:1px;
margin:0 1px 0 0;
padding:5px 10px 2px;
text-decoration:none;
}

Wkevco

"apostrophe" said:
This works in FF, though I'm not sure what it will do to IE (I'm on a Mac). I just got rid of the white bottom border and adjusted the padding.

You just made my day Apostrophe!
It works fine in both IE and Firefox.
Thanks a million, I guess I came to the right place. :mrgreen:

treehouse : what would you like to learn today?

Forums

Website menu displays differently in IE/Firefox