DIV element not stretching in all browsers
Good morning experts. I haev a site I am developing (http://www.alburtisstoragecenter.com/Playground/prices.htm) that is behaving differently.
I have three computers I am looking at thsi site on.
One is Win XP SP2 with IE 8.
One is Windows 7 Home Edition with IE 9.
One is Windows 7 Pro with IE 9.
On the first two machines, the above web page has the white DIV element cut off two thirds the way down the table.
On the last machine, the element goes all the wyay down to the bottom of the screen (preferred behavior).
Any ideas? Is it settings in IE?
I have three computers I am looking at thsi site on.
One is Win XP SP2 with IE 8.
One is Windows 7 Home Edition with IE 9.
One is Windows 7 Pro with IE 9.
On the first two machines, the above web page has the white DIV element cut off two thirds the way down the table.
On the last machine, the element goes all the wyay down to the bottom of the screen (preferred behavior).
Any ideas? Is it settings in IE?
ASKER
level9wizard:
Thanks. I do have the source code here, I will forward link home and work on it tonight.
I will fix the errors listed and try to view again on one of the PCs with an odd appeareance.
Thanks. I do have the source code here, I will forward link home and work on it tonight.
I will fix the errors listed and try to view again on one of the PCs with an odd appeareance.
ASKER
level9wizard:
I ran the validator against my HTML source and fixed the errors.
I also validated my CSS (no errors found), but pages are still not showing properly on two of my machines. (please see screen shot)
I ran the validator against my HTML source and fixed the errors.
I also validated my CSS (no errors found), but pages are still not showing properly on two of my machines. (please see screen shot)
ASKER
Beginning to think it's PC specific.
Should the Experts Exchange page look like this?
Should the Experts Exchange page look like this?
Right before you close your "center" div (the last div before body) add this:
<div style="clear: both;"></div>
That will properly stretch your wrapper around the bottom of the content.
<div style="clear: both;"></div>
That will properly stretch your wrapper around the bottom of the content.
ASKER
DanielleFavreau:
Thanks for the idea. I placed the <div style="clear: both;"></div> immediately before the closing </div> tag of my 'center' div to no avail.
This is so frustrating because it looks fine on my work laptop and iPhone.
It even looks wrong on Firefox on my home laptop.
Thanks for the idea. I placed the <div style="clear: both;"></div> immediately before the closing </div> tag of my 'center' div to no avail.
This is so frustrating because it looks fine on my work laptop and iPhone.
It even looks wrong on Firefox on my home laptop.
Ah, you're not floating your divs so they're just stacking up. You really should put your CSS in an external file and link to it. Using inline styles is very bad practice.
To fix the issue you're having, remove the "height: 100%;" on your center div that doesn't do what you think it does.
To fix the issue you're having, remove the "height: 100%;" on your center div that doesn't do what you think it does.
ASKER
DanielleFavreau:
My CSS is in an external file and being linked to.
I will remove the height: 100% from center div tonight and try that.
How do I float my DIVs? Do I need to?
My CSS is in an external file and being linked to.
I will remove the height: 100% from center div tonight and try that.
How do I float my DIVs? Do I need to?
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
DanielleFavreau,
Thank you for the insight and help.
I will update my pages and stylesheet per your recommendations, upload and verify output tonight.
Then, I will either comment tonight or tomorrow.
Thank you.
Thank you for the insight and help.
I will update my pages and stylesheet per your recommendations, upload and verify output tonight.
Then, I will either comment tonight or tomorrow.
Thank you.
ASKER
DanielleFavreau:
First of all, thank you again for your help. Additionally, your sites look amazing. Great work! I have converted my existing pages to pure external styling.
You've helped me fix my height issue! Thank you! The container now appears to grow and shring with the size of the elements inside; just what I was looking for.
Now, on the prices page, I can't seem to get my footer div BELOW the table I have...
Can you help?
I will try to take my persoanl laptop with me to work so I can work with the pages there.
First of all, thank you again for your help. Additionally, your sites look amazing. Great work! I have converted my existing pages to pure external styling.
You've helped me fix my height issue! Thank you! The container now appears to grow and shring with the size of the elements inside; just what I was looking for.
Now, on the prices page, I can't seem to get my footer div BELOW the table I have...
Can you help?
I will try to take my persoanl laptop with me to work so I can work with the pages there.
You're welcome. And thank you.
For your footer issue, in your #footer declaration in your css file, add: clear: both;
See below:
#footer
{
padding-bottom:15px;
margin:0 auto;
clear: both;
}
This is needed because your table is actual set to float left so your footer needs to go around it.
For your footer issue, in your #footer declaration in your css file, add: clear: both;
See below:
#footer
{
padding-bottom:15px;
margin:0 auto;
clear: both;
}
This is needed because your table is actual set to float left so your footer needs to go around it.
ASKER
Thank you so much for all of your help (and your patience!)
Your explanations were easy to follow and I appreciate the resources you pointed me to so I canlearn more.
Thanks, again!
Your explanations were easy to follow and I appreciate the resources you pointed me to so I canlearn more.
Thanks, again!
You're welcome. I hope those sites are useful for you. Also look at csszengarden to see what all you can do with really great CSS (without having any of it in your HTML). That's what got me so keen on CSS.
Quick link: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.alburtisstoragecenter.com%2FPlayground%2Fprices.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
For example, I notice you have some <a><li>...</li></a> and that's not valid code per your doctype. This could be causing rendering inconsistencies. Moreover, this could hurt your SEO (if search engines have a hard time crawling links).