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 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    tricky trouble with css on spry top navigation menu

    I am having some trouble with this site. I'm trying to have the top navigation bar extend all the way across the page (the medium brown color) rather than only going the length of the top nav items, and I want it to show up with About Us first, and Media last aligned to the right (in different browsers it shows different orders and alignment). Also, I would like there to be no extra white space below the top nav banner before the picture.

    Can someone help me? What do I need to do differently in the css/html?

  • #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 knightrider01,
    Try making these changes to your CSS -
    Code:
    #MenuBar1 {
    	background: #6f574a;
    width: 780px;
    
    }
    .topnav {
    	background: #847a6a;
    height: 38px;
    }
    .content {
    	padding: 0;
    	width: 780px;
    }
    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

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That worked awesome for making the color extend across the topnav banner. Thank you, thank you!

    But I still have two more questions shown above:
    -Some browsers have the topnav right aligned with "About Us" first and "Media" last (which is what I want), and others reverse them and left align them. How do I make this consistent across various browsers?
    -Second, I would like there to be no extra white space below the top nav banner before the picture. How do I fix this?

  • #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
    -Some browsers have the topnav right aligned with "About Us" first and "Media" last (which is what I want), and others reverse them and left align them. How do I make this consistent across various browsers?
    You have both in there. Most browsers see the float: right; and there is some weirdo hack f/loat: left; in there that others see.
    The li's are going to be ordered different if you float them left or right.
    What does it look like if you just lose the browser hacks?


    -Second, I would like there to be no extra white space below the top nav banner before the picture. How do I fix this?
    Umm, I think if you lose that top padding in .content ... like I said in my first post.
    Code:
    #MenuBar1 {
    	background: #6f574a;
    width: 780px;
    
    }
    .topnav {
    	background: #847a6a;
    height: 38px;
    }
    .content {
    	padding: 0;
    	width: 780px;
    }
    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:

    knightrider01 (12-18-2010)

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I soooo appreciate your help! Everything fixed from this thread. Much, much appreciated!


  •  

    Tags for this Thread

    Posting Permissions

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