Ok guys, it’s kickoff time. Let’s talk CSS. Does anyone have a question or problem that they’re dealing with?

I heard that if you put * {display: none} at the bottom of your CSS, it makes everything perfect

@Andrew Some designs could well benefit from that, I’m sure. :p

yeah, when making layouts using display: inline-block, there’s always a niggling gap between the elements

What’s the most exciting CSS3 development on the horizon?

se font-size: 0 on parent

@Andrew – Yes there is a fix using display:table on a parent and a few other rules. I;ll dig them out for you

html

@Andrew – you can remove it with font-size: 0 on the parent element

is it possibile to ask for a quick compatibility test of my new website? it will launched tomorrow and I wonder if is “in topic” to ask for a fast review here in this chat

Might just be me (probably is) but a hard reset should leave no gaps on any elements?

Here is a question relating indirectly to CSS. I’m posting a link as it takes ages to retype the question and get my point across correctly:http://stackoverflow.com/questions/11528180/chrome-inspector-hover-issue/11528729#comment15240166_11528729

With regards to Responsive layouts, I am using the fluid grid feature within Dreamweaver CS6. Would I be better hand coding for more flexibility?

oh, great, font-size: 0, thanks!

@acrevola Post up your URL. I’m sure there will be lurkers that are interested

@spacebeers – There’s a nice tound up here: http://www.netmagazine.com/features/future-css-layouts

thanks @paul.OB, what are you most excited about?

DublinDude, handcoding is /always/ better :)

The future is Flexbox ^^

flexbox is good in theory

@scallioXTX I see

@SacllioX true that. You can never 100% trust generated code

in practice is can be inpractical

@Andrew – here’s the fix in full http://www.css-lab.com/demos/nav/inline-block/x-brwsr-node-fix.html

Question: How can i attach fonts with CSS, if i have only ttf file?

so who are the experts?

thank you. This is the site… tomorrow it will be refined… http://www.lacortedeicreativi.org (is in italian)

@GriffinArtworks Paul O’Brien and several forum staff

@gurami – use Font Squirrel

what is flexbox?

google

@Gurami Use font squrrel to convert and then use @font-face to import

@gurami – it does all the conversions for you

@spacebeers – I’m looking forward to positioned floats

Welcome to anyone that has just joined us. Feel free to introduce yourselves, lurk and watch, or jump in with a question at any time.

I prefer not using the fluid grid for my flexible websites. I like the flexibility of hand coding.

Anyone able to help answer my question?

tbrown08 -what?

@paul.OB – whats the advantage over regular floats?

Flexbox: http://dev.w3.org/csswg/css3-flexbox/

Thanks to all for the answers :) it was really helpful

@rctneil It would be easier if you posted it here, otherwise people have to leave the chat to read it :)

Hi, I’m new here. I don’t have any specific question.

ra xdeba vapshe? :D dzmakacma gaasheara da ra sastavia ho mshvidobaa? :D

I think that font rendering in Windows is f***ing crap

language!

What is the biggest contributor (CSS) that slows down mobile browsing?

looks like you already got your answer on SO rctneil ;)

Hello everyone, nice to be here

@dublinDude images

if you have any comments, please tag me (@acrevola)

@DublinDude divitis

@acrevola When you click an item on the top nav it shows the slide I’m about to move to for a split second THEN slides to it

@spacebeers display:inline-block allows things to sit differently on the page. Elements line up nicely without snagging, like you get with floats sometimes.

I heard having multiple linked CSS pages slow things down too as there are too many http requests, any truth in this?

extremely large images are the biggest slowdown in performance, especially if resized with CSS

in past, i had been working with layout. just te psd to html and css, and i had been gr but after that job. i don’t know what is my title or what to do more in my career.

@paul.OB – ah ok. That does sound useful.

So in effect we should see mobile sites in the same regard to sites created 10 years ago prior to broadband?

No worries – I’m running Chrome btw

@rctneil I think what you want works better with Firebug, TBH.

@ralph.m but inline-block isn’t fully IE supported?

@ralph.m Ok, I’ll go and have a go in FF and FB, Not that I like FF but if FB helps me solve this correctly then i’m all for it

I’ll let you knowhow I get on

@rctneil chrome is better

Can someone provide some useful book or articles about CSS3 new functions

@jess.irwin no it’s not, display-block is >= IE7 IIRC

what do you people think about clearfix

chorme is good bt its firebug isn’t

Can anyone answer this question for @nofel? in past, i had been working with layout. just te psd to html and css, and i had been gr but after that job. i don’t know what is my title or what to do more in my career.

clearfix is outdated, use overflow: hidden on the container instead (where possible)

@jess.irwin – inline-block is supported in IE back to ie5 for inline elements. For block elements you set them to inline and then use a haslayout trigger suitable for inline elements (such as zoom)

@jess.irwin Maybe not in older IEs, but with a 1% userbase now or less, mey …

@nofel chrome dev tools are second to none IMHO

acrevola: I like the site :D It works well in Windows 7 FF 13.0.1, Opera 12, IE 9 and Chrome 20.0.1132.57 m… Opera leaves more room than the others when you click Conrerenze… but it still looks good

true

@nofel, your question is a little confusing. Can you try rewording it?

Reading a book at the moment that says semantic elements such as strong should not be styled using CSS, is this correct.

@nofel – are you asking what to learn next?

@nofel you’re a front-end web developer :D

@nofel – Be the best at it to begin with. Code in HTML5 and become a master of canvas and javascript. You’ll easily find work that way

@nofel you can even live edit mobile sites on Android ICe Cream Sandwich!

@griffinArtworks I use Chrome mainly but if the webkit inspector doesn;t work for a certain task, it does make sense to solve that issue elsewhere and then come back, Wouldn’t you say so?

@molona thank you! :)

@griffinArtworks – agreed, Chrome dev tools are great

@griffinArtworks is that in Chrome for Android?

I don’t know what you code at the moment, but strive for more complex designs – don’t settle for designs someone did on a forum for $5

Does anyone know why the :contains selector wasn’t taken any further?

Will IE 10 support CSS3 columns?

@nofel It’s probably hard for most people to survive on layouts alone. Might be worth getting into more front end area, like JavaScript, or some programming as well?

@rctneil, your issue comes from not being fully acquainted with chrome dev tools

my work can be seen at www.emarworkx.com/my-work

@nofel If you don’t know how to code the design right now then it’s the right design to work how.

@Anna – nearly all elements can be styled. Html is the structure and css the appearance. CSS doesn’t care what the element is but the semantics of the html still hold true. Don;’t use elements for what they look like.

@nofel link not working

@nofel link broken

i had been developing wordpress themes.not good at at it. but stil i do freelance

@griffinArtworks Ok, Please could you let me know how I can deal with my issue directly in Chrome as that would be my preferred option

@nofel link is broken

http://www.emaarworkx.com/my-work/

just dig into it more and you’ll see you don’t actually have to select the dom element on the page you can also browse the html untill you find it and you will see the element highlighted automatically

@nofel recreate themes you see on themeforest for example – the most complex ones you can find

@nofel… you said that no one was answering you… but I can’t see a real question… maybe this goes too quick ;)

what’s the page?

@molona I think he got his answers :)

@molona yes now they r thanks to @haWK

@paul.OB ty, I thought it was weird statement to put to print. Thanks for clarifying

@nofer… your link doesn’t work… at least, not for me

@acrevola you’re welcome ;)

Any advice for designing with media queries, should you design for narrow first and work up?

is it a good idea to generate my CSS via PHP then cache it in memcached, or is there a better way of allowing people to change the page colours? (not really a CSS question per se… but I feel it’s relevent if there is an alternative)

@GriffinArtworks I know that, I do that all day every day. I want to be able to lock the hover to a specific element and the the styles of a sub element, It sounds a simple taks but try it in chrome inspector and it is impossible

Hi to anyone that has entered the room. I am Community Manager at SitePoint and I am moderating this session. Feel free to jump in with a question if you have one, otherwise lurking is fine :)

i have a thust for JS because of cool sliders in JAvascript and jQuery. i also wanna learn php. programming for me is soewhat hard for me to learn

dont know why

Is there a cheat sheet for common workarounds required for IE?

@Anna I design full width first but it’s your choice

Or a good post on the debugging process – could save hours of wasted time

althouh i am good with OOD and i scored in top10% wordpress on odesk, where i work as a freelance

@Andrew it is interesting question, anybody can answer it?

@rctneil – that is the only instance in which I prefer Firebug on FF

@ton, trying FB out now, Thanks

@nicksh thanks, do you use a framework

@Anna – The general consensus is mobile first and then up but not specifically device fixated. Rather set the media queries for the points where the layout doesn’t work any more.

@anna I use Bootstrap mostly

@drophet http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

Anybody have some good links to responsive layout articles and tutorials?

@dprophet Mainly concentrate on good, clean CS and you shouldn’t have to worry much … but test as you go.

Thanks designpa however we don’t support IE6 anyway :D

@rctneil I am finding it hard to see what your problem is. Even if you are trying to dig down to a sub-element you simply have to browse down the one or two lines from the parent element. The css and the dom highlighting will update as you select different elements of the html

people tell me i m in wrong field when i work with php.

@Andrew – Not really my area = Perhaps remon can answer that cahcing question.

Does anyone know why the :contains selector wasn’t taken any further? Seems like it would’ve been really useful

@drophet who does? :D

love php because the way how it store and get data.

@DubinDu This is the classic, of course: http://www.alistapart.com/articles/responsive-web-design/

@ralph.m Thanks, its well bookmarked!

@spacebeers – Not sure exactly, but I’ve read it’s too taxing on resources

Thanks @ralph.m That’s of course what we do but I struggle perhaps with knowing “the best way” to build a layout which could ultimately be causing issues down the road

@griffinArtworks Have a look at the stack overflow question I posted and read it carefully as that explains it. I am not new to chrome dev tools, I use them all day every day!

@Andrew cache should help users for fast browsing, so is it really helpful? Did you test page speed with cache and without cache?

@spacebeers As far as I know, it hasn’t

@nofel I prefer Ruby because it’s more neat, but we are talking about frontend stuff here

@nofel that’s not unique to php; all languages are good at manipulating data, that’s what they’re for :D

any other review? http://www.lacortedeicreativi.org?

@nicksh i m good wth pseudo code but when it comes to pratical php, i seem to fail. y ex told me programming isn’t your field and honestly. after doing css,html. i feel left out

like no1 have that job

@Andrew, Remon is great with PHP but I personally don’t see the benefit of creating the CSS with PHP

@DublinDude – I find it better to code myself than use grids – but others disagree. I just prefer to use code that I have designed myself so can fix it when it goes wrong.

@Anna No, best to lay the groundwork of CSS2 and HTML4. HTML5 is stillin development, so it’s shaky ground to build on.

question to everybody: are css-preprocessors a valid tool? do you use it? wich is the best?

@ralph.m -I am very unsure about that statement

@paul.OB Good advice. I just find the girds help me visualise

@acrevola I think there is too much space occupied by images

@acrevola Sass and compass are amazing

grids

I design mobile first and then if anything else needs to be added (widgets) done through AJAX @Gurami I cache in the browser and also on my server in Memcached.

One more question: is it really good to try transitions and animation with CSS and not with jQuery? I think it is more easy, but have fear of cross browsing problems….

@acrevola You could post your site in the reviews section of our forum http://www.sitepoint.com/forums/forumdisplay.php?12-Website-Design-amp-Content-Reviews-amp-Critiques

@acrevola – I’m coming around to the idea but I’m not there yet.

@acrevola – but make sure you read the guidelines first (you have to review 3 other sites first)

@Gurami You can’t do some of the transitions in jQuery

@spacebeers – No I’m not sure what happened to :contains. A lot of these things are in flux and get talked about and dismissed. We’re all still anziously waiting the parent selector - http://perishablepress.com/awesome-new-css3-selectors/

@Gurami Yes, you will have lots of cross browser issues at this stage. Best to stick with JS if you need that reliablilty.

@spacebeers are you talking about pre-processors?

thanks @paul.OB, it sounded like a very useful one. It can be hard to keep up with it all

Use jQuery as a fallback if you can, check that the CSS Property exists and if it doesn’t, do in in jQuery

@rctneil is there any cons?

@acrevola – yes.

@nicksh i mean just little transitions…

@ralph.m there is nothing shaky about HTML5, there are certain bleeding edge elements and standards which are not supported in older browsers but these issues are simply something you have to keep in mind. And a reason to design with garceful degradation in mind

I use LESS, but not dynamic

@paul.OB The parent selector looks extremely useful

“graceful”

@spacebeers – yes its always hard to keep up and I must admit I tend not to look at the latest things until they become usable.

@GriffinArtworks I thought you meant “garfield”

lol

@ralph.mn ty I agree but we have the balance the need of delivering current practices to ensure we recruit students, tough one

on the inside i did

@Andrew your css is cached when it is download… manipulating CSS programmatically can be great in certain situations but I like to stick to a basic CSS that I know and I can rely upon so I know the basic look… and therefore I don’t use php for that

@GriffinArtworks The point was that HTML5 is not currently what new students should be presented with as their intro to web design and HTML. That’s all. :)

Selectors that weren’t added to the CSS3 module generally didn’t have sufficient use-cases, were too complex to implement, or would cause significant performance issues.

wow

i think it kinda should be

From a commercial point of view it’s worth keeping in mind the extra time required to build in graceful degradation when using the most recent additions to HTML5 & CSS3 – sometimes it’s just not financially worth it.

what make a web designer, a web designer

wht he/she shld knw

@paul.OB – agreed. It’s easy to get carried away with the most cutting edge stuff. I find agency works helps reign me in a bit.

@nofel That is perhaps a bit off topic. Let’s keep it to CSS for this session. :)

@nofel Creativity and Photoshop :D

@GriffinArtworks If you only taught students HTML5 currently, their web design experience would be pretty painful. Of course tell them about it …

learning HTML5 does not mean ignoring s3c standards or semantic development it simply means starting with new technology, as long as they aware that they will need to use polyfills everything is golden

ok @hAWK

Photoshop, Dreamweaver, Netbeans, Illustrator and Fireworks makes a web designer

s3c =w3c

www.aptana.com

@andrew Dreamveawer makes bad designer

I like aptanta

and designer doesn’t have to code

well i been member of SP since 2008 and i gotta say, it is the best community. i never use anything else.

@andrew yea me too

@nicksh only if you rely on design view

CS6 has some cool features in dreamweaver

Thanks for your comments about what to teach new students

Now that we have a quiet moment, does anyone have a question that hasn’t been answered?

like responsive design

and as long as they understand what is supported and what isn’t, in each browser generation too

@dprophet – Most sites don’t need an awful lot of help to degrade nicely. It’s only when you try to reproduce the exact layout that it becomes awkward. Let lower browsers have a simpler experience.

To fast HTML development I suggest user https://github.com/sergeche/zen-coding

What do people do nowadays in reagrds to print stylesheets?

yeah

cool

lately i came across nth child selector and man it blew me away

you start mobile, then tablet, then desktop

Is use of @import worth the slightyl extra load time for the sake of organisation? Looking for opinions really…

i haven’t started cs 3 yet.

I overuse nth-child to death

@rctneil – they’re still a pain in the ***. best to keep them very simple.

yes, Zen Coding rocks. I use it in PSPad.

@nofel nth of type is awesome. Very very useful for grid like things, Use it all the time

@rctneil – Nothing anymore.

its kind of lengthy with with webkt,transform and other thing for every browser seperate line

When using border-image, is there a way to not let the image stretch?

sorry if this is off topic, but has anyone had issues with Chrome not printing characters properly? a page title may only have 1 letter in its title if printed from chrome, but prints perfect from IE. Chrome seems to screw up all typography – missing letters, massive spaces in content etc

@rctnell what exactly do you mean by that? I still use them in those pages that have long text and it is likely that they will be end up being printed

@paul.OB Is there a quick way of previewing them and testing them?

@jess.irwin what zoom is your chrome at?

@jess.irwin ignore me

@paul.OB maybe u remember me from nickname of emaarkhan. u and ryan always helped me with css

I was looking at html5 forms the new required

I’m only asking as I ran my site throguh sitebeam and got highly penalised for no print stylesheet

@haWK, can i get notification of chats like this via email.

@jess.irw Especially if it’s font replacement, yes.

thanks to my ticker. i came across it

@nofel – yes I remember you :)

@dprophet yep, uses Typekit

@rctnell :-O I would say that using a print stylesheet or not is a question of preferences…

how widely adopted is the :not() selector?

ok, I think i’ll add one just for the sake of completeness :-)

@Andrew I use it only in jQuery :D

Is there ever going to be a decent way of doing vertial alignment?

@Andrew This is a good site for questions like that: http://caniuse.com/

@dprophet so no way to avoid it? Printing is important to client.

@rctneil – testing print stylesheets you mean. I just change the media type and see what it looks like in the browser. However there is no substitute for actually printing it out and see what happens.

ever since i let my job in which i use to code from psd to xhtml and css. i haven’t found a job. i wonder why :(

@jess.irw Not that I’ve found, and I’ve looked hard.

@anna stuff like required are nice for browser that understand them, but you still need to use some sort of server validation. main problem with ‘required’ et al is that there isn’t a (good) way of styling them yet

should i call myself web designer or web developer or what

@rctnell lol

@designpalatset = you can lay with the border-image generator here to see what effects you can get. http://border-image.com/

One more question if I can, last made the big decision to get students to code using text editors and did not let them near dreamweaver or any other web application. Good or bad decision?

@nofel front end designer? or do you do back end as well?

@nofel hit me up on twitter and I’ll help you, but these questions probably aren’t relevant right now :)

Agreed. Let’s keep it on topic please. :)

what @scallioXTX said!

@nofel Skills lke that are too easy to find. Broaden your skills.

@Andrew don’t worry about adoption, worry about browser support, just check W3c schools website

@scallioXTX i been lately involved in convetering PSD to wordpress

themes

Are there other CSS Layout questions?

i can do a little php

I had one about vertial align

@nofel practice hard – if you don’t have work, make work for yourself – invent projects out of nothing for practice

@Andrew – Ralph beat me to it - http://caniuse.com/#search=:not

@anna : good decision. If they are going to learn to code, do it first then maybe try Dreamweaver.

@nofel yeah that sounds like front end designer. for me web developers do back end as well.

@nofel @adover I class web developer as my job (php / javascript) and web designer as my hobby

@spacebeers vertical align is a pain :D

@adover hat’s the problem. i wanna have project o work on, but how. no projects

Yup – Let’s say I want a grid of divs 4 x 4 styled as separate boxes. Is it best to use a ‘.last’ class and remove any margins on the right hand side boxes or is there a better way?

the main problem with vertical is the designers that don’t understand that it never works the way they think it will

@nicksh – it’s a real ballache and there doesn’t seem to be a proper method available

@molona It’s for my personal site, I’m basically working on it to keep me learning Ruby on Rails and making the whole site as best as I can, so if that includes a print stylesheet then i’m all for it

@anna great decision

@nofel: you should open a thread in the forum to discuss the possibilities :)

display:table-cell and display:inline-block work fairly well for vertical alignment, but it’s trickier to support IE7 as well.

@spacebeers often display: table display: table-cell is handy for that. But for older browsers that IE8, there are some workaround alternative.

it’s usually combined with equal height columns with uneven margins, too many dropshadows and gradients, etc

@spacebeers – it depends what you mean and what you want to align. Dsiplay:table and table-cell properties (ie8+) can be used for vertical alignment

@Andrew I’d class myself as a developer too but a designer aswell , but I mainly develop jQuery, I feel anything which is language based is development, design is creating in photoshop/html/css

@spacebeers Yea, Flex Box is the savior in vertical alignement

I don’t know anything about CSS, where is a good place to start?

is I meant. Sorry.

i will. u guys, can u tell me a good and attractive title for myself https://www.odesk.com/users/~~46305826ffbf7eef

I mean it won’t be 100% cross browser but neither is table-cell.

@nofel Oh dear god

@mgmoore sitepoint forums are a good start, and “viewing source” of sites – that helped me learn a lot

@nofel at my college we are always getting loads of requests for basically free websites for community projects I am sure if you ask around you could get some projects that way

@ralph.m Thanks, I’ll check out SitePoint’s books.

@mgmoore This is a great beginner CSS book http://www.sitepoint.com/books/html3/

@spacebeers – its early days yet but there are some exciting things out there. To be honest there are only a few things you can;t do now but you have to jump through a lot of hoops to do them.

@HAWK Would like an answer if you could highlight it? :)

What do you think about goddamn vendor-prefixes

Totally agree sitepoint books are brilliant use them all the time and recommend them to all my students

@mgmoore Or a CSS3 one http://www.sitepoint.com/books/htmlcss1/

@paul.OB – worth keeping an eye on then? Table-cell will have to do for now though.

@adover “viewing source” means viewing the source code, right?

@nofel do you use stackoverflow?

@mgmoore You have plenty online documentation from the www.w3c.org to the classic www.w3chools.com… although if you prefer books, there are thousands (including SitePoint’s, of course)… there are also plenty of video tuturials in youtube or, if you want something more organised, learnable.com or lynda.com

@mgmoore indeed it does :)

@andrew i just registered a account there today. why

@paul.OB – at least equal height columns are getting sorted out. That’s my biggest rep earner on Stack Overflow so far

@molona NEVER, EVER, USE W3SCHOOLS

@spacebeers equal height columns getting sorted?

Let’s say I want a grid of divs 4 x 4 styled as separate boxes. Is it best to use a ‘.last’ class and remove any margins on the right hand side boxes or is there a better way?

@spacebeers – equal column were never a problem for me lol ;)

@nicksh I disagree, all information is usable information

@nofel look at websites of local community groups charities if they are bad contact them and say you would like to design a erbsite as a showcase for your portfolio

I agree, @andover

@molona . . . what’s wrong with w3schools?

@paul.OB – no me neither. Not since the negative margin trick was discovered. It’s how I got half my stack overflow rep

@nicksh for a quick look, I don’t find it that bad… the information is well summarized and it is quickly to glanze… it could be updated more frequently though

pls advice me for a good title

@Loufa check w3fools.com

http://w3fools.com

@dprophet That’s probably the most reliable way, in terms of cross browser.

@loufa W3 Schools is full of bad advice and bad practices… see http://w3f…

*beat to it*

thanks @nicksh

@ralph.m Thanks very much!

@nofel Take that to the forums. It’s not ideal for a chat. :)

thanks . . will check those links

@Loufa… I don’t have a problem with w3schools… it is not my main reference but it does provide qucik information

w3schools is a reference for beginners …

the site is not updated that frequently though… and that means that they’re a bit outdated regarding best practices

@spacebeers what’s the negative margin trick? I usually use a background to fake equal columns

Sitepoint and Mozilla have a good HTML/CSS documentation

tizag.com is good too

@Willomina Molona didn’t say not to use them – someone @ tagged her :)

@molona If not frequently means not at all then yes ;)

@mgmoore I didn’t say that ;)

@willomina beginners learning bad practice from the start is not good at all

@spacebeers I agree, although using jQuery for layout should be a last chance saloon – always test with JS turned off, even if it is for only a small percentage of users – as if you have scripts at the bottom on a big page, it will momentarily look dodgy

it wasn’t addressed at Molona

@dprophet – if you want to remove something from the last child then you can use last-child (ie8+ iirc). Or for older browers add a class. Or offset the wrapper to start with by the amount of the margin you want to counter and widen the wrapper with a negative right margin so it contains your four floats. That sounds harder than it should have.

Ok, let’s get back on topic, which is CSS Layouts :)

it was nicksh’s who said it :D

@Andrew I doubt any beginner is only using one source …

anyhow. i gtg

agreed

Question – If you have a div containing two other divs – both floated and of different heights, would you include a ‘clear’ div inside or set the containing div’s height to a fixed amount (assuming the design requires it )

@HAWK thank you

@hawK hope to see this chat next time.

@Willomina if I say to you ‘this is an egg’ but it was an old chicken, would you believe me?

oops @Paul.OB thank you!

@jess.irwin – It’s when you add a massive padding to the bottom and equally massive negative margin.http://stackoverflow.com/questions/9993799/equal-height-fluid-columns-with-min-height/9993887#9993887

good question dprophet

@dprophet overflow:hidden on the container instead of a clear?

it is not hte same

@jess.irwin – it’s x-browser and saves you using an images

You can sign up for reminders here https://www.facebook.com/sitepoint/app_115462065200508

@dprophet Never set a fixed height! That’s asking for trouble. Often something like overflow:hidden on the parent works really well.

@dprophet I’d set the container to overflow: hidden

@Andrew I’m not here to debate with you … I’m here for CSS

the height attribute won’t let you add content in one of the two divs in the main div

I’m never a fan of adding div’s just to clear

@dprophet – I would set the parent to overflow;hidden to contain the floats – if that’s what you were asking?

@dprophet – +1 for overflow: hidden; Height’s are a problem.

is using a wrapper div really needed these days?

@ScallioXTX…posibly… I insist that w3schools is not my web of reference… I used to like it because its organization, it was easy to navigate and fast to get an answer :)

but now I go to other places :D

@dprophet – but I’ve not problem with a clear: both div

I use a clearfix method rather than overflow: hidden

@molona I hear ya, I used to like it too. Don’t tell anyone.

@spacebeers “divitis” ;)

@ralph.m @scallioXTX Would this not affect the layout of other elements within the design? Overflow:hidden just limits what’s displayed but doesn’t act as a block around which the rest of the design can be built, right?

@Andrew You usually need it for practical purposes. a lot of problems can arise without it.

but what would be the purpose of the overflow:hidden in that case

I’m a fan of the widened wrapper with negative margin trick that @paul.OB mentioned.

@spacebeers – You are referring to the one true layout trick which is clever but not suitable if you have in page links as the con tent will get cut off. Its ok otherwise.

btw this is my latest layout

http://nicksh.com/experiments/adminface2/

@Paul.OB – I never knew it had a name but it’s always worked perfectly for me.

@ralph.m I find that the only time I use wrappers is when I am using javascript to add side widgets based on user preferences

btw where are the experts?

@ScallioXTX Well there you go – I’ve just found out something new! Thanks

I’ll try it out

and then, it’s made with jQuery

@spacebeers ah, used that once before in my first job, it wasn’t the most successful. will have to try again now I have more experience

@dprophet in fact any overflow except for the default ‘visible’ will work; so auto also works, but gets you nasty scrollbars if you’re not careful, so better stay clear of that one

@nicksh You’ve been talking to Paul O’Brien for a while now. ;)

@paul.OB – I long for the day where CSS columns are fully supported though but it’s a dream for now.

@Kravvitz sounds like overkill. clearfix, float AND width!?

@hAWK ah, last time the experts had prefixed names :D

thanks

@nicksh obviously @paul.OB doesn’t appear as knowledgeable as you would like XD

@ralph.m – interesting point about floating the outside element, @paul.OB – there’s been a bit of noise recently about excessive floating of elements – what are your thoughts on this? I think I first read about it using CSSLint

@Andrew Get used to wrappers … HTML5 is full of them (in the form of sections etc. :)

@nicksh Paul OB is the official expert… ScallioXTX and Ralph.m know lots too :)

everyone is an expert here (:

@dorak Unfortunately the reference sites are a bit out of date but we’re in the process of rewriting them

@GFRA54 – If you are referring to my answer about containing floats then overflow (other than visible) is one of the properties that create a new “block formatting context” and in that context floats will automatically be contained. (Absolutely posioned elements, inline-block, and display:table-cell properties also have the same effect). Older IE just needs haslayout.

@nicksh Yeah. I forgot to ask Paul to do that this time. I’m also keen to see how the sessions go without an ‘advertised’ expert. Whether people will help each other and come along anyway.

@HAWK They are still brilliant, though, and excellent for the CSS and HTML that really matter at the moment. :-)

@nicksh There are also several of my forum staff, who can definitely be considered experts as well

Why doesn’t IE just die :(

@adover – only float when needed. However floats are marvellous inventions and can do so many things that other elements can’t.

@ralph.m Agreed. The search doesn’t work though and they need a bit of an update. :)

IE dIE ::D

@nicksh amen

@paul.OB – agreed – good to clarify

@scallioXTX and @nicksh

LOL

I use IE MUST DIE as an overlay on my website that only shows on IE

@ralph.m @HAWK I agree they are brilliant… makes my hard copies redundant :(

@HAWK Just google “sitepoint reference “topic” and you get what you need, though, so it works fine for me. :-)

although IE >= 9 aren’t nearly as bad as 6 and 7

just thinking about IE6 still sends shivers down my spine brrrr

@nicksh – see it as a good challenge – fixing things for IE 6 back in the day made me a lot more consistent as a coder nowdays

We have 10 mins of the official session left. Does anyone have a question that they haven’t had an answer to?

@ralph.m I use the codeBurnet tool for FF

I just tried overflow:hidden to contain floated divs. Genius. I consider this well worth the time :D

@dprophet good to hear :)

it is a great way to have the reference in your browswer :)

@HawK when’s the next one? :) Enjoyed it!

@scallioXTX It still has shit performance and it still comes with MSN homepage

here is a good* question

Sometimes I use position:relative; on a parent element, then position: absolute, left: 0; width: 20% /// position: absolute, right: 0; width: 80%; for two columns in my layout. obviously this is a REALLY simple example, sometimes there are 3/4 columns, Is there a better way to do this?

* disclamer: the word good is used relative to my prior contributions

@adover TBC but if you want to get on an email reminder list, put your name down here https://www.facebook.com/sitepoint/app_115462065200508

@scallioXTX Okay great, thanks.

@scallioXTX Not at the same time. Sorry for not being clear. I meant that I would use one of the 3 methods I mentioned.

@Andrew – What do you do about equal column height for dynamic content?

On an unrelated subject and for those of you that missed it earlier, we’re doing a giveaway on Twitter for all new followers. Make sure you follow @sitepointdotcom to get your free Photoshop Shortcuts Poster.

done, thanks @haWK – enjoyed it!

overflow / custom scrollbars

something with a margin in a overflow:hidden container where you have some other content as well that isn’t floating, something like that; it would cut the block of at the width of the float

@Andrew Generally, absolute positioning for page layouts causes a lot of trouble … such as when you have a footer (or anything else) after the columns. Better to use floats for columns.

@adover My pleasure. Thanks for taking part.

@Andrew – Absolute columns are fine as long as you don’t need a footer under both columns. I tend to stick with floats because I know the client will change his mind and want a footer :)

@ralph.m I agree. I use absolute positioning only when there is no other way. Just too many balls to keep in the air.

Any solution on fluid height sticky footer?

Must leave now. Thanks for all the CSS info & a good intro to chat . . . more study required . . . back next time!

Punching out. Thanks all. Well worth it for that overflow:hidden alone!

Absolute positioning is handy for small items here and there, but lousy for page layout generally.

Later @dprophet – thanks for taking part

what’s a “fluid height sticky footer”?

the sticky footer without fixed height

@ralph.m exactly

@nickish – Not yet – but I’ll get working on it !

isn’t that where the footer stays at the bottom regardless of page height?

yea

sticking to the bottom of the window when the page is smaller than the window usually

@andrew – yes the problem with the sticky footer is that you need to have a fixed height footer in order to cater for the 100%. If the footer is afluid height it won;t work

how much do good CSS designers charge per hour?

Right time for bed for me. It’s been interesting as always. See you next time.

See ya @spacebeers

@spacebeers drink more space beers :D

Is the transcipt going up tomorrow?

How do I get transitions to work “below the fold” CSS3/HTML5

I’ll post it up later today (it’s currently 10am here)

cool thanks @hAWK.

see, I charge the wage I get from work +50%, since I’d have to possibly take time off work and to do that it needs to be worth my while

@Andrew – They would charge as much as they can get away with I would suspect. As Ralph said it all depends on the client, job in hand and current cost of living.

otherwise, I might as well just go to work!

It depends on client :D how much can they pay

IS $15 too low?

Well I’m off to work (8am). Cya’s next time

@AJ – Do you have an example as I’m not quite sure what you mean. If you animate something out of the viewport it will keep on going I believe.

an hour?

@nicksh and also what’s the minimum that you’re willing to accept :D

Thanks for taking part :)

$15 an hour is a bit low IMO

And a special thanks to Paul O’B and the forum experts for their time

in the UK that’s like £10/hour

@nicksh – I’m probably not as good as you and i charge near double that, so you might be selling short

you should also consider your skill level when setting your rate. I’d say $15/hour is fine for someone who has less than 2 years of experience.

I’m 15 :D

but I know things really good,

I know someone who set up a website at 15 which gets 10 million views a week

age means nothing, skill means everything

The only cross-browser way to do sticky footers with a non-fixed height footer that I’m aware of is to use a CSS-table.

can the next session be about API building?

*PHP API building*

PHP is too specific

@Andrew and API is too broad

just the theory behind building a scalable API

sounds like you may want to read the PHP Master’s book from SitePoint

I don’t like PHP, but I know it reaaaaalllyyy good

:D

I have the book!

I read it

they describe how to write a RESTful API in there, it’s pretty good

ah, okay

I learnt SO much from ti

it

yeah it’s good

It pretty much got me a job!

I use Codeigniter, can I use it for REST?

it’s like the glue that holds the pieces together

so, no more css questions then?

I hate codeigniter

@nicksh sure, why not

I used it for 3 years, loved it, then discovered CakePHP and Lithium

I’m moving ro Ruby

don’t

li3 FTW

Now I use a custom framework which uses custom API’s instead of models

hmm

yea I mean Ruby on Rails

and maybe Sinatra

@Kravvitz – Yes I had a version working in Firefox with Display:table but IE8 wouldn’t play ball.

Twitter moved from Ruby to PHP because they encountered scalability issues

@Paul.OB hmm. IE8. That’s a pain but not too surprising.

with all it’s retarded products

Windows renders webfonts like shit

they’re working to improve IE, but they’re still playing catch up.

@Kravvitz – yes I think it didn’t like one cell being 100% and pushed the table higher whereas other browsers did not expand the table height. Now you’ve mentioned it I may have to revisit as it was a while ago :)

Have you guys seen this? http://blogs.msdn.com/b/ie/archive/2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx They say that they’ll remove the filters including the alpha/opacity filter from ALL rendering modes of IE10.

Not only IE, even Chrome renders fonts like crap on Windows

yeah, the way Chrome renders fonts in Windows is a frequent source of frustration for me.

When I look at my websites on Ubuntu I’m surprised :D

@Kravvitz – Yes I read that and it seems they are trying to clean their act up. Its unusual for MS not to support something but they dropped expressions in IE8 so I guess this is another step.

@Kravvitz – dropping filters should cure all the bugs with rounded cornres , shadows and gradients as the filter seems to kill a lot of them.

I have to sleep now so bye all and thanks for the questions, answers and chat. It’s been fun.

You’re welcome although the chat moved faster than I can type :) See you later Ralph and thanks as always.

and yes, the filters don’t play well with things like PNGs that have alpha transparent areas.

btw I’ve remembered a handy tool

http://tinypng.org/

worth bookmarking, I think

http://www.dynamicsitesolutions.com/blog/2010/2/png-optimization/

Anyone still use Gifs?

Gifs never die

optimized PNGs are usually smaller than GIFs.

Animated gifs are making a comeback, too.

but only as user content

not design elements as in stone age

:D

the only GIF I typically use is a 10×10 fully transparent one.

hmm

These days I just ignore old shitty IE

When can we stop using the -webkit -moz prefixes?

When CSS4 and HTML6 come in play

Next century then?

Or I hope until then

@Rod You don’t *have* to use them ever. :-)

maybe an asteroid strikes us this year

Is there a best way of layout out a css file or is it just down to preference? Also – is it best to consolodate css into the fewest possible files or segregate them?

so what do you think how much should I charge if I’m 16 year old but know HTML stack really good

@rod it depends

hmm

wait

you can put all shared code in one file, and create page specific files

@Rod Basically preference. And I prefer fewer style sheets.

you may use a preprocessor to keep code organized

I usually have a site-wide stylesheet and one page-specific one when neccessary

yea

Flash is certainly getting the squeeze.

HTML5 has all the possibilities of Flash

if we include WebGL

that’s a fact I presume…

the Flash software may still stay as interactive HTML5 stuff authoring tool

but the Flash Player will be past

the way things are going, maybe you’re right.

Flash is dead, and if Adobe don’t improve Photoshop and Illustrator instead of just adding on extra features then their days are numbered too.

however not everything is lost. It can act like you said.

can you answer? min. how much should I charge if I’m 16 year old but know HTML CSS JS really good

:/

OK folks, I need to bid ye adieu …

Charge whatever is worth your time doing it basically.

value your work!!

Estimate how long it will take you, then double it because estimations usually fall way short. Work out what hourly rate you’re happy with to get your total. Get them to pay some of that as a deposit. Then get further amount paid on completion of design phase, and the rest on completion.

Lay all this out in the inital quote that you give the client