...

View Full Version : CSS Problem with Image Position



rtrdogs
07-20-2008, 11:00 PM
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!

medigerati
07-21-2008, 12:41 AM
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.

rtrdogs
07-21-2008, 06:38 PM
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):


/** 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:



/** 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


<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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum