[SOLVED] Possible Padding or Height Issue in IE8+ and Firefox

[k4nt0r]

Hello. As you can see I'm pretty new here. I've been googling the web for fixes on my issue but I had no luck. So I had no choice to but join in, ask the veterans, and hopefully get an answer. Also, I hope I don't offend anyone as I come here trying to get answers for my problem as a newly registered member. In any case, I would like to apologize in advanced.

My Background: I know CSS but I don't know everything. I sometimes manage to pass the cross-browser compatibility depending on difficulty. Cross-browsing is a big issued for me since I pretty much just started doing web design and web programming.

Moving on...Here's my issue. I'm doing a WordPress theme, kinda newbie to it, but somehow I'm stuck with IE8 messed up with the extra (about 2 px) padding, and about 1px on Firefox. It's visible on hover and current. Chrome and Safari seems to work just fine, however. I'm not so much worried about Firefox but IE8 is more bothersome. I would really love to see how to get this done. I would really much appreciate feedbacks and comments from other members here.

Here's images on different browsers.




THE HTML:

<div id="topbar" class="clearfix">
<div id="logo" class="leftcol"></div>
<div id="mainmenu" class="rightcol">
    <div class="top-menu">
        <ul id="menu-top-menu" class="menu">
            <li id="menu-item-17" class="menu-item current-menu-item"><a href="http://localhost:8888/wp/">Home</a></li>
            <li id="menu-item-12" class="menu-item"><a href="http://localhost:8888/deto/portfolio/">Portfolio »</a>
            <ul class="sub-menu">
                <li id="menu-item-38" class="menu-item menu-item-type-post_type"><a href="http://localhost:8888/wp/portfolio/events/">Events »</a></li> 
	        <li id="menu-item-40" class="menu-item"><a href="http://localhost:8888/wp/portfolio/portraits/">Portraits</a></li> 
	        <li id="menu-item-41" class="menu-item menu-item-type-post_type"><a href="http://localhost:8888/deto/portfolio/still-life/">Still-Life</a></li> 
            </ul> 
            </li> 
            <li id="menu-item-13" class="menu-item"><a href="http://localhost:8888/wp/about/">About</a></li> 
            <li id="menu-item-11" class="menu-item"><a href="http://localhost:8888/wp/contact/">Contact</a></li> 
        </ul>
     </div>        
</div>
</div>

The CSS: This was originally from WordPress' default theme called TwentyTen. I'm trying to modify according to my design need.

* {
       margin:0;
       padding:0;
}

#topbar {
	height:55px;
	background:#FFF;
	margin:0;
}
#topbar .logo {
	padding:3px 0 0 10px;
}
#topbar #mainmenu {
	text-transform:uppercase;
	font-family:"Myriad Pro", Myriad, "Trebuchet Ms", Verdana, Arial, sans-serif;
	font-size:.8em;
	letter-spacing:1px;
	margin:0;
}

#mainmenu li {
	list-style:none;
	display:inline-block;
	border-left:1px dashed #272727;
	float:left;
	position: relative;
}

#mainmenu {
	display:block;
	margin:0;
}

div.top-menu ul {
	list-style:none;
}

div.top-menu li {
	display:inline-block;
	position:relative;
}
#mainmenu a {
	display:block;
	text-decoration:none;
	color:#272727;
	width:100px;
	padding:20px 10px 19px 10px;
	margin:0;
}
#mainmenu ul ul {
	display:none;
	position:absolute;
	width:100px;
	top:56px;
	left:-1px;
	z-index:99999;
	padding:0;
}
#mainmenu ul ul li {
	min-width:auto;
}
#mainmenu ul ul ul {
	top:0;
	left:100%;
		height:55px;
}
#mainmenu ul ul a {
	background:#c2dfdc;
	padding:5px 10px;
	border-bottom:1px solid #FFF;
	line-height:1em;
}
#mainmenu li:hover > a {
	background:#c2dfdc;
	color:#FFF;
	padding:20px 10px 19px 10px;
	margin:0;
}
#mainmenu ul ul :hover > a {
	background:#c2dfdc;
	color:#FFF;
	padding:5px 10px;
}
#mainmenu ul li:hover > ul {
	display:block;
}
#mainmenu ul li.current_page_item > a,
#mainmenu ul li.current-menu-ancestor > a,
#mainmenu ul li.current-menu-item > a,
#mainmenu ul li.current-menu-parent > a {
	background:#c2dfdc;
	color:#FFF;
	padding:20px 10px 19px 10px;
}
* html #mainmenu ul li.current_page_item a,
* html #mainmenu ul li.current-menu-ancestor a,
* html #mainmenu ul li.current-menu-item a,
* html #mainmenu ul li.current-menu-parent a,
* html #mainmenu ul li a:hover {
	background:#c2dfdc;
	color:#FFF;
	padding:20px 10px 19px 10px;
}

[chrishirst]

http://welovecss.com/showthread.php?p=21487#post21487

[k4nt0r]

Originally Posted by chrishirst

http://welovecss.com/showthread.php?p=21487#post21487

Seriously. Err I guess I'm just gonna have to deal with it.
Thanks for the response, christhirst.

EDIT:
I was persistent, so I thought I'd try to again using the <!-- [if IE]> hack, and I found the solution to my problem.

For IE 7 and up:
On the <head>, I used the <!-- [if IE]> hack and included the CSS selector html>body {}.
Example:

<!--[if IE]>
	<style type="text/css">
	html>body #mainmenu li:hover > a {
	background:#c2dfdc;
	color:#FFF;
	padding:20px 10px 17px 10px;
	margin:0;
	}
	html>body #mainmenu ul li.current_page_item > a,
	html>body #mainmenu ul li.current-menu-ancestor > a,
	html>body #mainmenu ul li.current-menu-item > a,
	html>body #mainmenu ul li.current-menu-parent > a {
	background:#c2dfdc;
	color:#FFF;
	padding:20px 10px 17px 10px;
	}
	</style>
<![endif]-->

For Firefox 3 and up:
I used these selector @-moz-document url-prefix() {
Example:

@-moz-document url-prefix() {
#mainmenu li:hover > a {
	background:#c2dfdc;
	color:#FFF;
	padding:20px 10px 18px 10px;
	margin:0;
}
#mainmenu ul li.current_page_item > a,
#mainmenu ul li.current-menu-ancestor > a,
#mainmenu ul li.current-menu-item > a,
#mainmenu ul li.current-menu-parent > a {
	background:#c2dfdc;
	color:#FFF;
	padding:20px 10px 18px 10px;
}
}

Source: http://perishablepress.com/press/200...ns-of-firefox/

[chrishirst]

[if IE]> hack

Is NOT a "hack"

They are conditional comments, "hacks" are the extra or invalid characters in style rules that exploit or trigger a browser 'bug'.


Congrats on finding a fix but they are not always that simple to correct, and it is far too easy to get "sucked in" to "fixing" a "problem" that only you actually care about or even know about.

Been there, done it