• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

css background

 
author & internet detective
Posts: 41860
908
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have an image see attached that is used with the following CSS to display a nice border around tables.

.contentBackground1Left { background:url(../images/content-bg-1.png) no-repeat 0 0; background-size: contain; height:auto; padding:0.625em 1.250em; width:auto; }
.contentBackground1Center { background:url(../images/content-bg-1.png) no-repeat 50% 0; background-size: contain; height:auto; padding:0.625em 1.250em; width:auto; }
.contentBackground1Right { background:url(../images/content-bg-1.png) no-repeat 100% 0; background-size: contain; height:auto; padding:0.625em 1.250em; width:auto; }

This works great if a table has three columns as:


Trying "the same thing" with two columns results in an ugly black line down the center.


My understanding is that the 0, 50%, 100% is the horizontal position in the image to start. I can't figure out why "center" is so important let alone what to do about it.

The table I'm working on isn't absolutely essential to be two columns so I could cheat and make it one column. But then I wouldn't learn something new.

Any ideas?
content-bg-1.png
[Thumbnail for content-bg-1.png]
line.png
[Thumbnail for line.png]
 
Jeanne Boyarsky
author & internet detective
Posts: 41860
908
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It's not this. I'm able to reproduce a self contained example where the problem doesn't happen. Now figuring out what is in the real code but not the self contained example that causes the error.
 
Jeanne Boyarsky
author & internet detective
Posts: 41860
908
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I saw a bunch of odd behavior. Like the odd black line disappears if I have a header with colspan=2. Which tells me the black line is some kind of background or border. I then unsuccessfully to reproduce it on jfiddle. No black line.

Then I stripped code out of my example until I had a self contained example. (and no the CSS isn't embedded in the file for real. And external file is something I stripped out to make sure there weren't caching problems.) The following code has a black line. But if I change the link from "Search Archives and Recent" to "Search", the black line goes away.

I'm at a loss for why that would matter. And as to why it only happens in two columns. And how to fix it.



 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The background image has both left and right shadows. If the column is wider than the space between the shadows, both sides will show.

That said, cannot the effect be better applied using box shadows? Either that, or revisit the design to allow simpler CSS.
 
Jeanne Boyarsky
author & internet detective
Posts: 41860
908
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Bear. I made the table narrower so that I can commit. That's a nice short term solution for New Year's Eve! It also explains why it didn't happen with shorter text (without 100% width) or more columns - a single column wasn't so wide.
 
author
Posts: 297
5
Android Firefox Browser Fedora
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I think in this case you'd probably be better off using multiple backgrounds rather than messing around trying to stretch the same image over different sized containers (even if you're going to use gradients instead of images as Bear suggested).

BTW I can get the problem to appear in your JSFiddle by making the results window larger (drag the middle bar), the second line starts to appear around 910px width.
 
Jeanne Boyarsky
author & internet detective
Posts: 41860
908
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Rob. As you might have noticed we ran out of time before today's launch of that screen. (It's the bookmarks screen.) But we are looking at making this better in the future so the advice from you and Bear is helpful.

I gave you a cow for showing me how to reproduce the problem in the JSFiddle. Making a self contained example is so often the major step in solving a problem!
reply
    Bookmark Topic Watch Topic
  • New Topic