September 12th, 2012, 02:27 PM
|
|
Registered User
|
|
Join Date: Sep 2012
Posts: 6
Time spent in forums: 59 m 18 sec
Reputation Power: 0
|
|
|
Icons jumping in firefox
My navigation icons are jumping when I hover over the last one and the dropdown menu appears, but only in FireFox. Also, all but the last icon is pushed down about 5px (see the proper spacing in Chome/IE) and no matter what I've tried, they won't change their position.
1. How do I make them stop jumping?
2. How do I align the non-dropdown icons up a titch?
3. I also need to bump up the dropdown menu about 15px.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Officepal Homepage</title>
<link href="shell-style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="shell-style-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="navigation">
<div class="navmodule">
<div class="logo"></div><!--logo closed-->
<ul class="navmenu">
<li><img src="images/user.png" width="30" height="30" border="0" class="userimage" /><span class="username">Jenny Jones</span></li>
<li><img src="images/icon-notification-inactive.png" width="34" height="30" class="notify" border="0" /><span class="new">13</span></li>
<li><img src="images/icon-home-active.png" width="30" height="30" border="0" /></li>
<li>
<ul class="settingsmenu">
<li><img src="images/icon-settings-inactive.png" width="30" height="30" alt="Settings Icon" />
<ul>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</li>
</ul><!---navmenu closed--->
<div class="clear"></div>
<img src="images/carrot.png" width="60" height="7" class="active-home"/>
</div><!---navmodule closed--->
</div><!---navigation closed--->
<div class="clear"></div>
<div class="spacer2"></div>
<div class="clear"></div>
<div class="askbox">
<div style="float:left;">
<input type="text" name="s" id="ask" class="ask" value=" Ask officepals..." />
</div>
<span class="from">from</span>
<div id="locationcssmenu">
<ul id="location">
<li class="toplast"><a href="#">San Francisco Bay Area<img src="images/dropdown.png" width="12" height="10" border="0" alt="Dropdown Icon" /></a>
<ul>
<li><a href="#" class="location-search"><img src="images/icon-search.png" width="17" height="14" border="0" alt="Search Icon" /> <input name="" type="text" value="Search for your location" class="search-location" /></a></li>
<li><a href="#">Seattle Area</a></li>
<li class="current-location"><a href="#" class="current-location">San Francisco Bay Area</a></li>
<li><a href="#">Chicago Area</a></li>
<li><a href="#">New York City Area</a></li>
</ul>
</li>
</ul>
</div><!--locationcssmenu closed-->
</div><!--askbox closed-->
<div class="contentbox">
<div class="header">Recent Questions</div>
<div class="menu1home">San Francisco Bay Area <img src="images/menudown.png" width="9" height="8" border="0" alt="Menu Down" /></div>
<div class="menu2home"><a href="#.html">My Company (10)</a></div>
<div class="menu3home"><a href="#.html">My Network (20)</a></div>
<div class="menu4home"><a href="#.html">All Over The World (100)</a></div>
<div class="clear"></div>
<div class="questionboxcontent">
<img src="images/userimage-level1.png" width="50" height="50" class="image-level1" border="0" alt="User Icon" />
<div class="text-level1">
<p class="questiontitle">Looking for an Italian restsurant for a customer dinner.</p>
<p class="questionbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper eget et ullamcorper id id orci. Don...<a href="#.html">more»</a></p>
<div class="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
<div class="info">
<ul class="editmenu">
<li class="toplast"><div class="hidden-edit"></div>
<ul>
<li><a href="#">Edit this post</a></li>
<li><a href="#">Delete this post</a></li>
<li><a href="#">Flag this Post</a></li>
</ul>
</li>
</ul>
</div><!--end info div-->
<div class="replyspacer"><img src="images/icon-reply.png" width="19" height="13" class="hidden-reply" border="0" alt="Reply Icon" /><a href="#.html" class="hidden-reply-text">Reply</a></div>
<div class="clear"></div>
<div class="textboxbackground"><input name="" class="answertextbox" value="Be the first to answer..." type="text" /></div>
</div><!--end div text-level1-->
<div class="clear"></div>
</div><!--end questionboxcontent-->
<div class="clear"></div>
<div class="questionboxcontent">
<img src="images/userimage-level1.png" width="50" height="50" class="image-level1" border="0" alt="User Icon" />
<div class="text-level1">
<p class="questiontitle">Looking for an Italian restsurant for a customer dinner.</p>
<p class="questionbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper eget et ullamcorper id id orci. Don...<a href="#.html">more»</a></p>
<div class="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
<div class="info">
<ul class="editmenu">
<li class="toplast"><div class="hidden-edit"></div>
<ul>
<li><a href="#">Edit this post</a></li>
<li><a href="#">Delete this post</a></li>
<li><a href="#">Flag this Post</a></li>
</ul>
</li>
</ul>
</div><!--end info div-->
<div class="replyspacer"><img src="images/icon-reply.png" width="19" height="13" class="hidden-reply" border="0" alt="Reply Icon" /><a href="#.html" class="hidden-reply-text">Reply</a></div>
<div class="clear"></div>
<div class="numberanswers"><a href="#.html">2 Answers <img src="images/arrow-down.png" width="7" height="7" border="0" alt="More" /></a></div>
<div class="clear"></div>
<div class="textboxbackground"><input name="" class="answertextbox" value="Be the first to answer..." type="text" /></div>
</div><!--end div text-level1-->
<div class="clear"></div>
</div><!--end questionboxcontent-->
<div class="clear"></div>
<div class="questionboxcontent">
<img src="images/userimage-level1.png" width="50" height="50" class="image-level1" border="0" alt="User Icon" />
<div class="text-level1">
<p class="questiontitle">Looking for an Italian restsurant for a customer dinner.</p>
<p class="questionbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper eget et ullamcorper id id orci. Don...<a href="#.html">more»</a></p>
<div class="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
<div class="info">
<ul class="editmenu">
<li class="toplast"><div class="hidden-edit"></div>
<ul>
<li><a href="#">Edit this post</a></li>
<li><a href="#">Delete this post</a></li>
<li><a href="#">Flag this Post</a></li>
</ul>
</li>
</ul>
</div><!--end info div-->
<div class="replyspacer"><img src="images/icon-reply.png" width="19" height="13" class="hidden-reply" border="0" alt="Reply Icon" /><a href="#.html" class="hidden-reply-text">Reply</a></div>
<div class="clear"></div>
<div class="numberanswers"><a href="#.html">Hide Answers <img src="images/arrow-up.png" width="7" height="7" border="0" alt="More" /></a></div>
</div><!--text-level1 closed-->
<div class="clear"></div>
<div class="answerboxcontent">
<img src="images/userimage-level1.png" width="35" height="35" class="image-level2" border="0" alt="User Icon" />
<div class="text-level2">
<p class="answerbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper eget et ullamcorper id id orci. Don quam eget quam eget quam eget diam ullamcorper eget diam ullamcorper egetdiam ullamcorpdus...<a href="#.html">more»</a></p>
<div class="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
<div class="info">
<ul class="editmenu">
<li class="toplast"><div class="hidden-edit"></div>
<ul>
<li><a href="#">Edit this post</a></li>
<li><a href="#">Delete this post</a></li>
<li><a href="#">Flag this Post</a></li>
</ul>
</li>
</ul>
</div><!--end info div-->
<div class="replyspacer"><img src="images/icon-reply.png" width="19" height="13" class="hidden-reply" border="0" alt="Reply Icon" /><a href="#.html" class="hidden-reply-text">Reply</a></div>
<div class="clear"></div>
<div class="numbercomments"><a href="#.html">Hide Comments <img src="images/arrow-up.png" width="7" height="7" border="0" alt="More" /></a></div>
<div class="clear"></div>
<div class="textboxbackground"><input name="" class="commenttextbox" value="Comment on the answer.." type="text" /></div>
</div><!-- text-level2 closed-->
<div class="clear"></div>
<div class="commentboxcontent">
<img src="images/userimage-level1.png" width="35" height="35" class="image-level3" border="0" alt="User Icon" />
<div class="text-level3">
<p class="commentbody">Anyone have any suggestions for an upscale Italian restaurant in the Santa Clara area? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et quam eget diam ullamcorper quam eget diam ullamcorper eget quam eget diam ullamcorper eget quam eget et ullamcorper id id or...<a href="#.html">more»</a></p>
<div class="info"><span class="author">by <a href="#.html">Kelly Cartwright</a> 10 minutes ago </span></div>
<div class="info">
<ul class="editmenu">
<li class="toplast"><div class="hidden-edit"></div>
<ul>
<li><a href="#">Edit this post</a></li>
<li><a href="#">Delete this post</a></li>
<li><a href="#">Flag this Post</a></li>
</ul>
</li>
</ul>
</div><!--end info div-->
<div class="replyspacer"><img src="images/icon-reply.png" width="19" height="13" class="hidden-reply" border="0" alt="Reply Icon" /><a href="#.html" class="hidden-reply-text">Reply</a></div>
</div><!-- text-level3 closed-->
<div class="clear"></div>
</div><!-- commentboxcontent closed -->
</div><!-- answerboxcontent closed-->
<div class="text-level1">
<div class="textboxbackground"><input name="" class="answertextbox" value="Answer the question..." type="text" /></div>
</div>
<div class="clear"></div>
</div><!--questionboxcontent closed-->
<p align="center" class="more">More</p>
</div><!--contenbox xlosed-->
<div class="clear"></div>
</body>
</html>
Code:
@charset "UTF-8";
/* CSS Document */
/* ................................................................................BROWSER HACKS */
/*IE*/
.numberanswers{
color:#444;
font-size:12px;
font-weight:bold;
margin-bottom:15px;
float:left;}
.numberanswers a{
color:#444;}
.numbercomments{
color:#444;
font-size:12px;
font-weight:bold;
margin-top:-10px;
margin-bottom:12px;
float:left;}
.numbercomments a{
color:#444;}
.hidden-reply{
margin-left:23px;
position:relative;
font-size:12px;
display:none;
float:left;}
.hidden-reply-text{
margin-left:40px;
margin-top:-1px;
position:relative;
font-size:12px;
display:none;
float:left;}
.hidden-edit {/*hidden edit icon*/
width:14px;
height:14px;
margin:-15px 0px 0px 10px;
display:none;
background-image:url(images/icon-edit.png);}
.active-home{/*carrot for the active page*/
margin-top:-7px;
margin-left:725px;}
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
