CSS: Container height being reset.

[nathj]

Hi,

I have been working on a redesign of a site. this is a site that was developed by someone else and the CSS has been built to fit with the CMS that they supplied.

This redesign is nearly complete - and is fairly simple. there is one area of trouble though. the #container on the site is set to height 100% but, in FF it is resetting itself to 551px!

The site in question is www.vardyfoundation.com and if you load this in IE7 and look at the Projects->International Page you will see that the central container runs all the way down.

Within this central container is a main content holder - #body_page_column_a which in FF overshoots the #container - take a look .

Then if you load the site in Opera or Safari on Windows the results are even weirder.

I have spent a large part of today pulling my hair out over this issue and would really love some help with it. I have posted the 2 CSS references I made above, if you need more code either give me a shout or use your preferred web developer features in your preferred browser.

body {
    font-family: verdana, sans-serif;
    font-size:    12px;
    color:    #333333;   
    background-color: #d7d7d7;
    background-image: url(../graphics/imagery/vf_bg_brushedsteel.png);
    background-repeat: repeat-x; 
    padding: 0px;
    margin: 0px;        
    margin-top:10px;
    margin-bottom:20px;      
    height: 100%;
    text-align: center;
}    
 
#container {   
    width: 800px;                     
    margin: auto; 
    overflow: visible;
    height: 100%;     
    border: 2px solid #dcdcdc ;
    background: #ffffff;
}
 
    #body_page_column_a {  
        width: 590px;       
        padding-top: 10px;
        float: left;        
        text-align: left;                 
        margin-left: 12px; 
        background: #ffffff;
    }
 

Cheers
nathj

[David Laakso]

Considering the doctype and that there are 2340 markup validation errors it is a wonder it shows up on the screen in any browser.

[nathj]

Considering the doctype and that there are 2340 markup validation errors it is a wonder it shows up on the screen in any browser.

I am aware of all the errors, however, I do not have the capability to change them as the code was not written by me and is generated by a CMS.

Personally I adhere strictly to standards and see their worth in web development. That said failing to comply with standards shouldn't prevent a site from displaying at all (just correctly - hence there are lots of fudges if you look into it - not written by me in the first instance) - they're not the same thing as compile errors.

Other than this comment on standards do you have any other helpful advice?

Cheers
nathj

[David Laakso]

Other than this comment on standards do you have any other helpful advice?
nathj

Not really. Try:

#container {   border: 1px solid fuchsia;    
    width: 800px;                     
    margin: auto; 
    overflow: visible;<---------delete
    height: 100%;<--------------delete     
        overflow : hidden;<---------add
    background: #ffffff;
}
 
 And add the following:
 
 
#container:after {
content : '.';
display : block;
height : 0;
clear : both;
visibility : hidden;
}
#container {
display : inline-block;
}
#container {
display : block;
}
 
 
 
 

[drhowarddrfine]

This wins the prize as the page with the most errors I have ever seen. The previous record was around 2100 or so html errors. (Which led to an edgy thread which was stuck to the top of this board for quite a while.)

The markup even starts off on the wrong foot by not putting a doctype on the first line. This puts IE into quirks mode and right away you can't get it to perform like modern browsers. So you have an uphill battle right there.

In addition, the validator can't parse the tags due to improper use of tags so how can the browser? The fact that it works in IE is pure luck and nothing else except they obviously only looked at IE when it was originally written.

David's comments were hardly about standards as they are about writing proper code that all browsers understand. You can't count on errors to work the same everywhere now or in the future and all browsers to guess the same way.

I spent a few minutes to see if I could narrow it down to the one box you mention but changing one thing here flipped everything else around there and it quit making sense, not that it did before. It looks more like the flow of things isn't quite right and you're trying to get the CSS to fix it. I see you using 'overflow' but I'm not sure there are floats in the right spot to fix it.

[David Laakso]

Incidentally, the above CSS (opening it to enclose the floats and whatever all that garbage is using the "easy clearing" method) was done "live" in Mac FF/3.01. Chances of this actually working are about slim to none.

[eWish]

Wow, that's more error then I have lines of HTML on the average. It would be nice if the CMS you were using followed web standards.

--Kevin

[nathj]

First of all I am really keen to distance myself from the original author on this project. I did not write the HTML, I did not write the original CSS. I am forced into using this. Normally I write sites myself in PHP and follow standards for everything - I validate and the sites I write pass validation.

One question is which validators do you use - I want to make sure the sites I write adhere to standards - they all look the same on IE6,7 FF 2,3 (windows and Linux) Opera, Safari (on windows and Mac) and Chrome. So really this is not an example of 'doctor, my friend has a rash', I really did not write this. as such I am stuck with trying to make it work within the system I have been given.

I will have a play around with the suggestions you all made - as far as I can and let you know how I get on.

Thanks for taking the time to stop by and offer some wisdom.

Cheers
nathj

PS On the plus side I did just win 'most errors' award

[nathj]

Whilst still maintaining distance (I know this is growing suspicious now isn't it) I have "fixed" the display issues I asked about - thanks for the CSS tips.

I use "fixed" in the loosest possible sense because if you run the code through validation then you will see that it is positively riddled with errors. I am going to raise this issue with chap who developed it and see if he can release a new version of his system that passes validation.

When I say "fixed" I mean it displays in roughly the same way in the main browsers - basically it is acceptable to the boss and I have other projects to work on, plus I'm on holiday next week.

So, thanks for all your help and the discussion on standards was good - has anyone read this article?

Cheers
nathj

[David Laakso]

Yes, I read the article. And, no, I do not have any difficulty sleeping at night. Do you have a CSS/(X)HTML question you forgot to ask?

[nathj]

Yes, I read the article. And, no, I do not have any difficulty sleeping at night. Do you have a CSS/(X)HTML question you forgot to ask?

I just thought the article was an interesting contribution the more general side of the discussion. I had no further questions as the site is now displaying as it should where it should. It's still full of errors that I would rather weren't there but short of re-writing the site myself that's not going to change. As I got someone else to do it because I was too busy and the deadline was before I was asked to get it done a re-write is highly unlikely.

Thanks to everyone for the help, the CSS you posted got it 'working'.

Cheers
nathj

[drhowarddrfine]

So, thanks for all your help and the discussion on standards was good - has anyone read this article?

I'll tell you a few things about Molly since she and I occasionally scream at each other. Molly knows how to be politically correct. Molly believes in web standards. Molly thinks Microsoft is so mired in their own poo-poo that they will never get out and management there truly doesn't have a clue or cares. Molly thinks more problems are caused on the internet by Microsoft than anyone and anything else mentioned in that article.

Those are the things she will tell you if you catch her at the right moment.

[nathj]

I'll tell you a few things about Molly since she and I occasionally scream at each other. Molly knows how to be politically correct. Molly believes in web standards. Molly thinks Microsoft is so mired in their own poo-poo that they will never get out and management there truly doesn't have a clue or cares. Molly thinks more problems are caused on the internet by Microsoft than anyone and anything else mentioned in that article.

Those are the things she will tell you if you catch her at the right moment.

That's interesting - I'm sure there are lots of people who share that opinion even without the inside information. I know when I develop my own site if I scream at anyone or anything its MS and IE.

I think if we are to get anywhere with web standards we have to believe in them, we have to implement to them and we have to do what we can to drive them forward.