positioning help Options

[shynomi]

My headers are always off by 1 px either in safari or FF. I can get it right in IE and FF but it'll be off by a pixel in Safari or vice versa.

Here is my code for the top header:

CODE

<div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-346px;  _margin-left:-333px; top: 0px; background-color:COLOR; background-image:URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/header1.jpg); background-repeat: no-repeat; background-position: bottom center; width:823px; height:2017px; overflow:no;}">

</div>

I have the _margin-left: xxx for IE and the other margin attribute for FF and Safari.
But as you can see here: http://www.myspace.com/frucatestpage

it'll be a px off in FF but right in safari.

Let me know if there's something I can add in the code to fix that.
Thanks guys!

[fixtatik]

You shouldn't need anything transparent. Setting a link to block display and giving it a fixed width and height will do just fine. 1x1 pixel or not, it's still an additional request to a server. In anything on the web, always use text or code over images if you have the option.

Basically your entire layout consists of three parts: the background image (part of the style sheet, but we'll just consider it an extra part, since you had to make it), the style sheet, and the HTML. Keep ALL of your CSS together; don't use multiple <style> tags, and don't use inline styling (<div style=" ">). Browsers themselves also contribute to load time. If it has to keep switching between outputting HTML and styling it, it takes longer to parse. If you do everything correctly, you shouldn't need hacks to get cross-browser compatibility.

If we're being honest, I'd say start over and try it like this:

1. Begin with your style sheet. Put anything and everything you plan on using to make things pretty between your style tags.
   
2. Add the background, using shorthand:
   
   CODE
   body { background:rgb(255,255,255) url(IMAGE URL) top center no-repeat; }
   
   Notice the "rgb". You can use words (e.g., white, blue, black, etc.), or values of red, green and blue ("rgb"). You can also use standard hexadecimal colors (#000000), but only on profile 2.0. Profile 1.0 filters out the # symbol.
   
   Looking at those codes you put in earlier posts, you have a lot of unnecessary attributes with no values. If you don't plan on using something, don't use it. There's no point adding extra things if they won't serve a purpose.
   
3. Keep in mind that anything can use a class. You don't need to put images between <div> tags if all you're doing is moving it somewhere. For example, you can use something like this:
   
   CSS
   CODE
   .move { position:absolute; top:100px; left:100px; }
   
   
   HTML
   CODE
   <img class="move" src="URL" />
   
   Again, useless code is useless.
   
4. For that pesky navigation, make use of single classes and group everything together. Life is just easier when things are simplified. If you need different widths per link, just give each its own class. (I'd say use IDs, but since it's MySpace, stick with classes.) In the end, all you really need to position is the main container for the navigation, instead of each link.
   
   CSS
   CODE
   .navigation { left:50%; margin:500px 0 0 -400px; position:absolute; top:0; width:800px; }
   .navigation a { display:block; float:left; height:30px; }
   ._1 { width:100px; }
   ._2 { width:80px; }
   ._3 { width:90px; }
   
   
   HTML
   CODE
   <div class="navigation">
     <a class="_1" href="URL"></a>
     <a class="_2" href="URL"></a>
     <a class="_3" href="URL"></a>
   </div>
   
   This is just an example, so it'll require tweaking to get it like you need. Take a look at my rollover tutorial to get a better idea. They don't have to be rollovers; you can use it in any circumstance.

If you're making something that's going to be image heavy, always try to combine all of the images. Usually I'll have some type of repeating background, then all of the other images are kept together, like this:

click to enlarge

Think of those old-school 8-bit video games. All the graphics you see in Mario are actually a single image.