So I'm slowly plodding along with this page layout that I'm working on and I've hit a new hurdle that I cannot seem to over come.
I need the text to be vertically aligned to the bottom of the DIV, so I've got this:
span.fbpopovercontent{
position: relative;
display: table-cell;
width: 260px;
height: 200px;
vertical-align: bottom;
}
The problem I've got is that I am trying to add a 5px margin around the content (margin: 5px) but it's not being applied. I'm fairly certain this is because of the "display: table-cell" but I don't know and cannot find any work arounds.
Advice ?
The page I'm working on is very much WIP. (http://7six.co.uk/7six/testing-content-boxes/)
Could you post an image to wish bits your trying to change and what you want them to look at mate?
What your trying to do does not work well in IE.
http://www.banksiaadventures.com.au/choose-your-australian-tour-adventure
The boxes here could be something you can copy the code from if your trying to do something like that.
General centre of text...
To vertically centre text to work across all browsers if you have a single line of text...
height:30px;
line-height:30px;
Simple as that really.
If you have a chunk of text you just have to do it manually with margins and the container using overflow:hidden; to avoid box model problems etc.
Yeap those map-box-sliding-overlay-doohickies are pretty much what I'm after.
I'll fanny around with the source for them and see what I can do :)
edit:
Implementing the style on that page is more involved than I want to get. Thankfully I seem to have solved my problem (in Chrome and IE8) which is better for me :)
Remember it's a WIP PoC... (http://7six.co.uk/7six/testing-content-boxes/)
At this point I would just like to voice my complete shock and general disgust at two things:
1) The huge inconsistencies in browser rendering. Not just between platforms but between versions of the same platform too. IE8 and IE9 can suck my balls.
2) iOS' browser and it's complete lack of support for :hover (and the dirty javascript hack that re-implements it). Up yours apple !
Getting there... (http://www.7six.co.uk/)
Browser inconsistencies are the bane of my existence (and I wish IE would FO&D) but it looks like you are making progress in leaps and bounds! :thumbup:
Slowly, slowly catchy monkey :)
I think many of my issues have come about because I'm shoe-horning my layout into/over/onto the existing WordPress template. I've found that lots of elements layout perfectly in a simple test page but once integrated into WP the layout goes to hell :s
Anyway, it's getting there and I'm still enjoying some of it ;)
IOS - Pressing. Hover is something you can not do. :active and keeping in mind mobile devices or site templates for mobile devices or use media queries :)
I did a talk at adobe Max last week on web standards. Do web standards and semantic markup in terms of the code and you reduce the issues cross browser MASSIVELY.
the hover thing just pisses me off. Everything else is just differences between platform implementations but apple choosing to ignore part of a spec. Is just irritating.
No not really. How do you do a hover on an iphone or ipad? You cant :P
Same as you do a hover on an Android or webOS device ;)
Do touch screens not allow for hovering then?
Hmmm they do but the problem is to hover you generally tap so in that case you go to the link :P