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 Coder
    Join Date
    May 2007
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    CSS Problem with Image Position

    I bought a template that is having some trouble lining up right in IE7, FF2 or FF3.

    The main background is a striped-like image. The logo and the rest of the images are supposed to line up with those stripes. I can alter the images and get them to look perfect in FF2 but then they will be off in IE7. I can alter it to look good in IE7 and then it will be broken in FF3.

    In IE7, the logo lines up perfectly but the rest of the images are off by a pixel. In FF3, nothing lines up right.

    I've already tried using the "top center" code in the CSS for alignment of the background image (saw that in another thread) but that just made the outside stripes go away altogether and all I had was white instead.

    Thanks in advance for the help!
    Last edited by rtrdogs; 07-22-2008 at 04:24 PM.

  • #2
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    This is a very difficult thing to do (drop shadows and rounded corners on a striped background). If you aren't planning on supporting ie6, the easiest thing to do would be use transparent PNG images and remove the striped background from the logo and other graphics. Otherwise try seeing how far transparent gif's can take you.
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • Users who have thanked medigerati for this post:

    rtrdogs (07-21-2008)

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the help.

    Here's what I've done and I'd love some a "heads up" just to make sure what I've done is okay (or if there is a better way).

    I cropped the logo and changed the code from this (affected areas in bold):

    Code:
    /** HEADER */
    
    #header {
    	width: 778px;
    	height: 204px;
    	margin: 0px auto;
    }
    
    #logo-slogan {
    	float: left;
    	width: 300px;
    	height: 204px;
    	background: url(images/homepage01.jpg) no-repeat;
    }
    
    #box-link { 
    		position: absolute; 
    		top: -15px; 
    		left: 70px; 
    		width: 750px; 
    		height: 204px; 
    		background-color: transparent; 
     }	
    
    #logo {
    }
    
    #slogan {
    }
    
    #logo, #slogan { position: absolute; left: -10000px; }
    
    /** SPLASH */
    
    #splash {
    	float: left;
    	width: 478px;
    	height: 204px;
    	background: url(images/homepage02.jpg) no-repeat;
    }
    to this:

    Code:
    /** HEADER */
    
    #header {
    	width: 778px;
    	height: 204px;
    	margin: 0px auto;
    }
    
    #logo-blankslogan {
    	float: left;
    	width: 16px;
    	height: 204px;
    }
    
    #logo-slogan {
    	float: left;
    	width: 284px;
    	height: 204px;
    	background: url(images/homepage01.jpg) no-repeat;
    }
    
    #box-link { 
    		position: absolute; 
    		top: -15px; 
    		left: 70px; 
    		width: 750px; 
    		height: 204px; 
    		background-color: transparent; 
     }	
    
    #logo {
    }
    
    #slogan {
    }
    
    #logo, #slogan { position: absolute; left: -10000px; }
    
    /** SPLASH */
    
    #splashblank {
    	float: left;
    	width: 15px;
    	height: 204px;
    }
    
    #splash {
    	float: left;
    	width: 463px;
    	height: 204px;
    	background: url(images/homepage02.jpg) no-repeat;
    }
    In the index file I added the code in bold

    Code:
    <div id="header">
    	<div id="logo-blankslogan"></div>
    	<div id="logo-slogan">
    <div class="box1">
    		<a id="box-link" href="http://fictionaddiction.net"></a>
    		</div>
    		<h1 id="logo"><b>FictionAddiction.NET</b></h1>
    		<h2 id="slogan"><b>The Ultimate Network for Fiction</b></h2>
    	</div>
    	<div id="splash">
    
    	</div>
    	<div id="splashblank">
    
    </div>
    
    </div>

    What I was doing by adding those two extra div IDs (logo-blankslogan and splashblank) was to use those as replacements for the two orange striped sides I took off on the original logo. It looks fine but I want to make sure that code will work for everyone's browsers.

    I've left the test site link found in my original post above unchanged so anyone who wants to take a look at what the problem is/was can tell me a better way if there is one.

    Thanks a ton!


  •  

    Posting Permissions

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