Extended DIV/Scrollbar Offsets DIVs

I've got a site setup at the following address: http://www.phenixdesigns.net/revised/index.html

CSS files can be viewed here:
http://www.phenixdesigns.net/revised/style.css
http://www.phenixdesigns.net/revised/style_ie.css

Everything looks as I want it to for the most part. There is only one issue that I'm currently running into. You'll notice that I've got some padding set for the DIV with my main content as well as the sidebar DIV. When you navigate to the Portfolio page, however, you'll see that the padding/placement of these DIVs is greatly offset. It occurrs only on this page and appears to happen due to the length of the data on the page. The problem also doesn't seem to be browser-specific, as it occurrs in both IE and Firefox.

How can I overcome this problem? I've been looking for a while now and haven't been able to dig anything up that relates.

Thank you!

 

What's bizzaare is that I just copied your non-ie css file, your home html and your portfolio html and I see the "portfolio" problem on BOTH. So what I can't figure out is where that space is coming from (which you want) on all your other pages. ???

What I would do in the meantime if this is supposed to be live now is increase the top padding of #content greater than 5px (like 10 or 15).

 

I actually got that problem figured out. I had the height for the top-left logo DIV set to 120px. I reduced it to 113px with a max of 120px, and it's working fine everywhere.

Now, though, I'm having a new problem in IE. I'm using a Javascript for matching-column height. It works fine in Firefox, but when you check the page in IE, the columns aren't matching. Any ideas there?

The site can be viewed here: http://www.phenixdesigns.net

Thanks!

 

Well, let's see... piss simple layout that shouldn't even warrant a separate stylesheet for IE in the first place, inlined presentational image for something that should probably be an image replacement header, lack of paragraph tags around the first paragraph in each subsection, and fixed font sizes that are too small for 'large font' users. Oh, and some formatting wouldn't hurt... and what in the devil is this javascript? Oh, cute... trying to implement equal height columns the hard way by bloating out the page with 1.6k of javascript to avoid a 88 byte .gif. RIGHT

... and that's BEFORE the layout issues.

Oh, and I assume Phoenix is misspelled on purpose? (ok, not misspelled, but using a spelling not used since middle english left popular use 200 years ago?)

Hang on, rewrite with explanation in progress.

 

Wow. Fuck you.

 

Proficiencies

Abilities
Audio Mixing and Recording; Computer Hardware and Media Support; CSS; Flash Animation; Graphic Design; HTML; On-Screen Talent; Voice Talent

 

What's so confusing? I posted asking a question, and this guy responds in complete dick-mode. Did I ask for any of his sweet design tips? No. I know the site is "piss-simple" in layout - it's supposed to be. I've got no reason to add a bunch of flair and nonsense. It's to be easily accessible, and it is so.

If he had suggestions for my site/design/layout/whatever, then he could have responded in a friendlier manner. Have I wronged him at some point in time? Did I come to his house and stomp on his flower bed? No, I'm pretty sure I haven't.

I'm always open for suggestions, but when somebody tries to pull some sort of rank and shoot off at the fingertips with attitude for no reason whatsoever, then yes, that person gets a nice, piss-simple "fuck you" in my book.

 

Sorry Phenix, his usual MO is to look at the whole page, not just one problem, list all the problems, and then usually he also comes back with another version (he rewrites your page, HTML, CSS, image optimising).

If he doesn't come back with promised help, then he deserves the cursing, because without further explanation, what he said will not help you.

He was also saying that you have a lot of code for a simple page. Meaning that you can get the same effect (same page) with much less code, not ripping on the simplicity of the design itself.

For instance, instead of using Js to make the right column reach the bottom, you can give the main left content a repeating gif of a few pixels of blue to make that column. Which is both less code and will work on my computer too (I often turn Javascript off because it makes me slow). Some people don't have Js enabled on their machines, but the gif will work for just about everyone. Most people call it "faux columns".

 

See?? Do ya see?? Stomme Poes did this nicely and correctly.

There's no need for someone to be so rude about things without provocation. If the previous fellow had responded in the manner you responded in, then all would be fine. For what it's worth, his usual MO sucks.

And thanks for the advice/suggestions. I'll check out some stuff faux columns, for sure.

 

You know, I truly find it fascinating how people ask what's wrong with their page, then get their panties in a twist when you tell them. I'm sorry you got offended, but frankly from the reaction it seems more like you were LOOKING to get offended. I was simply being kurt and to the point.

There were a number of methods and decisions in the code that left me asking "WHY?!?" - methods I've seen before and still question why anyone would use them. That Javascript is an EXCELLENT example of that. I was simply trying to help, sorry if you thought I shit in your cornflakes as that was NOT my intent.

My instinct says better than to finish it, but what the hey - rewrite still pending.

 

I asked for help with a part of my page, yes. If there are more problems on it than I know of, then I'm very open to suggestion and criticism. What you did in your initial reply, though, wasn't criticism at all. It was just flat-out rude. There was no reason to respond in the fashion that you did. You could have easily made all of your points in a friendlier manner, which I would have taken with no disrespect at all. You just seem to have a foul attitude, in my opinion.

I appreciate the help, honestly. You could just go about offering your help in a better way.

 

As far as I see, both columns are the same height, so I must not understand the problem.

 

and here's how I'd have written that:

http://battletech.hopto.org/for_others/Phenix/template.html

and the portfolio page would be thus:

http://battletech.hopto.org/for_others/Phenix/template2.html

and the directory is unlocked

http://battletech.hopto.org/for_others/Phenix/

so you can grab the bits and pieces since I remastered the images as well to use sliding doors and make the whole thing semi-fluid too.

As with most of my examples, validates, uses semantic markup, tested working in IE 6 & 7, FF, IE and Opera... degrades semi-functional to IE 5.x, and degrades well to non-css or images off.

If I have time later I'll write up one of my line-by-line explanations.

WAIT, I think we all missed your actual question: Are you asking for the extra padding to make the 'bird' image clear all content regardless of the content height? Re-reading the thread I think you are asking that the text not wrap over it... or am I misreading your intent. (since on the original I see no difference in padding/margins between those two pages). If that was what you are asking, on my version that's easy - replace the min-height declaration on #content with a simple padding-bottom.

 

Look more closely.

http://205.209.146.77/js2.png
http://205.209.146.77/js.png

 

I'm not getting that in either FF or IE. I've got IE6 and FF 2.008. Looks alright to me.

 

Getting what? Are you disabling javascript and going through every page in that site? If so you would realize that the columns are not equal one very page, and thats why he resorted to some "quick fix" dirt crap equal height js solution when he should be using faux columns.

 

Thanks for the help, deathshadow. There are a few lines in the CSS that I hadn't encountered before, so I'm going to have to read up some more about some of that stuff.

 

Phenix, stick around here, and you'll learn all sorts of little tricks and neat ideas people use for stuff. This forum is where I learned the (basic) things like margin: 0 auto (this was the first place I saw it and I didn't understand it at all), * {margin: 0; padding: 0;}, faux columns, Gilder-Levin (and other) image replacement technique, lots of neat tricks that are really not tricks but staples of CSS. I didn't always understand them until either I later ran across it in a book or someone linked to an article (so now my bookmarks should be a seperate mulit-page text file but I use almost every one of them for either reference or to send to someone else). I was here is like March or April or something and knew only the words "HTML" and that it had something to do with websites. Never heard of CSS.

Since your cv makes you seem like the creative type, you might really love web page building. It's fun.

Check out the [url="http://csszengarden.com]CSS Zen Garden[/url] and look how people have made a gazillion CSS designs for the same HTML.

 

I'll stick around for sure, Stomme. I'm heading to the mall today... maybe I'll look around for some books on CSS and the like.

I'm not too hot at graphic design, but I do love the building of sites and other creative outlets. Some of the layouts on CSS Zen Garden are really swank. Definitely gonna have to check that out some more, too.