Author Topic: Yes it's another CSS question... (Read 9076 times)

Mardoni · **on:** August 30, 2011, 19:15:56 PM

Yes it's another CSS question...

on: August 30, 2011, 19:15:56 PM

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:

Code: [Select]

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.

neXus · **Reply #1 on:** August 30, 2011, 20:14:53 PM

Re: Yes it's another CSS question...

Reply #1 on: August 30, 2011, 20:14:53 PM

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...

Code: [Select]

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.

Mardoni · **Reply #2 on:** August 30, 2011, 23:25:24 PM

Re: Yes it's another CSS question...

Reply #2 on: August 30, 2011, 23:25:24 PM

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...

Last Edit: August 31, 2011, 00:29:53 AM by Nimrod #187;

Mardoni · **Reply #3 on:** October 11, 2011, 16:18:37 PM

Re: Yes it's another CSS question...

Reply #3 on: October 11, 2011, 16:18:37 PM

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...

Clock'd 0Ne · **Reply #4 on:** October 11, 2011, 16:51:27 PM

Re: Yes it's another CSS question...

Reply #4 on: October 11, 2011, 16:51:27 PM

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!

Mardoni · **Reply #5 on:** October 11, 2011, 17:05:27 PM

Re: Yes it's another CSS question...

Reply #5 on: October 11, 2011, 17:05:27 PM

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

neXus · **Reply #6 on:** October 11, 2011, 18:55:29 PM

Re: Yes it's another CSS question...

Reply #6 on: October 11, 2011, 18:55:29 PM

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.

Mardoni · **Reply #7 on:** October 11, 2011, 20:53:42 PM

Re: Yes it's another CSS question...

Reply #7 on: October 11, 2011, 20:53:42 PM

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.

neXus · **Reply #8 on:** October 11, 2011, 22:39:42 PM

Re: Yes it's another CSS question...

Reply #8 on: October 11, 2011, 22:39:42 PM

No not really. How do you do a hover on an iphone or ipad? You cant

Mardoni · **Reply #9 on:** October 12, 2011, 10:54:50 AM

Re: Yes it's another CSS question...

Reply #9 on: October 12, 2011, 10:54:50 AM

Same as you do a hover on an Android or webOS device

Clock'd 0Ne · **Reply #10 on:** October 12, 2011, 11:26:57 AM

Re: Yes it's another CSS question...

Reply #10 on: October 12, 2011, 11:26:57 AM

Do touch screens not allow for hovering then?

Leon · **Reply #11 on:** October 12, 2011, 11:42:50 AM

Re: Yes it's another CSS question...

Reply #11 on: October 12, 2011, 11:42:50 AM

Hmmm they do but the problem is to hover you generally tap so in that case you go to the link

News:

Author Topic: Yes it's another CSS question... (Read 9076 times)