/    Sign up×
Community /Pin to ProfileBookmark

Good ole Firefox

Copy linkTweet thisAlerts:
Feb 26.2005

On my slowly coming along [URL=http://www.dustofearth.com]site[/URL], im having a problem with my navigation bar.
In IE its where its supposed to be and everything lines
up correctly. In Firefox it is at the top on my main
container and the rollover effect is outside the navigation
when activated. I know Im missing a hack some where,
or am I.

weellp!
-imnoguru

?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@TriumphFeb 27.2005 — Looks like the problem is with the float: left in your list items.
Copy linkTweet thisAlerts:
@MstrBobFeb 27.2005 — [font=Georgia][COLOR=royalblue]It appears to be the floats in the #box. Try changing it to this:



<i>
</i>#box
{
margin: 20px 15px auto;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: 3px;
background-color: #FFFFFF;
width:351px;
}

#box img
{
margin: auto;
display: block;
border: 0px;
}


If you notice, I removed the float:left;'s and added a width for the #box. It appears to work then in IE and Firefox for me. [/COLOR][/font]
Copy linkTweet thisAlerts:
@imnoguruauthorFeb 27.2005 — That worked perfect, sometimes I get carried away

with my floaters' what can I say? :p

Now one more problem, im going to work on it now

but in IE you notice the rollover staying inside of the

actual link box. Firefox it rolls over the actual border...

strange.

Thanks to both of you,


/*take notes kids, setting width works better in some situations.

Now if your up the river without a paddle, use float!*/

-imnoguru
Copy linkTweet thisAlerts:
@imnoguruauthorFeb 27.2005 — ok interesting,

In IE there was no problem the rollover background-color

stayed within the li box. Now in FF the rollover bckgrd clr

layed over the bottom border of the menu.

To fix, I added padding:

#menu ul li a

{

text-decoration: none;

color: #2F4F4F;

padding: 4px 12px; /* changed to 4px */

margin: 0 auto;

font: 8pt verdana;

}

#menu ul li a:hover

{

text-decoration: none;

color: #2F4F4F;

background-color: #FAEBD7;

padding: 3px 12px 1px; /* wouldn't work with 4 so -1 and added 1 on

} the end */

Just thought I'd post the fix incase someone ran into the prob or had any questions.

-imstaringtobeaguru

<alt='name change'>
×

Success!

Help @imnoguru spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...