oldschool website not working on certain computers, please help!

Hello everyone! I'm new here and have a very basic question.

So around 2005 I took a class for web design and built of few websites, including my own which is the site in question here. I decided to take down the old website from several years back and completely build a new one. I haven't done web design for about six years but most things came back to me except for this one problem, and it's a biggie, although I think a simple tweak will fix it. It's a very simple and primitive site using old-school xhtml and css so I think it's something simple, although I can't remember how I fixed the problem before.

So, I have my page set up with with four blocks, header, navigation, contact info (below navigation), and the one that's giving me problems, the body content block. All are set with absolute positioning, and all are working for me except the body content. It's set to left: 278px;, while this works fine on the original computer that I created the site on, with all the alternative browsers, when I look at the site on different computers the body content block is stuck on the left side, overlapping my navigation.

Mind you, on some computers it may be fine, but I'm sure some of you will see exactly what I'm talking about.
Meryl's Termite & Pest Control

What would be the tweak to correct this? The #bodycontent block is set to Position: "absolute"; and left: 278px;. Thanks very much for any help!

 

Welcome back to coding, Joe113.

I don't know how you want it be, so am just guessing.... try set the div#container to be position:relative? It will make all absolutely-positioned descendants of this container to be absolute "relatively" to this container only.

And with a quick look to the source, I still think your old-school XHTML design is still valid today

Good luck!

 

That's the cause of your problems. Absolute positioning should be applied with precaution and if overused, it is known to mess up completely the flow of your website.

Another bad sign.

Thought without actually seeing your website, we cannot tell what's exactly wrong with it (by the looks of it, I'd say everything). Post up the link to your site, we can't really help you otherwise.

 

Yes, I think the problem is the absolute positioning. I'm sorry I didn't include the link to the website, here it is
www.merylspestcontrol.com

I'm having trouble with the bodycontent block, I need to position it to the right, so it doesn't overlap the navigation, and up so it's not below the other blocks that are fixed to the left. Thanks for your reply and any help!

 

Oh, I was right after all. What you have there is not worth saving, it just has to be rewritten.

(some 2h later...)
But don't worry, I don't just say it without helping. I have rewritten the whole website for you. The markup is now semantic, the whole website is thus made responsive with a few media queries. I have kept the STRICT doctype, which I always do anyway. It will work all the way back to IE6 w/o any problem, except that it doesn't understand the content property in css (oh well). It works well w/o any content/presentational image.

As for the size, 5k for markup + styles. The rest is all images, which I did optimize a bit, bit they can still be cut down some more. I have fixed some accessibility issues you had too, like the color of the links in the main menu. Got rid of those horrific inset 1990 borders, if you don't mind.

You can grab it here: http://www.filedropper.com/joe113

If you need something else, I'm available.

Hope it helps