Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

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

    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

    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.

  • #2
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oops...the following info might be helpful as well:

    Here's my XHTML for the sidebar menu:

    Code:
    <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:

    Code:
    #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;}
    Last edited by NLdesign; 02-27-2008 at 07:25 PM.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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:
    code could be put here
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    Generally, when you have a list of items like that you want to put them in a UL and LIs.

    Code:
    <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.

  • Users who have thanked sobrien79 for this post:

    NLdesign (02-27-2008)

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    replace these two with the existing and see what happens

    Code:
    #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;}

  • Users who have thanked jcdevelopment for this post:

    NLdesign (02-27-2008)

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sobrien79 View Post
    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.

  • #7
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    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?

  • #8
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    Elements by default only expand enough to fit the contents. Setting a height overrides that behavior.

  • #9
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    So since my floats are viewed as separate from the content, the background won't extend to the true bottom?

  • #10
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    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:
    Code:
    #content {
        min-height: 800px;
    }
    Create a new css file called ie6.css
    Inside ie6.css:
    Code:
    #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:
    Code:
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
    <![endif]-->

  • Users who have thanked sobrien79 for this post:

    NLdesign (02-27-2008)

  • #11
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    Clearing floats is a whole other discussion. Just do a search on that in the forums and you will find plenty of posts.

  • #12
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    To clear your floats you can do this:

    Put this in your style sheet.
    Code:
    .clear {
        clear: both;
    }
    Put this after your content block.
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •