Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Old Project Broken - Please help.

    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
    Last edited by Doctor_Varney; 01-15-2010 at 06:05 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    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 -
    Code:
    #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.
    Last edited by Excavator; 01-15-2010 at 05:33 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Location
    Chicago
    Posts
    134
    Thanks
    2
    Thanked 9 Times in 9 Posts
    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:
    Code:
    #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.

  • Users who have thanked arthurakay for this post:

    Doctor_Varney (01-15-2010)

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Well, that worked!

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

    Kind regards

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by Doctor_Varney View Post
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by Doctor_Varney View Post
    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! Worse, it's all butchered by whoever finished it... all full of mistakes and tables and invalid.

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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
    Last edited by Doctor_Varney; 01-15-2010 at 10:49 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •