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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2004
    Posts
    104
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Big gap on menu due to side divs

    Hey,
    I've placed two divs in and placed them by the the main logo and the content div using relative positioning. This works fine in IE, but in FF, it seems to create a big gap at the start of the menu. I was wondering if someone could help me please, cause I really don't know how to solve this.

    http://gamespecies.co.uk/new/

    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello NeoPuma,
    Valid CSS and markup!! Yay
    That doesn't mean it works though...
    I thought sure it was your onMouse stuff that was scooting it over but when I do this:
    Code:
            <div id="nav_bar">
                <a href>
                    <img src="images/nav_buttons/home_1.jpg" /></a>
    
    <a href><img src="images/nav_buttons/cheats_1.jpg" /></a>
    
    <a href><img src="images/nav_buttons/reviews_1.jpg" /></a>
    
    <a href><img src="images/nav_buttons/releases_1.jpg" /></a>
    
    <a href><img src="images/nav_buttons/downloads_1.jpg" /></a>
            </div>
    No change in FF...



    But, when you pull out your relative postioned header images it centers.
    Delete these for a bit and try it:
    Code:
    #left_banner {
    	width: 150px;
    	position: relative;
    	left: -150px;
    	top: -180px;
    	text-align: left;
    	float: left;
    	height: 280px;
    }
    #right_banner {
    	width: 150px;
    	position: relative;
    	left: 700px;
    	top: -180px;
    	text-align: left;
    	float: left;
    	height: 280px;
    }
    So try this instead:
    Code:
    #left_banner {
    	width: 150px;
    margin: -180px 0 0 -150px;
    	text-align: left;
    	float: left;
    	height: 280px;
    }
    #right_banner {
    	width: 150px;
    margin: -180px 0 0 850px;
    	text-align: left;
    	float: left;
    	height: 280px;
    }
    
    #header {
    	height: 180px;
    	width: 850px;
    }
    #nav_bar {
    	height: 20px;
    	width: 850px;
    margin: -1px 0 0 0;
    	background-image: url(images/nav_bar.jpg);
    	text-align: center;
    }

    And, of course, a better way to do it all.
    • Put the 3 header images back together and center it as the body background
    • Then, use CSS for your rollovers instead of onMouse. (look at the images that do that)That would have the added benefit of taking out the pause when you hover over a button - while it's downloading the hovered image.


    Another CSS rollover example
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    NeoPuma (12-30-2007)

  • #3
    Regular Coder
    Join Date
    Oct 2004
    Posts
    104
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Mate, you're a star!

    Thank-you very much!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Notice the top border is gone on #nav_bar when your page is viewed with FF now.
    koyama is the bug hunter and I'm sure he would know what bug is causing this... I would guess uncolapsing margins (google that) but I'm not sure. Take out the -1px and you can see the menu drops much more than 1px.

    I still say my last solution is the best.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Oct 2004
    Posts
    104
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Thanks, all sorted now. Although, with those images:
    Then, use CSS for your rollovers instead of onMouse. (look at the images that do that)That would have the added benefit of taking out the pause when you hover over a button - while it's downloading the hovered image.
    I've had a look at the links you've sent me, tried to potch around a bit, and haven't really got very far. Was wondering if you could point me in the right direction please?

    Thanks in advance

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello NeoPuma,
    Hope this helps, I'm running out of time today.
    It looks? like you're on the right track with
    Code:
    #nav_1 a {
    	background-image: url(images/01home.jpg);
    	background-position: top;
    }
    #nav_1 a:hover {
    	background-image: url(images/01home.jpg);
    	background-position: bottom;
    }
    but you need to make your button images like this: so there is a top and a bottom to show.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Oct 2004
    Posts
    104
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Mate, I'm grateful for your help, regardless how long you take to answer.
    I now have:
    Quote Originally Posted by CSS
    #nav_1 {
    background: url(images/nav_buttons/home.jpg) top;
    height: 20px;
    width: 90px;
    }
    #nav_1 a {
    background-image: url(images/nav_buttons/home.jpg);
    background-position: top;
    }
    #nav_1 a:hover {
    background-image: url(images/nav_buttons/home.jpg);
    background-position: bottom;
    }
    And the following HTML to go with it - as based on the examples you gave me:
    Quote Originally Posted by HTML
    <div id="nav_1">
    <a href="?p=home"></a>
    </div>
    The problem I'm having now is the images don't change on roll-over, and there's no link to go with them (you can't click them).
    [edit]: They're not center either. Is there a way of doing it without using the <center> tag? text-align: center; doesn't seem to be working here.

    Also done as you said:


    Really appreciate this. Thanks

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    That's an interesting way of doing it. Now why didn't I think of that?

    If you were an optimization zombie you would make it all into one big image and using background-position to do the same thing =P

    Unfortunately he missed something. Let's try again
    Code:
    #nav_1 {
      height: 20px;
      width: 90px;
    }
    #nav_1 a {
      display: block;
      height: 20px;
      width: 90px;
      background: #000 url(images/nav_buttons/home.jpg) bottom left;
    }
    #nav_1 a:hover {
      background-position: bottom;
    }
    And the markup
    Code:
    <div id="nav_1">
      <a href="?p=home" title="Home">Home</a>
    </div>
    I'm sure you'll find a way to make it accessible.
    Last edited by Apostropartheid; 12-31-2007 at 02:07 AM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    CyanLight has it.
    If you follow my example you end up with
    Code:
    /* Navigation Buttons */
    #nav_1 {
    	background: url(images/nav_buttons/home.jpg) top;
    margin: 0 0 0 150px; /*adjust as needed*/
    	height: 20px;
    	width: 90px;
    	float: left;
    }
    #nav_1 a:hover {
    	background: url(images/nav_buttons/home.jpg) bottom;
    display: block;
    	height: 20px;
    	width: 90px;
    }
    #nav_1 a {
    	background: url(images/nav_buttons/home.jpg);
    display: block;
    	height: 20px;
    	width: 90px;
    }
    but CyanLight has trimmed that down nicely.
    I did throw in some margin to move the buttons over a bit.

    p.s. <center> tag is deprecated now. A stricter DocType would not allow it. Better you wrap your site in a container div and center that with margin: 0 auto;
    Last edited by Excavator; 12-31-2007 at 05:11 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    NeoPuma (12-31-2007)

  • #10
    Regular Coder
    Join Date
    Oct 2004
    Posts
    104
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Thank-you so much! You do learn something new everyday


  •  

    Posting Permissions

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