Small CSS Menu Positioning problem

Discussion in 'CSS' started by Nima, Jul 13, 2007.

0
  1. #1
    Hey guys,
    I can't figure out why my menu is appearing at the wrong spot...

    The test website is:
    
http://www.pokereagles.com/test/
    Code (markup):

    Here is my code:
    

<div id="wrapper"> 
  <div id="nav"> 
    <ul class="navigation">
      <li><a href="http://www.pokereagles.com/">Hosting Poker Game</a></li>
      <li><a href="http://www.pokereagles.com/poker-rules/">Poker Rules</a></li>
      <li><a href="http://www.pokereagles.com/poker-strategy/">Poker Strategy</a></li>
      <li><a href="http://www.pokereagles.com/poker-movies/">Poker Movies</a></li>
      <li><a href="http://www.pokereagles.com/poker-superstars/">Poker Celebrities</a></li>
      <li><a href="http://www.pokereagles.com/entertainment/">Poker Entertainment</a></li>
      <li><a href="http://www.pokereagles.com/review/">Poker Reviews</a></li>
    </ul>
  </div>
  <div id="content">

All the contents,,,,,
</div>
</div>
    Code (markup):
    Here is my CSS:

    
#nav {
	float: right;
	top: 0;
	right: 10px;
	background: #F6FF61;
	padding-bottom: 50px;
	width: 185px;
}
    Code (markup):

    Any help is apprecaited
     
    Nima, Jul 13, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Why are you mixing floats and positioning?
     
    Dan Schulz, Jul 13, 2007 IP
  3. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #3
    Should I not?

    I don't know
     
    Nima, Jul 13, 2007 IP
  4. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #4
    I changed it to the following and it is still the same:
    
#content {
	float: left;
	margin-right: 220px;
}

#nav {
	float: right;
	background: #F6FF61;
	padding-bottom: 50px;
	width: 185px;
}
    Code (markup):
     
    Nima, Jul 13, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It's not your menu. It's your content that's being pushed down due to a box model problem (everything's adding up to more than 100% which is what's causing the content to drop down).

    One moment, I'm going to dig through the code and see what needs to be changed.
     
    Dan Schulz, Jul 13, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hmm... you have deprecated (obsolete) HTML elements in your page, yet you're using a Strict DOCTYPE. Switch to a Transitional DOCTYPE, then try collapsing your margins and padding on everything, then reset to suit your needs via the universal selector to start:

    
* {
    margin: 0;
    padding: 0;
}
    Code (markup):
     
    Dan Schulz, Jul 13, 2007 IP
  7. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #7
    hmm

    :( I dont know anything about Transitional Doctype...
     
    Nima, Jul 13, 2007 IP
  8. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #8

    Which HTML are you talking about?
     
    Nima, Jul 13, 2007 IP
  9. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #9
    I changed the DOCTYPE to this and still the same:


    
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    Code (markup):
     
    Nima, Jul 13, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    This is the DOCTYPE you should use if you're going to use obsolete (presentational) XHTML code (even if serving said XHTML as HTML) - I also included the opening HTML tag with the required attributes for XHTML syntax:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xml‎ns="http://www.w3.org/1999/xhtml">
    Code (markup):
    By deprecated (obsolete) markup, I meant things like align="center" <font></font> <center></center> and so on.
     
    Dan Schulz, Jul 13, 2007 IP
  11. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #11
    Interesting...
    I just removed the following code from my CSS and it works fine now

    
#content {
	float: left;
	margin-right: 220px;
}
    Code (markup):
     
    Nima, Jul 13, 2007 IP