I've tried everything I can think of to get the footer of my site I'm recoding to recenter, but it won't work in Mozilla's Firefox or Netscape browsers. (it works in IE.)
If you take a look at it you'll se what I mean.
<!-- m --><a class="postlink" href="http://www.test.enlightenedcode.net/resume/">http://www.test.enlightenedcode.net/resume/</a><!-- m -->
Anyone have any suggestions?Jimbo...
You got a few things going on here... In general, some "cleaning up" will solve a lot of your issues.
1) You are using a <div class="foo1" id="foo1">. Only use one or the other. The rule of thumb is you can use ID once and CLASS many times on a page. ID's will overpower a CLASS. If you don't understand the usage, just stick w/ CLASS.
2) A safe thing to do when you work w/ CSS for positioning and layout is to create a generic class called "container" or whatever. I do this all the time, here's how it works.
.container { width:100%; clear:both; }
<div class="container"></div>
You can put your footer inside the "container" tag and this will isolate your footer from the content.
You can also combine classes and make this "conteiner" even more powerful.
If you implement both your page will be fixed. I tested it in Netscape only and it worked fine.Originally posted by RedWingsSux
1) You are using a <div class="foo1" id="foo1">. Only use one or the other.
That's not necessarily true. He may only need one in his situation, but there are times when both the ID and Class are needed. An examle is a drop down menu I made a while back. I wanted all the submenus to look the same, so I styled them with classes, but then I applied specific ID's to them so I could target them with my JavaScript to get the drop down function.I don't see a footer but the page looks fine to me.. But this should help ya,
Second time I've given this link: <!-- m --><a class="postlink" href="http://alistapart.com/articles/footers/">http://alistapart.com/articles/footers/</a><!-- m -->
on a side note, a good idea would be for those links have a white bgcolor :hover. Light 'em up, ya no?I stand my my response - but thank you
Originally posted by Paul Jr
That's not necessarily true.
For example:
CLASS="foo1" ID="foo1" not correct
CLASS="foo1" ID="foo2" correct
Note that you can apply multiple classes to one element using the following syntax:<div class="foo bar">foo</div>Originally posted by RedWingsSux
I stand my my response - but thank you
For example:
CLASS="foo1" ID="foo1" not correct
CLASS="foo1" ID="foo2" correct
Heheh, yeah, that is correct. I sorta misread your post up there. Heheheh.. Thanks for the suggestions everyone. They helped a lot. It turned out part of the problem was when calling a class in HTML I need to be specifying them with the dot (.) in the css file.Originally posted by omega
I don't see a footer but the page looks fine to me.. But this should help ya,
Second time I've given this link: <!-- m --><a class="postlink" href="http://alistapart.com/articles/footers/">http://alistapart.com/articles/footers/</a><!-- m -->
on a side note, a good idea would be for those links have a white bgcolor :hover. Light 'em up, ya no?
Thanks for the suggestion of lighting up the backgrounds on the submenu. I've got it to work in Firefox but it's having trouble in IE. Is there something wrong with my class?
.subnav {
background-color : #333333;
border : 2px solid #999999;
width : 150px;
float : left;
margin-top : 10px;
margin-right : 5px;
margin-bottom : 10px;
}
.subnav ul {
list-style-type : none;
margin : 0;
padding : 0;
border : 2px none inherit;
}
.subnav li {
margin : 0;
padding : 0.25em 0.5em 0.25em 1em;
border-top : 1px solid #999999;
width : 100%;
display : block;
}
html > body .subnav li {
width : auto;
}
.subnav li:first-child {
border : medium none inherit;
}
.subnav li:hover {
background-color : #CCCCCC;
}Originally posted by MCP
I've got it to work in Firefox but it's having trouble in IE. Is there something wrong with my class?
Nope. It's just crappy Stupid-Browser-From-Hell IE doesn't support :hover on anything but <a> elements.<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.htmlOriginally">http://www.xs4all.nl/~peterned/csshover.htmlOriginally</a><!-- m --> posted by Paul Jr
Nope. It's just crappy Stupid-Browser-From-Hell IE doesn't support :hover on anything but <a> elements.
Well you could make them links with no margins but a lot of padding and do #div.class (or w/e) a:hover, or you could do the htc thing posted by FredMV- I personally reccomend the .htc method.Thanks for the suggestions, everyone. I've got the subnav working the way I like it, now. Feel free to take a look.
<!-- m --><a class="postlink" href="http://www.test.enlightenedcode.net/index2.pcgi133715hn355">http://www.test.enlightenedcode.net/ind ... 33715hn355</a><!-- m -->.
Anything else you need suggestions/help/tips/whatever on?Originally posted by omega
Anything else you need suggestions/help/tips/whatever on?
I was wondering what the difference is between using the different units to specify width. In particular: px and em.Originally posted by MCP
I was wondering what the difference is between using the different units to specify width. In particular: px and em.
Pixels are just that: pixels. You can get more predictable results using pixels as a unit of measure, but pixel-based layouts look too small on larger screen sizes. Pixel-based fonts are also non-resizeable in Internet Explorer/PC, which poses a problem for those with poor eyesight. And keep in mind that the majority of the US population is reaching middle age and older (can anyone say bifocals?).
Em-based layouts can be somewhat buggy in Internet Explorer. But then again pixel-based layouts can be somewhat buggy. In all honesty, I've had more problems with IE when using percentage-based layouts than any other method. The biggest advantage with em-based layouts is that the column widths are entirely dependant on the text size setting in the browser.
I'm going to go off topic briefly, but I'll tie it in later to em layouts. Text on screen is easiest to read at about 10 - 12 words per line. This is fairly close to the 14 word per line standard that's used in the print medium (except for newspapers). Using pixel-based and percentage based layouts poses a problem when text size is changed: The number of words per line increases or decreases.
Large text and too few words per line can be equally hard to read as too many small words per line. Now enter em-based layouts.
An em is the point size of a font. On a 72 DPI screen, a 12 point font is roughly 1/5 of an inch in height (assuming a standard of 72 points per inch). In a browser, the point size of a relative font increases or decreases depending on the text size settings via the View menu. Making text larger increases the point size of the font, and thus increases the width and height of an em.
In plain English: Em-based layouts grow proportionately larger or smaller as the browser text size is increased or decreased. Increasing or decreasing text size does not alter (to a great extent) the number of words per line that text gets displayed at. This keeps body text very readable, even at large text sizes.
Also keep in mind that margins between text and another element also adds to readability. Specifying the margins or padding surrounding body text in EMs keeps the space between the text and surrounding elements proportionate when the text size is changed.
Examples:
Elastic Lawn at csszengarden.com (<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=063%2F063%2Ecss">http://www.csszengarden.com/?cssfile=063%2F063%2Ecss</a><!-- m -->)
Multicultural Journalism Workshop (<!-- m --><a class="postlink" href="http://mjw.cmich.edu/">http://mjw.cmich.edu/</a><!-- m -->) at Central Michigan University.
Test pages (<!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/story.html">http://www.cm-life.com/pages/newdesign/story.html</a><!-- m -->) for the new design of Central Michigan Life: <!-- m --><a class="postlink" href="http://www.cm-life.com/">http://www.cm-life.com/</a><!-- m -->
In conclusion: Em-based layouts give the appearance of pages with static widths, but are elastic when text size is changed (hence Elastic Lawn). When text size is increased, you seem to "zoom" in on the page.Originally posted by fredmv
Note that you can apply multiple classes to one element using the following syntax:<div class="foo bar">foo</div>
FYI when I first found this tip elsewhere I was elated, but during my testing found that it is not supported by all the browsers we usually test. It would've been cool to use, but some browsers didn't listen to that at all, some only listened to the first class in the combined declaration, and on it went. It was easier, for compatibility, to just create multiple classes and move on. I hear the CSS purists yelling at me...
We usually test:
Mac: Safari, IE5.x, N7
PC: IE5, 5.5, 6.0, N7
We test various AOL browsers when needed.
thanks for the tip though. It'll be swell when all the browsers pay attention to this appropriately.
It'd be great if there were only one browser in existence.. and ithat browser was FireFox. That'd just kick ass.Originally posted by omega
It'd be great if there were only one browser in existence.. and ithat browser was FireFox. That'd just kick ass.
Yeah, but that would be no fun. Half the fun is spending hours and hours trying to find that minute thing that is screwing up your page in IE 5.Oh yeah, that's REAL fun, Paul.
If you take a look at it you'll se what I mean.
<!-- m --><a class="postlink" href="http://www.test.enlightenedcode.net/resume/">http://www.test.enlightenedcode.net/resume/</a><!-- m -->
Anyone have any suggestions?Jimbo...
You got a few things going on here... In general, some "cleaning up" will solve a lot of your issues.
1) You are using a <div class="foo1" id="foo1">. Only use one or the other. The rule of thumb is you can use ID once and CLASS many times on a page. ID's will overpower a CLASS. If you don't understand the usage, just stick w/ CLASS.
2) A safe thing to do when you work w/ CSS for positioning and layout is to create a generic class called "container" or whatever. I do this all the time, here's how it works.
.container { width:100%; clear:both; }
<div class="container"></div>
You can put your footer inside the "container" tag and this will isolate your footer from the content.
You can also combine classes and make this "conteiner" even more powerful.
If you implement both your page will be fixed. I tested it in Netscape only and it worked fine.Originally posted by RedWingsSux
1) You are using a <div class="foo1" id="foo1">. Only use one or the other.
That's not necessarily true. He may only need one in his situation, but there are times when both the ID and Class are needed. An examle is a drop down menu I made a while back. I wanted all the submenus to look the same, so I styled them with classes, but then I applied specific ID's to them so I could target them with my JavaScript to get the drop down function.I don't see a footer but the page looks fine to me.. But this should help ya,
Second time I've given this link: <!-- m --><a class="postlink" href="http://alistapart.com/articles/footers/">http://alistapart.com/articles/footers/</a><!-- m -->
on a side note, a good idea would be for those links have a white bgcolor :hover. Light 'em up, ya no?I stand my my response - but thank you
Originally posted by Paul Jr
That's not necessarily true.
For example:
CLASS="foo1" ID="foo1" not correct
CLASS="foo1" ID="foo2" correct
Note that you can apply multiple classes to one element using the following syntax:<div class="foo bar">foo</div>Originally posted by RedWingsSux I stand my my response - but thank you
For example:
CLASS="foo1" ID="foo1" not correct
CLASS="foo1" ID="foo2" correct
Heheh, yeah, that is correct. I sorta misread your post up there. Heheheh.. Thanks for the suggestions everyone. They helped a lot. It turned out part of the problem was when calling a class in HTML I need to be specifying them with the dot (.) in the css file.Originally posted by omega I don't see a footer but the page looks fine to me.. But this should help ya,
Second time I've given this link: <!-- m --><a class="postlink" href="http://alistapart.com/articles/footers/">http://alistapart.com/articles/footers/</a><!-- m -->
on a side note, a good idea would be for those links have a white bgcolor :hover. Light 'em up, ya no?
Thanks for the suggestion of lighting up the backgrounds on the submenu. I've got it to work in Firefox but it's having trouble in IE. Is there something wrong with my class?
.subnav {
background-color : #333333;
border : 2px solid #999999;
width : 150px;
float : left;
margin-top : 10px;
margin-right : 5px;
margin-bottom : 10px;
}
.subnav ul {
list-style-type : none;
margin : 0;
padding : 0;
border : 2px none inherit;
}
.subnav li {
margin : 0;
padding : 0.25em 0.5em 0.25em 1em;
border-top : 1px solid #999999;
width : 100%;
display : block;
}
html > body .subnav li {
width : auto;
}
.subnav li:first-child {
border : medium none inherit;
}
.subnav li:hover {
background-color : #CCCCCC;
}Originally posted by MCP
I've got it to work in Firefox but it's having trouble in IE. Is there something wrong with my class?
Nope. It's just crappy Stupid-Browser-From-Hell IE doesn't support :hover on anything but <a> elements.<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.htmlOriginally">http://www.xs4all.nl/~peterned/csshover.htmlOriginally</a><!-- m --> posted by Paul Jr
Nope. It's just crappy Stupid-Browser-From-Hell IE doesn't support :hover on anything but <a> elements.
Well you could make them links with no margins but a lot of padding and do #div.class (or w/e) a:hover, or you could do the htc thing posted by FredMV- I personally reccomend the .htc method.Thanks for the suggestions, everyone. I've got the subnav working the way I like it, now. Feel free to take a look.
<!-- m --><a class="postlink" href="http://www.test.enlightenedcode.net/index2.pcgi133715hn355">http://www.test.enlightenedcode.net/ind ... 33715hn355</a><!-- m -->.
Anything else you need suggestions/help/tips/whatever on?Originally posted by omega
Anything else you need suggestions/help/tips/whatever on?
I was wondering what the difference is between using the different units to specify width. In particular: px and em.Originally posted by MCP
I was wondering what the difference is between using the different units to specify width. In particular: px and em.
Pixels are just that: pixels. You can get more predictable results using pixels as a unit of measure, but pixel-based layouts look too small on larger screen sizes. Pixel-based fonts are also non-resizeable in Internet Explorer/PC, which poses a problem for those with poor eyesight. And keep in mind that the majority of the US population is reaching middle age and older (can anyone say bifocals?).
Em-based layouts can be somewhat buggy in Internet Explorer. But then again pixel-based layouts can be somewhat buggy. In all honesty, I've had more problems with IE when using percentage-based layouts than any other method. The biggest advantage with em-based layouts is that the column widths are entirely dependant on the text size setting in the browser.
I'm going to go off topic briefly, but I'll tie it in later to em layouts. Text on screen is easiest to read at about 10 - 12 words per line. This is fairly close to the 14 word per line standard that's used in the print medium (except for newspapers). Using pixel-based and percentage based layouts poses a problem when text size is changed: The number of words per line increases or decreases.
Large text and too few words per line can be equally hard to read as too many small words per line. Now enter em-based layouts.
An em is the point size of a font. On a 72 DPI screen, a 12 point font is roughly 1/5 of an inch in height (assuming a standard of 72 points per inch). In a browser, the point size of a relative font increases or decreases depending on the text size settings via the View menu. Making text larger increases the point size of the font, and thus increases the width and height of an em.
In plain English: Em-based layouts grow proportionately larger or smaller as the browser text size is increased or decreased. Increasing or decreasing text size does not alter (to a great extent) the number of words per line that text gets displayed at. This keeps body text very readable, even at large text sizes.
Also keep in mind that margins between text and another element also adds to readability. Specifying the margins or padding surrounding body text in EMs keeps the space between the text and surrounding elements proportionate when the text size is changed.
Examples:
Elastic Lawn at csszengarden.com (<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=063%2F063%2Ecss">http://www.csszengarden.com/?cssfile=063%2F063%2Ecss</a><!-- m -->)
Multicultural Journalism Workshop (<!-- m --><a class="postlink" href="http://mjw.cmich.edu/">http://mjw.cmich.edu/</a><!-- m -->) at Central Michigan University.
Test pages (<!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/story.html">http://www.cm-life.com/pages/newdesign/story.html</a><!-- m -->) for the new design of Central Michigan Life: <!-- m --><a class="postlink" href="http://www.cm-life.com/">http://www.cm-life.com/</a><!-- m -->
In conclusion: Em-based layouts give the appearance of pages with static widths, but are elastic when text size is changed (hence Elastic Lawn). When text size is increased, you seem to "zoom" in on the page.Originally posted by fredmv
Note that you can apply multiple classes to one element using the following syntax:<div class="foo bar">foo</div>
FYI when I first found this tip elsewhere I was elated, but during my testing found that it is not supported by all the browsers we usually test. It would've been cool to use, but some browsers didn't listen to that at all, some only listened to the first class in the combined declaration, and on it went. It was easier, for compatibility, to just create multiple classes and move on. I hear the CSS purists yelling at me...
We usually test:
Mac: Safari, IE5.x, N7
PC: IE5, 5.5, 6.0, N7
We test various AOL browsers when needed.
thanks for the tip though. It'll be swell when all the browsers pay attention to this appropriately.
It'd be great if there were only one browser in existence.. and ithat browser was FireFox. That'd just kick ass.Originally posted by omega It'd be great if there were only one browser in existence.. and ithat browser was FireFox. That'd just kick ass.
Yeah, but that would be no fun. Half the fun is spending hours and hours trying to find that minute thing that is screwing up your page in IE 5.
Oh yeah, that's REAL fun, Paul.