PDA

View Full Version : Absolutely positioned element.. moving



ShadowDansere
Jul 2nd, 2009, 12:23 AM
Hey, I'm a little bit of a CSS/HTML beginner because I'm mostly self-taught. But I can't really figure this thing out!

I'm sure my css is a mess. But I have these two pages:
http://cnm-design.com/bio.html and
http://cnm-design.com/resume.html

and the logo within the box, a png image, is absolutely positioned with CSS, and it's the same external css "content.css" (found here: http://cnm-design.com/content.css) so can someone point out the error that I've made that makes the image move between the two pages?

Thanks so much! :thumbsup:

Kodah
Jul 2nd, 2009, 02:43 AM
You've got a few errors on each page but bio has an extra error that resume doesn't. check http://validator.w3.org/ (http://validator.w3.org/)this might explain the difference between pages

ShadowDansere
Jul 2nd, 2009, 10:54 PM
That looks like that did it. There's still a little bit of a gap between the top of the page and the logo on my resume page, so the logo does move around a little bit, but everything is legible and clickable, so that at least works.

Any ideas for the gap on the resume page?

Kodah
Jul 3rd, 2009, 01:25 AM
I'm at a loss too! I did run it through jigsaw (http://jigsaw.w3.org/css-validator) and got this warning:
"In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected.
No errors and the css did validate, the warning references to .fltlft which is the photo and it has a width defined inline. Unless you have another .fltlft floating around.
sorry if this doesn't help

ShadowDansere
Jul 3rd, 2009, 07:14 AM
Yea, that photo is the only thing that's floated that I defined as a floating element... and it does have its width called out. Odd. :confused:

Perplexing. And slightly annoying, lol. Well maybe someone else has some magic knowledge? Thanks, Kodah! :thumbsup:

SB65
Jul 3rd, 2009, 09:28 AM
All of your absolutely positioned elements are within #container, positioning set to top:3%. This applies to

#titlecontainer
#linkscontainer
#container #maincontent a img

On the bio page, #container is much less high than #container on the resume page, so 3% is not so far down the page - hence the apparent shift.

Set the top value on your absolutely positioned elements using px and you should be OK.