logo
IRC Archive / Freenode / #css / 2010 / May / 13 / 1
xckpd7
riven: compare Calibre and say Arial at the same font size.. Calibre is considerably smaller and I haven't found any font-stack that has a comparable sans-serif font that even slightly resembles it. So I was then thinking, maybe there was a free font available that mimmicks it
riven
ah, okay
well, go to dafont.com and happy browsing! :)
choosing a font based on its relative size compared to a reference font is pretty silly though :p
solo0891_
wich program is best for image manipulation for web design , gimp , adobe photo shop or ulead photo impact ???
riven
ulead, lol
Fireworks.
xckpd7
if you consider that I made a compromise and matched calibre to the original design that called for Myriad Pro (very hard to tell apart at that size), and that I would prefer not to do images for text, it's not really
mum-n-dad
heheh
good ol' ulead
dogmatic69
solo0891_: the one you know
mum-n-dad
xckpd7: myriad pro nice choice
solo0891_
ty dogmatic
mum-n-dad
http://apps.facebook.com/markedsplass shares the exact same CSS with http://home.no/hedhnta/test - yet it's all messed up. For instance, how do I get the search input back to where it's suppose to be?
I just can't figure out what Facebook is doing to my CSS!
linetrace
I'm using text sizing in ems for a site layout and am running into a rounding issue in IE7
I've got a lot of elements w/font-size: 0.875em (i.e. 14px), but this actually ends up being 13.92px (i.e. 0.87em) in IE7
I'm including an IE7-specific CSS file using conditional comments and all it includes is "body { font-size: 0.88em; }", but it doesn't seem to override the font-size specified in my main CSS file
woah, may have found my issue...
yup, silly mistake
deed02392
For some reason i'm struggling to get three divs to align in the center of a parent div. What's going on?
MikeyD
i am trying to modify the title attribute of img to be 8px and I can't seem to figure out the necessary code. tips?
azazul
MikeD_: a snippet would help , and live url would be better
same for deed02392
MikeyD
azazul: can i pm you the url?
deed02392
it's ok azazul, had a typo in selector rule, thanks though
azazul
sire , MikeD_, but whats so secret about it
and what exactly you want to modify to be 8px
MikeD_ ?
MikeyD
<img src="/images/step2.gif" alt=""
title="Click to enlarge" height="80" width="120"/>text here</a> - I want to modify the font-size of "text here"
azazul
first : wrap it in span
then a span[ font-size: 8px; }
deed02392
Does anyone have any reserves about using position:relative;top:1px;left:1px; to give a 'button' effect for all a links on hover?
It won't cause some enourmous styling issues on some browsers will it?
Don't have the facility to test them all interactively
Yoshi123_away
IE6 must di
dieee
MikeyD
azazul: Yay! Thanks for the tip
azazul: ok, next question. They are already in a div. Instead of a span, I used the current div with your suggestion. It works great. When I move the code over to my designated css file, it stops working.
<div style="font-size:9px;"> this works great
<div id="3steps"> and then css: #3steps {font-size:9px;} - doesn't work at all
azazul
was afk
MikeD_: ID names cant begin with a number
MikeyD
changed it to steps3 and still no luck
azazul
besides , the images are already contained in a a.highslide
so why dont u use it
a.highslide span{ font-size: 9px; }
btw , you ode has a lot of issues
you shou start by setting a Atrict doctype ( instead of transitiona) and fixing the validation errors
and thats only for errors and not the semantical mistakes
s/Atrict/Strict
MikeyD
ok, got your span css tips working, thank you!
azazul
and start fixing the code
MikeyD
HTML 4.01 Strict ?
azazul
that or XHTML 1.0 Strict
its more your choice
and right after setting the doctype , move the JS part right before the closing </body> tag
MikeyD
57 Errors, 10 warning(s) - nice. ok, will do, i appreciate your suggestions
azazul
you need to move the JS because of optimization
MikeyD
ok, moved to the bottom
azazul
did you never wounder why google told you to put the Analytics script there ?
MikeyD
I had just assumed I needed the highslide.js near the top since I have a few pages laden with images
azazul
html file hets read from top to bottom
and when IE sees a JS ( of any kind ) it stops doing _anything_ else till it downloads the JS and compiles (parses ) it
MikeyD
Yeah, I noticed that the facebook connect js likes to slow everything down sometimes
Ok, next question for getting my doc to validate. I've been using <hr noshade="noshade" /> - I need to use a different alternative to that
azazul
MikeD_: its the border property in css
if i understand it right , it should be hr{ border : 0 0 1px;
{
damn ..
hr{ border : 0 0 1px; }
MikeyD
html: <hr /> css: hr {clear: both;border: 0 0 1px;}
When I remove the clear:both the line disappears, but your border worked well!
Why did you recommend me setting a strict doctype instead of transitional?
azazul
MikeD_: first of all , you shouldnt use HR tag
jeez , go and lear n, i have to work
goddard
My div keeps on getting pushed to the side by the footer when I use a picture aligned to the left. How do I make sure what ever is in my div container isn't push to the side? if this even maeks sense?
MikeyD
does anyone have experience in fixing validation errors concerning facebook like box or like buttons?
Strumeizer
who can help me for an IE z-index problem ?
b0x
position: set?
Strumeizer
absolute
C00re
i second that quitmsg
dcosta
hey
any jquery expert here ?
C00re
#jquery
dcosta
cool :)
ty C00RE
C00re
NP
MikeyD
azazul: I just finished validating everything! yay!
Yoshi123_away
*tear, how does one fix the IE6 jump bug
I'm simply changing the border-color and it cases this massive jump in the div size
*causes
Yoshi123
Is anyone familiar with the IE6 hover jump bug?
JDigital
stuff jumps on hover if you change its size on hover
Yoshi123
I'm only changing the color
border color to be exact
MikeyD
do you have any percentages in your attributes?
Yoshi123
no sir
MikeyD
hav you tried adding a:hover { padding-top: 0 }
Yoshi123
yeah did the padding-top padding-bottom 0 stuff
there are no EMs eitehr
*either
tried giving the div that's expanding a fixed height but that didn't work
somebody shoot me now
MikeyD
I feel your pain. I still have 12% of my visitors using IE6
Yoshi123
Yeah, the numbers are still way too high
bleen
are there any cross-browser solutions out there to positioning the legend in a fieldset?
MikeyD
Ok, so, I figure out that any facebook plugin used will break your site in IE6. Now I need to figure out a way to hide the plugins if the user's browser is ie6. hm.
bleen
is there a hack for FF only styles?
MikeyD
is there something similar to "<!--[if gte IE 7]><!--> code here<!--><![endif]--> that you guys know of to hide javascript?
HappyPelican
MikeD_ js user agent detection
MTecknology
Is it possible to apply to different backgrounds to an image? So I have a corner and top image?
I'd like to avoid having to add extra elements to the theme
HappyPelican
what are you trying to do? rounded corners?
proskill
hi
how do i change the outline of input type="text" ?
outline color
MTecknology
HappyPelican: pretty much
proskill
im using form#firstform input[type=text] {} <- this is correct to style the input text types right?
MTecknology
HappyPelican: same concept - trying to put some nice shadow images on things that follow pretty funky paths
HappyPelican: any tips?
HappyPelican
MTecknology, this might help then - http://codecamel.com/round
proskill: border?
MTecknology
HappyPelican: wow- that's neat
k0nichiwa
any tricks to increase the spcificity (or precedence) of a CSS rule?
i changed some rules from being ID based to class based
i need the same results i had before, but the precdence of the rules has been foobar'd
oksushi
k0nichiwa: make a more specific selector http://htmldog.com/guides/cssadvanced/specificity/
snaxsy
dudes, you got any recommendations for an all-css 2-level horizontal menu?
] horizontal menu
] menu
_ZofBot4
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/ , http://www.htmldog.com/articles/suckerfish/dropdowns/
snaxsy
bah.
does that mean the alistapart hybrid's still the state of the art?
(not that i don't like it)
oksushi
snaxsy: http://www.message.uk.com/dropdown-menus-no-thanks
snaxsy
sh*t, that looks awesome and not exactly what i'm looking for. gotta fold socks now. be back in a sec
oksushi
]search drop
]access drop down
_ZofBot4
Drop-downs are bad: http://www.message.uk.com/index.php?page=81
oksushi
bot needs updating
snaxsy
ah. my gf was nice enough to do my laundry. she feeds and waters me too.
how where were we?
oksushi, what's that suppose to link to? it redirects.
oksushi
yes, the first link I gave you is the current one, I was checking to see if it had been updated in the bot (but it hasn't)
snaxsy
oh i guess that's what you were saying.
yep
anyway, you have a recommendation for a two-level horiz menu?
css-discuss wiki also needs updating.
oksushi
I recommend not using one at all
snaxsy
what do you recommend? showing all? anyway, i'm supposed to duplicated a layout
i wasn't talking about a drop down tho.
oksushi
using a proper structure, in-page links, sub navigation and 'inherant findability' - but anyway, suckerfish is still what you want
snaxsy
two-level. like http://www.alistapart.com/articles/hybrid
oksushi
oh, my mistake then
snaxsy
oh i feel better.
oksushi
they still have their issues though
snaxsy
especially since i was hoping for an all-css one. not some crazy javascript menu that no one can see if javascript is disabled.
oksushi
for people with poor fine-motor control
snaxsy
issues indeed. is html5 going to fix all this or something?
oksushi
why not use a css3 solution? http://css-tricks.com/css3-tabs/
snaxsy
it's for a nail salon. if their customers have shakey hands then they shouldn't be customers ;)
oksushi
hehe
snaxsy
that doesn't have a submenu.
oksushi
anyway, you will need js to make sure that the sub menu of the most-recently hovered tab remains active even if the mouse cursor slips off it
no, it's not a 1:1 example you can copy
snaxsy
yeah i'm not trying to reinvent any wheels.... lazy & tired
i'd be up to it another time
bigger stranger fish to fry than the menu
what's the javascript do? i thought javascript was usually for making :hover work right on ie?
tho that does make sense....
(Action) scratches head and goes fishing
oksushi
well, you would for example make the most recently-hovered item have a class 'active' that makes sure it is the top-most visible subnav. So, you can take your mose off the strip, and that sub nav is still visible
then, if you hover another 'tab', it's submenu gets the class
snaxsy
right right.
but ... hold on ... fishing
oksushi
so, without js enabled, the menu works like the example you gave, but with js enabled, it works /better/
snaxsy
yeah.
right.
i'm down to use taht. i was even thinking of tossing a nice jquery fade in there if i have a sec.
but i want a solid starting product that degrades gracefully
i like the alistapart one. but i sortof thought there'd be more i should check out
oh, plus it doesn't look like alistapartmenu works for ie/no javascript.
oksushi
not if it relies on hovering things other than an <a>
thats why you should ensure that each 'top level' menu item is a functioning link to a page, that details each of the sub-pages (and links to them)
snaxsy
i guess i probably won't find anything better, then. you have a link for the persistency js you were talking about?
good point about top menu links. i like that.
oksushi
snaxsy: no, but it is trivial
shaft0
Is there a way to have overflow: scroll use the main browser scrollbar on a div?
oksushi
shaft0: not directly
shaft0
oksushi: I'm not sure I follow.
snaxsy
yeah but it sounds elegant. for those users who have the ability to appreciate such things (clealy not the ones using ie)
oksushi
snaxsy: did you mention you were using jquery?
snaxsy
yes why?
oksushi
shaft0: you could 'fix' everything else on the viewport, then it would appear that the main scrollbar was scrolling just that element
snaxsy: check your pm
shaft0
oksushi: Basically the only thing on the viewport is the bodyContent div, so if I put that as fixed, it'll be good to go?
oksushi
shaft0: I cant say that without seeing the page
shaft0
oksushi: Fair enough. bodyContent is a vertically centered div, it's 400px tall, and it's the only visible div on the page.