If I have a left-floated div and another normal div after that can I make the normal div NOT climb to the same
floats just work like that
oahh cool
Thanks
I'm still having problems
I can't get them to line up… I was gaps between my div tags if that sounds right?
to they fit just between the images
Hum. What?
I'm doing padding, but I don't want the background to bleed
and setting the margin to sort things out does nothing
Okay, if I understand what you're trying to to right, here's what you do:
remove padding-left from #leftcolumn
okie dokey
add margin-left: 20px; and margin-right: 20px; to #leftcolumn and #rightcolumn respectively
0 180px; to #contentcolumn
Dunno if that's what you were aiming for.
Perfect!!! You are a God!!!
Thanks
no problem.
When you add padding to each side, you need to decrease margin for the same side
you'll get the hang of it
Cool, Thanks
Guys, I need a layout of 2 columns, left one fixed-width, right one liquid-width. But without margin-left for the right one. How do I do that?
]layout @ me
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/
2nd link is a good one
kay, reading that.
Why without margin-left?
I hate those negative margins… I don't know why they want to do that on the page though
because I need it to work even when the left column div is missing. In this case the right column needs to span the whole width.
I see.
good luck with that.
heh. I'm gonna need it, aren't I.
negative margins for layout are only really needed when you try to keep proper order in your markup, i.e. content before sidebar.
so it's just for the HTML side?
Why should the content be before the navigation? Makes no sense.
because users browsing without CSS are more interested in the content than in how to get away from it.
most of all blind users
If I browsed without CSS I wouldn't want to have to scroll through a page of content before getting to the navigation
Can someone please point out what I am doing wrong here? I want active and visited links of the notes class to be grey, but for them to highlight in red when hovered over. here is my code, which doesn't work for the hover: a, a:active, a:visited.notes { color: #333333; } a:hover.notes {
color:#FF0000; }
a.notes:hover
not a:hover.notes
but you would want to scroll through a page of navigation before getting to the content? And yes, counting the logo and all that jazz, it does take one page.
ZombieLoffe, of course. Silly me!
thanks ZombieLoffe
Want some bad news?? The layout you helped me with does not work in IE
logixoul; if I were looking for -another page- yes.
lol.
but most of the time you aren't, supposedly
btw: I said sidebar, not navigation.
sidebar as in "additional info for this page"
Yeah, I just assumed. Sidebars usually are.
ZombieLoffe, but why is it a, a:active, a:visited.notes { color: #333333; } ? here there are a:active, so why not a:hover
it's not, hal
You did it wrong there too
add display:inline; to the sidebars
makes it work in IE (yes, IE is shit)
so it should be a, a.notes:hover, a.notes:active { color: #333333; } ?
wait, what? are we still at my 2-column-layout problem? o_O
yup.
or a.notes, a.notes:hover, a.notes:active { color: #333333; } ?
Yes
ahh hmm
I get it
The "Double margin float bug" is a well-known one
will try, thanks
Do you have IE?
that colour.
Yes.
do you have any idea how to get IE to support it?
ZombieLoffe, I see. So there is no brief way of writing a.notes, a.notes:hover, a.notes:active { color: #333333; } ?
Nope.
ZombieLoffe, got it! Cool
Nope was for hal.
Like I said - add display: inline; for the sidebars
hyphenex, sorry for confusing your conversation!
oahh, I thought that was for hal
hmm, what browsers should #sidebar{display:inline} work in? Only IE?
haha, Cool
It shouldn't work at all
But you need it for IE
right. so. no idea for the rest of the browsers?
Thanks ZombieLoffe
That does display:inline mean?
what*?
What do you mean?
etc) instead of a block element (div, , table, etc)
inline breaks lines, block doesn't
Well, do you know how to make the layout I described for real browsers, or are we at the "good luck with that" stage?
oahhh
Cool
Thing is, it SHOULDN'T Work, because floated elements aren't affected by display, but it does in IE for some reason.
that was addressed at one of hyphenex's problems, not yours, sorreh
ooh
I see.
I dunno how to make a sidebar and content without margin
kay, no problem
can you use JavaScript and the DOM to edit the margin settings?
even though I know nothing on the subject
Probably, but I know as little as you
yes, you can of course
or… have separate classes for the pages you want without the sidebar?
I thought about that but won't be too easy with Joomla
ahhh
I'm an e107 fan myself
it's easy with e107
e107? the one with the spiffy logo?
that's about as much as I remember about it
well, I'm kind of a novice on CMS systems as well
but I like e107
and have not used much else
Blub… joomla. I've never used it myself, but it seems pretty crappy.
you are talking in css channel about cms which as default output has tagsoup with taste of bullshit
so what do you use? drupal?
.. from viewpoint of css/html
sure, that annoys the fuck out of me
I don't use CMSes
any recommendations then?
e107 from me
i have heard good things about modX
I saw that one yes
geocities?
modX… never heard of it
seemed immature but I'll give it a try
….some day
immature
lmao
well, uh, "young"?
:P
the main reason I went for joomla is that there's a HUGE community for support&extensions
if you thing that Joomla Services is great , but modX bullshit … change a hobby
because you seem quite clueless
eh, I didn't even try ModX… only got a superficial impression
meh
joomla for now
Relax, mefisto.
well, I'm off to bed
thanks once again for your help ZombieLoffe
http://demo.opensourcecms.com/modx/manager/
admin:demo
ok .. but who cares
this admin UI looks better than Joomla, yes.
Zoffix
Shit. Sorry, meant to me ZombieLoffe.
ZombieLoffe
haha
hello
have a background image (2 colors, 50% black and 50% on a image) and center a image in vertical and horitzontal for all resolutions… at the middle
I seem to have a situation where an attached css is overriding the embedded css. Could someone check the following code, to suggest where I am going wrong, please?
http://pastebin.ca/669134
prophet
does anyone have experience with the moz-corner-radius stuff? i would like to see if i can use it. is it production ready?
thanks logixoul, but i need a div in front of this background centered vertically and horiztonally (this -lly it's correctly?)
yes, it's correct
prophet
ok thanks
np
(working on IE6?
)
yes
ty
1. obviously it's supported only on gecko. 2. it's not antialiased. Otherwise, yes, "production ready".
http://www.youtube.com/watch?v=fscqJP2U0kg
anyone see any obvious mistakes I have made with my css?
try to validate
prophet, the local page validates fine
know where i can get information on that?
hmm I don't see any embedded css in there
]google moz-border-radius @ DawnLight
http://www.google.com/search?q=moz-border-radius
thanks
np
If I have a left-floated div and another, normal, div after that, can I make the normal div NOT climb to the same row as the floated one, WITHOUT setting {clear} on the normal div?
is what i was searching, thanks another time
np
mmm i was trying tonight to doit on my ugly website and i only found clear:both;
I see.
but i'm not an expert
logixoul, ok, I take your point. Here's the full code: http://pastebin.ca/669148
I don't understand how the common.css is overriding the embedded hover and active etc
well, sanity check: you aren't doing !important on the external stylesheet, right?
other than that, no idea.
logixoul, ok I will check
brb
logixoul, no I am definitely not using an !important directive
can i make a fieldset with an inner border that looks the same in all browsers/
then your best bet is to leave the mistery alone and set !important in the embedded stylesheet, I suppose.
inset border
logixoul, but the way I have structured the html is correct isn't it, and the CSS should work?
yes.
also Firebug may provide insight into the problem.
logixoul, hmmm, thank you for checking it for me
np
are you still on ZombieLoffe?
i want black on the inside
and the outside a little lighter grey
maybe someone else can help me then. in Firefox, with the middle bar item. The side images are not sitting on the very left and right causing the background to bleed over http://hyphenex.ath.cx/~scott/Surf/e107_themes/Surf3/experiment.html
If I have a left-floated div and another, normal, div after that, can I make the normal div NOT climb to the same row as the floated one, WITHOUT setting {clear} on the normal div?
bah, I hate this stuff
why the f..k did they have to make inline different from inline-block
hehe, don't look at me
I don't know the difference
the difference is that you have more control over inline-block
which doesn't make an ounce of sense
why not just make inline resizable, positionable and all that jazz
if only firefox supported inline-block, it would be bearable
go inside or outside an archor tag? It doesn't matter does it, as long as the open/close are nested properly?
inside
doesn't matter I think
but inside makes more sense, yeah
ok, I will do that from now on - the result seems to be the same though
so span is a inline div more or less eh
yes
and, it doesn't have any meaning - as opposed to div, which means "more or less stand-alone part of the page"
e.g. it's wrong to make your footer a div
er…
e.g. it's wrong to make your footer a span
or to make a simply red word a div
yeah that last statement raised my eyebrow
^^
ok gotcha
Could you have a quick look at something for me?
no
hehe, okie dokey
night
Defiantly enough for one night
Have a good one
How do I make the two occupy separate lines? http://web479.sv16.pixelx.de/problem.html
tag red?
Don't float them?
I need to.
They occupy seperate lines by default
updated the file to better illustrate the problem
I need to float them to put the two on one line. And I can't inline them because I also need to set width to them.
looks like I'm stuck with absolute positioning :/
div:after { content: "."; display: block; clear: both; font-size: 0; height: 0; visibility: hidden; }
add that to that page
that's very nice, but I need to support IE
there is a problem in IE?
it doesn't support :after
but is there a problem in IE
hmm. wait, I'll check.
div { overflow: hidden; }
cool!
overflow:hidden did the job
ah, but not in IE
it works in ie
IE6, right?
all displays on the same line here.
]clearfix
]clear
http://www.ejeliot.com/blog/59 , www.positioniseverything.net/easyclearing.html
there
by doing .notes:hover a { color:#FF0000; } at least I get some effect, however, the whole div block does red rather than just the links. Do you know what this is?
well, you've got the wrong selector
..notes a:hover
oh wait
nevermind
no, I can't help
ok, works everywhere now. Thanks a million
I just had to give it layout for ie.
logixoul, I think you were right. That seems to work very well
um, it only makes links red when you hover them
I thought you wanted ALL links to become red when you hover the div
but okay
glad I could help
logixoul, well, that is what I had with the code before - ALL links would go red when hovering over the div that contained them
logixoul, but you have given me what I wanted - great thanks!
np
you should dust off the selector syntax book
logixoul, yes, I am picking it up!
the book that is!
how do I negate a font style that is set at italic?
as in make it normal?
non-italic
font-style: none or font-style: normal I guess
or font-style: regular
but what if I wanted to keep the bold that is set on it?
it's unrelated
it's set by font-weight
sorry, I mean oblique
hmm
you actually use oblique?
I thought no fonts supported that
what does it look like?
well, it's an example.
it looks like bold!
actually it is bold and italic
so that defeats my question, I think
heh heh
indeed
but you know what I mean, is there a way to reverse a property that can have an array of properties assigned to it?
I mean reverse a value of a property without reversing the whole array
any recommendations for a great looking, easy to implement horizontal css menu?
http://devthought.com/cssjavascript-true-power-fancy-menu/
for difficult enough values of "easy to implement"
I mean it's easy but there's a lot of crap to strip off to get it to be nice.
bah. I got so involved in this layout thing that I ate all the chocolate cookies I had decided to leave alone. No six pack for me :-S
logixoul, LOL!!!
how can i tell a div to expand to fit it's contents'? i'm talking about div#header in http://awareness.org.il
looks fine to me
which is the problematic div?
ah
nevermind, sorry
i would like the #main_menu to be below the #header
God, I hate it when there're like 40 style sheets to one page
i gave #header a some padding and a border so its overflowing the parent div
any other suggestions for horizonal menus with a cool drop down feature?
no. I hate drop downs
so you want the menu items (light green) to be completely outside the header (blue bordered), but just below it?
exactly
im trying to redesign my web app.. i have 2 tiers of menu options.. what would you recommend for a menu?
"tiers"? what's that? 2 levels?
ya
i am thinking that if the div would expand to fit it's contents, then i would get what i want
i suck at layout stuff, my strength is in the back end coding
but layout is extremely important!
indeed
I would probably recommend to restructure everything so there's a simple flat menu and a separate, clever, way to navigate the intricacies of the webapp.
other than that, I cannot say. I never did that kind of stuff.
Drop down menus aren't all bad.
;google suckerfish
No google bot? Hm.
think about it, massage the right side of your head, imagine how it should look like, draw it on paper…
http://www.htmldog.com/articles/suckerfish/dropdowns/
ya ive been sketching out possible designs
has 29px padding. kill that, for starters.
or wait, maybe not.
it has 1em padding
right.
ok, I'm disoriented now. you might want to make a simple testcase.
ZombieLoffe
i have two divs. one has quicktime movie… the second i wnt to place above the movie. no matter what i do (they are both absolutely positioned) the one i want on top is below the movie …
any ideas on z-index?
]z-index
]css z-index
css z-index: http://w3.org/TR/CSS21/visuren.html#propdef-z-index
that does not help me.
]above flash @ e319
to make something above a flash object use wmode windowless or transparent. (wmode="transparent")
huh?
this works only in MS Windows, and I'm not sure if it only applies to flash
e319, you aren't one of those people who puts graphics on top of movies so you have to click them to see the movies are you? God I find it annoying when that happens!
no, just a next/prev button when you mouse over
e319, I stand corrected! You obviuosly care about your users
;-)
it will only appear when the invisible div over the left or right side of the quicktime movie is mousedover
any ideas?
e319, that will be a cool effect when you do it, but I can't help I am afraid
I don't know the answer
well shouldnt the quiicktime movie div be z-index: 1, and the div above is z-index: 2; ?
guys is there a internet page which gives every single attribute property in a table or list in a single page? For instance, if I wanted to find all the possile values for font-style etc
]schools
www.htmlhelp.com/ , http://css-discuss.incutio.com/ , www.brainjar.com/ , www.htmldog.com/ , http://css.maxdesign.com.au/
web developer extension for ff hal
e319, I have that - what do you mean? Where will I find it?
e319, are you saying that the web developer hosting can show a list of all the available properties for an attribute?
based site ;p
it does the first several times.
same with table based sites.
based one
e319, cooo-eeey!
bbl
e319, are you still there? Would you mind explaining your last statement please?
er, *obviously* he's not here…
logixoul, those pages don't give me exactly what I am looking for so far - I am still looking through them though
ok. there's better places for what you need, but I don't remember them. try googling "css cheatsheet".
im changing the font with inline css of a paragraph
the font change is displayed in the dreamweaver display, but not in firefox or IE
whats happening?
give url
logixoul, actually this one is pretty good http://www.htmlhelp.com/reference/css/properties.html
logixoul, thank you very much for telling me about it
np
ah! i don't get it… how come div#main_menu is on top of div#header and not below it? http://awareness.org.il
could you create a testcase?
i am creating a testcase but it comes out right
that's good
i can't recreate the problem
it means you only need to retrace your steps of snipping the real page and see which one fixes it
I do that all the time.
divs are expanding downwards to contain their contents
and some text, the text floats to the bottom of the DIV, how do i make it display at the top ?
img {float:left} if I understood you right.
div is like img.h height. the text is like img.h/10. all the text.y starts at div.h-(img.h/10) i want it to be at div.y+1
can someone tell me , why IE6 kept stretching div if it had overflow ?
you want it to be next to the upload your images online then?
or overlapping the image?
http://innonesen.se/cuts/deco/ ?
logo is floated
logixoul, yes next to it, at the img's top, not bottom.
aaah
img {vertical-align: bottom}
ehh .. nevermind , its useless anyway
er, top
Hiya. I'd like to use @page { margin: 0in; } to make sure that there are no margins in the printed copy of the page, but, at least in IE7, it doesn't seem to work. Should it?
I think you need to put that in a stylesheet for which you have specified media="print"
anyone here worked with CSS pull down menus, specifically IE issues with them?
I just did that and still no luck
why is my logo above the text and not on the same line with it? http://awareness.org.il
dunno then.
hi
is it possible to apply a css property to all children of an element?
some properties are inherited by default and some are not
start removing irrelevant crap from your html and css and after every small edit, test the page to see if it's been fixed. At some point it will get fixed, and then you will know what the problem was.
yes. example: div * {} selects all children of div
and, as DawnLight noted, you can just use div and rely on inheritance
….for some properties
Hello, I am wondering how to get my text to the right of the picture on the webpage at http://www.uniquelynorth.com/Uniquely_North_Web_Template.html
float the img left
I'm developing CSS pull-down menus, and I'm having an issues with csshover.htc and IE6, the code seems to work fine in FF and IE7 … but in IE6 i get a massive block of repeated background (though the pull-downs do work)
http://dev.mcmastertek.ca/webdata/mcmastertek/header.php
logixoul okay, thanks, if i float the image left, then the white background around it ends at teh bottom of the text, not at the bottom of the image, what is the correct way to have it include the image please
I developing a form that has a fieldset hidden and then is made visible if Other is selected for company name. Oddly when the fieldset is made visible (display: inline) it appears but oddly it does not use the inline CSS I have set within that fieldset. Any ideas how to fix this? http://www.venmarces.com/signup.html
#whiteBackgroundThing {overflow: auto}
Oddly this problem appears to be only in Firefox and IE6 seems to work fine. Maybe I've found a CSS bug in Forefox I have no idea.
you can see that the form is nicely laid out but when Other is selected as the Company Name you see the other part of the form appear all messed up.
God morgon
er
wrong channel
heh
ay
http://paste.css-standards.org/23528
]center @ BlackLabelled
CSS Horizontal Centering: http://www.zoffix.com/css/center.pl , http://dorward.me.uk/www/centre/
thank you
np
was the margin-left & right incorrect?
it only works in some cases
ok thank you… as for the scrolling… any ideas?
i am working in quorks mode btw
do you or do you NOT want the background to stay on the same place on the screen?
quirks mode? dude. this is gonna be more headaches than fixing your page and working in Standards mode. mark my words.
okay thank you
np
I know i know… i already realized the center is due to a IE bug in quorks
quirks*
okay
i am not really sure how to put it into standard mode.. ive read but im just gettin frusterated…
make it validate
it did
insert a doctype
ok
3rd step.. validate with doctype?
well, just swap steps 1 and 2
that works very well thank you
np
k ill give it a shot
brb with more questions momentarily
has anyone here worked with csshover.htc for CSS pulldown menus with IE6?
logixoul… it validated with a doctype surprisingly… im going to play around and see if i can fix it up
aha
center works now
looks good in IE except for one little defect… but FF is messed… and ive been coding it in FF lol - ironic
http://blackl.trap17.com/ - could you gimme some direction for the FF defect?
I don't see no defect
other than a poorly contrasting logo
lol yea it sucks
regardless, you cant see a difference in IE/FF?
I don't have IE handy
oh.. well the background of the content is white
not grey
ooh
you need to setup a background colour
FF does not assume its white
nonon i did
no, you didn't for #content
content/adright are in container that was a bgclr defined
yup but content floats
oh.. hehe ive never really used float before
you need #container {overflow: auto}
k
by the way what resources do you use to read about web design trends?
hehe tanaoa… overflow: auto worked
most excellent
your method almost worked… but then my float #adright didnt cover all the way to the bottom
thanks alot everyone
I tend to pick up most relevant stuff at slashdot and del.icio.us
and while googling for unrelated stuff.
heh
just looking for ideas
Tanaoa any tips for the color of the text on my !@^$y logo
hehe im red/green colour blind, not the one u wana ask for colour choices.
trying to come up with an idea of how the front page of a website (ecommerce) should be structured
though not red/black
im trying to figure out why my rollovers arnt cooperating in IE6
actually its just a gradient red
the same code ive used on other sides, fixed the IE issue
what type of img you using
its a pure CSS pull down menu
I would make the text pure white with a white glow. turning black with a black glow on hover.
jpg i belive
k ill try it out
jpg should work fine, not sure
Ohh, my web game made it onto http://ajaxian.com/
Help, I have have a inside div
its not a graphic issues its an IE6 handling issue
the code works fine in FF and IE7
to the right
Can anyone help me?
the whole :hover missing
but the menus are working now in IE6, but its displaying the background image over and over for about 4"
margin-left: auto
Thanks a lot! Works just what I wanted.
lol
hi
np
hi virhilo
7s bad too but at least it works
how to eliminate space above 'h1/2/3/4' elements? (margin and padding are 0)
line-height:1em
There are 10 kinds of people in the world: Those who understand binary, and those who have friends.
thx-but space is still there
does anyone know how to proporly use CSS only pull down menus?
cas this is just getting on me nervs
ive gotten the IE conditional statement in, and the menus respond
but it still blocks the first 4" with repeated background
try firebug
firebug?
a firefox extension
looks nice now. might wanna set border:0 tho.
funny how the black label is white, at any rate.
yes. try firebug
Hello, can a submit button be made smaller? and a text input made shorther, i know it can be made less wide by specificying the character count… thanks
how can i make the div#header centered? or another question… why isn't it centered? http://awareness.org.il
#submitButtonThing { width: 10; height: 10 }
logixoul, you forgot units
right
#submitButtonThing { width: 10px; height: 10px }
same for text input
you'll want to change the font-size: too
depends on the button size he wants I guess.
or, actually, you're right.
okay thank you both
np
hi. im trying to repeat a backroung image vertically, but only in one row at the top
how do i do that? i tried background-repeat: repeat-x, but it still seems to place it in the middle too
testcase needed
hu?
make a simple page demonstrating the problem and give an url to it
ok
http://83.2.28.178/~virhilo/rekrutacja/ any ideas to delete space up to 'Notka informacyjna' text? (i want to it will be on a level with (dotted)frame in the left)
?
hmmm
logixoul, i thnk my problem is more specific, coz the test case works fine… im gonna fiddle some more
hint: start removing irrelevant crap from your html and css and after every small edit, test the page to see if it's been fixed. At some point it will get fixed, and then you will know what the problem was.
logixoul, thnx
np
i don't understand exactly what space?
space above 'Notka
element
you see the frame on left from it?
#wrapperColLeft?
virhilo?
hmm..
the #wrapperColRight have a fame on the left
im tryin to redesign a layout w/ a logo plus navigation bar… anybody have suggestions ?
]layout @ acnfcc
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/
element is below that frame- that's my problem
what do you mean by frame? i don't see no frame
i see mainly divs
logixoul, turns out to be a missing ;
]validate @ blimpdude
dotted frame bethen columns
thats called a border
yes-sorry
so whats the problem?
element 'Notka informacyjna'
is is below that frame
no, its just fine
you are talking about one pixel… ?
yes
few pixels
thats because the font has a height that is determined by the the highest letter
N is not highest letter?
i don't know
but anyway, why is this so important?
it looks like it should
if you insist…
becouse website must be the same as upload your images online which project
h2 {line-height: 12px} seems to make it work but its not a good solution
thx-yes-so maybe i will try dedine it in %
'define
don't spend too much time on it
hehe i will try
scroll bumps to the right in FF but not IE?
]paste
http://paste.css-standards.org , http://www.webdevout.net/test , http://erxz.com/pb/ , http://sial.org/pbot/ , http://tnx.nl/scribble.plp , Upload images: http://oxihosting.com/pupload/
hey im trying to use the [if IE] condition
Lol
but I need to be able to have all ie under 7 ignore some js but i need ie 7 and all other browsers to follwo it
brandonm, so was I
brandonm, I need FF conditionals - seemingly none exist :[
but I did find some links you may like
1] http://www.quirksmode.org/css/condcom.html
2] http://css.weblogsinc.com/2006/07/24/conditional-css-not-just-for-ie/
]condcoms @ brandonm
Hi
do non ie browsers even notice the if ie comments?
Blah, I suck at _ZofBot.
Well, using some js
]cc
]fsdfsdfsd
The hell. Why's he support ]cc and not ]condcoms? :
ZombieLoffe, -_ZofBot3- Cancelled send: Nothing was found. Try searching http://xrl.us/wcdx
RTFM
Clearly.
How do I place text in the vertical center of a div? I *need* it to work for Internet Explorer 6 since this involves a warning for IE6 users to upgrade to a newer / better browser
brandonm, it's just a regular HTML comment for anything that doesn't support it
Usually I don't care about IE6 users, so I'm not going to put hacks here and there to make the site work, just insert this warning
dazjorz, how much text and does that div have height?
im just wondering if i put if IE 7 if mozilla will ignore the js file
Multiple lines and yeah, 120 px because there's a 120 px image in the front
I dont want it to
]vertcenter @ dazjorz
CSS Vertical Center: http://zoffix.com/zoffix/css/vertcenter.shtml , http://reisio.com/examples/vertcenter/
Thanks
http://www.zoffix.com/new/abscenter.html that one is IE only. And works pretty good. Just use condcoms to show it to IE only
]z cc @ dazjorz
IE Conditional Comments: http://haslayout.net/condcom
a href="http://haslayout.net/condcom"http://haslayout.net/condcom/a
Well a problem is
dazjorz, I just have a link "Get a better browser" to http://browsehappy.com
Like on zoffix.com
I've already got vertical align, and it works fine right here (Firefox 2.0.0.6 on Linux) - on a friends' browser, Firefox 2.0.0.6 on Windows, it *doesn't* work: the text is below the window
Now this is not exactly a huge problem, since it displays for IE6 only…
Why do you need to display "Upgrade your browser" for non-IE browsers?
but if anything, I'd like it to work on any browser, not just IE6, even if it's meant for IE6 people only
bbut if anything, I'd like it to work on any browser, not just IE6, even if it's meant for IE6 people only/b
Only if there's no way to do that, I'd make it IE6 only
Another problem, is that I don't have access to IE6 at the moment
Sure there is a way.. display: table-cell; vertical-align: middle;
I'd need to go to a specific location, to have access to IE6
Yeah, I read that
dazjorz
but does display work on ie6?
not table*
That's why you need hacks for IE
I was afraid of that…
man, I need to study _ test in an hour
okay good luck, I'll keep trying
hehe- % works in firefox but px works in opera o_O
hi
I want to use CSS font embedding
any thoughts on this?
I have no idea how that works
it doesn't
….
it's been deferred to css3 fonts
css3 fonts?
?
]css3 fonts
]css3 font
css3
http://www.alistapart.com/articles/dynatext
]css3
http://www.w3.org/Style/CSS/current-work
a href="http://www.w3.org/Style/CSS/current-work"http://www.w3.org/Style/CSS/current-work/a
4th time's a charm
flash text replacement sounds like the worst idea ever
Using overflow, is it possible to achieve the same effect as inline frames wherein the scrollbars will only become visible when needed.
yes. overflow:auto
Hmm, I tried auto
let me start a fresh page
may vary between browsers…
You also need to set a width and height on the object
]css overflow
http://w3.org/TR/CSS21/visufx.html#propdef-overflow
otherwise it will just expand
ok but the question is this
does CSS support some sort of cross-browser embedded font technology, now?
no
i see
which is why I use http://www.alistapart.com/articles/dynatext
but that's a huge article, so i don't know what ur talking about.
your problem. read if you want.
but it talks about images
and workarounds
ugly.
cry me a river.
what about WEFT?
probably ms only
ur right
ms only
but ok, if I do use Javascript for font embedding,
…. there's nothing that's going to add extra load on the server?
hello people
i m trying to fix a "double header" in a small project i m doing.. www.minimalism . I m having a hard time arranging the two divs as you can see leftheader and rightheader
www.minimalism.gr (sorry)
http://yawgm8th.wuputah.com/cam/
absolute positioning
0
for me?
Note that the solution I tried on the page you mentioned, http://www.zoffix.com/zoffix/css/vertcenter.shtml, does not work for me: the text is at the top of the div, instead of in the center (http://starez.org/browsertest.php)
@http://starez.org/browsertest.php
yes…
(starez.org/br…) HTML: Validator Error (see http://tinyurl.com/3yptp3 ) | CSS: Valid [15 warnings] ( http://tinyurl.com/ywdpzt ) | DOCTYPE: Network Error | (MIME: Error)
oh no, it doesn't validate at all
i'm trying to create buttons similar to the ones in http://www.awareness.org.il/page4.jpg using only css with -moz-border-radius but i seem to have some problems with the padding. can anyone point me to an example of this?
since it's a test page that'll be removed when this piece is done
somewhat better now
anyone know if Lynx is vista compatible?
somewhat better?
looks fixed to me
check it ,the one is over the other
hmm, what do you mean over?
both are aligned left
Hello
for me, both the square and the rectangle are on top
agamemnus but the square should be left
rectangle first and square later
I see overflow works when I just made a fresh page. But on my existing project, the auto overflow div is showing grey'd out scrollbars [as if not available but still there] Ideas?
and rectangle right
agamemnus refresh changes are online
ummmm so did you just set the padding to 0?
If i need put an class to a single text, can i use class="myclassHello World!/class??
it does add extra load to the server - images are generated and transferred.
ffox
agamemnus and positioning absolute!
alright….. thanks logixoul…
mnmlsm, you didn't set the left attribute, did you?
and if you did, did you use 'px'?
agamemnus float:left and float:right accordingly
position:absolute;
padding:0ox;
px
i don't think that float:left works with position:absolute
try taking out the position:absolute
maybe it will still work
nop
worst now
i'm not really too good with this positioning stuff
hmm i think its something with the container
are you sure float:left works with absolute positioninng?
My calendar renders improperly in IE (big surprise) but properly in firefox? a littlet help? http://admin.frommfamily.com/calendar_json
no clue
take them out
see what happens
too big grey box? also, it's "from" not "fromm"
huh? no, its Fromm
It's not that bad in IE, is it? Just missing the top right rounded edge.
That's the name of the company Fromm Family Foods
And the bottom right corner..
yea well it extends all the way to the right
Render in Firefox, that's my desired look
Not with my IE… IE7?
oh, well it's happening in IE6
the grey box is stretching to the far right side of the screen (and obv the corners are not rendered)
helloRobot
try this:
body, p, div {margin:0; padding:0;}
also check the warnings that mozilla gives
maybe the IE only styles that mozilla doesn't read are causing the problem
sorry, i had an important phone call
i will try now
those are already in effect
i use Eric Meyer's reset.css
What's the best way to create a shadow around a block?
Not an image.. But like a block that would contain all of the page's contents.
I'm confused with your question pauliukas
Possible to have IE6 AND IE7 on same computer?
hellorobot, try switching positions of your appendChild?
]]Multiple IE
[Google] http://tredosoft.com/Multiple_IE (More results: http://tinyurl.com/26hb7b )
Imagine a big block on the page.. A block is created by a div.
oh wait, wrong person.
appendChild?
right. nvm
ah, ok
I want to have a shadow around the block.
Let me show a screenie.
does anyone know how to force a div to have p's that are only on one line?
agamemnus, white-space: nowrap ?
thanks i'll try
www.minimalism.gr renders ok on IE but a small prob in FF
the next div (menu) overlaps the headers…strange
something with overflow
heh
http://img116.imageshack.us/img116/8242/shadowbu5.png
Something like that.
I'd tell you what it is, but you are on my black list…..
A shadow around a block.
Who's on the blacklist? Me?
How did that happen?
Zoffix it ll just take 2' more to find it
what blacklist
good for you\
Zoffix 2'..like the gaps between your sleeps
lawlz
perv
agamemnus, my blacklist… mnmlsm been an asshole to me, so I don't help him anymore
dont cry bitch
mnmlsm, whatever that means….
mnmlsm…
But could you, perhaps, help me?
mnmlsm, heh, why would I? It's not me asking for help
mnmlsm… probably because you set no padding on it too
and it needs padding
idk
hey, anyone have Safari here?
i could
if I wanted to
Safari 3 is cross-browser supposedly
agamemnus nop
err
cross-OS
mnmlsm, take out your padding:0
and does the problem go away?
no
ok then zoffix
Anyone?
Is everyone just ignoring me?
there?
no
"lvl1submenu.style.whiteSpace = 'nowrap'" doesn't work
Note that the solution I tried on the page you mentioned, http://www.zoffix.com/zoffix/css/vertcenter.shtml, does not work for me: the text is at the top of the div, instead of in the center (http://starez.org/browsertest.php)
mnmlsm, idk… if you take out the other one then it should work
agamemnus removed all pad's 0
dazjorz, then you did it wrong.. it works just fine on my page
positioning:absolute
er just take out stuff that you added till you find out where the problem started
could you try to take a look at http://starez.org/browsertest.php ?
hehe thats the prob..it was there from the start
paulinkas what is your problem?
mnmlsm, like at the very beginning?
]rounded @ pauliukas, use this technique to fake it
rounded: http://www.smileycat.com/miaow/archives/000044.html http://fumle.dk/public/webdev/round-corners/
before you posted here?
i just edited this thingie
before you started changing things, did you have the problem with the moz/IE inconsistency?
I want to create something like this: http://img116.imageshack.us/img116/8242/shadowbu5.png
i didnt check i just made the double header thing
I can see it works great for your site, but it doesn't for mine, and I fail to understand why (maybe it has something to do with the image? :/ )
But these are rounded corners…
a black box with "my website on top"?
""
Yes. But shadows going from the black box.
pauliukas, well, a shadow is just a border, no?
Seem that?
Yes.
no
pauliukas, so if you can get images as borders using those techniques, you can set up a drop-shadow
So I should have a div surrounded by 8 other divs?
for each corner?
mnmlsm, just check the properties… one of them is different
agamemnus where?
pauliukas, you don't need 8, no. you can probably get by with two or three
okay…
I got an idea.
mnmlsm, one of the new elements you added is different somehow in IE/moz
mnmlsm, prob. cause you didn't set a setting and IE/moz set it for you
agamemnus it was buggy from scratch..
i 'm adding/removing till i make it work
mnmlsm, if ur using any javascript to align your images… that might help figure it out
no js
mnmlsm, idk, check the warnings that moz. gives then…
it throws out IE only properties, so one of them is making the look different
its something on the menu div
i have margin-top:10px but in "top" it gets the top of the page..
not the previous div…
(header)
i think i will install a separate copy of windows (in parallels) just for IE7
agamemnus no related warnings errors
mnmlsm…
there are 3
concerning something else
i don't know
i do
can anyone tell me why this doesn't work??
lvl1submenu.style.whiteSpace = 'nowrap'
(((((
im tryin to redesign a layout w/ a logo plus navigation bar… anybody have suggestions ?
I have a DIV with a fixed height of 180mm, this DIV contains a single table, i would like the table to fill all the DIV, including borders for cells (this is for an invoice media="print")
the table may be almost empty
still round logixoul
min-height is not helping
Is there a GUI CSS and/or HTML validator app for OS X?
i'm trying to create buttons similar to the ones in http://www.awareness.org.il/page4.jpg using only css with -moz-border-radius but i seem to have some problems with the padding. can anyone point me to an example of this?
I'm using a table to display some data. Can i make the border of a cell change color when the mouse hovers over it?
sure
I can run you through it really quick if you want
he'd need JS for that
I understand
I'm still willing to help
… just thought I'd mention it
you ever use jQuery?
nope
Best thing that's happened to me since I started learning web dev
I've thought about it, but … well, I don't do much JS stuff except for TiddlyWiki
to make those cells a diff color: $('#my_table td').hover( function(){ $(this).css('border', '1px solid #c00'); }, function(){ $(this).css('border', ''); } );
thats it!
hmm
interesting
what exactly does the $() do then
basically $(SELECT THE ELEMENTS TO EDIT USING CSS SELECTORS) .hover( RULES FOR ONMOUSEOVER, RULES FOR ONMOUSEOUT)
$() is the factory function
$() can do anything
it can create an element, select a group of elements
heh - how bloated is jQuery
not at all
22KB compressed
no shit?
jQuery leaves it up to plugins to add extra functionality
no shit
jquery.com
this is a calendar i'm building using jQuery
http://admin.frommfamily.com/calendar_json
is there some kind of overview of the different JS frameworks - sort of "if you do stuff x, take jQuery; if you do stuff y, take MooTools"?
if you do anything, jQuery
that's what i've found out
there's a plugin that suits it
if you need it
hi all
check out #jquery too
sounds good
i've set li as inline in a div but it go over it content is one one line. any idee what's going on ?
element correctly.
I don't want the underline to show up, nor do I want it to change colors if it is active.
link?
sigh
ags\afk, a:link, a:active, a:hover, a:visited { text-decoration: none; color: blue; }
I gots it
ur too late
thanks anyway….
I didn't know you could stack 'em like that, though
]css selectors
http://w3.org/TR/CSS21/selector.html
]selectoracle
http://gallery.theopalgroup.com/selectoracle/
oooooh one more.
I guess I would need to use javascript for this but…
http://www.archlinuxfr.org/paste/800/
let's say I have two links, and either one or the other is color X
depending on which one is clicked
please clean up that code and paste it here;
]css paste @ benoitc
Paste FULL CSS Code AND HTML code so we could VIEW your page. Incomplete code is useless: http://paste.css-standards.org , http://www.webdevout.net/test , http://paste.zoffix.com/
any way to do that with CSS?
use classes?
auto doesnt appear to work in IE… what do i do?
www.uniquelynorth.com/Uniquely_North_Web_Template.html
]]]overflow
overflow http://www.webdevout.net/browser-support-css#support-css2propsbasic-overflow (IE 6:41.667%) (IE 7:50%) (FF 1.5:91.667%) (FF 2:91.667%) (Opera 8.5: Y) (Opera 9: Y) (Konqueror 3.5: ?) (Safari 2:
?))
hmm, so I could change some other class's attribute inside a {} ?
jaybird7:
i just paste the code in question. it do it in one empty page
use overflow on the html
not on the body
with HTML 4.01
if you're worried about scrollbars at least
what do you mean, depending on which one is clicked
like…
….
like you'd get with a:active
a.l1:clicked (or whatnot) {l2.color:red}
a.l2:clicked (or whatnot) {l1.color:red}
javascript
a.l2:clicked (or whatnot) {l1.color:red; color:yellow}
can't do it with CSS?
no
okays
unless you use the :active pseudo-class
you can't have a ruleset inside a ruleset
k
ah found my problem… no space in text. So it stay one line
thanks anyway
thanks
or what do you mean
hi fkin gnus, how do i make buttons be flat and have a nice cool border, u know, i tried .input but no effect in ie and ff, any ideas?
can anyone tell me what the problem with http://awareness.org.il/divexpand.html is? firefox won't display anything while konqueror does…
oh now its ok
nevermind
i'm back!
Zoffix yo! \o
guys. I have a div with float:left. then i want to add text under this div. but it flows on the right side of the floated div. how can I move the text down ?
]css clear @ YammYgirlcoding
css clear: http://w3.org/TR/CSS21/visuren.html#propdef-clear
too confused link
oh. i think i found. clear: left
thanks preaction ! "^^
I'm drawing a blank, but is there a way to have a div positioned relatively, but not alter any of the divs around it? (i.e. I'm making a tooltip thing with javascript)
a div positioned relatively doesn't alter any of the divs around it.
if you *want* it to alter them, you need position:absolute
well, in the case of a tooltip, you need position:absolute in any case.
(if it's the kind of tooltip I'm thinking of)
Hello, What is the best way for me to get the goose picture where it is, the Email List signup centered, and the storefront picture on the right side at the same level as the goose picture? should i use absolute positioning? right now i have all three under a div that is text-align:centered with
the goose pic float: left and the building pic float: right, http://www.uniquelynorth.com/Uniquely_North_Web_Template.html
it's ok as it is.
this buffet is scarying me though.
question…
in IE, I can get the width of an element that has already been loaded
in mozilla, I have to refresh
what's up with that?
what buffet? and for me it doesnt show up right, the email list is off center and the building pic is too far down on the page
oh sorry
why is that scarying you
because it's tilted in a way suggesting it's gonna fall on my head and squash me
also, it has ghastly colors
you're right though, the email thing is off center.
hmm.
well, I don't feel like debugging this
try firebug.
ask in ##javascript I suppose
jquery.com
it will fix all your javascript nitpicky issues
have you tried Mootools? if so, how does jquery stack against it?
jquery is superior in speed and architecture
#jquery for any specific questions
ok, thanks
logixoul:
jquery is so elegant you will love it
so fast too. the just released 1.1.4 which compares its speed to its previous version.. it's just getting better and better
i have firebug but i dont know how to use it to figure this out, and i dont know what it means when it strikes though certain text, and thanks for what you have done
it strikes through it because it's overridden by another property
when it;s striking through css, that means that style is being overwritten by a different definition
I'm bothered by mootools' speed, so this will be welcome. Reading up…
ninjawords.com/override,overwrite there HAS to be a difference
okay thank you both
i hated javascript and everything associated with it until jquery. now i seriously love it!
I know i probably sound like a nut.. but honestly.. It's re-ignited the passion in javascript for me
hahah
same with Mootools for me… we'll see about this one
thanks, that worked
no problemo.
http://www.uniquelynorth.com/question.PNG and here is the page http://www.uniquelynorth.com/Uniquely_North_Web_Template.html
you need lots of floats.
hi
the picture of the front of the building is floating right, and the picture of the piece of furniture is floating left…
any idea why two tables with float:left;clear:none; will behave appropriately in ie6 but not firefox?
appropriately meaning, in ie they are side by side, but firefox they are clearing each other
http://74.103.17.103/unt.html
i know inline css is bad, but this is a simple example, this was done to save time
so in firefox, no worky, ie6, worky
Why does float only have left and right? If it's going to have more than just "float" shouldn't it include more directions ?
you mean like "West 20degrees South"? the answer is because you dont need it
center
your align="center" is what's causing it not to work in ff
if you remove that, then it floats left
Does anyone know what bug in IE6 causes the spacing error of the LI's used in my sidebar? (http://www.browsercam.com/projects/372158/12580761.png / http://www.steamstudios.com/freelancer/justin/r21/about/index.html)
there are bugs in IE6?
duh
Your li looks fine to me
pts, in ie6?
do you just mean that the list isnt as low as on you rpicture?
It works great in every other browser under the sun, but has incorrect spacing in IE6 (check out the browsercam .png)
In your picture and in firefox.. looks same?!
In IE6 there appears to be 2 pixels of space between each LI. That problem does not occur in any other browser http://www.browsercam.com/projects/372158/12580761.png)
pts\5: There is 2px of space between the LI borders in your FF? (perhaps I should take a screenshot from a Win FF)
Wow. People pay for that stuff?
lol, seemed like a great service, but I wouldnt pay for it :
Browsercam? Yeah, I can't rationalize paying for it. I'm still using up my old email accounts
There are free quivalents…
Just putting it out there..
2px of space _
You know there are over a thousand pixels going up and down
The only other option that I have found is http://www.danvine.com/iecapture/
http://browsershots.org/
Enjoy.
I have an old Mac PPC, so my options for IE6 are quite limited. (Damn Microsoft again for crippling VirtualPC for the PPC chips)
pauliukas, many thanks!
many welcomes.
lol I love dillo
and kazehakase
There aren't many webcore browsers on linux..
oh sorry i missed the IE part i was looking in firefox
thanks a lot
zenergi is your pic of the problem?
np
Hmm. I think Browsershots is OSS.
yes, that .png should illustrate the 2px gap between the LI's
Maybe I should create a bunch of VMs and put it on a machine…
okay im not sure, in the pic it looks like the bottom border is closer to the LI then i see in firefox.. is that what you mean?
or dont waste your time on me since i probably cant help anyways heh
hi
hello cawl
Cawl
http://www.uniquelynorth.com/question.PNG and here is the page http://www.uniquelynorth.com/Uniquely_North_Web_Template.html
hey, I take help wherever I can get it, I'm no expert either. My intention is to have it look as it does in FF and Safari, without any space between the LI borders.
is it possible to set a width\length value for a div, but still allow it to expand as much as nessairy to contain the content inside it?
overflow ?
okay maybe i see what your talking about now, you mean how there are like two lines under each LI and you want those two lines without the space between them
pts\5, was that directed at me?
Yeah
oh
exactly, but those lines do not appear in any other browser. WHy?
how do I stop overflow?
stupid IE6
Ah.. I think you want to allow it, don't you?
in other words, how do I expand the div to contain all the content.
pts\5, no vice versa.
You want the div to expand
yep
but still set a width\length value.
height*
okay.. sorry no idea
http://w3schools.com/css/pr_pos_overflow.asp
what exactly are you having problems with? Perhaps, I can help you.
Does that look helpful?
pts\5, thanks.
cool.
it does.
Sup with a 40px left pad being defaultly added to my unordered lists?
pts\5, no it doesn't
What doesn't what?
I don't want to hide it or add a scroll bar, I want it to expand as nessairy.
visible ?
visible Default. The content is not clipped. It renders outside the element
I want it to render inside
did you look at my picture? i just have things not in the places i want them, and i dont know how to do it, i want the email list sign up to be in the middle, the picture of the building to be up at the height of the goos picture and the picture of teh piece of furniutre out under the goose
picture and the text under the pictures
oh
let me see if I can take what you have a give it a try. I think I can do what you're saying. Give me 15-20m to finish something up here.
min-height and min-width ?
Those are fields, right?
I want to set a default value for a div, so if the content is too little, the height lets say stays at 100 px, and if the content is heigher than 100px, it expands as nessairy.
min-height: 100px;
awesome thank you
pts\5, thanks man, I guess that's what I get for learning CSS from others' style sheets
Yeah, it is
np, I have received a ton of help from here. I have to return the favor sooner or later.
pts\5, can you help me out with something else?
Yeah, what is it?
http://gargantua.servehttp.com/tbbs//index.php?id=login
see teh ad at the end of the page?
why doesn't it stick by the border?
ah.. I see no ad anywhwere.
no?
javascript disabled?
okay I found it
why is it all the way up there?
Is script something you can edit in css? I suggest we find out
touch /dev/pts\5
:P
script?
with like.. script { position: relative; botto wtm
you .. tou oh
I felt kind of molested but I guess it's cool…
lmao
Like, you can describe html, body, p, and so forth with css
you know touch is a valid unix command
Yep I use it all the time.
what's it do?
makes a 0 byte file
My favriote is finger
with wahtever name you specify uh
:P
I don't do finger
/bin/sh: finger: command not found
exactly
so anyway..
weird, thought it was a valid command.
well it's a valid irc command
script { position: relative; bottom: 0px; } or something like that?
IRC isn't unix
Sounds like hail outside..
0 -!- Irssi: process 0 (finger) terminated with return code
I did what you told me, same thing.
exept I made a div for it.
lol
did it move up the page?
From where it used to be?
no same position lol
absolute
and then fiddle around to try to .. center it..
;;;; maybe margin-left: 30%; margin-right: 30%;
oh yeah, that worked.
thanks a lot.
Just helpin a brother out
did you get my pms
I though only women get PMS.
does pm's work better?
not sure the proper way to do a plural of pm
That's grammatically incorrect, so no.
:P
I'd actually roll with pm's
like a's are nice letters, aren't they?
lol
I got two A's! I'm so joyous.
I'm going home.. bbl
6-7 hours from now . maybe more.
later
thanks for the help, once more
bye pts\5
hi again,is it possible to set a border such that the image moves up and to the left according to the border size?
are you still here?
is anyone here?
my border sizes are one pixel bigger in Firefox than in IE6
conspirashy
http://www.uniquelynorth.com/question.PNG and here is the page http://www.uniquelynorth.com/Uniquely_North_Web_Template.html
Agamemnus, 1) What's the size of the border. 2) What doctype are you using. 3) What makes you think they are 1px bigger?
Hello.
yo
Say I wanted 3 divs within a div to be aligned horizzontal-centered?
Won't work right
never mind, i just used set px instead of "medium"
how can I get the width of a 'p'?
Agamemnus, "get"?
perlbot, x y problem
hmm, wrong window, but I was thinking of javascript
perlbot, problem
"It doesn't work" or any relatives is very vague and totally useless information. When reporting a problem let people know what is the expected result and what is the result you are actually getting