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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bottom-border Overlap

    I'm sure this is a really simple question, but I can't figure out how to fix this:



    As you can see, the bottom-border is overlapping the menu item. How do I stop the bottom border at about 5 px to the left of the box? Here's my CSS:

    Code:
    <!--
    
    #top-bar {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:718px;
    	height:14px;
    }
    
    #header {
    	position:absolute;
    	left:0px;
    	top:14px;
    	width:718px;
    	height:133px;
    }
    
    #leftside-1 {
    	position:absolute;
    	left:0px;
    	top:147px;
    	width:56px;
    	height:75px;
    }
    
    #button1 {
    	position:absolute;
    	left:56px;
    	top:147px;
    	width:94px;
    	height:75px;
    }
    
    #button2 {
    	position:absolute;
    	left:150px;
    	top:147px;
    	width:96px;
    	height:75px;
    }
    
    #button3 {
    	position:absolute;
    	left:246px;
    	top:147px;
    	width:96px;
    	height:75px;
    }
    
    #under-header {
    	position:absolute;
    	left:342px;
    	top:147px;
    	width:376px;
    	height:75px;
    }
    
    #left-side2 {
    	position:absolute;
    	left:0px;
    	top:222px;
    	width:56px;
    	height:82px;
    }
    
    #bars {
    	position:absolute;
    	left:56px;
    	top:222px;
    	width:603px;
    	height:82px;
    }
    
    #rightside-1 {
    	position:absolute;
    	left:659px;
    	top:222px;
    	width:59px;
    	height:82px;
    }
    
    #content-area {
    	position:absolute;
    	left:0px;
    	top:304px;
    	width:718px;
    	height:287px;
    	background:url(images/content_area.gif)
    }
    
    #index-12 {
    	position:absolute;
    	left:0px;
    	top:591px;
    	width:13px;
    	height:187px;
    }
    
    #footer-top {
    	position:absolute;
    	left:13px;
    	top:591px;
    	width:420px;
    	height:77px;
    }
    
    #button4 {
    	position:absolute;
    	left:433px;
    	top:591px;
    	width:109px;
    	height:77px;
    }
    
    #button5 {
    	position:absolute;
    	left:542px;
    	top:591px;
    	width:112px;
    	height:77px;
    }
    
    #rightside-2 {
    	position:absolute;
    	left:654px;
    	top:591px;
    	width:64px;
    	height:77px;
    }
    
    #footer {
    	position:absolute;
    	left:13px;
    	top:668px;
    	width:705px;
    	height:110px;
    }
    
    #menu {
    	float:right;
    	border:1px solid #343F51;
    	padding:3px;
    	margin:10px 68px 10px 10px;
    	display:block;
    }
    
    h1 {
    	font-family: Verdana, sans-serif;
    	font-size: 14pt;
    	color: #454545;
    	border-bottom: 1px solid #343F51;
    	padding: 0;
    	margin: 5px 68px 5px 60px;
    }
    
    h2 {
    	font-family: Verdana, sans-serif;
    	font-size: 12pt;
    	color: #454545;
    	padding: 0;
    	margin: 5px 68px 5px 60px;
    }
    
    p {
    	font-family: Verdana, sans-serif;
    	font-size: 10pt;
    	color: #000;
    	padding: 0;
    	margin: 5px 68px 15px 60px;
    }
    
    -->

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's hard to see without the html...

    Try setting the width of the heading so that the border does not reach the menu box.

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked. Thanks


  •  

    Posting Permissions

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