[css-d] positioning search button
In IE on this page: http://www.greendrakephoto.com/site/contact/ The little green-bordered square's image content is showing up underneath the panel. Can someone help please? -- Debbie Campbell www.redkitecreative.com __ css-discuss [css-d@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] flexible height of div
On Tue, Jan 17, 2012 at 5:58 PM, Martin mhe...@gmail.com wrote:
Hi,
I've got a div (#main) which normally should have the height of 733px
because that's the height of the background pic.
On some pages the text goes over this height. ...trimmed
From:
#main {
height: 733px;
width: 960px;
background: black url('../images/beer-bg.jpg') no-repeat;
}
To: [first assign a class to the body tag only on the specific
page[s] where you seek this particular look and feel, and use the
below CSS]
body class=yo-yo
body.yo-yo #main {
border: 1px solid lime;
overflow:hidden;
width: 960px;
background: black url('../images/beer-bg.jpg') bottom no-repeat;}
HTH.
Best,
Yo-Yo Ma
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@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] Initialize.css (The Beginning of a Real Solution)
Would like opinions from the group on this kind of style sheet: http://developer.cmzmedia.com/initialize.css If utilized correctly no rule will ever be processed more than once but it still allows the developer to know just what is going on with his or her styles . . . all of them. Best to open it in a code editor so the color coding will help you understand what is going on. This was inspired in part by a comment from Andy Clarke who said he didn't like HTML5 Boilerplate's normalize.css because with it you couldn't see many of the rules that would normally be in a reset.css file, which would then cause you to be less aware of what is happening in the background style-wise. I suggested my present concept to him over Twitter back in August but never received a response. Christian Ziebarth __ css-discuss [css-d@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] IE8 headbanger issue, and could you please take a peek in other IEs for me?
I've been banging my head against this for too long. Why does IE8 drop the div class=checkout-progress and everything below it right to the bottom of the dang page? I've tried taking my clearing fix of overflow:auto off that div, I've tried assigning a width to the page content as is in the IE7 stylesheet, I've tried narrowing the elements within the page content for IE8 . . . and a bunch of other things that had no hope of working, like all my old IE6/7 and haslayout hacks, but I tried 'em anyway. No love. Test case here: http://doneinstyle.com/test/oaktreetest2/index.htm Actual code from here: http://oaktreehomeandgarden.co.uk/shop/ It happens when you view the shopping cart. Test page validates at W3 for both html and css (though there is some jquery css generated by the cart that doesn't validate, and the actual cart generates some unencoded ampersands in URLs.) All help appreciated greatly. -- Best regards, BJ http://ninjawebservices.com mailto:b...@ninjawebservices.com __ css-discuss [css-d@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] positioning search button
On Thu, Jan 19, 2012 at 3:58 AM, Debbie Campbell d...@redkitecreative.com wrote: In IE on this page: http://www.greendrakephoto.com/site/contact/ The little green-bordered square's image content is showing up underneath the panel. Can someone help please? The image content isn't showing up underneath the panel. It isn't showing at all. The problem is caused by the location of your IE-specific stylesheet. Without a full path, resources are relative to the stylesheet. The images directory is in the same place as Wordpress' style.css, but your IE stylesheet is in a subdirectory. So, it can't find the image. Move your ie.css to the same place as style.css, change your references to match the new location, and it'll fix your problem. Better yet, don't use a browser-specific stylesheet. I kinda like Paul Irish's method using conditional comments: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ... but I'm doing User Agent detection in PHP on the server side. -- Ghodmode http://www.ghodmode.com/blog -- Debbie Campbell www.redkitecreative.com __ css-discuss [css-d@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] IE8 headbanger issue, and could you please take a peek in other IEs for me?
On Thu, Jan 19, 2012 at 9:38 AM, BJ Novack b...@ninjawebservices.com wrote: I've been banging my head against this for too long. Why does IE8 drop the div class=checkout-progress and everything below it right to the bottom of the dang page? I've tried taking my clearing fix of overflow:auto off that div, I've tried assigning a width to the page content as is in the IE7 stylesheet, I've tried narrowing the elements within the page content for IE8 . . . and a bunch of other things that had no hope of working, like all my old IE6/7 and haslayout hacks, but I tried 'em anyway. No love. Test case here: http://doneinstyle.com/test/oaktreetest2/index.htm IE9 does it too. It looks like the border on the div.checkout-progress is making it wider than its container and then wrapping it around sidebar_right. If you take off the property width:100% it fixes it. Unless they're floated or have a fixed width, DIVs take up the available width by default. By giving it a fixed width (100%), the width of the block itself was 100%, then the borders added to that. -- Ghodmode http://www.ghodmode.com/blog Actual code from here: http://oaktreehomeandgarden.co.uk/shop/ It happens when you view the shopping cart. Test page validates at W3 for both html and css (though there is some jquery css generated by the cart that doesn't validate, and the actual cart generates some unencoded ampersands in URLs.) All help appreciated greatly. -- Best regards, BJ http://ninjawebservices.com mailto:b...@ninjawebservices.com __ css-discuss [css-d@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] IE8 headbanger issue, and could you please take a peek in other IEs for me?
Hello Ghodmode, Wednesday, January 18, 2012, 10:42:14 PM, you wrote: On Thu, Jan 19, 2012 at 9:38 AM, BJ Novack b...@ninjawebservices.com wrote: I've been banging my head against this for too long. Why does IE8 drop the div class=checkout-progress and everything below it right to the bottom of the dang page? **snippety** Test case here: http://doneinstyle.com/test/oaktreetest2/index.htm IE9 does it too. It looks like the border on the div.checkout-progress is making it wider than its container and then wrapping it around sidebar_right. If you take off the property width:100% it fixes it. Unless they're floated or have a fixed width, DIVs take up the available width by default. By giving it a fixed width (100%), the width of the block itself was 100%, then the borders added to that. Huh. I'm sure I tried width: 95% on that pup, which you'd think would do the same thing. Anyway, it worked AND it didn't break it anywhere else! (that I know of.) If anyone else can test drive this in any of the other odd browsers, just in case . . . And THANKS! -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@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] IE8 headbanger issue, and could you please take a peek in other IEs for me?
On Thu, Jan 19, 2012 at 11:42 AM, Ghodmode ghodm...@ghodmode.com wrote: On Thu, Jan 19, 2012 at 9:38 AM, BJ Novack b...@ninjawebservices.com wrote: I've been banging my head against this for too long. Why does IE8 drop the div class=checkout-progress and everything below it right to the bottom of the dang page? I've tried taking my clearing fix of overflow:auto off that div, I've tried assigning a width to the page content as is in the IE7 stylesheet, I've tried narrowing the elements within the page content for IE8 . . . and a bunch of other things that had no hope of working, like all my old IE6/7 and haslayout hacks, but I tried 'em anyway. No love. Test case here: http://doneinstyle.com/test/oaktreetest2/index.htm IE9 does it too. It looks like the border on the div.checkout-progress is making it wider than its container and then wrapping it around sidebar_right. * correction... not wider than its container, just wider than the horizontal space allocated for it by the padding on its container. If you take off the property width:100% it fixes it. Unless they're floated or have a fixed width, DIVs take up the available width by default. By giving it a fixed width (100%), the width of the block itself was 100%, then the borders added to that. Now that I look at it, my question isn't why does the element move to the bottom in IE, but why doesn't it in Firefox? The effect is the same: the div.checkout-progress is wider than expected because of the borders and that makes it overlap (underlap?) with the sidebar. So it seems like moving it below the sidebar should be the correct behavior. If I give the #sidebar_right a background-color in Firebug, it cuts off the right end of the div.checkout-progress and makes the problem easier to see. -- Ghodmode http://www.ghodmode.com/blog Actual code from here: http://oaktreehomeandgarden.co.uk/shop/ It happens when you view the shopping cart. Test page validates at W3 for both html and css (though there is some jquery css generated by the cart that doesn't validate, and the actual cart generates some unencoded ampersands in URLs.) All help appreciated greatly. -- Best regards, BJ http://ninjawebservices.com mailto:b...@ninjawebservices.com __ css-discuss [css-d@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] positioning search button
Ah - that image link issue makes perfect sense. Thanks! -- Debbie On 1/18/2012 8:15 PM, Ghodmode wrote: On Thu, Jan 19, 2012 at 3:58 AM, Debbie Campbell d...@redkitecreative.com wrote: In IE on this page: http://www.greendrakephoto.com/site/contact/ The little green-bordered square's image content is showing up underneath the panel. Can someone help please? The image content isn't showing up underneath the panel. It isn't showing at all. The problem is caused by the location of your IE-specific stylesheet. Without a full path, resources are relative to the stylesheet. The images directory is in the same place as Wordpress' style.css, but your IE stylesheet is in a subdirectory. So, it can't find the image. Move your ie.css to the same place as style.css, change your references to match the new location, and it'll fix your problem. Better yet, don't use a browser-specific stylesheet. I kinda like Paul Irish's method using conditional comments: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ... but I'm doing User Agent detection in PHP on the server side. -- Ghodmode http://www.ghodmode.com/blog -- Debbie Campbell www.redkitecreative.com __ css-discuss [css-d@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/
