Positioning is off Options

[rayyyy]

I have been trying to do this layout all day and for the life of me I can't figure out what's wrong..

Everything is backwards. Where I want something to appear several pixels from the left it goes half way across the page but it works perfectly if i go from the right rather then the left.

or

I'm trying to position my news 160px from the top but it went to the bottom of my page. I set it to 0 and it still doesn't reach the top of my page.

CODE

<?php include('header.php'); ?>
<div style="position:absolute;background-color:#ffffff; right: 342px; top:0px; width:494px;border= 1px solid #000000; overflow: auto; overflow-x: hidden;">
<div class="content">

<?PHP
$number=5;
$template="Lay1";
include("/home/trulysel/public_html/cutenews/show_news.php");
?>

<?php include('footer.php'); ?>

thats the code.

here's the site

click here

help?

[rayyyy]

yeah, no dice. lol

[HeartOfPandora]

If you want to position things from the left, then use left:; and not right:;
Also, it should be border:; not border=;

[rayyyy]

Yes, I understand that. What I'm saying though is that when I set it to go to the left a certain amount of pixels it goes half way across the page.

Look at this code.

CODE

<DIV style="position: absolute; top: 160; left: 900px;  width: 294px;">
<DIV CLASS="content2">

elite affiliates

</div>
<br>

<DIV style="position: absolute; top: 260; left: 0;  width: 294px;">
<DIV CLASS="content2">

latest images
</div>

one is set to left: 900 and one is left: 0

but look at the website and they're in the same place to the left but they won't position correctly. It's backwards

web site

[HeartOfPandora]

Ja okay see problems like this are what validating is for. Fix all the errors and then come back if you still have a problem.

[rayyyy]

yeah, i've already done that but i want to know WHY one positions correctly at 900px but the other one which is in the SAME spot only works at 0...any idea why?

[HeartOfPandora]

Gee, I wonder if maybe your browser doesn't know which version of XHTML to parse the code in, and so there are conflicting codes...

[rayyyy]

know what? i've never had this problem before and you don't have to be rude.

[rayyyy]

Sure sounded like it, but it could just be the fact that I've been trying to figure this out for hours and running on no sleep but who knows.

[HeartOfPandora]

I wasn't trying to be rude, but seriously, go through and fix all the validation bugs and I swear to Bob you'll see a huge improvement in your code. I didn't put it out there TWICE just to be an ass, and people don't validate just for the hell of it. It finds your errors for you and tells you what to fix. Hell it even tells you how to fix it. Way simple.

[rayyyy]

Not hard as much as it is time consuming, granted i've spent just as much time trying to fix it already. :|

[HeartOfPandora]

Take a break, grab some toast... Seriously, stop looking at the code for a while an then come back haha.

Most of what needs to be fixed is just a bunch of alt tags - skip those for now and just fix the other problems. After that, revalidate and all that should be left to do is the alt tags. Personally I only ever fill those with alt="rabble" or something stupid that I can copypasta to make the whole process take like 5 minutes.

I think the biggest problem with you source is that you didn't specify a doctype so your browser probably defaulted to one that isn't going to parse correctly with some of the codes you have. Trust me, specifying a doctype is extremely important and can make, or in this case, break a layout.

[rayyyy]

What doctype should I be using?

[HeartOfPandora]

Personally I always shoot for XHTML 1.0 Strict but I think in your case you're better off with XHTML 1.0 Transitional, however this does cause the validator to see 275 errors 4 warnings... but again, most of those are data errors (ie using & instead of &amp; or not using the required alt tags). You could also go with HTML 4.01 Strict, because I'm assuming you're not really into clean web design, more just presentation.

Also, just a question, why are you using inline styling? It slows down how fast people can access your site as compared to an external stylesheet. When the browser has to load the new CSS for each page instead of once from reference, older computers and dial-up practically asplode because they have to download the same exact CSS a million times.

[rayyyy]

I have an external style sheet. this was an adopted site..im working with what I have.

[HeartOfPandora]

Well in that case, why not just write up a new layout? Seems like a heck of a lot less effort, to be honest haha.

[rayyyy]

i was hoping i wouldn't have to haha.


now that i have gone through and validated it...it still doesn't work. I'm still using negative values when I shouldn't be.

Reason for edit: Please use the Edit button instead of double-posting. - Mike

[Mickey]

Posts merged.

[mipadi]

Gee, I wonder if maybe your browser doesn't know which version of XHTML to parse the code in, and so there are conflicting codes...

If browsers have trouble parsing HTML/XHTML, they fall back to a non-strict parser, anyway. At any rate, unless you explicitly send a page marked up with XHTML as XHTML, it's parsed using an HTML parser anyway.

[rayyyy]

Oh well, as it stands now my page only has 3 errors, it was validated and im still having all these positioning errors and what not. I had less errors before I validated it.

[fixtatik]

Validation doesn't make problems go away; it's a guideline to fix those problems. Besides, the errors that you have are serious ones, and they're the type that need to be fixed. To start with, you have a div, iframe, image, and a map in your header. That's a no-no. You've incorrectly closed the tags (using < /div> and < /head> instead of </div> and </head>). You have elements that are open, but are never closed, and you have elements outside the closing tag of the HTML page.

I wouldn't suggest validating your code; it's useless at this point. Instead, look at how HTML pages are structured.

An overview of an HTML page: link
A detailed explanation of what each required component of an HTML page means: link