Absolute positioning and navigation Options

[sheertalentx]

Okay...here is my coding...

Stylesheet

#nav {
left:50%;
text-align:center;
padding: 0px;
position:absolute;
margin-left:-361px;
top:0px;
}

Header

<div id="nav">

<a href="http://atomicxkiss.net" class="blog" style="position:absolute;top:313px;left:73px;"></a>

<a href="http://atomicxkiss.net/aboutme.php" class="nicole" style="position:absolute;top:313px;left:168px;"></a>

<a href="http://atomicxkiss.net/portfolio.php" class="folio" style="position:absolute;top:313px;left:263px;"></a>

<a href="http://atomicxkiss.net/goodies.php" class="visitor" style="position:absolute;top:313px;left:358px;"></a>

<a href="http://atomicxkiss.net/about.php" class="sitely" style="position:absolute;top:313px;left:453px;"></a>

<a href="http://atomicxkiss.net/exit.php" class="exit" style="position:absolute;top:313px;left:548px;"></a>

</div>

Now why does this show up perfect in Firefox but I can't get it to show up on IE? If I take the positioning:absolute or whatever in the stylesheet it shows up in IE but its all of alignment and I can't get it right in all the resolutions it's always off center. What's going on? Thanks for the help!!

[freeflow]

Try using this:

position: asbolute;
left: 50%;
top: 0%;
margin-left: #px;
margin-top: #px;

[sheertalentx]

nope it still won't work...:(

[Smarmosaur]

different browsers read codes differently, either code it for IE or code it for mozilla.
and this may help a little, although i'm not completely sure what you were asking for-your description was a jumble of words with misplaced/missing words.
http://www.createblog.com/tutorials/tutorial.php?id=628

[pandora]

different browsers read codes differently, either code it for IE or code it for mozilla.
and this may help a little, although i'm not completely sure what you were asking for-your description was a jumble of words with misplaced/missing words.
http://www.createblog.com/tutorials/tutorial.php?id=628

dont listen to this guy. you should always code your layouts to work for all browsers and platforms. It just takes a bit of tweaking.

Anyway, I need to see ALL your coding. You have all these classes, but dont see them in your css.

[Smarmosaur]

dont listen to this guy. you should always code your layouts to work for all browsers and platforms. It just takes a bit of tweaking.

Anyway, I need to see ALL your coding. You have all these classes, but dont see them in your css.

i know that.
i just meant for now until a smart person comes along and helps.

[sheertalentx]

Heres all my stylesheet :) hope that helps you see my issue!!

body {
margin : 0;
padding : 0;
color : #d3d3d3;
font-size : 8pt;
line-height : 12pt;
font-family : sans-serif;
background-color : #a1fd92;
background-image : url(http://atomicxkiss.net/images/non/nonbg2.jpg);
}
input, textarea, select {
background : #ffdef9;
font-size : 11px;
font-weight : bold;
font-family : tahoma;
color : #424242;
border : 2px solid #3b3b3b;
}
i {
font-size : 8.5pt;
line-height : 9pt;
font-family : Arial;
color : #e69aff;
font-weight : bold;
letter-spacing : 2px;
text-transform : uppercase;
}
b {
font-size : 8.5pt;
line-height : 9pt;
font-family : tahoma;
color : #7cc0ff;
letter-spacing : 2px;
text-transform : uppercase;
}
u {
font-size : 8.5pt;
line-height : 9pt;
font-family : tahoma;
color : #7cff7f;
font-weight : bold;
letter-spacing : 2px;
text-transform : uppercase;
}
s {
font-size : 8.5pt;
line-height : 9pt;
font-family : tahoma;
color : #1f1f1f;
font-weight : bold;
letter-spacing : 2px;
text-transform : uppercase;
}
strong {
font-size : 8.5px;
line-height : 9pt;
font-family : tahoma;
font-weight : bolder;
color : #7cc0ff;
letter-spacing : 2px;
text-transform : uppercase;
}
em {
font-size : 8.5px;
line-height : 9pt;
font-family : tahoma;
color : #e69aff;
letter-spacing : 2px;
text-transform : uppercase;
}
.head {
font : 700 1.4em arial, verdana, tahoma, sans-serif;
letter-spacing : 0.08em;
padding-left : 0;
text-align : justify;
text-transform : uppercase;
font-weight : bold;
color : #eaeaea;
border-bottom : 1px solid #82feff;
}
.head2 {
color : #ff0072;
letter-spacing : 1px;
border-bottom : 2px solid #434343;
font-weight : bold;
line-height : 10px;
font-size : 20px;
text-align : center;
font-family : georgia;
}
.head3 {
color : #575757;
font : 700 1.4em arial, verdana, tahoma, sans-serif;
letter-spacing : 0.08em;
padding-left : 0;
text-align : justify;
text-transform : uppercase;
font-weight : bold;
border-bottom : 1px solid #858585;
}
.head4 {
color : #eaeaea;
font : 12px arial, verdana, tahoma, sans-serif;
letter-spacing : 0.08em;
text-transform : uppercase;
font-weight : bold;
float : left;
padding : 0 0 0 5px;
}
.head5 {
font : 700 1.4em arial, verdana, tahoma, sans-serif;
letter-spacing : 0.08em;
padding-left : 0;
text-align : justify;
text-transform : uppercase;
font-weight : bold;
}
A:link, a:active, a:visited {
color : #ffbae7;
font-size : 8.5pt;
line-height : 9pt;
letter-spacing : 2px;
border-bottom : 0 dotted #ffffff;
text-decoration : none;
font-weight : bold;
font-family : tahoma;
cursor : crosshair;
height : 1px;
text-transform : uppercase;
list-style-type : none;
}
A:hover {
color : #141414;
border-bottom : 0 dotted #ffffff;
text-decoration : none;
font-size : 8.5pt;
line-height : 9pt;
letter-spacing : 2px;
font-weight : bold;
font-family : tahoma;
text-transform : uppercase;
list-style-type : none;
}
a.blog:link, a.blog:visited, a.blog:active {
background-position : top left;
height : 24px;
width : 90px;
background-image : url(http://atomicxkiss.net/images/non/iconjournal.png);
}
a.blog:hover {
background-position : top right;
height : 40px;
width : 90px;
}
a.nicole:link, a.nicole:active, a.nicole:visited {
background-position : top left;
height : 24px;
width : 90px;
background-image : url(http://atomicxkiss.net/images/non/iconmiss.png);
}
a.nicole:hover {
background-position : top right;
height : 40px;
width : 90px;
}
a.folio:link, a.folio:active, a.folio:visited {
background-position : top left;
height : 24px;
width : 90px;
background-image : url(http://atomicxkiss.net/images/non/iconwork.png);
}
a.folio:hover {
background-position : top right;
height : 40px;
width : 90px;
}
a.visitor:link, a.visitor:active, a.visitor:visited {
background-position : top left;
height : 24px;
width : 90px;
background-image : url(http://atomicxkiss.net/images/non/iconvisitor.png);
}
a.visitor:hover {
background-position : top right;
height : 40px;
width : 90px;
}
a.sitely:link, a.sitely:active, a.sitely:visited {
background-position : top left;
height : 24px;
width : 90px;
background-image : url(http://atomicxkiss.net/images/non/iconsitely.png);
}
a.sitely:hover {
background-position : top right;
height : 40px;
width : 90px;
}
a.exit:link, a.exit:active, a.exit:visited {
background-position : top left;
height : 24px;
width : 90px;
background-image : url(http://atomicxkiss.net/images/non/iconexit.png);
}
a.exit:hover {
background-position : top right;
height : 40px;
width : 90px;
}
a img {
border : none;
border-bottom : 0;
}
.date {
text-align : center;
width : 45px;
height : 50px;
background : url(http://www.atomicxkiss.net/images/music/musicdate.png) no-repeat;
float : left;
font : 400 1em arial, verdana, tahoma, sans-serif;
padding : 0 0 0 0;
}
.day {
font-family : arial, verdana, tahoma, sans-serif;
font-size : 20px;
line-height : 20px;
position : relative;
top : -7px;
color : #b0b0b0;
padding-top : 12px;
padding-right : 4px;
font-weight : bold;
}
.month {
font-family : verdana, arial, tahoma, sans-serif;
font-size : 11px;
line-height : 11px;
text-transform : uppercase;
color : #ffffff;
padding-top : 2px;
font-weight : bold;
padding-right : 3px;
}
.year {
font-family : verdana, arial, tahoma, sans-serif;
font-size : 8px;
line-height : 8px;
position : relative;
margin-top : -7px;
padding-right : 4px;
color : #797979;
}
#container {
margin-top : 3px;
background-color : transparent;
background-repeat : repeat-y;
background-image : url(http://atomicxkiss.net/images/non/nonbg.png);
border : 0 solid #ffffff;
width : 850px;
}
#header {
background-image : url(http://atomicxkiss.net/images/non/nonhead.jpg);
background-color : transparent;
height : 400px;
width : 850px;
border-bottom : 0 solid #ffffff;
margin-top : 0;
}
#banner h1 {
margin : 0;
padding : 0.5em;
}
#foot {
float : left;
width : 595px;
margin-left : 123px;
margin-top : 0;
text-align : left;
color : #262626;
}
#nav {
left:50%;
text-align:center;
padding: 0px;
position:absolute;
margin-left:-361px;
top:0px;
}
#categories {
float : left;
width : 212px;
margin-left : 320px;
margin-top : 0;
text-align : center;
color : #262626;
}
#content {
width : 605px;
margin-left : 117px;
float : left;
text-align : left;
margin-top : -35px;
}
#footer {
clear : both;
background-color : transparent;
background-image : url(http://atomicxkiss.net/images/non/nonfoot.png);
background-repeat : no-repeat;
padding : 0;
width : 850px;
height : 300px;
text-align : right;
border-top : 0 solid #ffffff;
}
#zooomr {
width : 620px;
padding-top : 5px;
margin-left : 75px;
float : left;
}
#zooomr ul {
list-style : none;
}
#zooomr ul li {
display : inline;
}
#zooomr ul, #zooomr ul li {
padding : 0;
margin : 0;
border : 0;
}
#zooomr a img {
border : 5px solid #4b4b4b;
padding : 0;
margin : 5px 3px 0;
}
#zooomr a:hover img {
border : 5px solid #f4d9e5;
}

Here is all of my header just in case you need it! Thanks so so much!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<LINK REL="SHORTCUT ICON" HREF="favicon.ico">


<title>Nonsensicality</title>

<link href="http://www.atomicxkiss.net/stylesheet.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://atomicxkiss.net/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://atomicxkiss.net/lightbox/js/scriptaculous.js?load=effects"> </script>
<script type="text/javascript" src="http://atomicxkiss.net/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="http://atomicxkiss.net/lightbox/css/lightbox.css" type="text/css" media="screen" />


</style>

<body>
<div align="center">
<div id="container">
<div id="header"></div>

<div id="nav">

<a href="http://atomicxkiss.net" class="blog" style="position:absolute;top:313px;left:72px;"></a>

<a href="http://atomicxkiss.net/index.php/about-me" class="nicole" style="position:absolute;top:313px;left:167px;"></a>

<a href="http://atomicxkiss.net/index.php/portfolio" class="folio" style="position:absolute;top:313px;left:262px;"></a>

<a href="http://atomicxkiss.net/index.php/goodies" class="visitor" style="position:absolute;top:313px;left:357px;"></a>

<a href="http://atomicxkiss.net/index.php/about-2" class="sitely" style="position:absolute;top:313px;left:452px;"></a>

<a href="http://atomicxkiss.net/index.php/exits" class="exit" style="position:absolute;top:313px;left:547px;"></a>

</div>





<div id="content">

[sheertalentx]

I still need help if anyone is willing to help me!! Please please!

[digitalfragrance]

I believe I know why it's off center - you have a left:50% and a margin-left: -361px value... it's like telling it to do two things at once.

I haven't actually checked this yet, but I'm going to tweak it a bit and see if I can get it to work.

EDIT:
This is what it looked like in both browsers (IE & FF) 1200 x 800 res...
What exactly is misaligned?

[Smarmosaur]

^^ the stripes.

[digitalfragrance]

If the stripes is all you are worried about, you should make your header image a gif with that striped background part erased and leave it as transparent.

[pandora]

i think rockitstudios was joking.

[Smarmosaur]

i think rockitstudios was joking.

the only thing i noticed misaligned were the stripes so...why not point it out?

[pandora]

because thats not what they need help with and you are confusing the people that actually want to help. dont be a jackass.

[sheertalentx]

the links aren't showing up in IE for me...are they showing up for you? I have IE 7 I believe and I can't see them. When I take out the position:absolute they do show up though, let me try only using the 50% and getting rid of the -361 thing...but let me know if you can see it in IE because I can't :(

EDIT

OMG like 2 minutes ago I didn't see it in IE and now it's there without changing anything...freaky!! Maybe it was just taking ages to load and I was impatient...it's there now...wow that is nuts!! Thanks for your help everyone...I think its fixed now...that is so weird! I even did browser shots and it wasn't working. Maybe I changed something and forgot and it fixed it...I dunno...that is just plain odd! Well thanks anyways guys!!

EDIT AGAIN

Hold up...it's gone again! This is nuts! I don't know what is going on to be entirely honest. It was there and I refreshed and it was gone. I really have no friggin clue what is going on ha ha! I will try the thing you suggested digitalfragrance

[pandora]

i just wanna say...

you dont need to absolutely position every nav link. you could just encase the entire nav in one div and absolutely position that one div.

that might be the problem, it might not.

[Smarmosaur]

because thats not what they need help with and you are confusing the people that actually want to help. dont be a jackass.

jackass? they said something was misaligned and didn't specify what, so the only thing i saw was the stripes, i'm pretty sure that's classified as helping.

as for the links, if it's dissapearing and such, it's either your connection or a browser glitch. it's most likely nothing to do with your code.

[sheertalentx]

Oi...okay what is happening is it will show up in IE when I say "div class=" but when I say "div id=" it won't. The issue with div class is that it doesn't show up right, its all misaligned...and I can't get it right in all resolutions! This is so weird and annoying ha ha. I really really can't figure it out and that's bad! I have been coding for a year now and I just can't figure it out!

[sheertalentx]

I fixed it! Sorry for the double post but I want people to see I have a new one so they notice I updated. I had to use position:relative instead and I just changed that around and it works in all browsers and resolutions now! I'm so happy!

[Smarmosaur]

ok good 'cause i've been messing with it on a test site and weird things kept happening.

[pandora]

glad you solved your problem.

topic closed; pm me if you want it reopened.
this will be moved to the resolved topics forum by tomorrow.