Re: [css-d] CSS Eleven
On Oct 20, 2007, at 10:22 PM, Ingo Chao wrote: Elias Abunassar wrote: Found an interesting, self-appointed CSS Working Group: Hmm, I was not asked. I thought the same. Very annoy that you and George are not in it. What is the problem making CSS Thirteen? tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: camino-- image border issue ::
I had similar problem with Camino once . Wrap the img in a p or div does the trick. pimg class=c5 src=ca/site/images/thumbs/self.jpg alt= width=175 height=245 //p Hope this helps! tee On Oct 4, 2007, at 3:07 PM, David Laakso wrote: The Creative Director is not happy. The left border is missing around his picture (bottom of center panel). http://www.chelseacreekstudio.com/index.html Thanks, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] overwite browser default setting on margins/paddings for Asian character?
Hi, a site I am doing that visitors may leave messages using their own languages such as Chinese and Japanese. Browsers by default giving padding-left (or margin?) for the first line of paragraph, which is fine because it's correct behaviour for these two languages, however the space given for the Japanese text is half the Chinese ones and I wonder if there is a way I can overwrite the default by declaring padding in CSS somewhere? Client wishes the space can be consistent for both. It doesn't look to me I can do so by giving the marigin/padding in the p tag thought (they are already declared). This is an authentic CSS question right? I am asking the question here because chances are, I can get reply from people who are the native of these two languages and have known a way to overwrite it. Here is the screen shot. Please ignore the lines showed in the content area. The page was taken by client from his IE 7 - somehow my code trigged hasLayout bug and is fixed now. Thanks for reading! tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overwite browser default setting on margins/paddings for Asian character?
On Jul 20, 2007, at 6:26 PM, Tee G. Peng wrote: Here is the screen shot. Sorry, forgot the url. tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox magin bug? workaround for margin collapse doesn't work
Hi, this is the first time I stumble on margin problem in Firefox
(all gecko browsers actually), although I can re-work my markup to
make it work the way I wanted, but I really like to know what the
problem is with this issue and if there is a fix for it.
First I thought it was margin collapse bug but after some testing and
and reading on articles I found from google search, I still can't
make it works.
The codes that are in question are in the comment area
http://zhujili.com/index-new.html
ol
li class=msg_left1/li
li class=posterJohn Doe on Jul 7, 11:34 AM/li
li class=msgpcomment here/p
/li
/ol
the '1' and 'John Doe on Jul 7, 11:34 AM' should stay in one line
where the '1' is floated left. Safari, Opera and IE obey the rule
however in Firefox, the John Doe... is being pushed away exactly
51px to the right.
#comments li {margin-left:96px; /* because the gray background image
is 96px wide}
#comments li.msg_left {
background:#cc8c0b;
padding:5px;
float:left;
width:30px;
margin-left:51px; /* this one is causing the problem in Firefox but
I need this declared because I wanted the the box stay 51px away from
the left */
}
I thought it was margin collapse bug and had tried adding 'border'/
padding to elements (one at a time) that are associated to the
comment area, none of them work.
Your help is greatly appreciated!
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox magin bug? workaround for margin collapse doesn't work
On Jul 19, 2007, at 6:15 PM, Philippe Wittenbergh wrote:
It is a bug in Gecko. [1]
Here is your list, simplified.
http://dev.l-c-n.com/_temp/moz-egde.html
The top one is wrong, the bottom one is fixed.
li.poster {-moz-float-edge:content-box;}
does all the magic.
Philippe, thanks for the timely response. Was about to give up this
and use another way to make it work by moving the margin left to 'ol'
and than hack the paddings/margins in the li classes.
See this, almost close (still need a few tweaking to make it pixel
perfect) but not very desireable for me as I needed to add an empty
div for the bottom background image. Not a pretty sight for the last
comment box also.
http://zhujili.com/index-new2.html
somthing like this:
#comments ol {margin-left:50px;}
#comments li.msg {background:#272A2B url(images/curve.jpg) no-
repeat right bottom;
margin-left:47px;}
Another way I could make it work is structure as such
li class=posterspan class=number1spanJohn Doe on Jul 7,
11:34 AM/li
li class=msgcomment here/li
Ok, for learning's sake, which one could be more desirable as far as
CSS coding concerned?
The mozilla proprietary is a quick fixed and a good trick for me to
learn but it's a hack after all isn't that? I read posts from the
bugzilla link you provided, it's an old bug still not being fixed, so
is there good to use the hack and hoping that one day it will get
fixed?
Thanks also for the comment on the list construction not being
semantic, how embarrassing for me you will say that as I just told
someone again semantic markup goes hand in hand with css coding
again, I will ask the question but can you kindly move your chair
180% degree facing the wsg list so that you can give me your thought
and opinion?
Many thanks!
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form submit button background image through CSS - Safari
On Nov 10, 2006, at 2:30 PM, Stephan Wehner wrote:
button type=submit class=submit alt=LoginLOGIN/button
works ok. Although I can't control Internet Explorer stretching the
background image.
Firefox / Safari look better.
Thanks all !
Stephan
Hi Stephan, I remember first time I used button type/button for
submit button by placing the image as background, it resulted the
same problem you have. So I changed it to this instead and it works
for ALL browsers:
.submit {
width 62px /*width for you actual button*/
height: 25px; /*height for you actual button*/
border: none;
}
p.s. HTML validator will warn you if width and height attributes are
declared in the input, so to prevent the image button being
stretched in some browser,actual attributes for width and height in
the css are needed!
and the markup
input type=image src=login.png alt=ready to login
class=submit value= /
regards,
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form submit button background image through CSS - Safari
On Nov 9, 2006, at 5:08 PM, Stephan Wehner wrote:
With HTML like this
input class=submit value= type=submit
and CSS like this
.submit {
background-image: url(login.png);
width: 62px;
height: 25px;
text-indent: -999em;
border: none;
}
I find it displays well in Firefox 2.0 and IE 6.
But not in Safari 2.0.4
Hi Stephan, use this instead:
.submit {
width 62px
height: 25px;
border: none;
}
and the markup
input type=image src=login.png alt=ready to login
class=submit value= /
regards,
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :hover in IE7 / IE6
Hi
On Nov 7, 2006, at 6:08 PM, Jonathan Berry wrote:
Someone hijacked my thread! Here is my reply. Can anyone help?
Unfortunately, no one seemed to read my email in entirety. My point
was that
I had a working CSS on the first site, IE7 and IE6, and wanted to
duplicate
the effect on the other site. Can someone please review the CSS and
tell me
what I did differently? Thanks again!
Hi Jonathan, no one hijacked your thread :) I saw Brad has already
answer you post, and don't get upset when you don't get an answer
because it's either no one can help you yet or you are not being very
specific with your question, so people move on... This is a very busy
list and everybody has a busy life with his own 'I can't get IE
works' problem, so to let other helps you, the first rule is help us
so that we are be able to help you: be very specific, point out what/
where exactly in the area you need help for, if possible, provide the
code, so that whoever willing to take a look at you page can easily
find where to look, and if you are very new to CSS, do mention it
because otherwise most people would assume you know pretty much what
you are doing and give you a 'do this and take-it-from-here' answer.
Anyhow, is hover pseudo-class effect for horizontal tabs you want to
duplicate to other site?
Here are the codes:
#tabsunder ul li a:hover, #tabsunder ul li a:focus, #tabs ul li
a:hover, #tabs ul li a:focus, #tabs2 ul li a:hover, #tabs2 ul li
a:focus{
color: #fff;
background-color: #369;
}
However I can't tell what you want to do with the above code by
looking at this page http://sdasf.org/cms/index.php?id=9,36,0,0,1,0)
or what you did differently. You need to tell us where exactly you
want the hover effect for in the new page.
Regards,
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image problem
Hi, I am doing a page that I can't change the markup and source order
(think CSS zen garden!), and is facing a problem with background image.
The markup looks like so
div id=wrap
divcontent goes here /div
divmore content ... /div
div id=footer pwith background image in the footer div /p/div
/div
CSS:
#wrap {
background: url(images/content-bg.png) repeat-y ;
width:914px;;
margin:80px auto 0 auto;}
#footer {
clear: both;background: url(images/ftr-bg.png) no-repeat left bottom;
text-align: center;}
The wrapper background image goes all the way down which is great
but it goes beyond the footer. I need the footer image sticks to the
bottom.
Can't show the page here but happy to send the url off list.
Any pointer greatly appreciated.
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] margins/paddings issue with caption, which browser renders correctly?
Hi, I have a table that has 16px left margin , I want the caption align with table, but in Firefox it doesn't move 16px away. If I declare 16px left padding or margin in caption, it works but in Safari and Opera, it becomes 32px. Which browser(s) is correct? How do I make it work the way I wanted ? thanks! tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] taming the tabs that follow a table! Really desperate!
I have a layout that should look exactly like so http://project.lotusseedsdesign.com/sh1/ss.jpg and is displaying fine in Firefox (Mac only) with span classes for the tabs: http://project.lotusseedsdesign.com/sh1/follows-1018-span.html http://project.lotusseedsdesign.com/sh1/follows_2.css Span classes for the above tabs are not semantically correct and I really like not to use it if I can get the result client needed in LI. But I can't, although it looks a lot closer but the first tab background color isn't able to overlap the table's top border. Here is the LI classes version http://project.lotusseedsdesign.com/sh1/follows-1018-li.html http://project.lotusseedsdesign.com/sh1/follows_1.css I also try absolute position for the tab div. Could get one browser work but not the other. Really run out of idea! Any help and pointer greatly appreciated! tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] why margin-top/bottom don't work for span class?
Hi, this is not the first time I have the similar problem that the
margin top and bottom have no effect for inline span class.
http://project.lotusseedsdesign.com/sh1/follows-1018-span.html
for the above page, I declared margin-left: 30px;margin-top: 500px;
for the following span class, and the margin top doesn't work.
P/s. I don't really want the tab drops 500px below, simply want to
make a point here so you can see it clearly that it truly doesn't work.
div.table_follows span.unselected {
color: #fff;padding: 8px 15px 9px 15px;
background: #F3918E;font-size: .95em;
margin-left: 30px;margin-top: 500px;
border-top:9px solid #fff;
border-left: none;
border-right: none;}
thanks!
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] why margin-top/bottom don't work for span class?
Hi Alex, thanks for the quick response. On Oct 18, 2006, at 6:42 AM, Alex Bienz wrote: span is an inline element, and top and bottom paddings and margins don't apply to inline elements. But according to my example, it does work for top/bottom padding. In the example I have background color declared, when I increase pixels for top/bottom padding, the 'box' expands vertically. tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] tricky float.can you take a look please
Hi, I have a difination list that is wrapped in a div class and
shows up fine when it's on it's own page.
http://project.lotusseedsdesign.com/111.html
but if I insert into a page that is full with floated divs, the first
set of difination list drops to the bottom. I know it's to do with
float, but can't figure out why.
http://project.lotusseedsdesign.com/follows-sidebar.html
here is the css
div.follows_wrap { border: 1px solid #d6d6d6; padding: 0.8em;
margin: 0 !important;}
div.follows_wrap p {text-align: right; font-size:.85em;padding-
bottom: 10px; margin:0;clear:right;}
div.follows_wrap p.seeall {text-align: left; font-size:.85em; padding-
top: 16px; padding-bottom: 0;clear: right;margin: 0}
dl.follows {margin: 0;padding:0;width: 90%;}
dl.follows dt {float: left;clear: left;width: 26px;margin-bottom: 5px;}
dl.follows dd.rating {float: right;text-align: right;width: 28%;}
dl.follows dd.rating a:link {color: #3689d9;text-decoration: none}
dl.follows dd.follower {float: left;padding: 0 0 0 10px;width:
50%;margin:0;font-size: 90%;}
div.follows_wrap a, dl.follows dd.follower a:link {color:
#ff4445;text-decoration: none}
If I remove the 'clear:left' from 'dl.follows dt', it works fine but
messes up the positioning which is ever worse.
p/s.
I need help, and I know I should be grateful, and ready to take
whatever criticism you have for my code, however, I appreciate you
don't ask me to fix the follows-sidebar.html validation errors
before you willing to take a second look as I am only responsible
for (partial) CSS coding and I can't keep fixing errors for free, on
top of that, whatever error free code/markup I submitted, will be
full of validation errors after the programmars, users adding their
stuff when the page goes live.
That being said, I am confident those errors isn't causing the problem.
While I am at it, I also have a not so relevant question. You notice
that I declared zero margin in almost every element; there is already
universal declarations for margin and padding, if I use ID element,
it honors the universal declarations, but with classes, it won't. I
only notice this behavior after I took over the css coding for this
site. Thought universal declaration has highest specificity, how come
it doesn't work when a class element is used?
Thanks!
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] tricky float.can you take a look please
On Oct 8, 2006, at 8:10 AM, Tee G. Peng wrote:
Hi, I have a difination list that is wrapped in a div class and
shows up fine when it's on it's own page.
http://project.lotusseedsdesign.com/111.html
but if I insert into a page that is full with floated divs, the
first set of difination list drops to the bottom. I know it's to do
with float, but can't figure out why.
http://project.lotusseedsdesign.com/follows-sidebar.html
Forgot to mention, about two weeks ago, I added the right column for
wishlists, tags, the same thing happened to 'wishlists' div, that the
whole section, starts from 'christmas' dropped to the bottom, I was
able to fix it with a br style=clear:right / before the
wishtlists' closing tag. This time the same trick doesn't work, so I
am guessing it must be clearing thing winthin the 'dl.follows'.
Regards,
tee
here is the css
div.follows_wrap { border: 1px solid #d6d6d6; padding: 0.8em;
margin: 0 !important;}
div.follows_wrap p {text-align: right; font-size:.85em;padding-
bottom: 10px; margin:0;clear:right;}
div.follows_wrap p.seeall {text-align: left; font-size:.85em;
padding-top: 16px; padding-bottom: 0;clear: right;margin: 0}
dl.follows {margin: 0;padding:0;width: 90%;}
dl.follows dt {float: left;clear: left;width: 26px;margin-bottom:
5px;}
dl.follows dd.rating {float: right;text-align: right;width: 28%;}
dl.follows dd.rating a:link {color: #3689d9;text-decoration: none}
dl.follows dd.follower {float: left;padding: 0 0 0 10px;width:
50%;margin:0;font-size: 90%;}
div.follows_wrap a, dl.follows dd.follower a:link {color:
#ff4445;text-decoration: none}
If I remove the 'clear:left' from 'dl.follows dt', it works fine
but messes up the positioning which is ever worse.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] dt styling, mess in IE, help please
Hi, if you can be so kind help me look at this page. http://www.lotusseedsdesign.com/orangutan/user.html It's a total mess in IE and I haven't a clue how to begin to fix it. Spent almost an hour tweaking the padding, margin, adding position relative and display inline, all those IE bug symptoms I could think, still no way near close. Both CSS and HTML are validated. Much appreciated! tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dt styling -FIXED!
http://www.lotusseedsdesign.com/orangutan/user.html It's a total mess in IE and I haven't a clue how to begin to fix it. The dd in the middle must not have width:30em, and the dd on the right do need display:inline (for IE6) Ingo Hi, thank you for looking. Ingo helped me a while ago and the page has been fixed. I am new to this list and a bit confused with how reply works here, didn't realize I wrote to people who tried to help. Will be more careful next time. Cheers, tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] floated box, negative margin IE
Hi, I think I have just caught the train of google shok horror thread of negative margin :) I usually try to avoid the negative margin because never learn how to make it displays nicely in IE, but there is this job I am doing now, requires a negative margin - I can't think of other easy way to make it the way client wanted it, and I try to avoid the absolute positioning. Here is an example page what needs to be done and you can see the CSS in the html file http://lotusseedsdesign.com/temp/floatedbox.html the image below the wrap div is the screen shot from IE. Basically I have the margin-top: -30px in the div.signup. The example float page from W3C that Gunlaug Sortun posted, in the example 3, second example doesn't work in IE http://www.w3.org/Style/CSS/Test/float-margin Is there no fix? I don't want to use CSS hack please. Thanks! tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pixel perfect navigation tabs needed
On Jul 27, 2006, at 5:32 AM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Without seeing your styles or your complete mark-up, it's difficult to say. Hi Chris, Thanks for the quick response. My codes does valid. This is the first time I posted in CSS-list, I don't know why the CSS mail list software added my markup with pRENAMED_. I used to put a . in front of my markup because I was told, so that other who read email in HTML mode can read my markup, but I was just told by someone else from other list the other day that it won't matter with the .. Now I don't know whom to listen. I did provide the url, it seemed you didn't read my whole message before you response :) Anyway, here is the url and css link, if you still like to have a look. http://lotusseedsdesign.com/temp/home.html http://lotusseedsdesign.com/temp/css-files/global_1.css and the browsercam screen shot http://www.browsercam.com/public.aspx?proj_id=271980 Thanks! tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pixel perfect navigation tabs needed
On Jul 27, 2006, at 5:48 AM, Christian Heilmann wrote: Hi, I am driving myself crazy ... to be pixel perfect That is all to be said about this. If you make your header expand with the amount of content in it and add your tab list as the last element in it you don't have a problem at all. Yes, there might be a difference in the overall height of the header across different browsers, but at least you can resize the font without blowing the layout to smithereens. Booktip: Bulletproof Web Design by Dan Cederholm Hi Christian, It's almost sounds defensive to say this... this is a messy job... I only asked to code for the header; the whole page is already done, full of validation errors, horrible markup and codes and I have to code to the spec. I will have to fix it for free if I really care ( 99% of the time I do care.) Although I am guilty for divites, this page reflects better to my CSS knowledge http://sapotek.com/ just don't run the validation for inner page though as I was only responsible for setting up master template. I will have to rethink how to code the header per your suggestion. Thanks! I do have the Bulletproof Web Design book, haven't finish chapter 2 :) tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
