any good books or tutorials on using CSS for layouts i tried using css for layouts over a year ago and I gave
But it is no means my fault. Firefox _should_ be obeying its master
oh ffs stop whining and Do It Right already
Do It Right or Do It Better?
you’re using tables for layout – ’nuff said
No I am not.
ha!
I am using tables for text/content.
My layout is 100% tableless.
inner layout is layout too
EOF.
what’s a table?
EOF?
you need to stop picking up habits from Zoffix
Forget about the tables for one second. Why is Firefox not obeying the max-width?
I even bet it is reproducable in div’s.
wha? Zoffix uses EOF?
firefox 2 works pretty fine for me
EOF is just so much shorter than “end of discussion”
I’m a lazy fella
Does firefox support max-width ?
Yes, it supports max-width. – http://www.webdevout.net/browser-support-css#support-css2propsbasic-maxwidth
should u use EOD in that case ?
See, I would have thought max-width defined a maximum width.
EOD is not well established
interesting idea noparse… strange but interesting
I vote for absolute-max-width
http://paste.css-standards.org/23154/view
But then again, I would have to wait for IE10 for that to be implemented.
Exactly what I am talking about.
It shouldn’t overflow like that.
sure it should
it has overflow:visible set
`css overflow
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
visible”
Why is there no overflow that doesnt make it overflow or add scrollbars?
overflow:hidden ?
*rolleyes*
That is of no use to me for so many reasons.
it does everything you’ve specified
where is trovster when you need him…
“Why is there no overflow that doesnt make it overflow or add scrollbars?”
I want to see everything in the table but I don’t want it to stretch horozontally.
I heard if you say his name 5 times he appears
and the browser is supposed to know where your content can be broken?
visit www.expert
sexchange.com
hahahaha
GarethAdams is in funMode
I like that
Noparse, I agree with you completely… but i still say borderless textarea is the best you’ll get, which is to say, it’s not gonna happen via the standard
me 2
or man up and use a table
they still add scrollbars if your content is too wide and can’t be broken
as well as being editable, obviously
and semantically bad
not if it’s tall enough
semantically horrible
I mean horizontally
but it should break the text properly
Hi guys. I’ve got a css layout problem. My sidebar pushes down my main content in ie6 and ie7. How do I avoid this?
http://attitude.110mb.com/
which seems to be the ultimate issue
Noparse, just use javascript to fix it, its quckier then arguing for an solution that doesnt exist
http://paste.css-standards.org/23155/view
WHY doesnt it exist?
Where is the CSS feature suggestion site?
^_^
you should instead be pushing for Mozilla to fix the Firefox bug that means it doesn’t implement
ah i gotcha Gereth… it’s not going to expand vertically regardless of the wrap
isn’t that being solved as we speak? I think I remember reading something on this lately
it works ok in firefox 2
if it is, then Noparse won’t have a problem
2.0.0.6
I beg to differ – he seems to have much bigger issues…
Please stop. Just stop.
not by the sound of it. he needs long lines of spaceless text to be wrappable
how does fix that (it’s user-generated content)
well hopefully he’s doing some kind of processing on the server?
or javascript hosting to change the behaviour of the browser, as u should
so you would just insert random entities every nth char?
if I has as much of a problem with this as Noparse is, yes
I am. I am using PHP to wrap the text at certain points. But a bug is there which, for the moment, I cannot see a solution to fixing.
also, IMO spaceless text should not wrap – it should overflow (here: scroll)
OK. Lets stop this. How can I make it add a horizontal scrollbar but not a vertical one?
auto does that, but browser dependent
are you setting a height?
No.
then overflow:auto
IIRC, IE (or some other browser) either adds no scrollbar or both
Damn I love web design…
The main problem is the multiple slews of browsers which all follow their own standards.
no – cross-browser issues are actually overrated, if you discount IE – which can be fixed too if you know its quirks
wow… tables won’t even do it: http://paste.css-standards.org/23162/view
the only issue i have at the moment is with opera
This problem is so simple. Yet we still haven’
t found a solution.
it’s not as simple as you think
hyphenation/word-breaking is a tricky issue
it doesnt getting the widths correct with i use em’s
So far no client or server side scripting language can offer me hard bulletproof solution. CSS is no help.
so you do realize it’s not as simple then
Does someone here know a bit of js?
depends
i kno a lil
It doesn’t sniff IE
if (isMSIE==”true”) — string??
Or I don’t know how to do it
Seriously, how can I get this considered for CSS? Should I ask W3C?
What?
Oh I guess. Sorry I’m not a programmer.
it should be ==true
at least if it’s a proper boolean
http://au.php.net/wordwrap — That right there is an example of a server-side doing a client-side’s job.
hi guys
hey mefisto
meeeen .. that was great
thanks again for that link about the overflow effect… got it working now
It still doesn’t work, serving IE different funcitons
You can’t do it with CSS?
]lametextwrap @ Noparse
Lame Text Wrapping: lametextwrap: http://scottonwriting.net/sowblog/posts/2272.aspx
maybe that helps
Nobody can do it with CSS.
You just want to wrap text in a given character number?
there should be a lots of tutorials on browser recognition
spaceless text – like @@@@@@@@@@@@@@@@@@@@@@@
While not breaking emoticon codes and bb codes… Yes.
Could be spaceless text. This is user-generated content.
whats the topic ?
(atm , not a channels topic)
i’ll guess that i missed the JS suggestion?
damn you, I was about to say “no tables for layout”
I don’t understand here. Why don’t you use width:*em ?
Because spaceless text can cause width and max-width to go over the specified width.
he dislikes overflow
]tableless
http://xrl.us/jx7f , http://xrl.us/iawr
I consider it a CSS bug.
there is no CSS bug
there are browser bugs
CSS has missing features if anything
well make overflow:hidden or something
depends on your definition of “bug”
an insect.
a fly.
a butter-fly.
6 legs or more 
don’t think browsers have those :p
Well its a pretty global browser bug. The fact that max-width can go over the specified width is crap… It is more like min-max-width or something crazy like that.
bug , is an error in programm
not in language (in this case css)
did you read the ZofBot stuff?
JavaScript solutions. Tell me why is one language doing another’s job.
I thought CSS was mainly to change the look of a page…
no, max-width specifies the maximum size of the box, which it does
because people want to use the www for things it was never meant for
overflow specifies what happens when the content is wider than the box (which it does)
javascript is like the browser maintenence guy.. comes in at night and fixes all the things html and css messed up
BitTorrent is not part of the www ;P
?
… nvm
agh
so far I have pulled an all nighter
Then why does overflow not offer a solution that wraps it down?
if i were the king of the world… there would be no server-side presentation code whatsoever
made a bet w/ my mom that I can stay up until 9:00PM
lol graphikz
hey guys, I use this and it’s still not working! http://dpaste.com/17197/
bad idea
i disagree :p
if I win, I get a MacBook Pro, if she wins, I de-clutter the house =p
what is wrong with that?
sounds like a skewed deal – except if your house is a real shithole
it is
lol
http://www.w3schools.com/js/js_browser.asp second google link
it would take like two days for each room
Caffeine allowed?
http://www.quirksmode.org/js/detect.html first google result
yeah, I only have a little bit of pepsi left though
HI, quick question – I have a div with transparency set on it, is tehre any way to put something in that div but NOT have it inherit the transparency? Whatever I do, the contained object wants ot inherit or have the containers transparency forced on it
I think I got some chocolate though
what’s your rule for transparency
I stayed awake for 25 hours not too long ago… On my flight from the U.K. back to Australia.
it’s 60 deg F outside, so my windows are open
ohhh
Why can’t I use var isMSIE//@cc_on=1 ??
I find it hard to sleep on planes
I have no idea what that is supposed to do
Me also.
wow I need to pass time quickly
Plus I didn’t eat during that time because airplane food makes me really sick.
lol
airplane food as in pretzels?
foo// this is a comment and as such not parsed
Please don’t even talk about it. Makes me feel sick.
opacity: 0.75;
-moz-opacity:0.75;
then reset it to no opacity
]]]opacity
opacity http://www.webdevout.net/browser-support-css#support-css3propsbasic-opacity (IE 6: N) (IE 7: N) (FF 1.5: Y) (FF 2: Y) (Opera 8.5: N) (Opera 9:75%) (Konqueror 3.5: ?) (Safari 2: ?))
I have tried that on contained objects but it has no effect
But that’s a conditional comment
did you watch the Man U match earlier?
http://dean.edwards.name/weblog/2007/03/sniff/
wtf in JavaScript??
I’m baffled
Nah, I am an aussie I just went there to see family and see the sites and stuff.
ohh =\
So yeah, I am not going back into a airplane for a while.
I am taking a plane ride in September
I will start my AFF license not before April :/
Web convention in Dallas, TX ^__^
Managed to throw up going there and coming back. Its the long food-less flights that gets me. The flight from Germany to England wasn’t that bad.
how is europe? I have never been there
do you see sth wrong in it?
Its great. Your summer is like winter.
with that condcom? I dunno anything about JS condcoms
You ain’t seen a summer until you have been to Aussieland.
40 degrees (celcius) days are standard.
104F
not too shabby
omg
if its 30ÚC in Latvia , ppl feel like shit
maybe un AU it not so wet
We don’t get much rain. We are on the highest level of water restrictions.
that’s what you get for living on an island of convicts
Dubai is even worse when we stopped over there. That was boiling.
:O
yeah ., thats interesint part of australias history
be a link, so even where no text but only background-color is, is that possible w/o js?
but you cant see it so directly in geneticalp plain
yes igel – make a a block element
Ace_NoOne, oh, really?
Hi. I’ve got a problem with a css layout in ie6 adn ie7. I’ve got a float sidebar next to a relposited content div. But in ie, the sidebar pushes the content down.
lia style=”display: block; height: 1em;”
usa in this case has much more worse resaults
Ace_NoOne, that’s possible
Any idea how I fix this?
http://www.alistapart.com/articles/taminglists/
What I found interesting about the U.K. is that they have shittier daytime TV than us.
shittier in quality or trashier?
yeah, but they don’t speak quite as funny
I can’t use abs for this problem, ‘cos it breaks something else
plus, the UK is all about titty mags
Shittier in quality.
And, your version of Deal Or No Deal sucks.
basically, I want two coloumns inside a relatively positioned box, with the tops at the same height. For some reason, I can’t seem to do this in ie
The strange thing is, is that this ought to be pretty simple. It works in opera and firefox.
is there something before those two boxes?
If yes, just clear your content then just float both
hm
There is nothing before the two boxes while they are inside their containing box
Of course, there are other boxes that come before their container
div id=”container”div id=”box1″/divdiv id=”box2″/div/div?
^^ won’t validate ;P
actually, nvm
yes. Container pos is relative. box one is relative with offsets defined, and box two is float
ditch the relpos
why do you want box1 relavive?
tive*
I considered that, and tried it when you suggested it earlier. Unfortunatly, if I do, something else breaks
then You’re Not Doing It Right
you sure? can you tell me why ?
i HATE when people ask for help and they dont show code / result
apologies. http://attitude.110mb.com/
alright
and, I’ve got it relpos’d so that the content can be centered, and its containing box can be followed with another box underneath it. (That’s the only way I can seem to get it to work)
why do you relative the first one?
just float it
and add a clear after those 2 boxes
Are you suggesting side-by-side floats inside the containing box ?
into and a, too?
yes
less than 12 hours to go
woot!
what’s up?
apply float: left to both
hey!
long time no see
doing good what about ya?
ok. I’ll give it a go. Thanks.
dont forget the clear
otherwise your border will be fucked up
I’m fine
nice
no, LI (block element) can’t go inside A (inline element)
which padding
You mean as described here ?: http://www.quirksmode.org/css/clearing.html
Ace_NoOne, well…the padding I used for the LI
use it for the A then duh
yeah
Ace_NoOne, haha!
thanks bro.
ursus, there’s another informative link for easy clearing:
]clear @ ursus
Contain floats: http://www.ejeliot.com/blog/59 , www.positioniseverything.net/easyclearing.html
thanks guys. I really appreciate the advice and pointers. css positioning makes me want to cry like a girl sometimes.
it’s really easy once you got the hang of it
so hang in there
ursus u there?
yup. Back now.
Still hacking away at it
hidden to your container
not the content
not to content*
hidden; for dealing with floats; you need hasLayout
*watch out
got it.
oh right, I told you before – forgot that
hasLayout makes me have to pee
hah
you better get an enema then
what a disturbing thing to work around
yeek
what a disturbing thing to come up with in the first palce
*place
oh i’ve dealt with it.. or rather refused ademently amoung a group of professionals to deal with it
there is nothing that would make me want to work around something so ridiculous
well, hasLayout is usually easy to fix
just that every article i’ve seen on it make sit look so nitpicky
Yipee! Works in ie now! Me Happy.
hi, i am building this website – www.netfuseuk.com/caws/index.html and trying to get the menus so that instead of them appear and starting below the mousover the person wants to see, they all start from home. can anyone help me to do this?
internetty hugs to all. And thanks for the pointers.
have you read the one at http://haslayout.net/haslayout
]menus @ davr_
Menus: http://cssplay.co.uk/menus/ www.brainjar.com/dhtml/menubar/ , www.alistapart.com/articles/dropdowns/ , www.alistapart.com/articles/hybrid/ , www.xs4all.nl/~peterned/examples/cssmenu.html , www.udm4.com/ , www.cs.ucla.edu/~heng/JSCookMenu/
that’s the one that made me wet myself
I loved it; concise and pragmatic – or what makes you cringe exactly
oh, the article is fantastic
the Existence of the article bothers me
lol
well, yeah, on that we all agree
but again, hasLayout is easy to fix, so I have started to accept it
i’m still holding out, stubbornly, like i did with records and casettes
holding out? meaning ignore IE?
more or less… but then again, most of my projects involve well trained design professionals, and I can leave it in their laps
heh
but for my own personal projects, I’ll jsut accept the imperfection and stick to the way it ’should’ work
well trained web design professionals – damn, you sound like a lucky fella
indeed.. i’ve struck gold with a few collegues
care to rent them out?
I could use some qualified people at the office
ha, wish i could… they’re not mine
nor are they cheap (glad the clients have to pay, and not me)
I’m just a junior, obviously – but I still wouldn’t mind doing a s/old/new on them
there used to be a lot of talented guys who hung around at newstoday.com i haven’t been around there in at least a year though
that’s where i found a lot of the guys and gals i work with
I see
hi ccsers
how do I achieve padding functionality without div layer being enlarged for the added paddings?
add a wrapping container *shudder*
I have a wrapper set to 980
in it is header at 980
8px; to the header
header becomes 996
980px;
oops
no header is width:100%;
div style=”margin: 8px”
so the header container is empty
ok
well, not really empty, but you get my drift
hmmm, I think I found a better one
I removed width spec on header
O_o
what would that do
now I can have header { padding: 8px; } and it fills the width of the wrapper
now it is 980 WITH the 8px padding
that’s what I meant before
ohhh
I didn’t connect it
I didn’t know – well, consider – your entire body was 980px
what I can’t rationalize is why padding expands the calculated size of the box?
it seems to me like the more logical solution would be for the padding to just contract the content box
without touching the size of the element
that’s the box model for you
it does make sense most of the time
yeah I know
I’m trying to understand it on a deeper level
the box model?
yeah
]boxmodel @ dokma
boxmodel: http://www.w3.org/TR/REC-CSS2/box.html | http://www.positioniseverything.net/articles/box-model.html | http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
Firebug has a nice illustration btw
thank you Ace!
yw
is it possible to put content vertically top-aligned into a “rounded corners box”?
if i change an elment from display:inline to display:block, it seems to grow about 2 px even though paddings and margins are set to 0 — any idea why?
line height
no wait
that doesn’t make sense
I’ve got another q: I’ve got a div column of width: 150px; . Is there a way to say: ‘Make every first child div in that column have 8px padding’ ?
nope
firstChild is not universally supported
is there some generic workaround?
so that I am sure that every div that cms places in the column looks proper?
can’t you assign a class
to the wrapping 150px column?
yes I can
it has an id
no to the element
the first element
Ace_NoOne
I can’t predict everything that will land in that column
that’s why I need a generic solution
I guess I should put another div within the wrapper
and put a 8px padding on it
]]]first-child
:first-child http://www.webdevout.net/browser-support-css#support-css2pseudoclasses-firstchild (IE 6: N) (IE 7: I)(FF 1.5: I)(FF 2: I)(Opera 8.5: I)(Opera 9: I)(Konqueror 3.5: I)(Safari 2: I)
wait
how does that make sense
I wrongly said first child
when I meant all first level children
oooh
of course
div
is not universally supported
I only stem for IE6/7 and FF
#foo div { padding: 8px; } #foo div div { padding: 0; }
I don’t care about the rest
IE6 doesn’t support
so use the above
I see
so #foo div means ‘all first level divs in #foo wrapper?’
no
it means all divs in #foo
argh…
and the next one means all divs in #foo div
argh
I’ll go for an additional wrapper
why
what is wrong with reseting it in inner DIVs
not clean enough
I can’t predict all iner divs
it’s very dynamic content
yeah, but adding another wrapper will be clear O_o
*clean
maybe just setting width to width minus padding is enough
I shouldn’t complicate things
what’s the best host css editor for windows?
define “best”; define “editor”
i’m looking for one that makes it easier to organise my code…
at the moment my css file is almost 1000 lines long
and my editor does nothing except colouring the code
I see
well, if you find out, let me know
I’m using SciTE O
grrr, html/css makes me crazy
i will be so glad when i am finished with the UI stuff
how’d you tackle this: 4 content columns second one needs to be flexible width so as to adjust to the browser window?
any intelligent approach?
Hello. Is there a way to force links in table cells to wrap instead of push the table outside of its container?
inline does not work.
and html hosting height is 100%, BODY min-height is 100%, DIV height is 100%, but that DIV shows like it`s not 100% height. Possible reasons?
padding, margins?
* { padding: 0; margin: 0; }
beats me
can you tell me how to vertically center a div within another?
50% – div`s height
ok, i’ll give it a shot
can anyone explain the colors that are used in firebug to highlight areas?
(if they have a meaning)
i think they’re just the most different they can be
from oneanother, i mean
ok thanks
f00li5h, first div must have position:relative and second DIV must have position:absolute and top: 50% and margin-top: -half_of_div`s_height
if second div`s height is 500px then it must have margin-top: -250px;
hrm, i knida don’t know the divs height
Is there a way to force links to wrap in table cells?
i thought they did that anyway
f00li5h, then you can try to play with javascript .offsetHeight
i’ll just stick more text into the boxes so the gaps aren’t as noticible
white-space: wrap; /* perhaps */
f00li5h, javascript .offsetHeight should return actual height of block
I tried that
it’s actually white-space: normal/nowrap/pre
i figured the opposite of no wrap would be wrap
outside of creating forms?
e.g. i am creating a key for a map
div class=”icon”img src=”/images/icons/hotel.gif” width=”38″ height=”38″ alt=”Hotel” /Hotel/div
hotel isn’t really a paragraph, it’s a label for the key icon…
or ?
see http://aycu35.webshots.com/image/25994/2001656529811622871_rs.jpg
and what’s wrong with that?
I have a nav (UL) with several LI’s floating left, and two LI’s should be aligned right, however, one LI should fill the gap between these two groups of LI’s. How do I do that?
http://rafb.net/p/DYQ8S614.html
the brackets represent the LIs
the | represents the parent div
For some weird reason when i am adding vertical-align:middle to #ul a its going even furthur down then with vertical-align:bottom. any ideas whats wrong ?
I mean this should be possible
Ace_NoOne, what do you think? You know how to do that!
ZombieLoffe, or you
hmm
I got disconnected. I’m SpookyET
Did anyone answer my question?
Oh, is it siesta now?
I’m having trouble with links in tables. They don’t wrap. http://aycu17.webshots.com/image/23496/2000483565460773973_rs.jpg
the’re not wrapping because they have no whitespace in them
is there any way to wrap even without whitespace?
where would it wrap them?
any characte
character*
“just make it up”?
i presume you’ve already tried a fixed width column
yeah
it goes outside of the cell
hidden hides it, but IE still shows a huge white space. FF does not.
IE hides the overflow but does not collapse the space, which is weird.
http://aycu14.webshots.com/image/25293/2003882851891238953_rs.jpg
That’s what i get in IE
is there any applcation/tool like firefox’s web developer extension, i want to see my object’s outer lines in internet explorer..
IE developer hosting Toolbar
hmm
fixed it in IE using word-wrap: break-word (not W3C)
oh, good old ie
stash that bad boy away in a broken_directives.css
what?
I was AFK
yeah. I use conditional comments with ie css
that’s the ticket
you know about MODI?
no?
what is that?
http://slayeroffice.com/tools/modi/v2.0/modi_help.html
woaw. great..
thanks buddy
sure
man i missed good music
any good books or tutorials on using CSS for layouts? i tried using css for layouts over a year ago, and I gave up mostly because of browser compatability issues…yet i know most people get around this…any good info out there?
(how) can i select an element immediately following a given element?
B inside A or B after A?
both not easily possible
ok thanks
maybe i can use firstchild
]]]first-child
:first-child http://www.webdevout.net/browser-support-css#support-css2pseudoclasses-firstchild (IE 6: N) (IE 7: I)(FF 1.5: I)(FF 2: I)(Opera 8.5: I)(Opera 9: I)(Konqueror 3.5: I)(Safari 2: I)
“A+ B” does not work?
^^ no you can’t
why not?
ahh IE6
sh!t
]css selector support
http://westciv.com/style_master/academy/browser_support/selectors.html
if nothing else is possible i could resort to using JS for IE :-/
does A + B not work either?
look at Adjacent selectors in the above link
no support grmbl
is anyone logging this channel?
I assume yes
hehe, okay, let’s rephrase:
who here could provide me with logs of this channel (until as long ago as possible)
how would i prevent some container divs from each rentering on a new line
?
huh?
they all have a small width and i’d like them side by side
inline;
i tried that and it didn’t work
display: inline?
disply:inline for the class
first check with firebug wether the property is really set
class=”icon”
yes, it’s set
div class=”icon”img src=”/images/icons/hotel.gif” alt=”Hotel” /Hotel/div
the creates a new line too
need ot set that to inline too, maybe?
http://pastebin.ca/662336
i’d like the each to center under the icon and all icon divs to render side by side
sorry… each p to center…
try setting the p to inline too
p is a block element
ok, now they are all aligned… but there is no break between the icon and p
i’d like the p under the img
each p…
but even if p is a block element… wouldn’t that just fill the container div by default?
e.g. the width of div.icon
is there a way of forcing a block to render inline?
because setting the div to inline screws up the img and p positioning inside..
e.g. text-align:center; stops working
what does # means when put before a style tag name?
#menu {}
hey guys im trying to figure out how to get a list to display inline, but get a list inside of each list item to display as a regular list
PHPadam, it’s an ID selector
]css selectors @ PHPadam
css selectors: http://w3.org/TR/CSS21/selector.html
im new to CSS, but doesnt the # mean id=
yes
Fastly, because inline elements cannot contain block elements. you want float
so you want a list within a list?
take_it_t, you want the top-level list items to be floated (not display inline)
preaction, float:left works, but the container div then doesn’t surround the divs
]clear @ Fastly
Contain floats: http://www.ejeliot.com/blog/59 , www.positioniseverything.net/easyclearing.html
plus i’d like the icon divs to be centered…
within the container div
not floated left or right
]enter @ Fastly
Please try to keep your questions/responses on one line – don’t use the “Enter” key as punctuation!
yes, i want a list within a list, but i want to have the parent list displayed in a row (Side by side) as opposed to the contained list which i want to function like a normal list
inline-block would fix your problem, but it’s not yet supported. for now: putting a margin on both sides of the container will work
ahh… thanks. i will try preaction.
with an image to the left, and text to the right of it, but the text keeps ending up underneath, how can I get it up without using position?
can anchors be disabled ?
?
emphasis
zophy, not from within CSS, no
hi
skull–, float the image but don’t float the text and make sure the width of the image host + width of the text is not greater than 100%
?
thx
i speak very little english. I tray expalin my problem.
PHPadam, depends on your doctype
try*
preaction, what do you mean ?
if you use xhtml then you have to
PHPadam, these are basic, beginner questions. you should read a tutorial instead of asking questions here
]schools @ PHPadam
Explore the intricacies of HTML and CSS here: www.htmlhelp.com/ , http://css-discuss.incutio.com/ , www.brainjar.com/ , www.htmldog.com/ , http://css.maxdesign.com.au/
I have a div with id “container”. It have a:hover with background and color. I don’t want aplly this background at images. I put other css: #container img a:hover { background: none } but not quit background. Some idea?
SurveR, images cannot contain anchors, you want #container a:hover { background: none; }
humm
Any myspace gurus here? I need help with some css related to myspace..
not the image itself, i only get tripped up by the small stuff
i have a #container a:hover { background: #FD9B00; color: #FFF }. preaction i want this for text, but no for images.
now i just need to get the whole thing to look the same in IE6 as FF(i hate having to do that)
SurveR, #container a:hover img { … } then
probe it… but i think to probe it before an … wait
umm, i now have put this too
#contenedor a:hover img { background: none;}
ya
(id name is #contenedor)
but nothing
SurveR, URL?
when i have a image link, put background orange too.
oh! sorry, its local
is the element above the image orange too?
or no
wait
look
Any myspace gurus here? I need help with some css related to myspace..
http://surver.homelinux.net/pdf/test/src/index.php
it’s not perfect
Anyone here listen to nickleback?
ah i see
out of place I know, but im looking for a song title. Heard it on the radio
look “¡Registrese Gratis!”
background
is it possible to have transparent PNGs work in Internet Explorer?
IE sucks donkeys
]pngfix
Darn it
skull–: that’s why i’m having trouble with it
;pngfix
http://www.tatanka.com.br/ies4linux/forum/viewtopic.php?p=1111
i’ve always had trouble with it
I hate IE.
!important
;google png fix
http://homepage.ntlworld.com/bobosola/
Try that
some idea for quit background a:hover in images?
your #contenedor a:hover definition is on a lower line than the fix for the image hosting i think
which would give it priority
well, anyways, lunch time! cya
sorry, i dont understand
i might be wrong
but if the css to fix the background on images in a link while hovering is higher up in the css file than the definition for the hover of a then it won’t have any effect
possibly
change order?
yeah
a:hover img before a:hover
no
after
wait
is it already after?
i don’t see it at all
yes
sorry yawg,
i see #contenedor a:hover
hi
i have 2 version, i have 3 pcs, you see “productivy”, i work with svn and not apply changes
wait
hi people
lo
look now
hmm
zinglingling
hello
HI
hey, does ie6 not suppoer input[type="foo" ] ?
now you can see a:hover img after a:hover
hi retnuh
]]]e[attr]
Event attributes http://www.webdevout.net/browser-support-html#support-html401-attrsevent (IE 6: Y) (IE 7: Y) (FF 1.5: Y) (FF 2: Y) (Opera 8.5: Y) (Opera 9: Y) (Konqueror 3.5: ?) (Safari 2: ?))
Any myspace gurus here? I need help with some css related to myspace..
yeah
forever
]]]e[attr=""]
Event attributes http://www.webdevout.net/browser-support-html#support-html401-attrsevent (IE 6: Y) (IE 7: Y) (FF 1.5: Y) (FF 2: Y) (Opera 8.5: Y) (Opera 9: Y) (Konqueror 3.5: ?) (Safari 2: ?))
damnit
]]]css2 selectors
CSS 2.1 Basic selectors http://www.webdevout.net/browser-support-css#support-css2selectors (IE 6:22.727%) (IE 7:59.091%) (FF 1.5:86.364%) (FF 2:86.364%) (Opera 8.5:77.273%) (Opera 9:77.273%) (Konqueror 3.5:77.273%)
(Safari 2: Y))
yeah
whats _width for? FF errors on it
errorsssss
yeah, what _ZofBot3 said
retnuh1974
yeah?
hello
hi
don’t worry, i must go out. I need go to a library
what up?
do you speak spanish retnuh1974
yeah i don’t think there is a simple way to fix that SurveR
no sorry, I flunked that many many years ago in school
lol
why you ask?
i have a alternative to do
create a css class image, with cursor same that links, and a onclick location.href….
yeah there is a way to fix
just not something you can do in css strictly
do u understand me?
yes?
i think you’ll need to add a class
i probe add a class in image and a href tag
yeah
and equal…
same problem, not fix
no problem retnuh1974
k
thx, i must go out
when fix, i see u.
mmm…. its very bad my css yawg ?
how can i center my container div?
can i make the element have no effect ?
?
zophy, no. thats markup not CSS
zophy, that’s also not an element, that’s a character entity
]center @ e319
CSS Horizontal Centering: http://www.zoffix.com/css/center.pl , http://dorward.me.uk/www/centre/
there a way to change :hover properties using javascript?
can i make the character entity have no effect ?
Any myspace gurus here? I need help with some css related to myspace..
:
myspace guru, very ironic
well you get what I mean!
anyone can help? www.myspace.com/jmusicgr this is the profile and my problem is that I cant fix comments to show properly
does it validate?
how do I prevent my float:left items from going down a line when the window is resized?
what is this for, why can not I put only href=”style.css”
why i must use stylesheet and type
Because the “link” element can be used for more things than just stylesheets
The “rel” attribute lets the browser know that you’re using it for a stylesheet, and the “type” attribute lets the browser know that you’re using CSS instead of some other language
CSS is the only stylesheet language supported by today’s major browsers, but other stylesheet languages may exist in the future
how can i let a background image overflow into an adjactent div?
ahhh nvm
forgot to specify height
soon there will be TSS, trickling style sheets
hello guys
hi again
‘lo
trickling :p
paotzu++
i have a background-image that i want to overflow the element it is contained in vertically in both directions — is that possible?
if i specify a negative vertical postion, it is clipped on the upper side
I’m doing the faux columns, but the wrapper div outside the columns where I put the repeated pic seemingly becomes 0px high
!
at least no pic is showing
even tried just setting bgcolor, nothing
pulling my hair here
gahh
]secret @ Coppershade-org^
Coppershade-org^: 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.
;google quirksmode clearing floats @ Coppershade-org^
Coppershade-org^: http://www.quirksmode.org/css/clearing.html
Hi. I have a little problem with a float in IE. It’s not clearing even though it has style=”clear: left” on the element.
what’s not clearing what?
http://www.thepirateship.com/gallery/album/2007+GA+Renaissance+Festival
works in all but IE
the images don’t list properly
yeah, sorry. Thanks Flannel, reisio
solved it anyway
gj
is there some Hosting with php support script based editor that I can use to have the html and css files open, edit, save and refresh the target page?
Coppershade-org^: cpanle
I’m using Joomla’s editor and it has no ‘apply’ button – I have to go in and out of each file
cpanel
doesn’t it depend on the host if you get cpanel or not?
ANy ideas?
Is it an IE float bug
?
screenshot?
ok
http://aycu25.webshots.com/image/23144/2006365561548137629_rs.jpg
left. It works in all but IE.
u used :firstchild ?
or just the class .clear-left {clear:left}
actually, i used inline style
generated by the template php code
li:firstchild{display:inline} ??
style=”clear: left;”
it’s only one list, not multiple lists
can’t use first child
ah
then use classes
makes no difference
It’s an IE issue.
whether it’s inline or in a class makes no difference
http://paste.css-standards.org/
I have a wierd problem: why does this look so awfull? http://paste.css-standards.org/23183/view
test in IE7 please
IE6 looks fine
looks like maybe you just need to set a uniform height on the li’s, instead of relying on them to be the same height of their own accord
i’m using IE7
i can’t because i don’t know much text they’ll have
i’m pasting in a min
hrmmm, is IE7 the problem for you, or 6, too?
done http://paste.css-standards.org/23184
7. i haven’t looked at 6 since i’m on vista.
i have to hunt down my older machine
oh my.. vista baaah
wow that’s a heavy load of request per page ..
i know
Drupal comes with a lot of baggage. It should combine all the modules css into one file on the fly.
style.css causes the prob?
or ie7.css
it works in all browsers but IE.
plone does this
it could be an IE float bug
hi
relative, and negative top value
in mozilla everything works fine, but in IE the height of the outer block equals the height of the inner block, thus it continues further down the page (since the inner block has negative top)
any ideas?
giving it a height does fix it, i just don’t how much text there will be
then just use overflow to hide overflowing text.
This selectbox look horrible in IE7. NO CSS, can somebody tell me why? http://paste.css-standards.org/23183/view
7 should be easy to fix
do like…
hrmm
hey Spookey
did you change the css?
now it looks fine in IE7
text-overflow:ellipse; does the trick, there was a JS fix to make it crossbrowser friendly, but don’t remember the url
yeah. i guestimated a height
not the best solution since i don’t know the size of the text
yes
text-overflow: ellipse?
yes
a … if the text overflows
unfortunately it isn’t supported by all browsers. but there was a JS fix somewhere
i think it’s ellipsis
text-overflow: ellipse;
it doesn’t work though
can somebody check the link I’ve posted? there is a wierd bug in IE7, although I don’t use css and no js
and it’s ellipsis according to a few links
oh true
http://www.css3.com/css-text-overflow/
ellipsis is a pipe dream
a dream that comes true thanks to some smart js coders
forms are the ugliest thing in the world when it comes to IE!
heh, ie
focus causes different line-heights that can’t be fixed, size: attribut on select, makes ugly pixeled borders and ghosty borders
any bitching in IE6?
my forms are horribly ugly and broken in IE http://paste.css-standards.org/23188
speaking of forms
look http://img401.imageshack.us/img401/6797/formiu7.jpg
this is the forms example I spoke about
I don’t see that at all
Ah the bug wasn’t a bug, the visual appearance of forms depends on the Visual Style you are using!
but this only affects IE7, IE6 looked ok
many xp themes are broken
they don’t work well with all apps
they use stuff that Luna does not have
What do you see if you save http://paste.css-standards.org/23188 on disk
broken form sin tables all over the place?
How does the site look in IE6?
broken? I haven’t looked at it in IE6 once.
yes broken
it seems as if it doesn’t load any css
i have a background-image that i want to overflow the element it is contained in vertically in both directions — is that possible?
jeez
semicolon expected
it says
dude it’s normal, you have used relative paths
that doesn’t make any sense
no, http://www.thepirateship.com
how does it look in IE6
broken
similar to the ie7 problem
and left and right website looks white, ie6 doesn’t support gradient transperency in pngs, only normal transparency in 8-bit pngs
screenshot?
i filled in the paths http://paste.css-standards.org/23190
yeah, i haven’t fixed the png issue yet
i have to fix the forms in IE7
Is it possible to add some HTML content in CSS, I was thinking with the pseudo class :after but then I could only had my string as content and not HTML syntax
the drop downs look bad, the rest is ok
alexIdoia yes it is possible
but you need to use content:
damn .. i feel like shit
i wond drink anymore
there has to be a way to install ie6 on vista without a virtual machine
.. rhis week
*this
SpookyET, cant you use standalone
that’s the idea
but the popular standalone installer doesn’t work on vista
well that is what I did, I used content: “”, ah maybe I should not use the “
http://tredosoft.com/Multiple_IE
oh mefiesto too much party
no it does not work for me
div:after {content: “hr”}
a[accesskey]:after, button[accesskey]:after, input[accesskey]:after, label[accesskey]:after,legend[accesskey]:after, textarea[accesskey]:after {
content: “(” attr(accesskey) “)”; }
in the content
?
I have a question about the use of heading tags, is it proper to use them for menu headings? An example would be the menu heading on the left of the this image http://img187.imageshack.us/my.php?image=maximemregsizeth1.jpg
Guess its more a #web question
anyone have a good tutorial on creating a div with rounded corners
using images?
yes
If you dont, its a lot of extra markup
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius
?
dustin diaz’s rounded IS the best method short of future browser support
or that
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri
do a lot of browsers even support that?
no
hmmm
Thats what i thought
well that is the doc is not it ?
what if i just want to style the div with my own images
so far that is CSS3, you can only use background-image
in CSS2
can i add an image after (to the right) of an element using css?
but i need the div to be able to expand
that won’t matter
so a simple background image won’t really work
what do you want exactly ? to put an publish your images online in the background ?
or having your block borders as images ?
no i want to have a div that has my own border
like a content box
http://www.dustindiaz.com/enough-with-corners/
then it is possible only in css3 which few browser will support
h3:after{content:url(../images/test.gif);}
?
nah i’ve def seen it before, its been around for years
look at facebook
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/ the only one you need
the huge main column
not in css
extends, its probably a 1px black line on both sides
yes that is background-image
alexIdoia it is not possible via css as I know
hmm?
thing?
yes
benlong ^^yes schill did a good job, but he used px, so it could mess your styles, I’m making his work a bit more dynamic
when you have a container with em, and a dialog with px… guest what happens if you text-zoom
actually i depends on browser
in operas happens .. emm .. zooming
but in oter browsers it gets more or less ugly
left applied and the text wraps properly around it in everybrowser but obviously IE, is there a little fix for it?
even in opera the px grows faster than the em
opera doesn’t zoom like IE7 Opera increasizes the sizes relatively
100% working in Safari? I want a div to span from top to bottom on the left side… it’s working in FF and IE, but not Safari
any ideas?
[hasLayout
]hasLayout
http://haslayout.net/haslayout , http://www.satzansatz.de/cssd/onhavinglayout.html , http://fumle.dk/public/webdev/IEhaslayout/
http://i15.tinypic.com/4l4mfrd.jpg
Why isn’t it wrapping?
your img should be in a p too
hey friends
probably in the same p
Yeah that works, but I have more than 1 pargraph that needs to wrap around the image.
hey bigtime
hey
oh listen to this guys! http://video.google.com/videoplay?docid=5159636580663884360&total=100&start=0&num=10&so=0&type=caps&plindex=3
information about web and security
from a hacker
need help, trying to get my #footer to stick to bottom of #main
The easiest way is to put your footer after your #container and then position: relative; height: x; margin-top: -x;
page elements = html, body #main, #nav, #header, #footer
footer inside container
www.arcsupport.ca/blog — look how I did mine, save yourself a headache and do it that way.
I love you microsoft, 2GiB of virtualization crap to run IE6 in vista.
Hope that helps
hahaha SpookyET
that’s why I stay at ubuntu,xp and completely change to nexenta when it ships out
cheers for that.. however is there anyway i could have the #footer inside #main
]footer @ bigtime
footer: http://css-discuss.incutio.com/?page=FooterInfo , http://www.themaninblue.com/experiment/footerStickAlt/ , http://reisio.com/examples/headerfooter/
http://www.foundstone.com/us/resources-free-tools.asp
http://i15.tinypic.com/4l4mfrd.jpg _…. Dont mean to spam.
thanks all
specify widths.
They are specified.
is the div around the p floated?
no.
then add margin-left greater than the width of the div with the picture in it
and make sure it fits in the entire container containing both
otherwise it will wrap like that
fuckin eh the image they have on microsoft.com has expired on august 17
they could have said that on the site
in big bold letters
image of what?
XP SP2
they have images of that?
I need it to appear like in the right, simply adding a margin will remove its ability to wrap around the image. http://i13.tinypic.com/4yiv5m8.jpg
once more…. does anyone know why “overflow-x:hidden” doesn’t hide the horizontal scrollbar in iE6?
er
I mean,
it hides the vertical scrollbar
and the horizontal scrollbar
you want it to hide only the horizontal?
yes.
overflow-y: auto; overflow-x: hidden; ?
that doesn’t seem to work
/topic
I’m not going to be able to validate my page..
http://tredosoft.com/Multiple_IE
I can show you a link, though
using Vista?
yes
not?
it actually says it doesn’t work with Vista yet
I would still try it under a sandbox
Pay attention. I said that an hour ago.
assuming I can open my server
Virtual PC blows.
I’m going to try Parallels.
Spookey I know that, but I thought it might work, even if it says it may not work
quemu is very quick
you can try winbuilder if you want
here:
http://www.flyingsoft.phatcode.net/flowers/index.htm
$
text/html)
this is just so extremely frustrating
i’ve fixed this issue many times but then it kept breaking as I changed other things
for instance, I needed the background to be an image (so it could stretch) but I couldn’t do that because of the IE “imagetoolbar”
fyi unrelated, but you’re using an iso-8859-1 copyright symbol, but sending the doc as utf-8
float the first one left, and the other one right… it’ll do that by default
oh there’s some code you can use to disable the image toolbar
ssomeone just told me how to get rid of it, but now it seems a bit laggy with an img tag
well that really should be a background image
all I want is a background that stretches, fades, and has no sticky button junk.. is that so much to ask?
could go either way in this case, actaully
But I want it to stretch to accompany different screen sizes
ah
well, like I said, you can use a little bit of code to disable IE’s image toolbar
right…. I took it out
not that you should, but you can
but it’s still laggy
…wha?
what is IE’s image toolbar?
what has IE done this time?
and i was told by some that I can’t make the background stretch
it’s old, it’s a little toolbar with icons to save/copy/etc. that appears at top left when you hover over an image
an actual css background, no, but you can stretch an img and put stuff over it
but not on background images, right?
right, img’s
but then it feels laggy, reisio
then don’t use it
anyway, I think this is what is causing the latest horizontal scrollbar to appear
did you set body { margin: 0; padding: 0; } ?
i didn’t do any padding
i just did margin:0px;
0 then
]zip @ agamemnus
Start every stylesheet with this: * { margin: 0; padding: 0; }. You’ll save yourself the confusion over quite a few strange element and browser spacing differences later on. * == http://www.w3.org/TR/CSS21/selector.html#universal-selector
it’s still there
ok, let me try that
mr bot
older versions of IE pad html too
no
it doesn’t help
so *, html { padding: 0; margin: 0; } is your best bet
but that’s not going to fix your background problem
background property in CSS doesn’t take width/height dimensions… so stretching it is impossible
* sucks
an alternative is
yes?
find the point at which it stretches
if that is the type of background image it is
then set that as the page background and do repeat-x or repeat-y
no, it’s a painting
there’s no way to stretch out a background image based off resolution because the browser doesn’t know the resolution
with javascript it does, though..
and that’s how i have stretched my image
there’s no clean way to do it
you could always use a table
table background?
yes…
but would it stretch?
but why would i be promoting table layouts here :-p
yes
:-O
here is a little example I’ve looked quite a long time ago that has an image that stretch to the size of the window: http://joc.dyndns.org/example/overlap/Overlap.html
the browser knows the resolution
yes i know i already have it do that
to the size of the screen, though.
if you knew how to do old table layouts, you should know how they work
ok so what happened when I made “overflow-x:hidden; overflow-y:auto”….
_ZofBot3 said use * { margin: 0; padding: 0; } but it’s wrong! u should not use a universal spacing reset! better do it like yahoo reset, otherwise input button styles will be lost and that’s unrecoverable
the only problem with the height attribute in a table layout is that you can’t set it to 100% reliably
…is that both scrollbars were visible
but before, with just “overflow-x:hidden”, none were visible
agamemnus ist this what you need?? http://www.cssplay.co.uk/layouts/background
100% background image
that stretches the image
sort of,
agamemnus meta http-equiv=”imagetoolbar” content=”no” /
I need it to stretch to the screen size (not window size), but it seems to be working
this will hid the imagetoolbar
yeah i know, but then the image is choppy when I scroll up or down
Hi. I’m having some trouble with the line 25: @page {size:landscape}, according to http://jigsaw.w3.org/css-validator/validator?uri=http://opcug.ca/public/history/calendar.htm. Yet when I
click on the link “size” to get more info, it seems that it’s valid, so what’s the problem???
huh? never had that bug
it’s the same here in http://www.cssplay.co.uk/layouts/background
it’s choppy
only in IE6
ah choppy, now I understand
didn’t know that word
lol
hmm,
with table, I don’t even see the image..
agamemnus if I understand you correctly, then the solutions is to use an image that is in example 1600×1200px so it will scale down, that won’t make the image “choppy”, scaling images up with browser image scaling makes the image “choppy”.
won’t make it _as_ choppy :p
xsss4hell, what I mean is that there is image shearing when scrolling vertically
in IE6 only
you could use JS to determine the approximate resolution they’re using, and then pick a size of the image to use as a background
Maybe you could use SVG images, those are vector images, those scale without problem.
1) no, they’re paintings
2) IE doesn’t support SVG
IE can support SVG with a plugin, I know it’s not ideal
reisio, it looks like i’ll have to go that way
what’s a few extra megabytes, I guess…
it’s ridiculously non-ideal :p
users with a slow connection won’t like you!
megabytes?
yeah
picking a size out of a presized set of images will actually save people filesize
in my file server
you won’t be giving too large images to anyone
ah
i’m going to change it now….
IE can support svg with a javascript hack, canvas for ie
sf.net
hmm
no more hacks plz
aaaah now I understand!
i’m bleeding already
Dude why not use an imagemap instead of javascript?
canvas is not svg…
that doesn’t make any sense :p
I think you missed some of the convo
Any freelance webdevs around here?
that depends on the excellence of your boobies
….
but I’m still stuck with the scrolling
ignorantcow does good work / ignorantcow.net
he comes online later
@page {size:landscape} at http://opcug.ca/public/history/calendar.htm.?
http://opcug.ca/public/history/calendar.htm
hahaha reiso
http://www.flyingsoft.phatcode.net/flowers/index.htm
hi all
i have a question about span element, how can hide cursor on span element if clicked
I’d like to ask about pricing for a website that contains mainly image galleries, that’s css-based and working fine in msie6+7, firefox2+3, opera, safari and text browsers.
agamemnus maybe you try flash
cursor on span element?
no thanks
yes
not sure how someone could code image galleries with text based browsers..
OK forget that part.
but I can tell you that with barely any testing experience I just got $20 an hour (for a medium sized nonprofit company) testing a website for bugs
It’s just that the website’s extremely semantic
if you click any span or inline element cursor blink on this element
And how much hours did you work?
it’ll be 21 total once i’m done
that’s the contract at least
and i dont want this
but I try to work as they ask
probably a bit less than what they say is needed
a program that I like a lot that can easily create a web page from a bunch of images is jalbum http://jalbum.net/
but building a website and making sure it’s fine on all major browsers costs more than just testing.
that does looks nice
i know, i was just trying to give you a minimum price for someone working in New England
selam do you have link for an example of that?
OK ^^
http://www.blume2000.de effects don’t sell more flowers, they just make more work
one second
are you referring to my site?
canvas is the place where svg get’s rendered
yep
ah well it’s not actually flowers, it’s cards
but I don’t think having the scrollbar actually work is a very fancy effect..
bbut I don’t think having the scrollbar actually work is a very fancy effect../b
http://manita.homelinux.org/
TEEESSSSSSTTT link
checking…
click on this element
maybe it’s an incorrect syntax?
selam Opps, page not found
style=”overflow-x: hidden”…
Please note that Adobe has announced that it will discontinue support for Adobe SVG Viewer on January 1, 2008.
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
it’s the doctype
!!!!!!!!!
ok link on top page right side
ooh, I’m using Adobe pluging
HTML 4 DOESN’T HAVE OVERFLOW-X?!?
Joc_ there are opensource plugins for svg I hope, otherwise we need a NEW standard
maybe my header is wrong?
it’s:
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“
You see?
http://www.css4you.de/overflow-x.html
I remember that there was another place that offered an SVG pluging for IE , but I can’t remember where
look at the browser support chart
Joc_ I don’t use IE
xsss4hell, it does work without the doctype tag
~^* Opera *^~
so
selam, do you mean the grey box that appear when the cursor is over TEEESSSSSSTTT? I’m still not sure what’s the problem.
There are still time I use IE, I find it faster when viewer slashdot.
yes
if you click on this element, cursor coming up and blink this element text
agamemnus your code looks as if you’re experienced with css, but to be honest, you will have many probs to make this crossbrowser. and there are too many errors
selam, what browser are you using?
Firefox
and u?
?? dude, I’ve never seen something like that, there is no name attribute on body.
also FF. When I click on the link, the gradient changes from top to bottom, to the other way. I don’t see any text blinking.
ok I goto sleep gn8
no text blibk
blink, cursor blink, (mouse cursor )
selam, when I get over that link, my cursor changes from an arrow to an hand, I don’t see any blinking.
