logo
IRC Archive / Freenode / #css / 2010 / January / 17 / 6
zagibu
still haven't found out how to have an element float on the right of three left-floating items
riven
zagibu: with `float: right` (omg, amazing!)
M06w
can I have a background-color and a background image at the same time?
zagibu
yeah, I already tried that, didn't work because of an inheritence problem it seems...I tried to "override" the float left from the others first
it works now with it's own class
thanks
riven
M06w: yes, of course
theaor
ok so i figured out how to abosolute position my side bar
now i have another problem, it wont stay with the rest of the page
if you go to sisterhoodnetwork.org
and reisize your window, the sidebar strays away from the rest of hte page
zagibu
hmmm, enclosing floating divs in floating divs seems to be a whole new problem, especially, if you have elements with clear: both in there, too
Kake_Fisk
Hi
State
Hello
I have a block of text of varying length
That I'd like to break in to columns of fixed height
Running to the right
The line-height is fixed
And I'd like the column width to be fixed
I think I have to write some JS to do the work of measuring / breaking up the block after load
Any ideas?>
http://www.alistapart.com/articles/css3multicolumn/
That looks promising
Kake_Fisk
I need some help with the float property. This is what I have: http://www.webdevout.net/test?02s But I want the 2 divs at the bottom to be under the two at the top and not bellow everything.
phantomcircuit
so i've got a <div> with absolutely positioned <divs> inside of it
zagibu
great, now only one table to get rid of: http://www.webdevout.net/test?02u
phantomcircuit
but the parent does not expand
http://wtfchan.org/themes/default/test.html
zagibu
i tried floats, but got issues with the clear: things
i also tried horizontal list (display: inline on the li tags), which didn't work either
Prune
are rollovers specified inside the html document? Or must they be in a separate css specification file?
theaor
I'm trying to essentially create a table around my div's in my css so that they stay in place, reguardless of the browser's window size. how do I go about doing this
Prune: depends on the rollover type
You can put the rollovers style script in the header.php file
depending on the theme
and then use the html of the rollover links in the actual word press pages
JDigital
theaor: put a div around it, give it a fixed width "margin: 0 auto;"
a fixed with and "margin: 0 auto"*
theaor
Jdigital: so I would basicall write a div at the top of the css page? and then an additional closing at the very bottom
?
Or write a div above the main container of the css and closing at the end
JDigital
in the HTML
theaor
so in the index.php file then?
at the top and bottom
JDigital
<div id="wrapper">stuff stuff stuff stuff stuff stuff stuff</div>
theaor
gotcha
JDigital
right basically
theaor
i'll try it out thanks
monokrome
Does anyone here have any idea why the "border" element here is larger on the bottom than the top? http://galleries.monokro.me/photo/1/
JDigital
]layout @ theaor
_ZofBot4
theaor, Examples with proper markup and CSS: http://css-discuss.incutio.com/?page=CssLayouts , http://blog.html.it/layoutgala/ , http://glish.com/css/ , http://bluerobot.com/web/layouts/ , http://webhost.bridgew.edu/etribou/layouts/
monokrome
I think it's actually the <a> tag taking up space... weird
theaor
Can someoe assist me with creating a div wrapper in my css
my side bar keeps moving according to the browser window's width
Kake_Fisk
I need some help with the float property. This is what I have: http://www.webdevout.net/test?02s But I want the 2 divs at the bottom to be under the two at the top and not bellow everything.
theaor
and i tried creating a wrapper around the entire css but it dint work
thinkfast
hey all, im having a problem with the bottom right div of this page - http://sitesbuiltnow.com/~netbox/
they are supposed to be floating side by side, but the right one is pushed down
bostux
thinkfast: remove the float on the div, give it a margin left of the width of fp_left
thinkfast
remove the float on fp_right ?
ah i see!
thanks!
but then all the content in it moves under the div
JDigital
]float tutorial
thinkfast
im not sure if this a float issue any longer
maffelu
Are there generally any problems making a list static?
I'm making a list with 'position: absolute' and, well, let's say the results are spectacular
JDigital
position: absolute; tends to break things
maffelu
right
so it's no good with a list?
JDigital
are you trying to make a horizontal list
maffelu
indeed
I get a blob
JDigital
float the 'li' is better
phantomcircuit
im trying to get a selector for the first child of an element that is a <div>
how would i do that?
incluye
div:first-of-type
Warning, only works in good browsers
maffelu
Can someone help me with what I think is a border problem?
I have this page, http://www.idasmycken.se/newsite/index.php?page=products, where, if you press the link that says 'Visa mer' you get to see a necklace close up, but if you select Bild1 or Bild2 you get the picture with a white glitch
nkuttler
maffelu: well, see topic, invalid code, tables for layout etc. build a minimal test case that reproduces the problem
ZombieLoffe
maffelu, I just get a white modal window when I click visa mer. No image is showing up.
nkuttler
you need to click on bild1 etc
ZombieLoffe
Nothing happens when I click bild1 or bild2.
maffelu
ZombieLoffe, quite so, press the Bild 1 or Bild 2
it's not done yet, I haven't decided what should be default yet
ZombieLoffe
maffelu, yeah, nothing happens.
maffelu
when you press the Bild 1 or Bild 2 links?
nkuttler
noscript?
maffelu
It works for me, just tried
ZombieLoffe
maffelu: Nothing. Zip. Nada.
The "information" link works fine.
maffelu
ZombieLoffe, out of curiosity, what necklace did you click?
ZombieLoffe
maffelu, I've tried like 10 different ones, nothing.
maffelu
might be a bug
rump! Tried to reload?
browser?
ZombieLoffe
maffelu: Yeah, f5'd a few times too.
maffelu: Error console tells me "Console is not defined" on line 88 of products.js
maffelu
lol!
hold on
ZombieLoffe, try now :P
Had debuggning running
ZombieLoffe
Indeed.
maffelu, you're annoyed at the 1px white gap on the top and left edges?
maffelu
ZombieLoffe, exactly
ZombieLoffe
How odd, maffelu
alexmglo_
I have a custom input field and am noticing that my text is really bold, more so than the text in a textarea. Can anyone shed some light on that issue? I have the font-weight set to normal.
ZombieLoffe
alexmglo_: got a link?
alexmglo_
ZombieLoffe: I am working on it locally on MAMP.
ZombieLoffe
alexmglo_, can't really do much to help then
maffelu: It's caused by border: 1px solid transparent; on img {}
maffelu
really?
ZombieLoffe
maffelu: really.
maffelu
oh yea, ZombieLoffe , now it's gone :P
thanks, did not think about that =)
ZombieLoffe
maffelu, np. Took me a damn good while to find it, heh.
maffelu
hehe, me too :P, I don't like to ask about small things like this, but man it bugged me
ZombieLoffe, another silly question. If I have a layer between the page and the picture (my gray layer) and I have opacity set to say 0.75, the layer on top (my pic/info layer) also gets set to opacity 0.75, is there a way to get around that?
Prune
I didn't even realize Komposer would create css, but here it is <style type="text/css">
I didn't even realize I was editing or creating css out of Komposer until I went into the raw code.
ZombieLoffe
maffelu: background: rgba(100, 100, 100, 0.5); where the last item is opacity
maffelu
really?
ZombieLoffe
maffelu: However, rgba() is poorly supported (no IE) - if you want IE support, use a png-24 transparent background
maffelu
hmmmm
ZombieLoffe
maffelu: If you want IE < 7 support for the background, apply a PNG-24 pngfix
maffelu: Or you could hax it, and place a background element behind the front element using z-index, and apply opacity to that
maffelu
well, that's what I'm doing
ZombieLoffe
]css opacity opaque
_ZofBot4
http://reisio.com/temp/punkid/ , http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children
maffelu
I have three layers, main page (1), opacity layer (2), info/pic layer (3)
ZombieLoffe
First link is an example of that, maffelu
martinn
Hey I'm having a cross browser compatiblity issue. If someone can figure it out, i would paypal them $25.
maffelu
Hm, I don't get the first link by looking at the code. That bugs me. Is he using an image hack?
ZombieLoffe
maffelu: Just firebug it.
Prune
Can I insert a font specification into these statements? :link { color: #FFFF99 }
:visited { color: #FFFF99 }
:active { color: #FFFF99 }
maffelu
That's what I did, There doesn't seem to be any opacity set, only pics
ZombieLoffe
Prune: sure. All font-* properties would do fine in there.
Prune
thanks Zombie
ZombieLoffe
maffelu: #thr has opacity: 0.5;
maffelu
oh yea
didn't see that one :P
reading the other link now
got it ZombieLoffe
ZombieLoffe
Neat-oh.
maffelu
now = bedtime!
can anyone with IE7 explain why the products boxes screw up when expanded?
oksushi
@
_ZofBot4
(testbed....=Shop) HTML: 6 Errors (see: http://xrl.us/bgsz79 ) CSS: Valid ( http://xrl.us/bgsz8b ) DOCTYPE: XHTML 1.0 Strict + url (MIME: text/html text/html; charset=utf-8 )
MarcWeber
Is there a css validator which can be run form console and which knows about vendor specific hacks ?
KenBW2
@
_ZofBot4
(testbed....=Shop) HTML: 6 Errors (see: http://xrl.us/bgsz8j ) CSS: Valid ( http://xrl.us/bgsz8m ) DOCTYPE: XHTML 1.0 Strict + url (MIME: text/html text/html; charset=utf-8 )
oksushi
MarcWeber: a validator will check against the specification, and vendor-specific hacks are not part of the spec
KenBW2
the HTML errors are ones that won't affect layout
oksushi
so, will not validate
KenBW2: you should fix them regardless
KenBW2
oksushi: agreed, but i want to get this problem sorted first
alecs
howdy !
oksushi
KenBW2: well, the /topic asks you to validate first, so&
alecs
how can i add lower an image, that is set as backround ?
KenBW2
(Action) rolls eyes and does token validation
alecs
** i mean i would like to add a margin-top just to the image ...
oksushi
alecs: you mean a background-image ?
]css background-position @ alecs
alecs
yes
_ZofBot4
alecs, css background-position: http://w3.org/TR/CSS21/colors.html#propdef-background-position
KenBW2
validation passed, problem remains
oksushi
KenBW2: are the 'details and buy' links supposed to be staggered?
(webkit nightly, mac)
KenBW2
define staggered?
strewn across the page diagonally?
oksushi
they are all flush to the right in firefox, however in webkit they look like a staircase
let me screenshot
KenBW2
yea i know what you mean
id fixed that in the browsers i have installed
oksushi
KenBW2: you can fix it easily
.saleitemcollapsed {overflow: hidden;}
in fact, your ie issue might be related
.saleitemcollapsed {overflow: hidden; display: inline-block;} .saleitemcollapsed {display: block;}
put those two declarations in your css, one after the other, to trigger hasLayout and contain the floats
KenBW2
IE doesnt sup[port inline-block :S
oksushi
yes, it does
just not like other browsers
anyway, you are only setting the display to inline-block temporarily to give the elemetn hasLayout