Re: [css-d] footer problem
thanks a lot for the tips! i didn't really do what u wrote, but it helped me to find my own old school way of doing it with tables. i know, i know, but it works and that was the only way of doing this i found, which answered all my requests. please take a look and say if it's too terrible: http://www.tomojacobson.art.pl/strona/pro-cov.htm http://www.tomojacobson.art.pl/strona/style.css thanks Tomo On Thu, Jul 22, 2010 at 2:17 AM, David Laakso da...@chelseacreekstudio.com wrote: tomo jacobson wrote: hi everybody i made a footer: That's nice. I have a red pencil box: and, like most folks on this -- or any other list -- a limited amount of time... and it works: http://www.tomojacobson.art.pl/strona/things.htm 1/ In what operating system [s] / browser [s] does it work as you intend? 2/ In what operating system [s] / browser [s] does it /not/ work as you intend. Tomo Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer problem
tomo jacobson wrote: i didn't really do what u wrote, but it helped me to find my own old school way of doing it with tables. i know, i know, but it works and that was the only way of doing this i found, which answered all my requests. please take a look and say if it's too terrible: http://www.tomojacobson.art.pl/strona/pro-cov.htm http://www.tomojacobson.art.pl/strona/style.css thanks Tomo Tomo, Looks fine to me on a quick look in Camino, Safari, FF, Chrome, Opera, IE/8, and IE/7. IE/6 does not support position;fixed; consequently the whole page scrolls: nevertheless, all the content is present and the page is functional and usable in that browser. So, I'd say you are good to go. Couple of minor validation errors in the markup file that you may want to collect... Fwiw, adding Georgia as the first-font in the string will make the text a little easier to read; as will deleting text-align: justify. Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footer problem
hi everybody
i made a footer:
div id=footer
div id=bottom-image align=center
table
tr
td
a href=news.htmimg
src=images/news-bottom.gif height=37
alt= //a
/td
td
a href=music.htmimg
src=images/music-bottom.gif height=37
alt= //a
/td
td
a href=things.htmimg
src=images/things-bottom.gif
height=37 alt= //a
/td
td
i id=whata href=about.htmimg
src=images/what.gif
height=37 alt= //a/i
/td
/tr
/table
/div
/div
with css:
/* footer
---
*/
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 55px;
background: url(images/tlo-bottom.jpg) repeat-x left bottom;
}
#bottom-image {
padding-top: 10px;
}
#what {
position: absolute;
right: 10px;
bottom: 2px;
}
and it works: http://www.tomojacobson.art.pl/strona/things.htm
BUT...
what i wanted to achieve is that the NEWS, MUSIC and THINGS in the
footer are exactly in the middle, and the QUESTION MARK is on the
right. what i did with the code does the trick, but absolute position
of the QUESTION MARK causes problem when u resize the browser window
to a small one. then QUESTION MARK goes over the THINGS.
i would like it to be in the same table so if u resize it to a small
one then u just can't see them all and u have to scroll left or right
(just as it is with NEWS, MUSIC and THINGS when u resize the window to
a small one), and they don't come over each other. and in the same
time, so NEWS, MUSIC and THINGS exactly in the middle of the footer,
and the QUESTION MARK is on the right.
how to do it?? any ideas?
thanks
Tomo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer problem
tomo jacobson wrote: hi everybody i made a footer: That's nice. I have a red pencil box: and, like most folks on this -- or any other list -- a limited amount of time... and it works: http://www.tomojacobson.art.pl/strona/things.htm 1/ In what operating system [s] / browser [s] does it work as you intend? 2/ In what operating system [s] / browser [s] does it /not/ work as you intend. Tomo Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer-problem
2009/1/22 Gunlaug Sørtun gunla...@c2i.net: Ib Jensen wrote: Link : http://ikjensen.dk/test/common/blank.html The auto-expansion bug in IE6 and older. Well, then I hope that I somehow can get FF to look like IE in this situation. Because IE is showing the Footer as I want it to look. The difference is that good browsers will auto-expand the footer because they're told to do so, and not because they're buggy. Considering that FF, belongs to the better part of the browsers, I've would have expected that FF had shown it more correctly than IE in this case. But, I'm still learning something new about browser behaviors every day. Thanks for your hints and solution -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer-problem
Ib Jensen wrote: Considering that FF, belongs to the better part of the browsers, I've would have expected that FF had shown it more correctly than IE in this case. It does! You have 'height : 100px;' on your footer, and all browsers but IE6 and older honor that height - which is too short for the footer's content. The result is correct and looks interesting, but wasn't quite what you wanted, it seems. IE6 (and older IE/win versions) however does *not* honor declared dimensions if/when the content is too large, and the buggy result just happens to suit you better. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer-problem
--- On Thu, 1/22/09, Ib Jensen ibkjen...@gmail.com wrote: Considering that FF, belongs to the better part of the browsers, I've would have expected that FF had shown it more correctly than IE in this case. Ib, as pointed out in my earlier response to your post, Firefox (and all the other more standards-compliant browsers) *ARE* displaying that correctly - they're honouring the spec. Just because it looks like you want it to, doesn't mean that the display is correct. If you wrote a web page containing nothing but hello, world and IE displayed a 3-dimensional view of the Sistine Chapel, that wouldn't be correct behaviour, even if it were beautiful and exactly what you wanted! :) - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer-problem
2009/1/22 Bobby Jack and Gunlaug: --- On Thu, 1/22/09, Ib Jensen ibkjen...@gmail.com wrote: It does! You have 'height : 100px;' on your footer, and all browsers but IE6 and older honor that height - which is too short for the footer's content. The result is correct and looks interesting, but wasn't quite what you wanted, it seems Your correct, I'm wrong :[ I've set a heigth that was to low for the content in the footer, thats clear for me now, after thinking about what the pictures shows. If you wrote a web page containing nothing but hello, world and IE displayed a 3-dimensional view of the Sistine Chapel, that wouldn't be correct behaviour, even if it were beautiful and exactly what you wanted! :) This could be a very interesting thing to a competition about writing something, and get it to look like something else. But off course your right, behaviour and what I want is two different things. But sometimes I whish they were the same. -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer-problem
Link : http://ikjensen.dk/test/common/blank.html The page in FF http://ikjensen.dk/test/wsimage/ff.jpg The page in IE http://ikjensen.dk/test/wsimage/ie.jpg Whats going on here ??? -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer-problem
Ib Jensen wrote: Link : http://ikjensen.dk/test/common/blank.html The page in FF http://ikjensen.dk/test/wsimage/ff.jpg The page in IE http://ikjensen.dk/test/wsimage/ie.jpg Whats going on here ??? The auto-expansion bug in IE6 and older. IE6 doesn't respect declared dimensions, and treats all elements as if they were expandable table-cells. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer-problem
2009/1/21 Gunlaug Sørtun gunla...@c2i.net: Ib Jensen wrote: Link : http://ikjensen.dk/test/common/blank.html The page in FF http://ikjensen.dk/test/wsimage/ff.jpg The page in IE http://ikjensen.dk/test/wsimage/ie.jpg Whats going on here ??? The auto-expansion bug in IE6 and older. IE6 doesn't respect declared dimensions, and treats all elements as if they were expandable table-cells. Well, then I hope that I somehow can get FF to look like IE in this situation. Because IE is showing the Footer as I want it to look. Or, should I think in a different direction, and get it to look like FF, with some height-declarations ? -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer-problem
Ib Jensen wrote: Well, then I hope that I somehow can get FF to look like IE in this situation. Because IE is showing the Footer as I want it to look. A classic problem: due to IE's bugs, it displays the page incorrectly, but as required. It's only natural to blame the non-IE browsers in this kind of situation, but developing for one of those browsers first is a generally recommended approach. In this specific case, your problem is that the container #sidefod doesn't expand to contain its children (.split_right and .split_left) because they are floated. If you're ever curious as to WHY this behaviour is ingrained in CSS, check out [1]). There are various methods of clearing the floats, some of which involve extra (non-semantic) markup, some additional CSS. Try searching the web for self-clearing floats for example. One quick and easy solution is to add 'overflow: auto' to #sidefod, but please read up about some of the alternatives first, because there are various side-effects of each method, and you'll want to use the right one. [1] http://www.fiveminuteargument.com/float-container - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer-problem
Ib Jensen wrote:
Link : http://ikjensen.dk/test/common/blank.html
The auto-expansion bug in IE6 and older.
Well, then I hope that I somehow can get FF to look like IE in this
situation. Because IE is showing the Footer as I want it to look.
Replace your footer-styles with the following - verbatim...
div#sidefod {padding:0.5em 1em;border-top:5px solid #191970; overflow:
hidden;}
* html div#sidefod {overflow: visible; height: 1%;}
...and all browsers will follow IE6' lead and auto-expand :-)
The difference is that good browsers will auto-expand the footer
because they're told to do so, and not because they're buggy.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footer problem MB
Hi, I'm Mauro I 've read the article: http://www.themaninblue.com/writing/perspective/2005/08/29/ Then I try to center the preceding layout. In IE 6.x it goes well.This page couses problem in FF 2.0.0.12 . The footer go down the screen even if positioning at the bottom of the screen so the browser activate the scroll function. This is that I avoid to do. The page is: http://bertanimauro.helloweb.eu/cssprova/index.html the css is: http://bertanimauro.helloweb.eu/cssprova/css.css Thanks Mauro __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footer problem
Hi, I'm Mauro I 've read the article: http://www.themaninblue.com/writing/perspective/2005/08/29/ Then I try to center the preceding layout. This couses problem in FF 2.0.0.12 . The footer go down the screen; it's not at the bottom of the screen avoiding the scroll The page is http://bertanimauro.helloweb.eu/cssprova/index.html the css is http://bertanimauro.helloweb.eu/cssprova/css.css Thanks Mauro __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer problem with 3 col layout
On 12/22/06 5:14 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I don't know what the footer solution is with that particular layout. If you are not far along, and can, or are willing to switch layouts, the 3 column layout on this page http://alistapart.com/articles/negativemargins includes a footer across the entire bottom, and the tutorial explains the use of images to create faux columns for it. It took a bit, but I started over with the layout you recommended. I have it working correctly. I seems to be a simple thing to take a layout and modify it, but I sure do find ways to mess things up in the process. :-) I have only tested in Mac browsers so no telling what will break in IE. I appreciate your suggestion. -- Diane __ 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] Footer problem with 3 col layout
Diane Ross wrote: On 12/22/06 5:14 PM, ~davidLaakso [EMAIL PROTECTED] wrote: [trimmed] re: http://alistapart.com/articles/negativemargins It took a bit, but I started over with the layout you recommended. I have it working correctly. I seems to be a simple thing to take a layout and modify it, but I sure do find ways to mess things up in the process. :-) You find ways to mess things up... hmm-- I specialize in messing stuff up :-) . I have only tested in Mac browsers so no telling what will break in IE. Post a clickable link to it (to the list) with IE in the subject line. It is a good idea to code to compliant browsers. A better idea may be to make sure it is not upside down and backward in IE6 and 7 as you go along :-) . I appreciate your suggestion. 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] Footer problem with 3 col layout
Diane Ross wrote: [...] I have only tested in Mac browsers so no telling what will break in IE. [...] Hi Diane, IE6 on Win98SE is doing fine here. Browsershots says IE5.0 and IE6 on WinXP too (other IE's not available over there at this moment; often IE5.5 and IE7 can be tested there as well). * Browsershots result http://browsershots.org/screenshots/c74f8a81729ad2ce3ee4f2be56bbcfe3/ Good days, francky btw: some hints of the html-validator http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.test.entourage.mvps.org%2Fpages%2Fpage1h.html __ 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] Footer problem with 3 col layout
Happy Holidays to everyone.
I'm trying to convert my volunteer site from tables to CSS. I used the
example on http://www.positioniseverything.net/guests/3colcomplexside.html
for my base. The footer for the layout was in the container div, but I want
mine to go across the bottom. I added a clear div that I thought was going
to push it down, but it's not working. I'm a newbie and appreciate any help
you can offer so I can get to the real work of updating the content. GoLive
has mangled the code with extraneous divs. They have multiplied like
bunnies. :-)
Not sure if this is part of the same positioning question, but I need all
the columns to be of equal height. I just don't know enough to understand
where the problem is located.
I tried putting the cleardiv2 before and after contents, but the results
were the same.
You can view page (obviously rough) here:
http://www.test.entourage.mvps.org/
--
div id=cleardiv2/div
/div!--this is the end of container--
div id=footer
footer info goes here
/div
div id=bottom/div
/body
CSS
#cleardiv2
{
clear: both;
height: 1em;
}
/**Begin Footer**/
div#footer {
border-top: 2px solid #5C73BA;
text-align: center;
}
Great listI'm learning a lot.
--
Diane
__
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] Footer problem with 3 col layout
Diane Ross wrote: I'm trying to convert my volunteer site from tables to CSS. I used the example on http://www.positioniseverything.net/guests/3colcomplexside.html for my base. The footer for the layout was in the container div, but I want mine to go across the bottom trimmed]. Not sure if this is part of the same positioning question, but I need all the columns to be of equal height. I just don't know enough to understand where the problem is locatedtrimmed] http://www.test.entourage.mvps.org/ I don't know what the footer solution is with that particular layout. If you are not far along, and can, or are willing to switch layouts, the 3 column layout on this page http://alistapart.com/articles/negativemargins includes a footer across the entire bottom, and the tutorial explains the use of images to create faux columns for it. It is similar to (but a little different) than what you are using. If you prefer a fixed width, or min/max width layout, wrap the whole ball of wax within a containing division with an appropriate width assigned to it. This navbar http://css.maxdesign.com.au/listamatic/horizontal16.htm is cross-browser reliable, too-- and will work well with the negative margin layout: http://css.maxdesign.com.au/listamatic/horizontal16.htm. 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/
[css-d] Footer problem in IE
For some reason the footer to this web page ( www.ewp-ltd.co.uk http://www.ewp-ltd.co.uk/ ) doesn't centre correctly within Internet Explorer but works fine with Firefox. Does anyone have a solution? __ 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] Footer problem in IE
To: css-d@lists.css-discuss.org
Subject: [css-d] Footer problem in IE
For some reason the footer to this web page ( www.ewp-ltd.co.uk
http://www.ewp-ltd.co.uk/ ) doesn't centre correctly within Internet
Explorer but works fine with Firefox. Does anyone have a solution?
IE doesn't recognise margin-left:auto;margin:right:auto.
to centre a div, try using percentages:
eg footer {width:90%;margin:0 5% 0%}
Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.408 / Virus Database: 268.13.10/491 - Release Date: 23/10/2006
__
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] footer problem-please help!
http://videointegrations.com/serenity/procedure_relax_pleasure.html The Horizontal scroll bar only in IE6 is apparently caused by the footer. I can't figure out how to get rid of it without causing the problems I resolved in using the css for this particular footer. Compared to anything in the wiki, I think this footer is best, with exception to this problem. I'd love for someone to give me a better footer but seeing all the others comments I don't believe there's better then this. PROVE ME WRONG PLEASE! http://videointegrations.com/serenity/layout.css Look at the bottom for #footer -- Thanks, scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer Problem
Hello! Having a bit of a problem with sticking my footer to the bottom of the page, as per the article at http://www.alistapart.com/articles/footers/ The site I¹m working on can be found at http://www.elnetwork.org.uk and the CSS is at http://www.elnetwork.org.uk/styles.css there¹s also some javascript involved so I¹m not sure if this is off topic or not. Please let me know if it is! Whilst the footer is positioned correctly when content overflows the size of the viewport, when there isn¹t enough content the footer is positioned below the bottom of the window, and you have to scroll down to see it. I¹m a bit stumped as to why, so turning to y¹all for help. Cheers Matt __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
