...

View Full Version : Firefox eats my a:hover and my background, but IE is fine



NLdesign
02-27-2008, 07:39 PM
For some reason, my site is displaying just fine in IE, but it goes to hell in Firefox (which is disappointing, because I love Firefox).

Here's the site (http://tinyurl.com/36mm7b)

The two biggest problems I'm having:

1. The rollover links on the left column mysteriously fatten and shrink. This doesn't happen in IE.

2. The black background suddenly cuts off and turns white.

If anybody has suggestions, I'd be happy to hear them.

NLdesign
02-27-2008, 07:43 PM
Oops...the following info might be helpful as well:

Here's my XHTML for the sidebar menu:


<div id="sidebar">
<a href="registration.pdf">
<img src="registration.gif" alt="Registration"/>
</a>
<a href="flyer.pdf">
<img src="campflyer.gif" alt="Camp flyer"/>
</a>
<a href="bios.html">
<img src="bios.gif" alt="Coach bios"/>
</a>
<a href="drills.html">
<img src="drills.gif" alt="Drills"/>
</a>
<a href="picturesold.html">
<img src="pictures.gif" alt="Camp pictures"/>
</a>
<a href="history.html">
<img src="history.gif" alt="Next Level history"/>
</a>
<a href="mailto:coachmax@nextlevelbasketball.org">
<img src="email.gif" alt="Email us"/>
</a>


And here's my CSS for the sidebar:


#sidebar {
width: 220px;
float: left;
text-align: left;
padding: 10px 0px;}

#sidebar a {
border: 0px;
color:#000000;}

#sidebar img {
width: 180px;
text-align: left;
padding-left: 40px;
margin-bottom: 5px;
border: 0px;}

#sidebar a:hover {
display: block;
background: url("hover.gif") top left no-repeat;}

jerry62704
02-27-2008, 08:12 PM
Just an FYI. If you click the "#" on the edit bar above your post, you can put the code within the code tags. This allows it to be scrolled independly of the whole page and allows a much smaller amount of real estate to be used.

code could be put here

sobrien79
02-27-2008, 08:16 PM
Generally, when you have a list of items like that you want to put them in a UL and LIs.



<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>


But I think to answer your question, you might want to take the display: block; out of the "#sidebar a:hover" and add it to just the "#sidebar a" declaration.

I do have to say that is the most fascinating thing I've seen today. :)

jcdevelopment
02-27-2008, 08:22 PM
replace these two with the existing and see what happens


#content {
margin-left: 240px;
padding-left: 5px;
padding-right: 5px;
margin-right: 10px;
line-height: 1.4em;
height:800px;}

#sidebar a:hover {
margin-bottom: 5px;
background: url("hover.gif") top left no-repeat;
padding: 10px 0px;}

NLdesign
02-27-2008, 08:23 PM
But I think to answer your question, you might want to take the display: block; out of the "#sidebar a:hover" and add it to just the "#sidebar a" declaration.

I do have to say that is the most fascinating thing I've seen today. :)
Yes! That worked! Thanks so much for the help. I was really confused on that one.

And apologies for just pasting my code here rather than surrounding the code into a block. Didn't realize that was an option. :)

NLdesign
02-27-2008, 08:29 PM
replace these two with the existing and see what happens
I'm not a big fan of setting a height for my background, but it worked. Any idea why it doesn't just automatically fill black on whatever the height of the page is?

sobrien79
02-27-2008, 08:33 PM
Elements by default only expand enough to fit the contents. Setting a height overrides that behavior.

NLdesign
02-27-2008, 08:42 PM
So since my floats are viewed as separate from the content, the background won't extend to the true bottom?

sobrien79
02-27-2008, 08:45 PM
It should also be noted that when you set a height in Firefox, the div won't expand past that. So if your content is greater than 800px, then the content gets cut off. To fix that you want to use min-height. Meaning the height will at least be 800px but will expand if necessary. IE however does not understand min-height. But it does treat height as min-height.

Confused yet? Yes? Good!

Inside nextlevel.css:


#content {
min-height: 800px;
}


Create a new css file called ie6.css
Inside ie6.css:


#content {
height: 800px;
}


Now in the html after you have this line:
<link type="text/css" rel="stylesheet" href="nextlevel.css" />

Add a new line with the following:


<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

sobrien79
02-27-2008, 08:46 PM
Clearing floats is a whole other discussion. Just do a search on that in the forums and you will find plenty of posts.

sobrien79
02-27-2008, 08:51 PM
To clear your floats you can do this:

Put this in your style sheet.


.clear {
clear: both;
}


Put this after your content block.


<div class="clear"></div>


The clear says that there cannot be content floated on both sides of this div. Which puts it automatically after the sidebar and content divs. The side effect is that the allcontent div will now stretch to the cleared div. This extending your black background. And with that you can delete all the height stuff.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum