logo
IRC Archive / Freenode / #css / 2010 / May / 10 / 3
Bluebie
I still see the list?
samtihen
ah, sorry, on localhost
Bluebie
okay..
samtihen
ill just google collaping margins
thanks for your help
i just needed a direction!
Bluebie
set "list-style-position: inside;"
samtihen
much appreciated
Bluebie
:)
samtihen
will do
Bluebie
on the ol..
You're welcome :)
samtihen
cool. its the paragraph as well
it shouldnt be as close to the image as it is
Bluebie
padding never collapses, so if you need to avoid this confusing mess, use padding when you can
ah
try setting overflow: hidden on various things
samtihen
the image has a margin and a padding
Bluebie
it can stop collapsing margins
but googling the phrase will reveal many solutions :)
samtihen
thanks!
fearfail
hey, i'm doing something like this: #parent p { color: red; } .child p { color: green; } and in html: <div id="parent"><div class="child"><p>footext</p></div></div>
footext is still red. Why does the child div not override it?
m4rtin
]css specificity @ fearfail
_ZofBot4
fearfail, CSS Specificity: http://htmldog.com/guides/cssadvanced/specificity/ , http://w3.org/TR/CSS21/cascade.html#specificity
m4rtin
use: #parent.child p to get a high enough specificity to override
fearfail
ahh i see how it works
thankz
mseph
is it possible to make a horizontal menu in css so that the items are evenly spaced across the page without specifying the width of each item separately?
Bluebie
mseph...
Do you intend that the gap between the last letter of one item and the first letter of the next would be even, or that the centre points of each item would be evenly spaced?
such that two long words would have little gap between them, but be still laid out to the same rhythm regardless of their size?
mseph
the latter
like solution number 2 on this page: http://www.sovavsiti.cz/css/horizontal_menu.html
Bluebie
You'll need to specify a width for all of the items..
mseph
ok cool thanks Bluebie
Bluebie
I take it you have some trouble there due to a dynamicism to the list's contents?
mseph
yep, but i think i can deal with it
foo
is it good practice to uppercase the actual text on a website, or use CSS to make it uppercaes?
mseph
i didn't want to have to rely on a scripting language if css and html could handle it by themselves
Bluebie
Alrighty..
foo: Use CSS on the basis that a screenreader might confuse BIG HATS for B.I.G. H.A.T.S. and try to spell out the letters, would be my entirely baseless guess.
riven
foo: that depends. If the actual text is supposed to be uppercased to make sense (e.g. NASA), then do so. If it's just for stylistic purposes, use CSS.
Bluebie
Aside from that, I can't see how it would matter beyond what's most convenient
Using CSS leaves you more wiggle room in the future if you redesign and decide you no longer want it capitalised, don't have to go hack the content/software
<3 Web Fonts ^_^
Font Squirrel is such an awesome service!
riven
foo: so, say you have a menu (Home - Products - Contact) and you want it to be uppercased, do it with CSS - never in the HTML.
foo
riven: gotcha, stylistic. thank you
riven
foo: what Bluebie said is also true: screen readers will get confused :)
foo
what are "screen readers" ?
riven
foo: http://en.wikipedia.org/wiki/Screen_reader
Bluebie
foo: It is a tool used by the blind in order to access software and webpages
foo
Bluebie: ahh, ok
hadn't thought about that, thanks!
Bluebie
Essentially, a more advanced version of the 'read text aloud' text to speech function on any computer, capable of describing shapes, layouts, and interactive components like buttons and links in a way which allows the disabled to operate and navigate the interactive parts
Mattias
I was just wondering, overflow-y <-- seems to work in all the browsers I've tried it in, IE5, IE6, IE7, IE8 etc, chrome, firefox. and so on. I can't find overflow-y on w3school, was just wondering, is this valid css? :P
I want scrollbars on y
riven
]w3schools @ Mattias
_ZofBot4
Mattias, W3Schools == Errors, omissions, deceit. Stop reading/pointing to them! Syntax Errors in the example --> http://xrl.us/bfxwd | Complete bullsh*t -> http://xrl.us/bfxwf | Can't get it even more wrong if tried --> http://xrl.us/bfxwh
riven
Mattias: overflow-x/-y are part of a CSS3 module
And, indeed, supported by all browsers you could possibly care about.
Mattias
yeah, I read that from google hits, but then I saw those older browsers had it too
so w3schools is junk then? :P
riven
yes
Mattias
I thought w3school came from w3c
riven
no
Bluebie
Nope, hence, deceit :P
Mattias
gah
I always thought that!
riven
lots of people do
Bluebie
the w3c has their own websites with lots of very useful, well written, accurate information
Mattias
I'll go straight to w3c for info then :)
mseph
for a horizontal menu with items evenly spaced across page is there any reason not to use tables?
Mattias
mseph, semantics
mseph, you just progressively enhance a page with css, if the web browser does not have css, the page should still display properly
mseph
ok thanks Mattias. semantics means that ul li is more appropriate notation for a menu than table tr td?
Mattias
semantics means you use the right element for the right purpose, or something like that :P
oksushi
mseph: <table> is inappropriate html for a menu. A menu is a list of links
therefore, use a list, most likely a <ul>
Mattias
tables are for data
oksushi
you can 'evenly space' <li> over a <ul> by setting a width
mseph
yep thanks oksushi and Mattias
steven_t
hia
square
would someone please send the actual link http://xrl.us/kd35 is pointing to. xrl.us is blocked in my network
Bluebie
http://www.hotdesign.com/seybold/everything.html
square
thanks
Bluebie
You're welcome ^_^
(Action) does so very muchly want a Square
giggsey
Is it possible to do outline-top: ?
riven
no
wouldn't be much of an outline
Multiply
Let's say I have a website, like <body><div>header</div><div>rest of the site</div></div></body> <- If my header is always having a height of 20px, how would I go by making the rest of the content, be 100% - 20px? :P
I wrote 2x </div> at the end. That's obviously only supposed to be one.
Slartibart
Page is #header,#main,#footer. #main is relatively positioned, with height set. Within it there's a block element whose height varies between 224-287px depending on the vertical space available. But how to center i vertically within main?
Multiply
riven, I kinda need the reversed. Having a header instead. Plus can I use body as the container?
riven
Multiply: just ignore the footer -- and you can add the header inside of the main column
Multiply
riven, I guess I'm just confused atm. It's getting a bit more advanced, give me a sec, to put up an example :P
What I want to achieve is header (100% width, 20px height), then a sidebar (200px width, full height), next to the sidebar, is a tabbar (full width, 30px height), and under that, but still next to the sidebar, goes content (full width, full height).
enoj
How can I force text without newline to wrap? is it even possible? - http://idev.no/breaktest.html
Multiply
I've almost set it up properly, but the header keeps bumping down the whole page by the 20px :P
riven
enoj: `word-wrap: break-word`
Heliodor
There's a dotter border around buttons with images when i clicked them, how do i get rid of it?
riven
Heliodor: "buttons with images"?
Heliodor
input buttons
with src=/image.gif
found solution http://css-tricks.com/forums/viewtopic.php?f=2&t=1696
riven
Heliodor: input::-moz-focus-inner { border: 0 } for moz
Heliodor
Thanks. seem there is no solution
riven
Heliodor: note that whatever you do, always make sure you have *someting* in place to indicate that the button is focusses
err, focussed*
Heliodor
Ok
Im using a js script for that.
Hm, i'll just keep it.
Seem it won't work with keyboard
enoj
riven: got something for opera users also ?
riven
enoj: no.
Multiply
riven - Here's an example, but it's not quite right yet. http://editor.exte.dk/
riven
Multiply: passworded
Multiply
riven, I _just_ removed it
As you said it. :P
riven: I don't know if my description earlier explains kinda what I want to achieve, precisely enough.. But I basicly have it. I just need to get rid of the scrollbars. If there's too content in #sidebar/#content, they should have scrollbars tho.
riven
Multiply: you're gonna be able to do that, not cross-browser anyway
err
NOT gonna be able :p
Multiply
riven, as long as it works in firefox, I'm happy. It's just going to be for me anyway :P
riven
Multiply: you may want to look into the Flexbox layout system, then
That's the closest you're gonna get, and I'm not even 100% sure it can do exactly what you want
Multiply
If all fails, I can go and rely on some javascript, I guess.
riven
indeed
Multiply: see https://developer.mozilla.org/en/Mozilla_CSS_support_chart (search for 'flex')
Multiply: also see http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ for more details, but note that mozilla's implementation may not be 100% compatible with that draft
Multiply
I'm wondering tho.. Can't I just absolute-position everything, and put proper margins/divs on, and use overflow:hidden / auto?
r/div/padding
For content, padding-top would be 20+30, and padding-left would be 200.
And of course positioned to top:0;left:0
I don't know... I'm gonna go for flex. It sounds more awesome.
riven
sure, but that's generally not a very good approach
although in this case, that could work
Bluebie
Heya!
Multiply
riven, actually flexbox is pure love. I'm gonna go with that, and only use firefox. :P
riven
yeah, flexboxes are sweet
Multiply: webkit also supports them, with -webkit- prefix, but you may run into small differences
Bluebie
I'm wondering if anyone knows of a technique to solve this problem..
http://creativepony.com/gallery/viewer/Photography%3AGlass+Pony%3ATime+for+Training.jpg
I'm trying to get the large image in the middle to resize to fit within the area given, without causing a scrollbar or being signifficantly clipped
But I'm having a hard time getting 100% to mean 100% of the remaining space rather than 100% of the size of <html>
Is there a way to solve that?
Aside from scripting it..
riven
Bluebie: without being significantly clipped? You'd rather the image is distorted instead?
Bluebie
No, while maintaining aspect..
it's working fine as it is, except for being 28px too high in safari..
riven
or do you mean, fit the image in the designated area, so as to cover as much space as possible, while still displaying the whole image?
Bluebie
Not sure about firefox as I don't have a current version on my computer
Multiply
riven, quick question.. I'm using -moz-box-flex, and so on, but am I just supposed to use "display: box"?
riven
-moz-box
Bluebie
fit such that white (well grey) space appears on the sides if needed to keep the entire image viewable while shrinking it to fit within the viewport
max-width/height are being quite helpful there
Mattias
Multiply, remember to use the -webkit equivalent
-webkit-box :P
Multiply
Both in the same display?
Bluebie
I don't care if it doesn't work in old IE < 9 so long as it isn't terribly mangled in them :)
Mattias
both in the same css rule
Multiply
And Mattias, I'm only going to use it in firefox anyway. :P
Mattias
Multiply, will other uses go to this page
users*
Multiply
Not ever, no.
Mattias
then you are fine :P
Multiply
I'm in love with flexbox now. Really making this whole lot easier.
And what's even better, is that I can resize my sidebar easier, with js, than before. Heck, even with CSS if needed.
eneas
Hi
if I need 4 td width 200px and 5º td with the rest
I can use first td width 200, second width 200, and 5º 100% ?
Multiply
colspan 3
eneas
oh yes, thanks
dgx
hey guys, how do you work on you projects(own/work/others)? Do you start straight from the design/coding phase or do you do some project specs before hand(or your manager/employer?)
ZombieLoffe
lolwut
dgx
Yea, im serious tho.
cigan_
how do make table borders only appear on top and bottom? tks for helping
Bluebie
cigan_: look at border-top and border-bottom
cigan_
i set it to 0 in the <TR> tag dint work
eneas
How I can open div with full screen
position: absolute, margin:0, left: 0, top:0 height: 100%
not found
height not is 100%
Multiply
Is any of the parent elements position set?
eneas
inner body
but body i can't modify
Multiply
Show an example. :P
eneas
$("body").append("<div class='xxx'>test</div>");
xxx { position: absolute; top: 0; left: 0 ; margin: 0; width: 100%; height: 100%; }
div with xxx class not showed in full screen
riven
]secret @ eneas
_ZofBot4
eneas, secret: No URL = no help. We are not telepaths, and can't determine the problem (let alone the solution) without playing with the troublesome page. So, give URL, or leave the channel and call 1-900-PSYCHIC. Oh, and good luck. You'll need it.
Slartibart
Any thoughts on how to vertically center the menu and image on weareart.se ? Problem is they both vary in size as browser viewport size changes.
Travis-42
Is there a css3 selector for matching by inner text? Somewhere I read about ":contains", but it doesn't seem to be part of the spec, or generally supported
riven
correct
it was removed
peb7268
hey guys having a color matching issue with css