Re: [css-d] problem: background image won't size with content
Hi Kevin,
On Mon, 2009-09-21 at 21:54 -0400, Kevin Rodenhofer wrote:
Bill, I consolidated the 3 messages, and made the appropriate
corrections. Here you go:
I don't know if this will work for you, but this is what I did for a
similar situation. I copied the code directly from my project:
I don't think I explained the problem(s) I'm having very well. From my
current perspective there are two problems, but I realize they may turn
out to be just two manifestations of a single screw-up on my part ;)
The first problem is evident on the signup page at www.shopkeepapp.com
(should have directed you there to begin with).
The panel in the middle behind the signup form is actually two images:
an 11px-wide one on the left that gets repeated, and an 11px one on the
right that finishes the image off. The visual intent is shading on the
bottom and right edges of the panel for a 3D effect.
The problem is that the image on the right is not expanding to the same
height as the one on the left.
I realize that I could, for example, change the min-height on the
right-hand image. The content on this page is static so that would
work. The rest of the site uses this same model as backgrounds for
content that's not static though. There are forms of many sizes, there
are forms that have content that can be expanded, and there are lists
where I would like to only have as much background as the content
requires.
So I think what I need is to figure out how to get this background to
expand to the size of its container.
Any guidance is much appreciated!
Best regards,
Bill
#wallpaper {position: absolute; top: 0; left: 0; width: 100%; height:
100%; display: block; z-index: 1;}
#wallpaper is the id for an image that is placed absolutely, with an
z-index lower than the rest of the content. It is not a background
image, but an inline image. In all likelyhood, the z-index probably
isn't needed, if this is the first item in the parent container.
I confirmed that it works in the following browsers (all in Windows 7):
IE 7 8
Firefox 3.5.3
Safari 4.0
Chrome 3.0.195.21
Maybe it will work for you.
bill walton wrote:
Greetings all;
I'm having a 'dickens of a time' getting a background image to resize
dynamically based on content. I'm probably not explaining it worth a
darn, but it's pretty easy to see here:
http://anysubdomain.shopkeepapp.com
The specific problem on this page is that the right-side image is not
expanding vertically to match the left side.
If you fill in the form (use any nonsense you want except for the email
address), you'll get the welcome page which displays both images at the
min-height setting.
On the pages inside the site, which you can access if you click the link
in the email you'll get, I have another, very similar problem where that
even the left-side image not sizing to fit content. But maybe the fix
for that is the same as the fix for the right-side image on the sign-up
page.
Overall, I'm using floats for positioning and % and em for widths and
heights pretty much everywhere. Maybe that's my problem. It seems to
be working with respect to putting everything where I want it. But if
using floats is what's causing my difficulties, I'm very open to
changing it. The bottom-line objective is to get these background
images to resize based on content.
Thanks in advance for you help!
Bill
__
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-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-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] problem: background image won't size with content
On Tue, Sep 22, 2009 at 8:54 AM, bill walton bwalton...@gmail.com wrote:
The panel in the middle behind the signup form is actually two images:
an 11px-wide one on the left that gets repeated, and an 11px one on the
right that finishes the image off. The visual intent is shading on the
bottom and right edges of the panel for a 3D effect.
The problem is that the image on the right is not expanding to the same
height as the one on the left.
A possible solution:
HTML:
div id=outer
div id=inner
...
/div
/div
CSS:
#outer {
background: url(right-edge.png) no-repeat bottom right;
margin: 0;
padding: 0;
padding-right: [width of right-edge.png]px;
}
#inner {
background: url(bottom.png) repeat-x bottom left;
margin: 0;
padding 0;
}
As long as you never give #inner padding-right never give #outer
padding-bottom, you should be OK.
If you float any children of #inner, make sure to add overflow:hidden to #inner.
Erik
PS This hasn't been tested in IE6, so you might need to force
hasLayout for it to work. (Give each of those divs zoom:1 and you
should be fine.)
__
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] Mystery margin on Windows FF IE
Hello all, So I've been battling with a problem for the past few hours. I went to show a peer a site I've been working on for an upcoming event of ours, and discovered that on our site ( http://gdg.uml.edu/lan/ ), and only when viewing it with Firefox or IE under Windows does this happen, there is a mysterious black margin that appears between the #navigation div and the #main div. They sit closely together on every other browser I've tested under every other major OS and there is no visual break. This isn't a make or break problem for me, but my OCD side really wants to know why this is happening. I've tried everything from setting explicit borders, margins, overflow: hidden, and whatever else I could think of for all the involved divs and elements with no success. Of course there's a chance I forgot a crucial one. If someone could shed some light on this annoying inconsistency, I'd greatly appreciate it. Thank you, Matt F. __ 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] Mystery margin on Windows FF IE
you use lia as inline-elements - if you make them display:inline-block the gap disappears. but of course you`ll get problems with IE8 and FF2 other solution: give the a-elements in your nav line-height:20px Matt Fielding wrote: Hello all, So I've been battling with a problem for the past few hours. I went to show a peer a site I've been working on for an upcoming event of ours, and discovered that on our site ( http://gdg.uml.edu/lan/ ), and only when viewing it with Firefox or IE under Windows does this happen, there is a mysterious black margin that appears between the #navigation div and the #main div. They sit closely together on every other browser I've tested under every other major OS and there is no visual break. This isn't a make or break problem for me, but my OCD side really wants to know why this is happening. I've tried everything from setting explicit borders, margins, overflow: hidden, and whatever else I could think of for all the involved divs and elements with no success. Of course there's a chance I forgot a crucial one. If someone could shed some light on this annoying inconsistency, I'd greatly appreciate it. Thank you, Matt F. __ 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-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] problem: background image won't size with content
Bill,
I came up with a version that uses no images at all, and I believe, does
what you want it to do.
You could expand on it a bit, and give it highlights at the top and left
as well. Or, make the shading and highlights fuzzier by adding more
inner divs.
Have a look:
http://www.rodenhofer.com/3DBoxTest/
Kevin
Erik Vorhes wrote:
On Tue, Sep 22, 2009 at 8:54 AM, bill walton bwalton...@gmail.com wrote:
The panel in the middle behind the signup form is actually two images:
an 11px-wide one on the left that gets repeated, and an 11px one on the
right that finishes the image off. The visual intent is shading on the
bottom and right edges of the panel for a 3D effect.
The problem is that the image on the right is not expanding to the same
height as the one on the left.
A possible solution:
HTML:
div id=outer
div id=inner
...
/div
/div
CSS:
#outer {
background: url(right-edge.png) no-repeat bottom right;
margin: 0;
padding: 0;
padding-right: [width of right-edge.png]px;
}
#inner {
background: url(bottom.png) repeat-x bottom left;
margin: 0;
padding 0;
}
As long as you never give #inner padding-right never give #outer
padding-bottom, you should be OK.
If you float any children of #inner, make sure to add overflow:hidden to
#inner.
Erik
PS This hasn't been tested in IE6, so you might need to force
hasLayout for it to work. (Give each of those divs zoom:1 and you
should be fine.)
__
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-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] moving content
http://www.bucktroutcreative.com/co/contact.html http://www.bucktroutcreative.com/co/services.html Hi- I'm working on the services and contact page for this site. For some reason when toggling between them, all of the content (including nav) seems to move slightly. Does anyone know a fix for this. Thanks! Jen __ 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] moving content
http://www.bucktroutcreative.com/co/contact.html http://www.bucktroutcreative.com/co/services.html Hi- I'm working on the services and contact page for this site. For some reason when toggling between them, all of the content (including nav) seems to move slightly. Does anyone know a fix for this. Thanks! Jen I don't get any moving on any Mac browsers. Could it just be that the extra depth of 'Services' is causing a scroll bar to appear, thus visually nudging everything? Peter H. __ 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] moving content
Someone here gave me a fix for this - slightly inelegant, but it
works, and validates:
html {
height: 100.1%
}
This forces a scroll bar on every page. No more moving or jogging. On
the pages that don't need a scroll bar, the scroll bar indicator is
the height of the page. There's no space below to indicate you
should scroll.
On Sep 22, 2009, at 10:10 AM, Peter Hammarling wrote:
http://www.bucktroutcreative.com/co/contact.html
http://www.bucktroutcreative.com/co/services.html
Hi-
I'm working on the services and contact page for this site. For some
reason when toggling between them, all of the content (including nav)
seems to move slightly. Does anyone know a fix for this.
Thanks!
Jen
I don't get any moving on any Mac browsers. Could it just be that the
extra depth of 'Services' is causing a scroll bar to appear, thus
visually nudging everything?
Peter H.
__
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-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] Fwd: moving content PROBLEM SOLVED - thanks.
Begin forwarded message: css-d@lists.css-discuss.org __ 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] trouble in IE8
hi all, A site that I did a few years ago is having trouble in IE8. The contact button is shifting down, creating 3 rows of buttons instead of two - contact on its own, the others on their 2 lines. http://jodishuster.com/ http://jodishuster.com/js_css/jodi.css http://jodishuster.com/js_css/ie-hacks.css http://jodishuster.com/js_css/ie6-hacks.css http://jodishuster.com/js_css/ie7-hacks.css if I was putting this site together now, I would write it really differently, but I would rather not have to do the whole thing again! Can anyone see what's giving 8 trouble? 6 7 are fine, as is firefox and safari and mozilla and netscape and opera ... thanks so much! Sandy __ 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] trouble in IE8
add this to your code, will help but is not a full solution: meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7? / Cristiano Diniz da Silva Web Development Solutions http://www.mcloide.com http://mcloide.wordpress..com p. + 1 954 840 4010 c. + 1 561 809 1928 Coral Springs, Fl PHP5 Zend Certified Engineer Before printing, just keep in mind your commitment with the environment! From: Sandy sfeld...@sympatico.ca To: CSS discuss css-d@lists.css-discuss.org Sent: Tuesday, September 22, 2009 1:35:44 PM Subject: [css-d] trouble in IE8 hi all, A site that I did a few years ago is having trouble in IE8. The contact button is shifting down, creating 3 rows of buttons instead of two - contact on its own, the others on their 2 lines. http://jodishuster.com/ http://jodishuster.com/js_css/jodi.css http://jodishuster.com/js_css/ie-hacks.css http://jodishuster.com/js_css/ie6-hacks.css http://jodishuster.com/js_css/ie7-hacks.css if I was putting this site together now, I would write it really differently, but I would rather not have to do the whole thing again! Can anyone see what's giving 8 trouble? 6 7 are fine, as is firefox and safari and mozilla and netscape and opera ... thanks so much! Sandy __ 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-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] trouble in IE8
add this to your code, will help but is not a full solution: meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7? / Cristiano, Tim, you guys rock. Thanks so much! this worked, and was SO MUCH EASIER than what I expected I would need to do. Sandy __ 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] trouble in IE8
Sandy wrote:
hi all,
A site that I did a few years ago is having trouble in IE8.
The contact button is shifting down, creating 3 rows of buttons instead
of two - contact on its own, the others on their 2 lines.
You might try fleshing out your sitenav ul. Seemed to do the trick in
the small test I ran.
.sitenav ul {
width:278px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
}
//
Shawn Lawler
Institute on Community Integration
University of Minnesota
__
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] Mystery margin on Windows FF IE
On Tue, Sep 22, 2009 at 12:04 PM, Matt Fielding itzma...@gmail.com wrote: Hello all, So I've been battling with a problem for the past few hours. I went to show a peer a site I've been working on for an upcoming event of ours, and discovered that on our site ( http://gdg.uml.edu/lan/ ), and only when viewing it with Firefox or IE under Windows does this happen, there is a mysterious black margin that appears between the #navigation div and the #main div. They sit closely together on every other browser I've tested under every other major OS and there is no visual break. This isn't a make or break problem for me, but my OCD side really wants to know why this is happening. I've tried everything from setting explicit borders, margins, overflow: hidden, and whatever else I could think of for all the involved divs and elements with no success. Of course there's a chance I forgot a crucial one. If someone could shed some light on this annoying inconsistency, I'd greatly appreciate it. Thank you, Matt F. __ 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/ another option you could use is to float the ul and li's and add a little padding to your links. that spaces it out also. jeff __ 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] problem: background image won't size with content
Hi Erik,
On Tue, 2009-09-22 at 10:21 -0500, Erik Vorhes wrote:
On Tue, Sep 22, 2009 at 8:54 AM, bill walton bwalton...@gmail.com wrote:
The problem is that the image on the right is not expanding to the same
height as the one on the left.
A possible solution:
HTML:
div id=outer
div id=inner
...
/div
/div
I would _never_ have thought to do this. Thank you very, very much! It
worked like a charm.
CSS:
#outer {
background: url(right-edge.png) no-repeat bottom right;
margin: 0;
padding: 0;
padding-right: [width of right-edge.png]px;
}
I did have to add a padding-bottom:1px; to this. For a reason I may
never understand ;-) I was still getting the right-side image
displaying 1px shorter than the left.
If you float any children of #inner, make sure to add overflow:hidden to
#inner.
Have lots of floating children do I did this too. Thanks much for the
advance notice.
PS This hasn't been tested in IE6, so you might need to force
hasLayout for it to work. (Give each of those divs zoom:1 and you
should be fine.)
Luckily, I don't have to support IE6. I haven't tested in 7 yet but it
looks like there's very little to do for 8.
Again, thank you very much!
Best regards,
Bill
__
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] problem: background image won't size with content
Hi Kevin, On Tue, 2009-09-22 at 12:41 -0400, Kevin Rodenhofer wrote: Bill, I came up with a version that uses no images at all, and I believe, does what you want it to do. You could expand on it a bit, and give it highlights at the top and left as well. Or, make the shading and highlights fuzzier by adding more inner divs. Have a look: http://www.rodenhofer.com/3DBoxTest/ That's very clever! I like it a lot. Before I jump in with both feet I'll have to work with it some to see where the gotcha's are. But the idea that I could get this effect without messing around with images at all is _very_ appealing. Thanks for sharing! Best regards, Bill __ 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] Invitación a conectarnos en LinkedIn
LinkedIn Jose Aguero requested to add you as a connection on LinkedIn: -- Stefan, Me gustaría añadirte a mi red profesional en LinkedIn. -Jose Accept invitation from Jose Aguero http://www.linkedin.com/e/v2RX8LsYIp9Yytz5spRoDLsYaA_Tz4z5spRoD1qK5h/blk/I1452441967_2/pmpxnSRJrSdvj4R5fnhv9ClRsDgZp6lQs6lzoQ5AomZIpn8_cBYTdzANd3gOdjgNiiZxoPoTq4tpkOYTdjkVcjkQdjsLrCBxbOYWrSlI/EML_comm_afe/ View invitation from Jose Aguero http://www.linkedin.com/e/v2RX8LsYIp9Yytz5spRoDLsYaA_Tz4z5spRoD1qK5h/blk/I1452441967_2/39vdPoVcjgQczkQckALqnpPbOYWrSlI/svi/ -- DID YOU KNOW you can use your LinkedIn profile as your website? Select a vanity URL and then promote this address on your business cards, email signatures, website, etc http://www.linkedin.com/e/ewp/inv-21/ -- (c) 2009, LinkedIn Corporation __ 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/
