...

View Full Version : Old Project Broken - Please help.



Doctor_Varney
01-15-2010, 03:46 AM
Here is the link to the active page.
http://www.joolzfx.com/about_intro.html

This was perfect in both browsers when I first published it, over two years ago. IE seems to have updated since then and is causing problems with layout. The page validated without errors.

The middle column should be the same height as the other two and you'll see this when you look at the other pages. I suspect the main fault with this design, is the inflexibility of the fixed height of containing #DIVs. I certainly had not accounted for user text-size alterations, back then...

However, I've tried many ways of repairing it, without re-writing the structure - but each leads to a dead end. Namely, my efforts have been focussed on trying to fix the paragraph which reads:
"Joolz also featured...etc", which is supposed to flow around the citation box to it's right but instead, starts beneath it. Compare in Firefox (at zero-magnification) and you will see what I mean.

I have played around with the floats and added an #ID to the p to see if I can isolate the problem. It will not respond to width changes. I have tried both pixels & EMs and I also can't get it to pick up a left margin, either. Now I don't know what on earth to do.

I hope someone can help me... I have no idea how long this page has been broken in IE!

Many thanks

Dr. V

Excavator
01-15-2010, 04:16 PM
Hello Doctor_Varney,
You were right to try an float that text. The reason it ididn't work for you though may be the width problem. A float needs a width to work correctly.
Those 2 paragraphs get a width of 90% from the CSS for #content p, #media p, #medicine p but that's hardly needed since you put margins on at the same time.
Try making your CSS look like this -


#content p, #media p, #medicine p{
clear:left;
margin:0.5em 1em 0 1.5em;
/*width:90%;*/
text-align:justify;
}

/edit arthurakay is correct, the width is the problem and the extra float I had was unnecessary.

arthurakay
01-15-2010, 04:17 PM
It actually looks fine for me in IE8. In IE6 the middle column is too long, and in IE7 the column height is fine but the text runs past the bottom.

From what I can see using Firebug, your paragraph tags have a style applied to them:


#content p, #media p, #medicine P {
clear: left;
margin: 0.5em 1em 0 1.5em;
text-align: justify;
width: 90%;
}


In all likelihood, the problem lies in that WIDTH declaration. The browser sees that you want that paragraph to be 90% as wide as its parent container, which doesn't allow room for that BLOCKQUOTE. As a result, the browser simply pushed the bottom 2 paragraphs beneath the BLOCKQUOTE you have floating to the right.

I'm not even entirely sure why you want to define the paragraphs' width - your margin ought to take care of any spacing issues.

Doctor_Varney
01-15-2010, 05:48 PM
Well, that worked!

Thank you, ArthurKay - that's saved me a lot of time and headaches. :thumbsup:

Kind regards

Dr. V

Doctor_Varney
01-15-2010, 06:05 PM
My concern now, obviously - now that I have discovered the wisdom of height flexibiliity - is that this job isn't holding together under varying screen-res./font increases.

The pleasant aesthetic of my design relies, partially, on 'vertical containment' - and I notice most modern designers, post 'Flash-epidemic', do not seem to waste their energy, pushing the site into a neat little box. At least, not vertically.

I had to do some serious thinking, in order to keep the lower perimeter and footer within view and then realised there were some areas where I needed a physically longer page.

This isn't about aesthetics anymore (well, it is) because I can easily see this layout breaking up under many viewing conditions.

So, somehow, I really need to fix this site with a flexible system which makes stuff push the bottom divs downwards, automatically.

I'll be combing through the code, looking to see how I can achieve this. In the meantime, (if you have the time) if an efficient method comes to mind, please let me know.

Many thanks

Dr. V

Excavator
01-15-2010, 06:11 PM
So, somehow, I really need to fix this site with a flexible system which makes stuff push the bottom divs downwards, automatically.

I'll be combing through the code, looking to see how I can achieve this. In the meantime, (if you have the time) if an efficient method comes to mind, please let me know.

Many thanks

Dr. V

Have a look my Faux Columns demo (http://nopeople.com/CSS/faux_columns/index.html)

Doctor_Varney
01-15-2010, 06:54 PM
Hey...! Stop press... Don't effin' bother...

The person who I designed this for is asking someone else to completely re-design.

It's a long story, suffice to say, we were in business together. As part of a deal, she bought the domain name for our joint project, (which she would benefit from also) in return for me building her personal site (which only she would benefit from).

After months of headaches and hard-slog, to learn CSS from scratch and make this happen, I feel like I've just been slapped around the face with a wet trout, for my efforts. Not happy.

But thanks, anyway, for the demo, Excavator. I'll be able to put that to good use for my own projects in future.

Dr. V

Excavator
01-15-2010, 07:19 PM
After months of headaches and hard-slog, to learn CSS from scratch and make this happen, I feel like I've just been slapped around the face with a wet trout, for my efforts. Not happy.

I can sympathize Doc. Although I never put months of effort into one, I did spend quite a bit of time only to be unexpectedly fired with no reason given.

Months later I google the guy and, even though I had pulled down all my first submission work, the site I see when I google him is MY CODE and MY LAYOUT! :eek: Worse, it's all butchered by whoever finished it... all full of mistakes and tables and invalid. :mad:

Made me wish I knew how to hack into his site and replace some of his images for him.

Oh well, that's the chance you take when dealing with people.

Doctor_Varney
01-15-2010, 09:41 PM
Phew! I can sympathize with that, Excavator. Must be terrible to see someone put tables in, where you have worked hard to make valid CSS.

I sometimes wonder if people think because we sit on our arses, playing with our computers, we're not doing any 'real' work.

What gets to me, is that I was fulfilling my promise of ongoing maintainance and design re-evaluation, every so often, when I phoned to get the host details. Then I was informed of this... If I hadn't phoned; if I hadn't been fulfilling my promises, I would never have found this out!

I just turn my back on the feeling and move forward, with the knowledge that I can use the skills I've gained, to my own advantage (and those who appreciate it).

Okay, I may not be a CSS guru, but I work hard and do my best to be dependable. I never charge money for it, either.

Dr. V



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum