My site shows correctly in Safari & Firefox but does not come out correct on Mac IE & probably Win IE as well. I have navigation links on the left side, with fixed position, with a background color that is supposed to extend all the way to the bottom of the window. In Mac IE the background color stops at the end of the last navigation link and becomes white extending to the bottom of the page. I have a black border separating the nav links from the main content section. A white strip also extends across the very bottom of my main content section to the far right.
Can I prevent that from happening? I know fixed positioning does not work in IE. But I tried absolute positioning and the page still came out wrong in IE. So how do I fix it so that the page looks right in IE? Not a fan of IE but would not like my page to be viewed incorrectly by millions of web users.
#navigation {
position: fixed;
width: 11em;
height: 100%;
border: 0;
margin: 0;
padding-top: 5em;
background-color:#333300;
list-style-type: none;
}
#navigation h1 {
padding-left: 0.25em;
color:#ffcc33;
font-size: 0.85em;
font-family: helvetica;
}
#navigation a {
font-size: 0.70em;
font-family: Trebuchet MS, verdana, geneva, sans-serif;
color: red;
display: block;
text-decoration: none;
padding-left: 0.50em;
border-bottom: solid black 1px;
}
#navigation a:hover {
color: black;
background-color:#ffcc33;
}
#content {
position: absolute;
background:#ffcc33;
padding-top: 2em;
left: 11em;
border-left: solid black 1px;
padding-left: 3em;
padding-right: 3em;
text-align: left;
}Take a look at this page.
<!-- m --><a class="postlink" href="http://www.cssplay.co.uk/layouts/fixed.html">http://www.cssplay.co.uk/layouts/fixed.html</a><!-- m -->
UPDATE
Here's the way I would handle this if I read your post correctly.
Create a background image the width and color of your 'nav' column plus 1px of black (the border). Make it 2px high.
body {
background: #fc3 url(images/bkgnd.gif) repeat-y;
}
#fc3 (same as 'ffcc33') will be the background color of your content and you will have the 'nav' background running the full depth of the screen.
Do NOT include a background color for the 'nav' div. (it's no longer needed)
I did not understand what this means. I 'assumed' that it was undesirable.
A white strip also extends across the very bottom of my main content section to the far right.
Now all you need to do is fix the position of the 'nav' div using the techniques from the link above
and set your content 'margin-left'.Thank you so much for that link. I applied height:100% & overflow-y:auto to the body in my css and it worked perfectly.
My only other problem is that there is a white strip at the bottom of my main content page in IE only, which yes is undesirable. The background of my content page extends all the way to just before the end of the page and then there is a narrow strip of white that runs horizontally from left to right. I'm sure there is an easy way to fix this but I do not know how. Thanks so much for the help, you saved me.My only other problem is that there is a white strip at the bottom of my main content page in IE only, which yes is undesirable. The background of my content page extends all the way to just before the end of the page and then there is a narrow strip of white that runs horizontally from left to right.
This problem will persist and will depend on the heights of your 'nav' and 'content' divs which is controlled by their content. Try the repeat-y body background image I suggested and your problem will go away.Thanks for the help but I have a weird problem. When I opened the IE browser on my computer and then opened my web page file, my page displayedcorrectly. However after uploading the updated files onto the server and then going to my site, it was not showing correctly. What is going on here? Why is it still displaying right on my computer but not live online? I'm confused. Any ideas? Thanks.Are you using the correct doctype?This may be too obvious
Is your old page cached? Try refresh.Thanks for the help. All I needed was to refresh the page and it displays correctly.
Can I prevent that from happening? I know fixed positioning does not work in IE. But I tried absolute positioning and the page still came out wrong in IE. So how do I fix it so that the page looks right in IE? Not a fan of IE but would not like my page to be viewed incorrectly by millions of web users.
#navigation {
position: fixed;
width: 11em;
height: 100%;
border: 0;
margin: 0;
padding-top: 5em;
background-color:#333300;
list-style-type: none;
}
#navigation h1 {
padding-left: 0.25em;
color:#ffcc33;
font-size: 0.85em;
font-family: helvetica;
}
#navigation a {
font-size: 0.70em;
font-family: Trebuchet MS, verdana, geneva, sans-serif;
color: red;
display: block;
text-decoration: none;
padding-left: 0.50em;
border-bottom: solid black 1px;
}
#navigation a:hover {
color: black;
background-color:#ffcc33;
}
#content {
position: absolute;
background:#ffcc33;
padding-top: 2em;
left: 11em;
border-left: solid black 1px;
padding-left: 3em;
padding-right: 3em;
text-align: left;
}Take a look at this page.
<!-- m --><a class="postlink" href="http://www.cssplay.co.uk/layouts/fixed.html">http://www.cssplay.co.uk/layouts/fixed.html</a><!-- m -->
UPDATE
Here's the way I would handle this if I read your post correctly.
Create a background image the width and color of your 'nav' column plus 1px of black (the border). Make it 2px high.
body {
background: #fc3 url(images/bkgnd.gif) repeat-y;
}
#fc3 (same as 'ffcc33') will be the background color of your content and you will have the 'nav' background running the full depth of the screen.
Do NOT include a background color for the 'nav' div. (it's no longer needed)
I did not understand what this means. I 'assumed' that it was undesirable.
A white strip also extends across the very bottom of my main content section to the far right.
Now all you need to do is fix the position of the 'nav' div using the techniques from the link above
and set your content 'margin-left'.Thank you so much for that link. I applied height:100% & overflow-y:auto to the body in my css and it worked perfectly.
My only other problem is that there is a white strip at the bottom of my main content page in IE only, which yes is undesirable. The background of my content page extends all the way to just before the end of the page and then there is a narrow strip of white that runs horizontally from left to right. I'm sure there is an easy way to fix this but I do not know how. Thanks so much for the help, you saved me.My only other problem is that there is a white strip at the bottom of my main content page in IE only, which yes is undesirable. The background of my content page extends all the way to just before the end of the page and then there is a narrow strip of white that runs horizontally from left to right.
This problem will persist and will depend on the heights of your 'nav' and 'content' divs which is controlled by their content. Try the repeat-y body background image I suggested and your problem will go away.Thanks for the help but I have a weird problem. When I opened the IE browser on my computer and then opened my web page file, my page displayedcorrectly. However after uploading the updated files onto the server and then going to my site, it was not showing correctly. What is going on here? Why is it still displaying right on my computer but not live online? I'm confused. Any ideas? Thanks.Are you using the correct doctype?This may be too obvious
Is your old page cached? Try refresh.Thanks for the help. All I needed was to refresh the page and it displays correctly.