[Tact]

i got coders block or something. i got stuck and i'm hoping somoene could help me.

i'm trying to add a new link to my friends site. (the archive link located under the blog)

http://legionofangels.net/4youreyesonly/

this is a test directory where i test things before making them official on the real main page.


the way i have to add links to this particular setup is using images and divs and positioning them in the right place. so far i thought everything was perfect. but for some reason, it only shows up correctly for me! O_o

i had 3 people test the site for me, and the "archive" link is not properly centered for them.


i tested this in opera, avant, ie6, and firefox. (all latest versions). they all show correctly for me only. why only me? and where is the problem? my code passes and evertyhing. (i hate it when it validates but still not right lol)

would appreciate any ideas. heres some of the code.

#archivelink {position:absolute;left:540px; top:1082px;background:url("archive.jpg");width:180px;height:30px;}

css file

<div id="loa05"></div>
<div id="loa06"></div>
<div id="centerbox">
<div id="blog">
<?php include('http://www.legionofangels.net/gm'); ?>
</div>
<div id="archivelink"><a href="http://www.legionofangels.net/gm/archive/"><img src="clear.gif" width="100%" height="15px" border="0" alt="Archive"></img></a></div>
</div>
<div id="loa08"></div>

<div id="loa09">

portion of the index.php. where "blog" is the box. and "archivelink" is the link i'm trying to put. i hope that is sufficient.


feel free to poke fun of my method. i'm still learning and don't claim it's any good. ^_^



and here's an example of how it shows up to 3 of the poeple that tested it for me. for one of them, it goes farther right. O_o and another claims it's off to the LEFT!

[WendyM]

Hi Tact,
There are multiple ways to do it, but unless I tracked your HTML incorrectly, the archive link is within the "centerbox" div, correct? If so, the width of centerbox is 399px. Why not just set a left margin on the archivelink of 110px (110+180+110 = 400, which is close enough)? Then you wouldn't have to worry about the absolute positioning.

[Tact]

thank you wendy. i will try that immediately.

yes, you are correct in the placement of archive within centerbox.

i did orignally plan to use just "position:relative" as i do most things so the numbers won't get huge on me just as you described. but for some reason, this new box was destroying my layout and making everything jump out of place (ie only). the only way i know for sure to have a div box ignore its sorroundings was postition:absolute but i see that won't be the way anymore.

perhaps if i used float:left

i forgot about floats. i think the float will help.

i just need this new link to ignore the fact that it's next to other boxes, and not push them in either direction. and then hopefully still consider its relative positiong so that i can use small numbers when positioning it.

thanks again. will post back results.





EDIT: ok. i'm back. didn't get what i was hoping for. and i decided to give up trying to make it go inside centerbox, and decided that maybe i can just put it somewhere else and move it from that location (a diffrent location within the htlm. not the page). here's it's new location.

<div id="loa04"></div>
<div id="loa05"></div>
<div id="loa06"><div id="archivelink"><a href="http://www.legionofangels.net/gm/archive/" title="Legion of Angels Blog Archive"></a></div></div>
<div id="centerbox">
<div id="blog"><?php include('http://www.legionofangels.net/gm'); ?></div>
</div>
<div id="loa08"></div>

i put it in "loa06". the same box where a few of my links hang out. but in reality there isn't anythere there at all because i used imagemaps for those links. so it's nice empty real eastate that doens't push anything left or right.

would greatly appreciate it if a few people could check it so that i'm not the only one getting good results. http://legionofangels.net/4youreyesonly/ thanks. (ps. i also fixed my linkes and learned how to make divs clickable so i don't need clear.gif anymore. yay




heres the new css for anyone interested.

#site1 a {display: block; height: 100%; width: 100%;}
#site2 a {display: block; height: 100%; width: 100%;}
#site3 a {display: block; height: 100%; width: 100%;}


#archivelink {position:relative;background:url("archive.jpg");width:180px;height:25px;le ft:410px;top:505px;}
#archivelink a {display: block; height: 100%; width: 100%; }

[MMJ]

@Tact: The problem with editing your post is that Wendy will not get updated by this thread.

[WendyM]

Thanks MMJ!

[Tact]

sorry about that. i was too afraid to double post. most forums never allow it. maybe this one is more forgiving.

sorry again but thanks a lot for helping me. *bows*

feel free to comment on anything if you like.

[WendyM]

Originally Posted by Tact

i was too afraid to double post. most forums never allow it. maybe this one is more forgiving.

Sometimes! The general rule of thumb is not to post the same thing in more than one thread. But if you need to add significant information to something you've already posted, feel free to add a new post to your existing thread. Not only do we not get notified of edits, but I know that if I've already read something, I won't think to go back and re-read to see if there were edits and then I'm often confused (at least I like to use that as my excuse for my confusion!)

[Tact]

thanks a lot.


well since i already got this bugger open. might as well post something else.

i'm struggling through trying to get my greymatter pages stylized. (very annoying because i have to go back and forth between the templates within greymatter admin and the external css's i'm trying to use.

anyway. during my edits, i sometimes, for no reason at all (;p) affect pages i don't want to mess with.

long story short. could i get help figuring out why IE adds extra space below the persons blog entry?

http://www.legionofangels.net/

scroll down in the entry titled "the fathers love: genesis to revelation". and in IE, you'll have this grey space at the bottom.

i've checked all my styles. and here are all the styles invovled in the creation of that box.

Originally Posted by this is one of the containers

#blog {
border: 0px dotted red;
position:relative;
left: 0px; top:0px;
overflow-x: hidden;overflow-y: auto;
height:501px;width:399px;
font-family: palatino linotype;
font-size: 11px;
line-height: 18px;
background-color: #808080;
margin:0px;
padding:0px;
}

Originally Posted by these are the styles that make up the entry itself.

#title {
line-height:225%;
border-bottom:2px solid black;
border-top:2px solid black;
padding:0px;
margin:0px;
float:left;
width:386px;
background-color:#000000;
color:white;
}


#avatar {
border-right:2px solid black;
width:100px;height:100px;
margin:0px;
padding:0px;
float:left;
background-color:#000000;
overflow:hidden
}


#author {
width:280px;height:100px;
margin:0px;
padding:0px;
font-family: palatino linotype;
font-size: 16px;
float:left;
background-color:#808080;
}


#actualentry {
border-top:2px solid black;
margin:0px;
padding:0px;
float:left;
width:386px;
background-color:white;
height:auto;
}

since the color that shows up at the bottom is grey. i did a search for all instances of that color. only two showed up. the "author" style should have it. but the "blog" was the workaround i did because of my previous problem. (above)

to explain the workaround....

avatar and author should be next to eachother. avatar+workaround make up maybe 380 pixels. the blog container itself is 399. but for some reason if i go just ONE PIXEL higher than 380 the divs break up and "author" moves to the next line. i struggled with this and gave up and simply said (well, i could just keep it at 380 total, and fill in the white on the right side with grey by using blog.

well now i'm paying for it. -_-

regardless, that space shouldn't be there anyway! and the div is not empty and there are no images so i can't understand why it adds the space. so yah. that's where i'm stuck sadly.


heres the html for the part in question too just in case.

<div id="centerbox">
<div id="blog"><?php include('http://www.legionofangels.net/gm'); ?></div>
</div>

thanks in advanced.