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 4 of 4

Thread: Odd margin

  1. #1
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Arrow Odd margin

    I'm building a new page, and I am unable to remove it. Here is the result:
    [IMGhttps://lh5.googleusercontent.com/_jYKDw8mt2P0/TZd5M-nKKZI/AAAAAAAAAz8/ngt8bWuwkPU/s640/css_errors.png[/IMG]
    (I have not yet added this to my server)

    Here is my HTML:
    Code:
    <div id="content2">
    <div class="menunav">
    	<ul> 
    		<li class="green"> 
    			<p><a href="#">Option 1</a></p> 
    		</li> 
    		<li class="yellow"> 
    			<p><a href="#">Option 2</a></p>  
    		</li> 
    		<li class="red"> 
    			<p><a href="#">Option 3</a></p> 
    		</li> 
    		<li class="blue"> 
    			<p><a href="#">Option 4</a></p> 
    		</li> 
    		<li class="purple"> 
    			<p><a href="#">Option 5</a></p> 
    		</li>
    		<li class="green"> 
    			<p><a href="#">Option 6</a></p> 
    		</li> 
    	</ul>
    </div>
    
    <div class="bottomcontent">
    	<div class="sitetab" id="rct">
    		Left content
    	</div>
    	<div class="sitetab" id="sbp">
    		Center content
    	</div>
    	<div class="sitetab" id="mmr">
    		Right content
    	</div>
    </div>
    </div>
    And my CSS is:
    Code:
    div#content2
    	{
    	width:852px;
    	margin:0 auto;
    	background:#FFFFFF
    	}
    /* Menus */
    div.menunav
    	{
    	position: relative;
    	height: 50px;
    	margin: 0px;
    	padding: 0px;
    	background: #CCCCCC
    	}
    div.menunav li
    	{
    	width:100px;
    	height:50px;
    	float:left;
    	text-align:center;
    	overflow:hidden;
    	margin: 0px;
    	
    	}
    div.menunav li p a
    	{
    	text-decoration: none;
    	font-weight: bold;
    	font-family: verdana;
    	color:#FFFFFF
    	}
    div.menunav li p.subtext
    	{
    	text-decoration: none;
    	font-family: comic sans ms;
    	color:#FFFFFF
    	}	
    div.menunav li.green
    	{
    	background:#6AA63B
    	}
    div.menunav li.yellow
    	{
    	background:#FBC700
    	}
    div.menunav li.red
    	{
    	background:#D52100
    	}
    div.menunav li.purple
    	{
    	background:#5122B4
    	}
    div.menunav li.blue
    	{
    	background:#0292C0
    	}
    
    div.bottomcontent 
    	{
    	position: absoulute;
    	overflow:hidden;
    	width: 852px;
    	height: 245px;
    	float: left;
    	background: #ffffff;
    	margin: 4px;
    	-moz-box-shadow: 0px 0px 3px 3px #888;
    	-webkit-box-shadow: 0px 0px 3px 3px#888;
    	box-shadow: 0px 0px 3px 3px #888;
    	-webkit-border-top-left-radius: 10px;
    	-webkit-border-top-right-radius: 10px;
    	-moz-border-radius-topleft: 10px;
    	-moz-border-radius-topright: 10px;
    	border-top-left-radius: 10px;
    	border-top-right-radius: 10px
    	}
    	
    div.sitetab
    	{
    	z-index: 1000;
    	float: left;
    	position:absoulute;
    	bottom: 0;
    	width: 264px;
    	margin: 10px;
    	background: #ff0000;
    	cursor: pointer;
    	-moz-box-shadow: 0px 0px 3px 3px #888;
    	-webkit-box-shadow: 0px 0px 3px 3px#888;
    	box-shadow: 0px 0px 3px 3px #888
    	}
    div.sitetab #rct //"RCT" content
    	{
    	left: 0px
    	right: 568px
    	}
    div.sitetab #sbp //"SBP" content
    	{
    	left: 284px
    	right: 284px
    	}
    div.sitetab #mmr //"MMR" content
    	{
    	left: 568px
    	right: 0px
    	}
    What is causing the space between the top <div> and the menunav?

    Thanks!
    Last edited by Mooseman; 04-02-2011 at 08:39 PM. Reason: Added thumbnail img code previously.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Add the Russ Myer's reset to the top of your css.

    http://meyerweb.com/eric/tools/css/reset/

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Mooseman,
    You must be talking about the default 16px margin on the ul.
    Remove, or adjust to what you need, by adding something like this to your
    CSS - .menunav ul {margin: 0;}
    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:

    Mooseman (04-03-2011)

  • #4
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Excavator View Post
    Hello Mooseman,
    You must be talking about the default 16px margin on the ul.
    Remove, or adjust to what you need, by adding something like this to your
    CSS - .menunav ul {margin: 0;}
    Thanks! Never realized the ul default was 16px.


  •  

    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
    •