I was looking online to refresh my memory how to make a table with only horizontal lines and not vertical lines between columns. I was kind of surprised the top results made it sound really complex and like it required all kinds of hacks to make it work in a cross-browser way. Really? What about just setting the table’s border property to 0 and then adding this css?
table { border: 1px solid #AAAAAA; border-collapse:collapse; }
td, tr { border-bottom: 1px solid #AAAAAA; }
Keep it simple.
Working with 3rd party embeddable widgets can often enhance the user experience by allowing you to show information you wouldn’t otherwise have access to, or save a click or two to get to a third-party login page, etc. However, not all 3rd party embedding APIs are created equal.
One in particular that I’ve been working with has absolutely no customization options, and the only option for how to embed it is with an iframe. This severely limits the options I have as far as integrating the widget into the rest of the page. The rest of the page has headings in blue, in Arial, and the widget? No way to customize that font.
I’ve looked into it multiple times, but without control over the domain hosting the widget, there’s no way to add CSS to within the iframe, because even if you add the CSS with javascript, you still have to have the CSS on the same domain as the iframe because of cross-site scripting safety.
I did at least find some answers about the limited customizations I do have. You can change the margins, padding, and border, basically, the frame itself. The couple interesting things you can do is use CSS3 features to add shadows to the border, or even rotate the frame (though in my testing the rotation looks terrible and isn’t up to the quality needed to look decent) to at least make the sticking out like a sore thumb widget look intentionally stand-out from the rest of the page…sort of…I’d rather have it at least have matching fonts…but until I figure out some way to do that using an API with no “attach stylesheet” option, my hands are tied.
