Re: [css-d] strange problem with float
On Sat, Jan 23, 2010 at 1:25 AM, david gn...@hawaii.rr.com wrote: I believe there are also virtual machine images available from MS that can be used under MS' proprietary VM player, that include differing versions of IE. Found the link on the TheFreeCountry.com website (many good tutorials/info there): http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EFdisplaylang=en. Or you can use Linux. Sun's VirtualBox will happily install and run Windows in a VM. You set up a VirtualBox image, make a copy of it, run the copy and upgrade the IE installed in that copy, etc ... ;-) We use VirtualBox. But you still need a licensed copy of Windows installed in your VM. Thanks to everyone for the replies! Oliver __ 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] Fixed three-column with padding: newbie question
Hi Folks, I'm definitely a newbie, trying to wean myself off tables. What I need is a 720px wide box with three 240px cells inside it, with 10px padding-right for each cell. It cannot be flexible or stretchable. I found what I **thought** might be the recipe for such a design: http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/ However, I cannot get the middle cell to display 240px wide: http://people.ucsc.edu/~class1/ Any suggestions/ideas MUCH appreciated, so I can leave tables behind! Thanks! Cheers, Doug __ 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] Fixed three-column with padding: newbie question
Doug Niven wrote: However, I cannot get the middle cell to display 240px wide: http://people.ucsc.edu/~class1/ Subtract the side-padding from the float-width - both side-floats. width: 230px + padding-right: 10px equals float-width = 240px. That will leave 240px between the floats. regards Georg __ 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] Fixed three-column with padding: newbie question
On Sunday, January 24, 2010 1:03:10 pm Doug Niven wrote:
Hi Folks,
I'm definitely a newbie, trying to wean myself off tables.
What I need is a 720px wide box with three 240px cells inside it, with 10px
padding-right for each cell.
You need a box-model refresher. padding, borders, and margins are *outside*
the width of an element.
So, in your example, 3x240px is 720px. Which means you don't have any more
room for the extra 30px of right padding.
What you really want, I think, is 3 cells that are 230px wide, and 10px of
right padding.
div.container {width: 720px;}
div.column {
width: 230px;
padding-right: 10px;
float: left;
}
div class=container
div class=column/div
div class=column/div
div class=column/div
/div
should do the trick.
Or, since you are essentially aiming for a table, you could use the display:
table* properties at well.
---Tim
__
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] Fixed three-column with padding: newbie question
Hi Doug, I'm definitely a newbie, trying to wean myself off tables. What I need is a 720px wide box with three 240px cells inside it, with 10px padding-right for each cell. It cannot be flexible or stretchable. I found what I **thought** might be the recipe for such a design: http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/ However, I cannot get the middle cell to display 240px wide: http://people.ucsc.edu/~class1/ Any suggestions/ideas MUCH appreciated, so I can leave tables behind! If you set a 240px width and 10px padding, the box is actually 250px wide (because padding/border/width add up). So try 230px instead, and then Google: CSS Box Model -- Regards, Thierry | www.tjkdesign.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] Fixed three-column with padding: newbie question
Doug Niven wrote:
Hi Folks,
I'm definitely a newbie, trying to wean myself off tables.
What I need is a 720px wide box with three 240px cells inside it, with 10px
padding-right for each cell.
It cannot be flexible or stretchable.
I found what I **thought** might be the recipe for such a design:
http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/
However, I cannot get the middle cell to display 240px wide:
http://people.ucsc.edu/~class1/
Any suggestions/ideas MUCH appreciated, so I can leave tables behind!
Thanks!
Cheers, Doug
Hi Doug,
I suspect you haven't told us the full story, so here's the simplistic
answer. Note that the columns are each 240px wide (230px of content +
5px left padding + 5px right padding). Both the HTML and the CSS are valid:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titlea propos nothing/title
meta name=GENERATOR content=Quanta Plus /
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
style type=text/css
#wrapper {
width:720px;
}
#left, #middle, #right {
width:230px;
padding:5px;
float:left;
}
/style
/head
body
div id=wrapper
div id=left
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi viverra dignissim dui, sit amet pellentesque orci sagittis vel.
Integer eget enim eu nibh consequat cursus nec eu erat. Pellentesque
eleifend turpis at nunc commodo vehicula. Suspendisse potenti. Praesent
nec massa sed tortor ultrices molestie fermentum sed purus. Nunc eu
lacus nisi. Aenean ultrices, ipsum in vestibulum ornare, lorem erat
auctor sapien, aliquet blandit diam justo ut dolor. Sed quis euismod
nibh. Nulla facilisi. Maecenas tempus congue leo sit amet ullamcorper.
Aenean vitae felis sit amet elit cursus aliquet. Sed venenatis vehicula
porttitor. Mauris viverra facilisis nulla, id laoreet neque consectetur
sed. Nulla in egestas felis. Aliquam a metus nulla, non feugiat ligula.
Praesent gravida, libero quis cursus dignissim, turpis justo pulvinar
orci, a pulvinar tortor est vitae augue.
/p
/div
div id=middle
p
Mauris sed ullamcorper diam. Vivamus ac risus ut nulla
placerat fermentum volutpat a ipsum. Nulla vitae dolor justo, vitae
blandit metus. Sed lobortis dapibus libero nec dapibus. Vestibulum arcu
sapien, semper et euismod eu, rutrum semper metus. Pellentesque volutpat
diam at lacus fermentum in luctus diam lobortis. Praesent nec nibh orci.
Etiam quam nisi, tempus et pharetra vel, euismod ut elit. Phasellus non
lectus nunc. Maecenas nec lacus nisl. Pellentesque malesuada elit
iaculis est euismod dictum gravida turpis elementum. Vivamus tempus,
justo at blandit dictum, lacus elit rutrum augue, eget varius magna eros
eu arcu. Integer malesuada gravida ligula, a bibendum purus semper nec.
Cras suscipit ipsum non tortor convallis ac egestas elit sollicitudin.
Vivamus imperdiet dui vitae lorem vulputate adipiscing. Vivamus ultrices
dui ac augue tincidunt vel posuere orci molestie. In tincidunt, augue id
viverra elementum, metus sapien venenatis tortor, sit amet ornare nisi
magna ac velit.
/p
/div
div id=right
p
Morbi luctus urna vitae quam malesuada tincidunt. Quisque
facilisis ligula at mauris iaculis vel luctus mi consequat. Vivamus
fermentum auctor odio a gravida. Praesent a sem a mauris suscipit
gravida. Sed massa mi, malesuada a fringilla id, molestie vel mi. Sed
risus dolor, porta sit amet tempus sed, gravida id dolor. Maecenas
libero enim, cursus a imperdiet eget, laoreet sed massa. Aliquam
consequat lacinia mattis. Mauris a quam nulla. Praesent consectetur
sagittis ullamcorper. Praesent tincidunt condimentum feugiat. Curabitur
ullamcorper dapibus dui vitae convallis. Sed placerat rhoncus
condimentum. Cras sit amet est vel turpis rutrum tincidunt.
/p
/div
/div
/body
/html
Actually, I'd let one of the columns size itself, to give the browser
some wiggle room. And don't forget that if you want borders and/or
margins that these add to the width.
Cheers
Peter
http://www.peredur.net
__
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] -moz-box-shadow
Hi all, I've got a question about box-shadow. If you have a shadow on an element with 100% width (an unfloated div, say), and give it a box-shadow, in firefox (with -moz-box-shadow) you get horizontal scroll, while in Safari/Chrome (with - webkit-box-shadow) you do not. Has anyone discovered a way to make Mozilla act like Webkit? Overflow hidden appears to work, except that then, if you shrink the page to the point where you might actually *want* horizontal scroll, you don't get it. If you need a code example, the menus at www.uselessgeography.com should be sufficient. ---Tim __ 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] Fixed three-column with padding: newbie question
On Sunday 24 January 2010 13:24:57 Tim Climis wrote: On Sunday, January 24, 2010 1:03:10 pm Doug Niven wrote: Hi Folks, I'm definitely a newbie, trying to wean myself off tables. What I need is a 720px wide box with three 240px cells inside it, with 10px padding-right for each cell. You need a box-model refresher. padding, borders, and margins are *outside* the width of an element. Actually, padding is on the inside of the width of an element, the margins are outside the width of an element and the border is in between. ;-) HeHeHe -- Blessings David M. I have been driven to my knees many times by the overwhelming conviction that I had nowhere else to go. __ 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] Fixed three-column with padding: newbie question
On Sun, 24 Jan 2010, David McGlone wrote: On Sunday 24 January 2010 13:24:57 Tim Climis wrote: On Sunday, January 24, 2010 1:03:10 pm Doug Niven wrote: Hi Folks, I'm definitely a newbie, trying to wean myself off tables. What I need is a 720px wide box with three 240px cells inside it, with 10px padding-right for each cell. You need a box-model refresher. padding, borders, and margins are *outside* the width of an element. Actually, padding is on the inside of the width of an element, the margins are outside the width of an element and the border is in between. ;-) Padding, borders and margins are all added to the width of an element if a width is given (except in old versions of IE). If no width is given, then the element's width will be reduced (because it is already consuming 100% of the width of its container). -- Chris F.A. Johnson http://cfajohnson.com === Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) __ 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] Fixed three-column with padding: newbie question
On Sunday 24 January 2010 14:35:24 Chris F.A. Johnson wrote: On Sun, 24 Jan 2010, David McGlone wrote: On Sunday 24 January 2010 13:24:57 Tim Climis wrote: On Sunday, January 24, 2010 1:03:10 pm Doug Niven wrote: Hi Folks, I'm definitely a newbie, trying to wean myself off tables. What I need is a 720px wide box with three 240px cells inside it, with 10px padding-right for each cell. You need a box-model refresher. padding, borders, and margins are *outside* the width of an element. Actually, padding is on the inside of the width of an element, the margins are outside the width of an element and the border is in between. ;-) Padding, borders and margins are all added to the width of an element if a width is given (except in old versions of IE). If no width is given, then the element's width will be reduced (because it is already consuming 100% of the width of its container). SIR! YES SIR! ;-) -- Blessings David M. I have been driven to my knees many times by the overwhelming conviction that I had nowhere else to go. __ 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] -moz-box-shadow
2010/1/24 Tim Climis tcli...@indiana.edu: ... If you have a shadow on an element with 100% width (an unfloated div, say), and give it a box-shadow, in firefox (with -moz-box-shadow) you get horizontal scroll, while in Safari/Chrome (with - webkit-box-shadow) you do not. Has anyone discovered a way to make Mozilla act like Webkit? ... yes, don't use -vendor-prefixes. :) Ingo __ 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] -moz-box-shadow
On Jan 25, 2010, at 6:28 AM, Ingo Chao wrote: 2010/1/24 Tim Climis tcli...@indiana.edu: ... If you have a shadow on an element with 100% width (an unfloated div, say), and give it a box-shadow, in firefox (with -moz-box-shadow) you get horizontal scroll, while in Safari/Chrome (with - webkit-box-shadow) you do not. Has anyone discovered a way to make Mozilla act like Webkit? ... Safari 4 will show a scrollbar, just as Gecko (and Opera 10.5) do. WebKit changed the behaviour (suppressing the scrollbar) quite recently, following this (longish) discussion on www-style: http://lists.w3.org/Archives/Public/www-style/2009Aug/thread.html#msg6 I suspect Gecko will follow (and suppress the scrollbar) at one point. Note that the box-shadow property is subject to lots of discussions and re-evaluations on the www-style mailing list. It has been removed from the css3 border and background module (see 6.2 The ‘box-shadow’ property). http://www.w3.org/TR/css3-background/ yes, don't use -vendor-prefixes. :) I was quite shocked to discover that Opera 10.5 has implemented the box-shadow property with vendor-prefix, especially in the light of all discussions in the past year on the subject, as mentioned above. --- And no, I don't now of any sane way of suppressing that scrollbar in Gecko (and Opera 10.5) in your case. Philippe --- Philippe Wittenbergh http://l-c-n.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] Solved: Fixed three-column with padding: newbie question
Hi Folks, Thanks to Thierry and Georg, this now makes sense. Thanks for the help. Doug +++ Hi Doug, I'm definitely a newbie, trying to wean myself off tables. What I need is a 720px wide box with three 240px cells inside it, with 10px padding-right for each cell. It cannot be flexible or stretchable. I found what I **thought** might be the recipe for such a design: http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/ However, I cannot get the middle cell to display 240px wide: http://people.ucsc.edu/~class1/ Any suggestions/ideas MUCH appreciated, so I can leave tables behind! If you set a 240px width and 10px padding, the box is actually 250px wide (because padding/border/width add up). So try 230px instead, and then Google: CSS Box Model -- Regards, Thierry | www.tjkdesign.com Subtract the side-padding from the float-width - both side-floats. width: 230px + padding-right: 10px equals float-width = 240px. That will leave 240px between the floats. regards Georg Hi Folks, I'm definitely a newbie, trying to wean myself off tables. What I need is a 720px wide box with three 240px cells inside it, with 10px padding-right for each cell. It cannot be flexible or stretchable. I found what I **thought** might be the recipe for such a design: http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/ However, I cannot get the middle cell to display 240px wide: http://people.ucsc.edu/~class1/ Any suggestions/ideas MUCH appreciated, so I can leave tables behind! Thanks! Cheers, Doug __ 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] Strange problems in IE7 good in a long list of other browsers
This is the page. It has been checked in Chrome, Flock, Opera 10, Safari 4.0.5, Sea Monkey, Firefox 3.5.7, IE8 on PC Only in IE7 do the column of pictures on the right move down. Also there is a problem with extra white space below the pictures and above the box. I am throwing IE6 under the bus so I really don't care what it looks like in that particular browser. I am sure worse than IE7. IE8 compatibility mode doesn't do a thing even though it is acceptable in IE8 that way. Have no idea what to try here to make this work as it does in most browsers. http://www.jelawncare.com/index.php Any ideas would be most appreciated. Carol __ 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] Multiple IEs (was: Re: strange problem with float)
david gn...@hawaii.rr.com wrote: I believe there are also virtual machine images available from MS that can be used under MS' proprietary VM player, that include differing versions of IE. Oliver wrote: Found the link on the TheFreeCountry.com website (many good tutorials/info there): http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EFdisplaylang=en. It says they expire in April and/or 120 days. Not sure what is up with that. Do they let you renew? Nancy __ 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] Multiple IEs (was: Re: strange problem with float)
It says they expire in April and/or 120 days. Not sure what is up with that. Do they let you renew? MS generally releases new versions every quarter with new expiration dates. Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ 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] Multiple IEs (was: Re: strange problem with float)
david gn...@hawaii.rr.com wrote: I believe there are also virtual machine images available from MS that can be used under MS' proprietary VM player, that include differing versions of IE. Oliver wrote: Found the link on the TheFreeCountry.com website (many good tutorials/info there): http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64- B5F1-73D0A413C8EFdisplaylang=en. It says they expire in April and/or 120 days. Not sure what is up with that. Do they let you renew? Hi Nancy, Yes, it is just to force a re-install to insure that people use them for development. -- Regards, Thierry | www.tjkdesign.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/
