Re: [css-d] Wordpress theme floats and footers
Fixed positioning is not supported for IE6
This is a followup to my response per David's request. I got the Dean
Edward's IE7 hack to fix IE fixed positioning. I followed the
directions on Dean's site, but I'll describe it here so people can cut
and paste.
Dean's hack uses CSS overrides AND javascript to emulate broken IE CSS
behavior.
The first thing I did was force the DOCTYPE to HTML because IE6
doesn't understand XML and thus, XHTML. I used HTML tag closures
instead of XML tag closures.
After reading Dean's docs, I detemined I only wanted the core fixes
and not the esoteric fixes. I placed the core .JS fixes into a
subfolder (plugins/IE7_0_9), but it still didn't work. After a little
testing, I found it needed the .HTC files too. Here is the files I
placed in the subfolder:
---
ie7-content.htc
ie7-load.htc
ie7-object.htc
ie7-core.js
ie7-squish.js
ie7-standard-p.js
-
Here is the HTML skeleton code. The HEADER div is fixed, but the
CONTENT div scrolls when there is enough content. I stripped out the
extras for the purpose of demonstration:
--
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
meta content=text/html; charset=ISO-8859-1 http-equiv=content-type/meta
!-- compliance patch for microsoft browsers --
!--[if lt IE 7]
script type=text/javascript src=plugins/IE7_0_9/ie7-standard-p.js/script
script type=text/javascript src=plugins/IE7_0_9/ie7-squish.js/script
![endif]--
/head
body
div id=header
div id=logo
h1 class=companyname1companyname1br/span
class=companyname2companyname2/span/h1
/div
div id=content
pcontent content/p
/content
/div
/div
/html
---
Here is the CSS. The only addition I made to help IE is the
FONT-SIZE: LARGE set to the universal selector (*).
---
* {margin: 0; padding: 0; font-size: large;}
html, body {
width: 100%;
min-height: 100%;
font: 0.8125em Verdana, sans-serif;
line-height: 1;
}
#header {
border-bottom-style: solid;
border-bottom-width: 5px;
padding: 10px;
position: fixed;
top: 0;
width: 100%;
}
#logo { float: left;}
#header p {
font-family: Courier New,Courier,monospace;
font-weight: bold;
font-size: 1em;
letter-spacing: .25em;
padding: 1em;
float: left;
}
#content {
font: 0.8125em Verdana, sans-serif;
margin-top: 10em;
padding-top: 10px;
}
.companyname1,
.companyname2 {
text-align: center;
line-height: .75em;
}
.companyname1 {
font-size: 2em;
font-weight: bold;
}
.companyname2 {
font-size: .75em;
font-weight: normal;
}
-Terry
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
ByteDreams wrote:
I'm working on my very first WP theme.
Everything is inside a #wrapper which is underneath the body tag
Then I have the following structure:
#header
body{
top: 0;
margin: 0;
font-family:Arial, Helvetica, sans-serif
font-size:10px;
}
#header{
display:inline;
position:fixed;
z-index: 100;
left:0px;
width: 100%;
top:0px;
background:url(images/background.png);
background-color: #000;
-moz-opacity:0.9;
filter:alpha(opacity=90);
/* line-height: 1.2em; */
}
#container{
position:absolute;
top: 125px;
left: 280px;
width: 550px;
}
#sidebar1{
position:absolute;
float:left;
left: 0;
top: 125px;
}
#footer{
padding: 0;
width: 100%;
clear: both;
}
I plan to add another sidebar for a three-column layout, and widgetize the
sidebars, but haven't added the second sidebar yet.
What I'm having trouble with right now is the footer which is the last div
in the html, goes all the way to the top. I'm not sure I understand how to
get that footer to rest at the very bottom.
Please help.
Thanks,
ByteDreams
Hello,
The problem is you've used absolute positioning and a float. You
have to choose whether to use floats or absolute positioning for the
main layout because they won't play together in the way you're
attempting. You can either absolutely position the footer to the bottom
of the page or you can get rid of position absolute on #container and
#sidebar1 altogether to allow that clear: both; to work.
It'd be easier to explain if you have a test page uploaded somewhere
or if you can provide the html outline...
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Wordpress theme floats and footers
I'm working on my very first WP theme.
Everything is inside a #wrapper which is underneath the body tag
Then I have the following structure:
#header
body{
top: 0;
margin: 0;
font-family:Arial, Helvetica, sans-serif
font-size:10px;
}
#header{
display:inline;
position:fixed;
z-index: 100;
left:0px;
width: 100%;
top:0px;
background:url(images/background.png);
background-color: #000;
-moz-opacity:0.9;
filter:alpha(opacity=90);
/* line-height: 1.2em; */
}
#container{
position:absolute;
top: 125px;
left: 280px;
width: 550px;
}
#sidebar1{
position:absolute;
float:left;
left: 0;
top: 125px;
}
#footer{
padding: 0;
width: 100%;
clear: both;
}
I plan to add another sidebar for a three-column layout, and widgetize the
sidebars, but haven't added the second sidebar yet.
What I'm having trouble with right now is the footer which is the last div
in the html, goes all the way to the top. I'm not sure I understand how to
get that footer to rest at the very bottom.
Please help.
Thanks,
ByteDreams
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
ByteDreams wrote: I'm working on my very first WP theme. Everything is inside a #wrapper which is underneath the body tag Then I have the following structure: I plan to add another sidebar for a three-column layout, and widgetize the sidebars, but haven't added the second sidebar yet. What I'm having trouble with right now is the footer which is the last div in the html, goes all the way to the top. I'm not sure I understand how to get that footer to rest at the very bottom. Please help. Thanks, ByteDreams You court disaster. Absolute positioning is destined to failure for the structure of a layout. Fixed positioning is not supported for IE6-- a browser you'll need to hit for a WP theme. Start with a float layout that is known to work cross-browser. There are 40 of them here http://blog.html.it/layoutgala/. Make one of them yours. That ain't easy. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
ByteDreams wrote: Thank you. I've temporarily loaded the theme on my site. It's now worse than it was - than it appeared offline. For instance I had gotten the dock menu working and in the middle, now its back on the left. I don't know what happened now. I can't see straight anymore. I have the fixed header set to a percentage of the transparency so I could see if anything was hiding underneath, and sure enough, my footer is there at the top. Whats the url of your site? (forgetting to inlcude it happens to the best of us =] ) Try not to worry about it. What you're going to learn now is how positioning and floats work. I'll try and start simple with the concepts, *document flow:* this is the default flow of an html document, by that i mean the way block elements like div and p stack under each other and inline elements like span or strong wrap part of a line of text. By the use of floats and position: absolute we remove an element from this 'normal flow'. *floats:* these put an element into the 'float flow' which can still affect the 'normal flow'. Elements in the 'normal flow' will flow around floated elements. The typical example is floating an image so that text wraps to the side and underneath it. *position: absolute:* this completely removes an item from the 'normal flow'. Elements outside of this item will not be affected by its size or position. This is why you cannot use position absolute and floats on the same element. You can position these relative to their containing element. So if you have a div under the body and position it absolutely it will be positioned relative to the body. If you apply position relative to an element and have an absolutely positioned element inside that then it will be positioned relative to that element and not the body. There's a lot more to it but I hope that helps to explain some things. David Laakso sent you a link to some layouts that you can use to make your own and get started. There are some tricks to float layouts. This tutorial will explain a simple two-column one and helped me get started: http://www.alistapart.com/articles/negativemargins/ When you can understand that google for '3 column float layout' or something to that effect and read up a bit on what comes up. The concepts and techniques will eventually start to click you just have to stick at it. Also if you can get an ftp client then set yourself up a sandbox folder on your website for testing layouts and so on before trying them out your site. Hope that's some help Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
Here's a theme that apparently works. http://windyroad.org/software/wordpress/vistered-little-theme/ I've looked at his files to see how he got that header working, and tried a few things including using the @media screen hack for IE6. Still, I don't see how he's gotten this to work. Oh, my site is http://bytedreams.com/ But I think I may have botched it beyond understanding, LOL.. Thxs for any help. -Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: Friday, June 29, 2007 9:42 AM To: ByteDreams Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Wordpress theme floats and footers ByteDreams wrote: I'm working on my very first WP theme. Everything is inside a #wrapper which is underneath the body tag Then I have the following structure: I plan to add another sidebar for a three-column layout, and widgetize the sidebars, but haven't added the second sidebar yet. What I'm having trouble with right now is the footer which is the last div in the html, goes all the way to the top. I'm not sure I understand how to get that footer to rest at the very bottom. Please help. Thanks, ByteDreams You court disaster. Absolute positioning is destined to failure for the structure of a layout. Fixed positioning is not supported for IE6-- a browser you'll need to hit for a WP theme. Start with a float layout that is known to work cross-browser. There are 40 of them here http://blog.html.it/layoutgala/. Make one of them yours. That ain't easy. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
Here's a theme that apparently works. http://windyroad.org/software/wordpress/vistered-little-theme/ I've looked at his files to see how he got that header working, and tried a few things including using the @media screen hack for IE6. Still, I don't see how he's gotten this to work. Oh, my site is http://bytedreams.com/ But I think I may have botched it beyond understanding, LOL.. Thxs for any help. -Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: Friday, June 29, 2007 9:42 AM To: ByteDreams Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Wordpress theme floats and footers ByteDreams wrote: I'm working on my very first WP theme. Everything is inside a #wrapper which is underneath the body tag Then I have the following structure: I plan to add another sidebar for a three-column layout, and widgetize the sidebars, but haven't added the second sidebar yet. What I'm having trouble with right now is the footer which is the last div in the html, goes all the way to the top. I'm not sure I understand how to get that footer to rest at the very bottom. Please help. Thanks, ByteDreams You court disaster. Absolute positioning is destined to failure for the structure of a layout. Fixed positioning is not supported for IE6-- a browser you'll need to hit for a WP theme. Start with a float layout that is known to work cross-browser. There are 40 of them here http://blog.html.it/layoutgala/. Make one of them yours. That ain't easy. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
ByteDreams wrote: Here's a theme that apparently works. http://windyroad.org/software/wordpress/vistered-little-theme/ I've looked at his files to see how he got that header working, and tried a few things including using the @media screen hack for IE6. Still, I don't see how he's gotten this to work. Considering there are 243 markup validation errors, I would not waste my time or yours. And the @media screen hack is not for IE6. Oh, my site is http://bytedreams.com/ But I think I may have botched it beyond understanding, LOL.. Thxs for any help. Keep it simple and do not top post. Write below those you reply to, please. Best, ~dL ::: Wallpaper trimmed ::: __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
Okay - back to the drawing board then... thxs -Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: Friday, June 29, 2007 2:06 PM To: ByteDreams Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Wordpress theme floats and footers ByteDreams wrote: Here's a theme that apparently works. http://windyroad.org/software/wordpress/vistered-little-theme/ I've looked at his files to see how he got that header working, and tried a few things including using the @media screen hack for IE6. Still, I don't see how he's gotten this to work. Considering there are 243 markup validation errors, I would not waste my time or yours. And the @media screen hack is not for IE6. Oh, my site is http://bytedreams.com/ But I think I may have botched it beyond understanding, LOL.. Thxs for any help. Keep it simple and do not top post. Write below those you reply to, please. Best, ~dL ::: Wallpaper trimmed ::: __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
ByteDreams wrote: Okay - back to the drawing board then... thxs I hope that means back to making one of these http://blog.html.it/layoutgala/ yours, and not top-posting any more. ~dL even more wallpaper trimmed __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wordpress theme floats and footers
David Laakso [EMAIL PROTECTED] wrote: Fixed positioning is not supported for IE6 True, but it will through a hack. I used the Dean Edwards IE7 CSS hack to get fixed positioning to work on IE6. http://dean.edwards.name/IE7/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
