On my slowly coming along site (<!-- m --><a class="postlink" href="http://www.dustofearth.com">http://www.dustofearth.com</a><!-- m -->), 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
Looks like the problem is with the float: left in your list items.It appears to be the floats in the #box. Try changing it to this:
#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.That worked perfect, sometimes I get carried away
with my floaters' what can I say?
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!*/
-imnoguruok 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'>
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
Looks like the problem is with the float: left in your list items.It appears to be the floats in the #box. Try changing it to this:#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.That worked perfect, sometimes I get carried away
with my floaters' what can I say?
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!*/
-imnoguruok 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'>