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
  1. #1
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts

    Absolute position problem

    Hi all,

    I have an absolute position problem, basically I have set my logo to position: absolute with the appropriate top, left settings but I want the logo to sit flush to the top body not top mainBanner, it appears to work ok in ie but not in ff?

    Webpage is here http://www.glen-lodge.co.uk/testing/...ite/index.html

    Any help or advice would be great!!

    Thanks in advance

    Kyle
    Last edited by kyllle; 04-02-2009 at 11:56 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    add px and see if that helps. Otherwise, I have no idea

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    get rid of the relative position attribute in the body style and it works
    Code:
    <style type="text/css">
      *{
    	margin: 0;
    	padding: 0;
    	}
      
      body{
    	background: #002d47 url(images/bg.gif);
    	
    	font: 76% Georgia, "Times New Roman", Times, serif;
    	color: #fff;
    	line-height: 1.2;
    	text-align: center;  
      }
      
     #logo{
    	position: absolute;
    	top: 0px;
    	left: 50px;
    	}
      
      
      #mainBanner {
    	clear: both;
    	width: 1024px;
    	height: 315px;
    	margin: 32px auto 0 auto;
    	background:url(images/mainBanner.gif) center top;
    }
    
    #wrapper{
    	width: 900px;
    	margin: 0 auto;
    	text-align: left;	
    	color: 000;
    	}
    	
    /***Navigation*********************************************************************/
    
    #navWrapper{
    	width: 900px;
    	margin: 0 auto;
    	position: relative;
    	top: -49px;
    	}
    
    #nav {
        font-size:93%;
        margin: 0;
        }
    	
    	#nav ul {
    		float: right;
    		margin: 0;
    		padding: 10px 0px 0;
    		list-style:none;
    		}
    	
    		#nav li {
    			float:left;
    			background:url(images/unactiveLeft.png) no-repeat left top;
    			margin:0 0 0 5px;
    			padding:0 0 0 5px;
    			}
    	
    			#nav a {
    				display:block;
    				background:url(images/unactiveRight.png) no-repeat right top;
    				padding:10px 18px 10px 10px;
    				font-size: 140%;
    				text-decoration: none;
    				font-weight: 600;
    				color: #fff;
    				}
    	
    #nav #current {
        background-image:url(images/activeLeft.png);
        }
    	
    	#nav #current a {
    		background-image:url(images/activeRight.png);
    		
    		}
    	
      </style>
    Last edited by TinyScript; 04-02-2009 at 11:48 PM.

  • Users who have thanked TinyScript for this post:

    kyllle (04-02-2009)

  • #4
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    Thanks!! that's weird it didn't work when i tried it first time so thats why i placed position: relative in the body to see if it would react to that!!

    Sorry for wasting your time guys

    Thanks!!

    Kyle


  •  

    Posting Permissions

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