Re: [css-d] IE7 list jumps on hover
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Harry Love
Sent: 02 October 2006 23:40
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] IE7 list jumps on hover
It seems to be a position relative problem.
This seems to do the trick
#menu #linklist_nav li {
display: inline;
/*position: relative;*/
top: -4px;
}
Regards
Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.407 / Virus Database: 268.12.11/460 - Release Date: 01/10/2006
__
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] Rigt align text fields
On 03/10/2006 00:15, Deckard wrote:
But as you can see, the lines are one line below the text :(
The mind bogles :(
http://www.wordlife.eu/wizard.php
Floating elements makes them sit adjacent to the object below them in
the markup, so a simple fix would be to place the inputs above their
labels in the markup.
A better fix would be to add a negative margin-top to the inputs:
.oneField input {
margin-top: -1.4em;
}
And make sure you force the containing spans to float contain the
elements (although you should be using block level elements, since
inline elements are invalid in XHTML Strict):
http://www.ejeliot.com/blog/59
__
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] @import or link href=css/buttons.css /
Is an @import in between the style tags considered a better technique link href=myfile.css rel=stylesheet type=text/css / You thoughts please. R. __ 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] @import or link href=css/buttons.css /
When you use @import you hide the css from browsers that do not support it well (hello N4). When you use link, all browser will access the css. I my daily work I no longer cater for N4 unless the majority audience uses it. It seems that IE5/5.5. is becoming the new N4. One way link rel comes in useful is to prevent the IE 'flash of unstyled content' bug, but in nearly all cases I use @import. __ 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] @import or link href=css/buttons.css /
When you use @import you hide the css from browsers that do not support it well (hello N4). When you use link, all browser will access the css. I my daily work I no longer cater for N4 unless the majority audience uses it. It seems that IE5/5.5. is becoming the new N4. One way link rel comes in useful is to prevent the IE 'flash of unstyled content' bug, but in nearly all cases I use @import. As you can prevent FOUC with a script tag, that is not really that much of an issue. I like @import, as it allows for modularization of CSS much more than LINKs do. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ 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] @import or link href=css/buttons.css /
[EMAIL PROTECTED] wrote: Is an @import in between the style tags considered a better technique link href=myfile.css rel=stylesheet type=text/css / The question is: better for what? All valid techniques are 'better' if they get the job done, and the only difference is that especially older browsers, but also some new ones, may not understand some of the newer techniques/properties, or they may handle them wrong. Myself, I always use 'link' in page-head and '@import' in stylesheets. Then I organize my stylesheets so they are '@media' dependent. This is efficient and 'gets the job done', while it also shuts out a number of older browsers from my styles. I can then reveal or hide styles for older browsers if I have to, without leaving the stylesheets. regards Georg -- http://www.gunlaug.no __ 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] can someone tell me why I am getting theses warnings?
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.blue-fly.co.uk%2Fjunction%2Fcounselling.php I have a background colour in my body Ross __ 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] can someone tell me why I am getting theses warnings?
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.blue-fly.co.uk%2Fjunction%2Fcounselling.php I have a background colour in my body Yes, you do. But read carefully: validator wants COLOR, not background-color for body: Line : 4 (Level : 1) You have no color with your background-color : body Validator likes to have color and background-color in pairs. Regards, Rimantas -- http://rimantas.com/ __ 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] can someone tell me why I am getting theses warnings?
CSS validator wants you to define a (text-) color every time you define a background color. It's supposed to be for contrast reasons, if I understood correctly. Arno - Original Message - From: [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Tuesday, October 03, 2006 2:57 PM Subject: [css-d] can someone tell me why I am getting theses warnings? http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.blue-fly.co.uk%2Fjunction%2Fcounselling.php I have a background colour in my body Ross __ 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-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] ISO: MovableType or WordPress Guru?
Hello... IN SEARCH OF a developer or programmer FOR HIRE who is fully knowledgeable in deployment of MovableType or Wordpress installations. My apologies, if this is not an appropriate post to this list. A discussion of work, rates, etc., would not be appropriate to the list, so I respectfully request you contact me via private email, address above. Thanks Fred __ 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] float clearing problem
Hello all, I have a page with a left floated menu and a main content area. In the content area I have a series of images that are left floated. Since the text around the images is in some cases very short, I clear the end of the paragraph so that the next paragraph is lined up with the next image. If my explanation doesn’t make any sense you can see the page here: HYPERLINK http://www.easterseals.nb.ca/prog_previewcntr.phphttp://www.easterseals.nb .ca/prog_previewcntr.php This appears to be fine in IE6, however when I view in FF1.5 the first clear in the content, clears down past the left menu, leaving a gap. I thought that a “clear” would only clear within the containing element (div in this case). Is there an easy way to fix this without resorting to extra p tags, margins, etc. in my content? Which browser is displaying the proper behaviour in this case (I’m guessing FF)? Thanks in advance for your help. Matt -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.407 / Virus Database: 268.12.12/461 - Release Date: 10/2/2006 __ 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] float clearing problem
Matt Tibbits wrote:
If my explanation doesn’t make any sense you can see the page here:
HYPERLINK
http://www.easterseals.nb.ca/prog_previewcntr.php
This appears to be fine in IE6, however when I view in FF1.5 the first clear
in the content, clears down past the left menu, leaving a gap.
Matt
You could try this:
#container {
/*width : 772px;*/
width: 774px; change to account for the border in ie
}
#content {
float: left; add
width: 620px; add
margin : 25px /*20px*/0 10px /*170px*/0; delete the horizontal
margin from width bearing container and re-assign to the p and img.
}
Flush left/scatter right will eliminate the rivers in the text.
HTH.
~dL
PS If it works, someone else will have to explain the theory stuff :-) .
--
http://chelseacreekstudio.com/
__
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] Problem- Style Sheet for IE in a Conditional Comment
In my attempts to attach two style sheets- one for Internet Explorer and one for other browsers- I have encountered a problem. On an earlier project, I was able to link one style sheet to handle the presentation on IE by linking it within a conditional comment, which only IE would recognize, and linking a style sheet the conventional way for the look on all other browsers. Yet, for this new TEMPLATE I have been unsuccessful, as the style sheet linked within the conditional comment gets ignored completely. EVERY TIME. This doesn't change no matter what order I put them in. I can't understand the inconsistency of this method. Shouldn't it work since it has before? Does the fact that it is a Dreamweaver template have anything to do with it? Please help. Page: http://www.accd.edu/spc/distance/test/about.html CSS(IE): http://www.accd.edu/spc/distance/test/style/iestyle.css CSS(Other): http://www.accd.edu/spc/distance/test/style/glstyle.css __ 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] Problem- Style Sheet for IE in a Conditional Comment
On 03/10/2006 16:27, Rodney Toliver wrote: Yet, for this new TEMPLATE I have been unsuccessful, as the style sheet linked within the conditional comment gets ignored completely. Your version of IE might not be exactly matching 6--try something like: !--[if GT IE 5] and see if that helps. Also, to quote PPK: Note however, that if you use multiple Explorers on one computer, the conditional comments will render as if all these Explorer versions are the highest Explorer version available on your machine (usually Explorer 6.0). Just in case. __ 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] Problem- Style Sheet for IE in a Conditional Comment
Rodney Toliver wrote: In my attempts to attach two style sheets- one for Internet Explorer and one for other browsers- I have encountered a problem. Page: http://www.accd.edu/spc/distance/test/about.html CSS(IE): http://www.accd.edu/spc/distance/test/style/iestyle.css CSS(Other): http://www.accd.edu/spc/distance/test/style/glstyle.css Try this (assuming path) !--[if lt IE 7] link href=../style/iestyle.css rel=stylesheet type=text/css / ![endif]-- Might want to use a meaningful title for your document, and validate it. :-) HTH ~dL -- http://chelseacreekstudio.com/ __ 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] Using divs transparent corners for rounded images... but
I am having a problem with this page:
http://help.hyperarts2.com/papilia/
Near the bottom is a brown empty image.
The basic idea of what I'm trying to do is have a div (.roundimg)
that contains an image tag (both the div image with no dimensions
specified), and 4 divs that are absolutely positioned in each corner
(.roundimg is positioned relative). The 4 corner divs have a
background image that is a rounded corner with transparency so that
the image in .roundimg displays with rounded corners. For some
reason, the .roundimg is getting pushed out on the right about 10px,
messing up the concept.
.roundimg {
border:0; margin:0; padding:0;
position:relative;
float:right;
}
Then the html:
div class=roundimgdiv class=top-l/divdiv class=top-r/
divdiv class=bot-l/divdiv class=bot-r/divimg src=_img/
64x64.gif/div
The top-l, top-r, etc. divs are positon-absolute at the four corners
and they contain an aliased rounded corner to create the rounded
corner effect on the image. Styled:
.top-l, .top-r, .bot-l, .bot-r {
position:absolute;
width:12px; height:12px;
}
.top-l {
background:transparent
url(/papilia/_img/top-l.gif) no-repeat;
top:0; left:0;
}
.top-r {
background:transparent
url(/papilia/_img/top-r.gif) no-repeat;
top:0; right:0;
}
.bot-l {
background:transparent
url(/papilia/_img/bot-l.gif) no-repeat;
bottom:0; left:0;
}
.bot-r {
background:transparent
url(/papilia/_img/bot-r.gif) no-repeat;
bottom:0; right:0;
}
For some reason, if I don't specifiy a width for the .roundimg div,
you see the result, with the div being expanded about 10px wider than
the image that's in it. Here's a link to the css:
http://help.hyperarts2.com/papilia/_inc/papilia.css
I'm so close to getting this sorted out. Thanks so much for any
assistance!
Tim
. !
.
Tim Ware .. HyperArts .. 201 4th Street, Ste 404 .. Oakland CA 94607
t: (510) 339-6084 .. f: (510) 339-6086 .. e: [EMAIL PROTECTED]
http://www.hyperarts.com
Map
__
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] Using divs transparent corners for rounded images... but
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Tim Ware Sent: 03 October 2006 16:55 To: CSS Discuss Subject: [css-d] Using divs transparent corners for rounded images... but I am having a problem with this page: http://help.hyperarts2.com/papilia/ Near the bottom is a brown empty image. The basic idea of what I'm trying to do is have a div (.roundimg) that contains an image tag (both the div image with no dimensions specified), and 4 divs that are absolutely positioned in each corner (.roundimg is positioned relative). The 4 corner divs have a background image that is a rounded corner with transparency so that the image in .roundimg displays with rounded corners. For some reason, the .roundimg is getting pushed out on the right about 10px, messing up the concept. Tim Not sure what's going here, but you should check out the validator at: http://validator.w3.org/check?uri=http%3A%2F%2Fhelp.hyperarts2.com%2Fpapilia %2F where apart from there being several markup errors, you have some oddly named classes, that don't appear in the source code and we certainly wouldn't wish to quote in the forum!! Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.407 / Virus Database: 268.12.12/461 - Release Date: 02/10/2006 __ 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] Problem- Style Sheet for IE in a Conditional Comment
Rodney, you're looking for the IE stylesheet one folder above its true position. Try this: @import url(style/iestyle.css); djn Rodney Toliver wrote: Page: http://www.accd.edu/spc/distance/test/about.html CSS(IE): http://www.accd.edu/spc/distance/test/style/iestyle.css CSS(Other): http://www.accd.edu/spc/distance/test/style/glstyle.css -- Dejan Kozina Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 http://www.kozina.com/ - e-mail: [EMAIL PROTECTED] __ 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] Using divs transparent corners for rounded images... but
ohmygod. That was a test during high frustration. It relates to nothing and I'll remove it! And then I'll use the validator. Thanks for that. The offending class is now history! And I closed all the image tags and now the page validates. But there's still The Problem. Thanks! Tim . ! . Tim Ware .. HyperArts .. 201 4th Street, Ste 404 .. Oakland CA 94607 t: (510) 339-6084 .. f: (510) 339-6086 .. e: [EMAIL PROTECTED] http://www.hyperarts.com Map On Oct 3, 2006, at 9:10 AM, Ian Young wrote: From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Tim Ware Sent: 03 October 2006 16:55 To: CSS Discuss Subject: [css-d] Using divs transparent corners for rounded images... but I am having a problem with this page: http://help.hyperarts2.com/papilia/ Near the bottom is a brown empty image. The basic idea of what I'm trying to do is have a div (.roundimg) that contains an image tag (both the div image with no dimensions specified), and 4 divs that are absolutely positioned in each corner (.roundimg is positioned relative). The 4 corner divs have a background image that is a rounded corner with transparency so that the image in .roundimg displays with rounded corners. For some reason, the .roundimg is getting pushed out on the right about 10px, messing up the concept. Tim Not sure what's going here, but you should check out the validator at: http://validator.w3.org/check?uri=http%3A%2F%2Fhelp.hyperarts2.com% 2Fpapilia %2F where apart from there being several markup errors, you have some oddly named classes, that don't appear in the source code and we certainly wouldn't wish to quote in the forum!! Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.407 / Virus Database: 268.12.12/461 - Release Date: 02/10/2006 __ 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] Problem- Style Sheet for IE in a Conditional Comment
Thanks Mr. Wright for your prompt response. Still nothing. I edited the statement as you suggested though. The page responds to the style sheet that I attached in the conventional form of attaching style sheets in both IE and Firefox. However, this one that I wanted to be recognized by IE so that it would render the page differently is still ignored. I had been using the conditional comment since it was the only method that really worked for me in the past when attaching two different style sheets. Would there be a better way to do this? It seems that when I try to link two style sheets, IE will ignore the one I have designed for it and choose the other entirely or certain styles from that sheet. It doesn't even matter if I place the other one last. If I place the one that I have designed for IE last, it affects the other browsers. If I put it first within a conditional comment, IE ignores it. If I put it last, thinking that will make it the priority style sheet, it still ignores it. How do any of you attach two style sheets to bring browsers into harmony? -Original Message- From: Bradley Wright [mailto:[EMAIL PROTECTED] Sent: Tuesday, October 03, 2006 10:50 AM To: Rodney Toliver Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Problem- Style Sheet for IE in a Conditional Comment On 03/10/2006 16:27, Rodney Toliver wrote: Yet, for this new TEMPLATE I have been unsuccessful, as the style sheet linked within the conditional comment gets ignored completely. Your version of IE might not be exactly matching 6--try something like: !--[if GT IE 5] and see if that helps. Also, to quote PPK: Note however, that if you use multiple Explorers on one computer, the conditional comments will render as if all these Explorer versions are the highest Explorer version available on your machine (usually Explorer 6.0). Just in case. __ 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] Problem- Style Sheet for IE in a Conditional Comment
WOW... That simple? You found it. That was like calling the TV repair man and him finding the TV unplugged. Thanks a million. I'd still be interested in knowing how you and others link multiple style sheets to a page. -Original Message- From: Dejan Kozina [mailto:[EMAIL PROTECTED] Sent: Tuesday, October 03, 2006 11:20 AM To: Rodney Toliver Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Problem- Style Sheet for IE in a Conditional Comment Rodney, you're looking for the IE stylesheet one folder above its true position. Try this: @import url(style/iestyle.css); djn Rodney Toliver wrote: Page: http://www.accd.edu/spc/distance/test/about.html CSS(IE): http://www.accd.edu/spc/distance/test/style/iestyle.css CSS(Other): http://www.accd.edu/spc/distance/test/style/glstyle.css -- Dejan Kozina Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 http://www.kozina.com/ - e-mail: [EMAIL PROTECTED] __ 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] Div that fills in the empty space on a page
I have content that spans about 400px from the top of the page to the end
of the content.
I want to have a nice footer exactly below the content all the way to the
bottom of the page, but without enabling the scroll bars.
Right now I have it working with height:1000px; but it causes the page to
scroll.
Is there a way in CSS to have the div run all the way to the bottom of the
visible space? I tried height:100%; too and that didn't do any good
either. It's just a background color with a 1px border at the top.
body
div id='header'/div
div id='content' ... /div
div id='footer'/div
/body
#footer {
background-color:#058;
height:1000px;
border-top:1px solid black;
margin-top:5px;
}
Beckman
---
Peter Beckman Internet Guy
[EMAIL PROTECTED] http://www.purplecow.com/
---
__
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] works in IE6, not in IE7
.clearfix { display: inline-block;}
_
Share your special moments by uploading 500 photos per month to Windows Live
Spaces
http://clk.atdmt.com/MSN/go/msnnkwsp010001msn/direct/01/?href=http://spaces.live.com/signup.aspx
__
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] float clearing problem
~davidLaakso wrote:
http://www.easterseals.nb.ca/prog_previewcntr.php
This appears to be fine in IE6, however when I view in FF1.5 the
first clear in the content, clears down past the left menu, leaving
a gap.
PS If it works, someone else will have to explain the theory stuff
:-) .
Yes, it works, but you didn't quite finish it ;-)
I'll start by refining David's float-solution a bit, so it becomes this...
#content {float: right; width: 580px; margin: 15px 20px 0 -50px;
display: inline;}
...and then I'll explain...
1: a clearing-element will clear everything within the same 'block
formatting context'[1], so FF1.5 and Opera and other standard-compliant
browsers do the right thing since the #content and the #leftcol is
inside the same 'block formatting context' - #container.
IE-win doesn't know much about standards, and it has its own block
formatting called 'Layout'[2], which saves cases like this even when
they shouldn't - causing the illusion that IE-win actually works better.
The fact is that IE-win doesn't work at all when its behavior is
compared with CSS-standards.
2: by turning #content into a float, a new 'block formatting context'[1]
is established, so clearing-elements inside #content won't react on
anything outside #content. That's what the standards say, and even
IE-win handles a float correct in this respect albeit it's IE's own
'Layout' bug that creates the effect.
3: I floated #content to the right so it shouldn't rely on the exact
width of #leftcol. The right edge of #container is a more reliable
reference-point.
4: some corrective measures for IE-win are still needed.
a: a negative margin-left: 'margin: 15px 20px 0 -50px;' will add a bit
more playroom on the left side if/when IE-win expands #leftcol when
subjected to font-resizing. Especially important if someone (like me)
tell IE-win to 'ignore font sizes'.
b: 'display: inline;' will cure old IE-win's 'margin-doubling on floats
bug' and make it line up #content correctly.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
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] p tag inside table
table.table-events td p On 03/10/06, Eliana Berlfein [EMAIL PROTECTED] wrote: How do I change the padding on a p tag inside of a table? My table is class .table-events. I have tried .table-events p and .table-events td p, but those don't work. Thank you, Eliana __ 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/ -- http://www.web-buddha.co.uk __ 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] IE6 and negative top margin
I'm working on a tutorial that Eric Meyer did for lynda.com titled CSS Site
Design. IE6 doesn't seem to like the negative top margin for #today. Most
of the navbar disappears, though it works fine in Firefox. What's happening
and what do I need to change to make it work in IE6? Below, I have patched
together a document that isolates the problem area.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
title About Tea: History /title
style type=text/css
/* - generic styles */
body {
margin: 0;
padding: 0;
background: #E3EDC2;
color: #333;
font: small Lucida Grande, Arial, sans-serif;
}
a {
text-decoration: none;
}
a img {
border: 0;
}
p {
margin: 0 0 1em;
}
/* - masthead styles */
#masthead {
margin-bottom: 1.75em;
padding-top: 1px;
background: #ABD240;
}
#homelink {
display: block;
margin: 1em 2em 1em;
padding: 2em 0 0.5em 1em;
background: url(../images/curl.gif) 100% 100% no-repeat;
}
#navlinks {
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #FFF;
}
#navlinks li {
display: inline;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #99C;
font-weight: bold;
}
#navlinks li.last {
border-right: 0;
}
#navlinks a {
color: #D4EC84;
}
#today {
margin-top: -1.66em;
padding: 0 2em 0 0;
color: #FFF;
font-weight: bold;
text-align: right;
line-height: 1;
}
/style
/head
body
div id=masthead
a href=# id=homelinkimg src=images/javacotea.gif
alt=JavaCo Teaa home //a
ol id=navlinks
li class=firsta href=aboutus-ourgoal.htmlabout
us/a/li
liabout tea/li
lia href=#brewing/a/li
lia href=#drinking/a/li
lia href=#products/a/li
li class=lasta href=#contact us/a/li
/ol
p id=today
July 16, 2006
/p
/div
/body
/html
__
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] p tag inside table
Do you use padding to make the space between paragraphs smaller? I
tried your code and the space didn't change.
I put
table.table-events td p {
padding: 0;
}
Thanks,
Eliana
On Oct 3, 2006, at 1:34 PM, Dave Goodchild wrote:
table.table-events td p
__
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] p tag inside table
Space between paragraphs? Use margin in that case. Padding controls space inside the element. -- http://www.web-buddha.co.uk __ 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] Problem- Style Sheet for IE in a Conditional Comment
Thanks Mr. Wright for your prompt response. Still nothing. I edited the statement as you suggested though. The page responds to the style sheet that I attached in the conventional form of attaching style sheets in both IE and Firefox. However, this one that I wanted to be recognized by IE so that it would render the page differently is still ignored. I had been using the conditional comment since it was the only method that really worked for me in the past when attaching two different style sheets. Would there be a better way to do this? It seems that when I try to link two style sheets, IE will ignore the one I have designed for it and choose the other entirely or certain styles from that sheet. It doesn't even matter if I place the other one last. If I place the one that I have designed for IE last, it affects the other browsers. If I put it first within a conditional comment, IE ignores it. If I put it last, thinking that will make it the priority style sheet, it still ignores it. How do any of you attach two style sheets to bring browsers into harmony? Are you sure that the style sheet for IE actually works? Looking at the design, there is little (apart from menus perhaps) that shouldn't work in FF, IE6/7. Maybe best to have your columns working across the browser range and build your nav into that. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.407 / Virus Database: 268.12.12/461 - Release Date: 02/10/2006 __ 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] Pain in the footer (and the side)
Hello list, The (validated) page in question is located here: http://notlimitednyc.com/COSA/footpain.shtml Its (validated) CSS is here: http://notlimitednyc.com/COSA/style/footpain.css Pains: 1. FOOTER: IE7 (7.0b3 on WinXP and 7.0rc1 on WinVista) floats the footer up and over the content that should be above it. 2. FOOTER: Konqueror 3.4.0-5 (Linux Fedora Core 4) shrinks the footer height significantly. 3. FOOTER: Opera 9 (Linux Fc4, OSX10.4, OSX10.3) shrink the footer height even more. 4. FOOTER: IE5 Mac adds an enormous amount of space below the content area above the footer at wider window sizes. 5. RIGHT SIDE: FF 2.0b1 (WinXP, Win2kPro, WinVista, OSX10.4) intermittently refuses to load the second or third image in the column, leaving the space it should take up blank. Complications: a.) The client absolutely requires IE5Mac accommodation. b.) FooterStickAlt did NOT work across the many (33!) browsers that must be accommodated, so I abandoned it. Have any of you Dr's. of CSS a trick or five up your sleeves to help? Many thanks for your kind attention, Leigh __ 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] p tag inside table
I figured out why mine isn't responding. I set the line-height, the margin and the padding all to 0, and nothing happened. I realized that there is a p tag for the whole page that sets these things. When I remove that, the p shrinks to 0. Shouldn't the table one take precedence over the previous one? The first one is an id and the second one is a class. Does that make a difference? Thanks, Eliana On Oct 3, 2006, at 2:15 PM, Dave Goodchild wrote: Space between paragraphs? Use margin in that case. Padding controls space inside the element. -- http://www.web-buddha.co.uk __ 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-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] floating fields
Is it possible, in Internet Explorer 6, to make fields expand and contract based up focus, without changing the rest of the layout of the page? I know it would require JavaScript, because IE6 doesn't support :hover on non-anchor elements, but I've had little luck with using z-index to float an element up above the rest of the layout and thus having everything else on the page jump around. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ 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] IE6 and negative top margin
Mike Strong wrote:
IE6 doesn't seem to like the negative top margin for #today. Most of
the navbar disappears, though it works fine in Firefox. What's
happening and what do I need to change to make it work in IE6?
Unless I've overlooked something; the addition of...
#today {position: relative;}
...should make IE6 come to its senses. I didn't test your example.
regards
Georg
--
http://www.gunlaug.no
__
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] p tag inside table
ID trumps class. Eliana Berlfein wrote: I figured out why mine isn't responding. I set the line-height, the margin and the padding all to 0, and nothing happened. I realized that there is a p tag for the whole page that sets these things. When I remove that, the p shrinks to 0. Shouldn't the table one take precedence over the previous one? The first one is an id and the second one is a class. Does that make a difference? Thanks, Eliana On Oct 3, 2006, at 2:15 PM, Dave Goodchild wrote: Space between paragraphs? Use margin in that case. Padding controls space inside the element. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] deactivating bullets in firefox
Does anybody know how to deactivate bullets in firefox? I think they occur because I am using lists... but they don't show up in int. explorer. Thanks, Raumin Dehghan __ 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] Using divs transparent corners for rounded images... but
Tim Ware wrote:
[...] But there's still The Problem.
... and to finish this thread:
On Oct 3, 2006, at 19:12 NL time, Francky wrote off-list:
Hi Tim,
I'm sending this off list for I'm at my office now, while my css-d
login is from home.
The gap is exactly 8px.
The 64x64 img is inside the div class=roundimg.
The div class=roundimg is inside a div class=casematerial-2.
And in the stylesheet is asked: .casematerial-2 img {margin-right:
8px;}.
Cascade! :-)
So: .roundimg img {margin: 0 !important;} is solving it.
Greetings,
francky
And then:
On Oct 3, 2006, at 19:46 NL time, Tim replied:
Thanks Francky! That was the ticket.
I think mine was a boneheaded oversight
and I appreciate your shining a light on it.
Best, Tim
End good, all good!
francky
PS the way I discovered it:
* In the Edit CSS sidebar in FF [1] I put a 1px solid red border
around the roundimg-div. Result on the fly!- Determined the gap
was inside the div, so it must be must be some margin or padding
inside, and not the positioning of the div itself.
* Again in the sidebar: giving a green background color instead of
the transparent background color to the corner images. Result:
corners are fine and in the right (right) place, only just in the
gap part of the div, and therefore not visible.
* Made a screenshot, and opened that in a paint program: saw the img
was still 64x64 and not cut off. Determined the gap was 8px tall.
Then the simple trick for simple minds like me:
* The View CSS button in the Dev toolbar, and made a quick search
for the string 8px. - After 2 false alarms (18px's discovered
somewhere) determined that .casematerial-2 img {margin-right: 8px)
must be the culprit.
* Back to the page, changed the css in the sidebar, and determined:
no doubt, indeed!
Within 2.3147 minutes, it is taking more time to write this down! ;-)
[1]
The big bug hunting time saver: Chris Pederick's Web Developer
extension http://chrispederick.com/work/webdeveloper/.
It adds a a toolbar to the browser with a scala of wonderful web
developer tools.
__
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] deactivating bullets in firefox
Raumin Dehghan wrote:
Does anybody know how to deactivate bullets in firefox?
I think they occur because I am using lists...
but they don't show up in int. explorer.
Thanks,
Raumin Dehghan
Hi Raumin,
Probably not showing in IE because of margins/paddings styles. The
official way is:
ul { list-style-type: none; }
or, shorthand:
ul { list-style: none; }
See the w3c css rules about lists:
http://www.w3.org/TR/CSS21/generate.html#lists
Greetings,
francky
__
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] floating fields
[EMAIL PROTECTED] wrote: Is it possible, in Internet Explorer 6, to make fields expand and contract based up focus, without changing the rest of the layout of the page? I know it would require JavaScript, because IE6 doesn't support :hover on non-anchor elements, but I've had little luck with using z-index to float an element up above the rest of the layout and thus having everything else on the page jump around. Hi Marc, Without a page to see, only a general anwer is possible: you mean kind of this http://home.tiscali.nl/developerscorner/css-discuss/showathover.htm? It is using an empty, not clickable a. If desired, with css it can be styled as normal text. But then: how does the visitor know that there is something to hover? Greetings, francky __ 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] Div that fills in the empty space on a page
Peter Beckman wrote: I have content that spans about 400px from the top of the page to the end of the content...] I want to have a nice footer exactly below the content all the way to the bottom of the page, but without enabling the scroll bars...] Beckman Your users may need a pair of scissors to cut off some of the bottom at lower screen resolutions :-) . FWIW, see: http://www.chelseacreekstudio.com/ca/cssd/height-100-percent.html (based on code by Paul O'Brien) Regards, ~dL -- http://chelseacreekstudio.com/ __ 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] Can't nail this one little element
I of course would be done updating this site if it was not for one tiny issue. Directly above the right hand home button there is something causing a space to poke out on both IE and FF. I tried a dozen different things, but could not isolate the issue. Any ideas how to fix it? Thanks in advance. http://www.lice-control.com/index.html Adam __ 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] Validation assistance
Hello folks! I tried to validate a page and got a particular error. Specifically, because I'm using a strict html doctype, it didn't like the final in the css link. link rel=stylesheet type=text/css href=test.css / I followed the help info on this and it says that the final is not necessary, but that seems highly irregular to me. It also said there is no need for /head or /body tags, but it doesn't hurt to have them and it doesn't fail to validate if you include them. It seems like if I delete that character, it will somehow cause problems somewhere down the line. Other than that and lacking a UTF8 charset statement, the page validates fine. Would or has anyone else bothered with fixing this? Delos __ 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] Validation assistance
* Delos Woodruff wrote: I tried to validate a page and got a particular error. Specifically, because I'm using a strict html doctype, it didn't like the final in the css link. link rel=stylesheet type=text/css href=test.css / If you use HTML, use link rel=stylesheet type=text/css href=test.css If you use XHTML, use link rel=stylesheet type=text/css href=test.css / -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ __ 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/
