Re: [css-d] Started over - new questions
Marc Funaro wrote:
http://nyslittreedata.advantex.net/new/default/default.htm
I have renamed my div/ids and cleaned up a bunch of naming
conventions, and I'm using a little javascript called Nifty Corners
to round out the boxes where I wanted to. (yes, I cheated... So
punch me later ;)
No problems with javascript-generated corners here :-)
You should however test and trim so it's looking alright if javascript
isn't supported.
This latest version looks fine as long as there's enough content in
the white area in the middle, but as you can see, in Firefox, without
enough content, the left column and main column do not extend down
to the footer. However, in IE 6, they do... Strange.
I used 'min-height' and an 'IE min-height' hack in my example-CSS. And,
yes, it is an acceptable method.
I also used 'display: table' on the main container for the two columns -
which will make it expand like a table does even with a set 'height'.
IE6 doesn't understand that property, but it doesn't matter since IE6
will expand height anyway because of a bug. A bit worse with IE7, which
doesn't understand any of it either way.
Your latest addition of 'min-height' does not take the rounded corners
into account. See 'CSS suggestions' below.
Is this a case where I need to use the technique found at
http://www.alistapart.com/articles/fauxcolumns/ ...? And if so,
should I create an image to be applied to the BODY to fill in behind
everything?
That is one option - if the 'min-height' solution doesn't work properly.
Suggestions with this latest one are welcome -- am I closer to a
good way of doing it now than I was earlier? (I hope so!)
Much closer, but you've forgotten to take care of source-code quality.
http://validator.w3.org/check?uri=http%3A%2F%2Fnyslittreedata.advantex.net%2Fnew%2Fdefault%2Fdefault.htm
Good source-code will not necessarily make it render better/different in
any graphical browser, but it will prevent 'tag-soup' related problems
and ease maintenance.
The CSS validator can't get through to your stylesheet because of errors
in the source-code, so at least get those UPPERCASE turned into
lowercase...
link href=Default.css rel=stylesheet type=text/css /
...will work better - and close the link-element properly for XHTML.
Especially those li class=leaf looks suspicious, as li can't be
used outside ul or ol. You're using divs as sub-containers there,
and there shouldn't be the need for a single div inside #LeftNav, IMO.
Use proper unordered lists, and style them to look identical to what
you've got now.
Use proper h1 - h5 and p for headlines and paragraphs, and style
them to taste. That will prevent even more divitis and make that
source-code work even without CSS.
'Separation of content and style', that you mentioned earlier, means
that the page should deliver 100% - without a single style.
At the moment it's pretty weak without CSS applied.
Example: div id=PageTitle looks like a h1 or a h2 to me, but not
without CSS.
-
CSS suggestions:
Add...
html {font-size: 100%;}
...to avoid the 'em font-resizing bug'[1] in IE/win'.
Move 'min-height:892px;' from #MainContent to #ContentText, so those
bottom-corners get pushed down to where they belong.
If you want IE6 to simulate 'min-height' also, then add something like...
* html #ContentText {height: 892px;}
(let me know if you want to support IE/Mac, as that last style will
disturb that browser.)
-
Comment:
Since you use an XHTML doctype, you should also see to that it is
working when served as XHTML[2]. Few XHTML pages on the web do, and
your isn't working either :-)
Something for another day, maybe?
After all; IE/win won't support XHTML properly for at least a year or two.
regards
Georg
[1]http://www.gunlaug.no/contents/wd_additions_13.html
[2]http://www.gunlaug.no/contents/wd_1_06_03.xhtml
--
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] Fun header challenge?
On 5/19/06, Kenny Graham [EMAIL PROTECTED] wrote:
What if you gave the logo image:
#logo { margin:-10px; }
This would allow the H1 to collapse on it, right? As in the H1 would
only try to contain the height of the logo - 20, instead of the full
height? It usually seems to work this way.
That's similar to the way I'm currently doing it, but it doesn't work
with font-resizing. As the H1 gets taller or shorter, I want the
center of the logo to remain in the center of the H1, escaping the top
and bottom of the H1 if needed. Is it even possible? *hopes so* I'm
almost certain it's -not- possible with tables, but i'm young and
never learned to design with tables. (i was lucky i guess)
So then there should be a way to center the logo vertically? If the
logo was not baseline with the text, but rather middle-aligned, so it
will always remain centered with the text, then it will site in the
vertical middle of the background as the header expands... right?
Sorry I don't have time to test it myself.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.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] container overflows floated items in IE.
Hi All. I have troubles with floats in IE. Here's the source http://pastebin.com/724686 In IE container overflows contained items but there is no clearing... How do i make it behave as say in Firefox...where items overlap container. Thanks. PS.the source is an excerpt so it may seem redundant. __ 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] Ste check background images
Hi all Currently renovating one our sites and moving to CSS basis. Have also used Tedds code for boxes to good effect It seems to render well in IE6, FF and Opera upto 1024 x 768. I noted last evening that it broke at the higher res of a Dell laptop. I think it may be due to position of background image for home page and in test-new.html the right hand cell moves out of alignment. Any thoughts? I have some pages parked at http://www.iyesolutions.co.uk/templates/new-dol/ and http://www.iyesolutions.co.uk/templates/new-dol/test-new.html css at http://www.iyesolutions.co.uk/templates/new-dol/includes/style-new.css Cheers Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.6.0/342 - Release Date: 17/05/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] Wrapping in thumbnail gallery
Lassi Heikkinen wrote: I found a nice CSS thumbnail gallery which I have converted to own styles: http://www.pulu.org/temp/cssgal/thumbgal.html The rows are sorted according to window's size, so by resizing the window the images are changing rows. What I want is that each row should always contain same number of images (excluding the last one) in all situations. For example in my current setup I have 5 images in the first row, 2 in the second, 5 in the third, 1 in the fourth and 1 in the fifth. When it should be 5-5-4. The width will be static and height varies. You'll have to prevent the height from varying. Give them a height in ems and experiment with different font-size settings in the browser to find the best height. As soon as the heights differ (even 1px), the stacking will be troubled and you won't have your desired layout. clear: both; after each row would be a semi-good solution but then I would lose the flexibility. Indeed, that's not an option then. -- Els http://locusmeus.com/ http://locusoptimus.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] Elastic layouts: want to confirm
Christian Montoya wrote: No. EMs provides the best scaling possible for a layout that is intended to grow as the font grows. When the height and width of the font characters is somewhat similar, doubly so. Intending for layout's to scale based on font size isn't such a good idea for accessibility, it often leads to lots of horizontal scrolling for those who need it most. See this for more explanation: http://alastairc.ac/2006/05/accessible-layouts/ I posted a couple of days ago about trying to get a font-based layout with a max-width of the window size. However, I couldn't get it working in IE, which is what most people with visual impairments use (like the general population). Kind regards, -Alastair -- Alastair Campbell | Director of User Experience Nomensa Email Disclaimer: http://www.nomensa.com/email-disclaimer.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] Ste check background images
Hi all Currently renovating one our sites and moving to CSS basis. Have also used Tedds code for boxes to good effect It seems to render well in IE6, FF and Opera upto 1024 x 768. I noted last evening that it broke at the higher res of a Dell laptop. I think it may be due to position of background image for home page and in test-new.html the right hand cell moves out of alignment. Any thoughts? I have some pages parked at http://www.iyesolutions.co.uk/templates/new-dol/ and http://www.iyesolutions.co.uk/templates/new-dol/test-new.html css at http://www.iyesolutions.co.uk/templates/new-dol/includes/style-new.css Cheers Ian The css that you need for home page is at http://www.iyesolutions.co.uk/templates/new-dol//includes/newstyle4.css The problem is that don't appear to be able to sort position on y axis. Hope you can help Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.6.0/342 - Release Date: 17/05/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] Elastic layouts: want to confirm
On 5/19/06, Alastair Campbell [EMAIL PROTECTED] wrote:
Christian Montoya wrote:
No. EMs provides the best scaling possible for a layout that is
intended to grow as the font grows. When the height and width of the
font characters is somewhat similar, doubly so.
Intending for layout's to scale based on font size isn't such a good
idea for accessibility
I never meant to imply that.
It's poor foresight on the part of the designer who forgets to
implement max-width in any layout that is not fixed. It's a really
basic thing.[1] As for IE, one does the best they can.
[1] { max-width:100%; } // see? basic
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.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] Ste check background images
I think it may be due to position of background image for home page and in test-new.html the right hand cell moves out of alignment. Any thoughts? I have some pages parked at http://www.iyesolutions.co.uk/templates/new-dol/ and http://www.iyesolutions.co.uk/templates/new-dol/test-new.html css at http://www.iyesolutions.co.uk/templates/new-dol/includes/style-new.css Cheers Ian The css that you need for home page is at http://www.iyesolutions.co.uk/templates/new-dol//includes/newstyle4.css The problem is that don't appear to be able to sort position on y axis. I have removed the background-attachment: fixed; command and the background seems to be working better. However, could folks still check on higher res monitors. Still haven't resolved the cell out of alignment see: http://www.iyesolutions.co.uk/templates/new-dol/director-jobs.php?jobcategor ynumber=12 Working fine on my machine but then its resolution is only 1024x768 Thank in anticipation Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.6.0/342 - Release Date: 17/05/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] IE list padding/border bug
http://www.eystein.no/test/xrs/template_main.php The li items in the navigation gets to much padding in IE6. I know this can be avoided by setting a border to them, however, that messes up the background images I'm using. Is there another solution to fix explorer? __ 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] Elastic layouts: want to confirm
I wrote:
Intending for layout's to scale based on font size isn't such a good
idea for accessibility
Christian Montoya wrote:
I never meant to imply that.
My apologies, I misunderstood.
Christian continued:
It's poor foresight on the part of the designer who forgets to
implement max-width in any layout that is not fixed. It's a really
basic thing.[1] As for IE, one does the best they can.
[1] { max-width:100%; } // see? basic
Agreed, but with font sizes and max-width, I've not found an answer for
IE 6 (unless it hasn't come through on digest):
http://archivist.incutio.com/viewlist/css-discuss/74715
I look forward to when IE 6 does actually go the way of NN 4 (i.e.
vitually no usage), but until then we need a practical strategy.
Kind regards,
-Alastair
--
Alastair Campbell | Director of User Experience
Nomensa Email Disclaimer:
http://www.nomensa.com/email-disclaimer.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/
[css-d] Floats Vs Absolute positioning
Hi, Just wondering if anyone can give me some reasons why doing a three column layout with floats is 'better' than doing it with absolute positioning. I have finally achieved the layout I was trying to get by using a liquid center and two columns absolutely positioned, this was do-able with floats but didn't resize the way I wanted. I am not happy with using positioning instead of floats, but now that I think about it I amn't sure *why* exactly I have a preference for floating as a layout method. Anyone got good reasons for using one over the other or have I just picked up an irrational dislike for positioned layouts? __ 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] Positioning a list bullet image
Hi all, I want to use a custom graphic as a bullet in a list. I can do this (at least) two ways in CSS, by using list-style-image and by using background-image. I wanted to know whether it is possible to vertically position the bullet if I use list-style-image. I can't find anything in any of my books but thought I would ask here. For an example, look here: http://www.tellura.co.uk/soundsteps/franchise_package.htm On this page I am using the background method for the menus with the triangular bullets and I am happy with that. I am using the list- style-image approach for the main content list. You can see that the musical note image is slightly high wrt the text. I'd like to drop it by 3 pixels or so. Any help much appreciated. Thanks, Ian. -- Dr Ian M Piper [EMAIL PROTECTED] skype: ianmpiper -- Where is the wisdom we have lost in knowledge? Where is the knowledge we have lost in information? __ 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] Floats Vs Absolute positioning
Eoin Maguire wrote: [...] I am not happy with using positioning instead of floats, but now that I think about it I amn't sure *why* exactly I have a preference for floating as a layout method. Anyone got good reasons for using one over the other or have I just picked up an irrational dislike for positioned layouts? I think we have rational reasons for preferring floats for main parts of layouts :-) short list Scaling and footers - font-resizing and/or changing amount of content across multiple columns: - we can clear scaling 'floats'. - we can't clear scaling 'a.p.'. Fluid page-width and varying window-width: - 'floats' can auto-linearize (those float-drops that some don't like) - 'a.p.' can't auto-linearize. Element-overlapping: - other elements do interact with 'floats', so overlapping can be prevented. - other elements don't interact with 'a.p.', so overlapping can't be prevented. /short list Personal experience: It is very easy to apply 'absolute positioning', but it's very hard to make layouts with any degree of complexity work well with 'a.p.'. It is sometimes hard to apply 'float-methods' for layouts with any degree of complexity, but once 'floats' work they tend to work well. 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] Floats Vs Absolute positioning
What about using relative positioning? How does that fit in to this argument? Thanks, Stephen - Original Message - From: Gunlaug Sørtun [EMAIL PROTECTED] Sent: Friday, May 19, 2006 11:59 AM Eoin Maguire wrote: [...] I am not happy with using positioning instead of floats, but now that I think about it I amn't sure *why* exactly I have a preference for floating as a layout method. Anyone got good reasons for using one over the other or have I just picked up an irrational dislike for positioned layouts? I think we have rational reasons for preferring floats for main parts of layouts :-) short list Scaling and footers - font-resizing and/or changing amount of content across multiple columns: - we can clear scaling 'floats'. - we can't clear scaling 'a.p.'. Fluid page-width and varying window-width: - 'floats' can auto-linearize (those float-drops that some don't like) - 'a.p.' can't auto-linearize. Element-overlapping: - other elements do interact with 'floats', so overlapping can be prevented. - other elements don't interact with 'a.p.', so overlapping can't be prevented. /short list Personal experience: It is very easy to apply 'absolute positioning', but it's very hard to make layouts with any degree of complexity work well with 'a.p.'. It is sometimes hard to apply 'float-methods' for layouts with any degree of complexity, but once 'floats' work they tend to work well. __ 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] Ste check background images
Any thoughts? I have some pages parked at http://www.iyesolutions.co.uk/templates/new-dol/ and http://www.iyesolutions.co.uk/templates/new-dol/test-new.html css at http://www.iyesolutions.co.uk/templates/new-dol/includes/style-new.css Cheers Ian This is quite bizarre. The home page from above has fallen over big time in IE6 on the above server but works fine on its real server see http://www.directors-online.net Any thoughts? Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.6.1/343 - Release Date: 18/05/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] Floats Vs Absolute positioning
Stevio wrote: What about using relative positioning? How does that fit in to this argument? It just complicates it ever so slightly, by altering the visual cues :-) Relative positioning can be used to offset any element - including 'floats', but 'r.p.' leaves the element's original space intact so 'r.p.' elements interacts with their environment. Layering 'r.p.' elements with 'z-index' don't remove their space, so they will still interact with their environment. We can of course also make 'floats', with added 'r.p.' if necessary, take up no space - like an 'a.p.' element. However, that's just another way to complicate 'floats' - for the designer - by altering the visual cues. 'Floats' will still act as 'floats'. 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] clear-float madness
The floatclearing has returned to hunt me. How do I stop it from clearing more then its parent div? Nor floating up next to the preseding div? I just keep banking my head against the wall on this one. http://www.eystein.no/test/xrs/template_main.php http://www.eystein.no/test/xrs/Public/Styles/default.css http://www.eystein.no/test/xrs/Public/Styles/fixes.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] Started over - new questions
Suggestions with this latest one are welcome -- am I closer to a good way of doing it now than I was earlier? (I hope so!) Hello Marc, this is far better than your very first approach, I think you are on the right track. Further steps (after clearing the main layout probs): Why not extend the accessibility and replace the div-headlines with h1 h2 ... e. g.: div id=PageTitleABOUT: The NYS(CA) Lit(erary) Tree/div Same to the menus (top and left): You have a construction of div id=LeftNavHeading li class=leafLiterary Entities/li /div div id=LeftNavLink Literary Organizationsbr / ... /div which could easily be replaced (I think) by a ul liHead/li liaLink/a/li liaLink/a/li /ul construction. Keep going. Niklas __ 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] Started over - new questions
Rehi Marc, I think that the relative positioning of the Header and the TreeLogo which Gunlaug's proposed would be a better an more unproblematic solution. Niklas __ 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] Persistant and preferred stylesheet
Is it possible to use both a persistent and a preferred stylesheet, if I specify both in my code? Thanks, Stephen __ 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] Started over - new questions
[2]http://www.gunlaug.no/contents/wd_1_06_03.xhtml Having read this, I think it might be wise for me to declare my document as simply HTML. I ignorantly used XHTML only because that's what was output originally by Photoshop on my very first foray into an all-CSS layout. HOWEVER, the content area is going to be dynamic, and probably populated by a lot of crap entered by the users of the content management system. Therefore, it'll NEVER by XHTML by definition of the above resource. In the case where users are going to be using a WYSIWYG editor for the content part of the page, what should my page declaration be? I'm okay with using regular HTML declaration - I haven't studied enough of the standards to attempt XHTML yet and at some point have to give control to those who own the site and would do what they will with the content area - but I'm not sure what I should put in place of my XHTML declaration... __ 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] Started over - new questions
Sorry to sound grumpy... This CSS stuff has taken me back to beginner level and maybe I've chosen the wrong time to try this, as I really do want to get this done and the learning curve is steeper than is expressed in the documents I've read online. Say what you want about tables, they have been around long enough to just work, quickly. I'm not usually THIS impatient, but every time I solve one problem, two more crop up. :( _ Tables may be quicker when you are used to using them, but they are nasty, hard to maintain, compromise accessibility and semantics, and are just plain wrong. They are artifacts from a certain period of the web and should now be returned to their rightful place as display containers for tabulra data. Trust me, I am learning css and finding it a challenge, but the more your learn the more you understand and in the future you will be a cutting-edge happier designer, as table layout will one day be totally redundant. A great book on css is Cascading Style Sheets (friendsofed.com) and for the next level CSS Mastery (again friendsofed). _ -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ 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] Started over - new questions
Marc Funaro wrote: [2]http://www.gunlaug.no/contents/wd_1_06_03.xhtml Having read this, I think it might be wise for me to declare my document as simply HTML. I ignorantly used XHTML only because that's what was output originally by Photoshop on my very first foray into an all-CSS layout. ... but I'm not sure what I should put in place of my XHTML declaration... I would suggest... !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd; ...if it's gonna end up as 'tag-soup' anyway :-) If you can manage to get some kind of control over those CMS users, then a complete 'HTML 4.01 Strict' would be the right choice. More info... http://www.w3.org/QA/2002/04/valid-dtd-list.html http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html 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] Started over - new questions
If you can manage to get some kind of control over those CMS users, then a complete 'HTML 4.01 Strict' would be the right choice. More info... http://www.w3.org/QA/2002/04/valid-dtd-list.html http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html HTML 4.01 Strict is what I think I'll shoot for. The WYSIWYG editor I believe is capable of using styles-only to apply bold, italics, etc. to the text that's entered, and that should be sufficient. I have uploaded my latest changes. I have converted the left menu to all UL and LI's, but it still will not validate... It seems the validator does not like the ULs nested inside, but that's what I think I need to accomplish...? Once I have the markup validated, I'm not sure where to start, in order to apply different styles to lists and sub lists and sub sub lists, which this left navigation DOES contain... Can you point me to a good article? Also, I have changed PageTitle to h1 and applied a style there, which works. I have also put all my text into P's and applied the style there as well. I am slowly working through the list of suggestions... This is turning out much better now. I can see that my overriding skills-needed area is in planning the HTML part of the document, long before the styles are applied. I just never would have envisioned the sections or tiles of this document as they have turned out, and so my starting point was already quite poor. What are all of you using for regular development - Opera to start? I read in one of the (many) articles that Opera now always tries to do everything without a quirks mode, and the latest version now supports the DOM standard... So does that make it the best browser with which to do the primary development tasks? Thanks to everyone... I've learned a lot in a short time here. You all have been great!! Marc __ 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] clear-float madness
Eystein Alnaes wrote:
The floatclearing has returned to hunt me. How do I stop it from
clearing more then its parent div? Nor floating up next to the
preseding div?
http://www.eystein.no/test/xrs/template_main.php
You may start by deleting the class=clearfix on div#secondary_info.
Then, add...
#info_container {float: left; margin-left: 12px; margin-right: -20px;
width: 688px; position: relative;}
#secondary_info {min-height: 550px; _height: 550px;}
#wrapper {clear: both;}
...and fine-tune to taste.
A float isolates its content from the surroundings, thus prevents the
clearing from acting on anything outside the float.
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] ALA Custom Borders question
Hello all, I asked this question on a few boards but no one knew answer so i was hoping for better luck here. i am a bit stumped by the ALA article on custom borders: http://alistapart.com/articles/customcorners In 'Step 3', these gaps show up and i have no clue why. In it they say The gaps are caused by the carriage returns inserted by our paragraph (block) elements. We could avoid using paragraph elements altogether and thereby bypass the problem, but... what carriage returns (the default top margin from 1st paragraph?)? i thought if all margins and padding are set to zero with block elements that follow each other that nothing else is needed? After playing around and seting all margins/padding to 0, my best guess is it seems the line-height is what is messing this up, but the line-height only affects only content area right? it seems the line-height is somehow creating margins so the background image doesnt repeat alongside this area. However this seems like a bad thing to assume. any explanation would be helpful. [image: Confused] __ 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] Ste check background images
Ian Young wrote: It seems to render well in IE6, FF and Opera upto 1024 x 768. I noted last evening that it broke at the higher res of a Dell laptop. http://www.iyesolutions.co.uk/templates/new-dol/ and http://www.iyesolutions.co.uk/templates/new-dol/test-new.html css at http://www.iyesolutions.co.uk/templates/new-dol/includes/style-new.css Ian Ian, I think it may be best to /first/ get the layout working(with no background-image) cross-browser, at 800, 1024, and 1280(with and without a sidebar; and with and without font zoom). Your current layout is not working as you intend in these situations now. This is further complicated by the background image which is not going to change its dimension, regardless of the screen resolution, or font zoom. There are 24 captures here(800, 1024, and 1280 in several browsers):http://www.browsercam.com/public.aspx?proj_id=253489 Regards, ~davidLaakso -- http://www.dlaakso.com/gustave/ __ 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] Started over - new questions
Marc Funaro wrote: HTML 4.01 Strict is what I think I'll shoot for. Good choice. It seems the validator does not like the ULs nested inside, but that's what I think I need to accomplish...? Wrong nesting of lists. Each subsequent ul should be wrapped in a li, like so... ul lih3Writers/h3/li li ul liNYS LitMap Authors/li liNYC LitMap Authors/li liNYS Native American Authors/li liLitMap Author Nomination/li liCircuit Writers/li liInterstate/International Writers/li /ul /li lih3Literary Entities/h3/li li ul and so on. Also, notice the headlines I've put in there. Example of heavily nested unordered list... http://www.gunlaug.no/contents/toc_7a.html ...with valid nesting. Once I have the markup validated, I'm not sure where to start, in order to apply different styles to lists and sub lists and sub sub lists, which this left navigation DOES contain... Can you point me to a good article? Someone else might chime in with a suitable article. I think you'll do fine on your own. Zero out margins and paddings first, and then try adding them back along with some styles. Setting 'list-style: none' will also probably work well from the start. Doing it from the bottom yourself, may take slightly longer than just borrowing some solution, but you'll learn more that way. Also, I have changed PageTitle to h1 and applied a style there, which works. I have also put all my text into P's and applied the style there as well. Looking much more organized now. I am slowly working through the list of suggestions... This is turning out much better now. I can see that my overriding skills-needed area is in planning the HTML part of the document, long before the styles are applied. I just never would have envisioned the sections or tiles of this document as they have turned out, and so my starting point was already quite poor. Plan the source-code well, and you can style it to look like almost anything. Only IE/win's weaknesses are giving us some real headaches at times, the other browsers create mostly minor problems. What are all of you using for regular development - Opera to start? I read in one of the (many) articles that Opera now always tries to do everything without a quirks mode, and the latest version now supports the DOM standard... So does that make it the best browser with which to do the primary development tasks? Opera's 'quirks mode' replicates IE/win in most parts, and will continue to do so, I think. Its support for standards are growing steadily, but it isn't perfect or bug-free yet. Choice of browser as design-tool is mostly a personal preference thing that we rarely discuss - apart from mostly agreeing that it should be one of the most standard compliant ones. I /personally/ think Opera 9.0 beta is the strongest browser at the moment - so that's the one I always start designing in. Some prefer the latest Firefox or Safari. Any design should be tested in all of these and a few more anyway, so it's no big deal, IMO. Just don't design for/in IE/win. Those buggers (IE6 IE7) should be left out till later... much later :-) 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] clear-float madness
Thank you Georg, always the saviour! Now, offcourse, IE is giving me a headache. It simply doesn't render some of the styling, backgroundimages etc. Easy to spot - have a look: http://www.eystein.no/test/xrs/template_main.php http://www.eystein.no/test/xrs/template_om.php http://www.eystein.no/test/xrs/Public/Styles/default.css http://www.eystein.no/test/xrs/Public/Styles/ie.css [snip] A float isolates its content from the surroundings, thus prevents the clearing from acting on anything outside the float. regards Georg __ 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] ALA Custom Borders question
Arian Hojat wrote: Hello all, I asked this question on a few boards but no one knew answer so i was hoping for better luck here. i am a bit stumped by the ALA article on custom borders: http://alistapart.com/articles/customcorners In 'Step 3', these gaps show up and i have no clue why. In it they say The gaps are caused by the carriage returns inserted by our paragraph (block) elements. We could avoid using paragraph elements altogether and thereby bypass the problem, but... what carriage returns (the default top margin from 1st paragraph?)? i thought if all margins and padding are set to zero with block elements that follow each other that nothing else is needed? A carriage return is this. Starting on a new line. 5 carriage returns there, no padding, no margin. A p element is block level, so a next element always starts on a new line, even with zero padding and margin. -- Els http://locusmeus.com/ http://locusoptimus.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] Selector complexity
Is there any known performance impact to possibly overly specific selectors?
ex:
#CategoryList li.Category ul li.product ul li.ciDsc a:hover {}
(vs.)
li.ciDsc a:hover {}
The first case is extremely specific and clues the reader to the structure of
the document
Does the second case incur less parse/render overhead?
I normally opt for readability, but I have recently executed a styled list of
links from what was
once a table-based layout. The page display performance is pretty terrible. I
would post a url,
but this is part of a redesign rollout that is not yet public.
__
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] Selector complexity
On Friday 2006-05-19 12:42 -0400, Mike Dougherty wrote:
Is there any known performance impact to possibly overly specific selectors?
ex:
#CategoryList li.Category ul li.product ul li.ciDsc a:hover {}
(vs.)
li.ciDsc a:hover {}
The first case is extremely specific and clues the reader to the structure of
the document
Does the second case incur less parse/render overhead?
Mozilla's selector matching implementation matches from the end of the
selector to the start, i.e., it matches a:hover first, and if that
matches it tries to match li.ciDsc, and so on. I suspect this is the
way other implementations work as well.
Parsing shouldn't be a big deal compared to selector matching, but yes,
the second is less expensive for both. For the example you give, there
is only a selector matching difference for elements that match the
second, since for the first there are more things to be checked. So it
mainly depends on how many elements (partly) match and how many things
there are to test.
It's also worth noting that child combinators () are less expensive
than descendant combinators ( ), although combinations of the two can
actually be more expensive than descendant combinators only.
It may also be worth noting that Mozilla (in particular, probably not
common to other browsers) optimizes selector matching based on element
type, class, and id selectors that match the subject of the selector (in
this case, the subject is the element matched by a:hover), and also has
separate optimizations for pseudo-class and attribute changes.
-David
--
L. David BaronURL: http://dbaron.org/
Technical Lead, Layout CSS, Mozilla Corporation
pgpALgRqESlR6.pgp
Description: PGP signature
__
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] Selector complexity
Mike Dougherty wrote: Is there any known performance impact to possibly overly specific selectors? snip Does the second case incur less parse/render overhead? I normally opt for readability, but I have recently executed a styled list of links from what was once a table-based layout. The page display performance is pretty terrible. I would post a url, but this is part of a redesign rollout that is not yet public. Dave Hyatt, who worked on Gecko's CSS implementation (i.e. Firefox) and is now lead developer on Apple's Safari, discussed this in possibly more detail than you want to know: http://weblogs.mozillazine.org/hyatt/archives/2005_05.html#007507 Short answer: yes :-) HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.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] Positioning a list bullet image
On May 19, 2006, at 3:08 AM, Ian Piper wrote: I am using the list- style-image approach for the main content list. You can see that the musical note image is slightly high wrt the text. I'd like to drop it by 3 pixels or so. Add 3 pixels of empty space to the top of the graphic. I prefer to use background-image and background-position because they allow control over the placement of the bullets. --dave mcfarland __ 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] User Define Stylesheet
I have a webpage, not of my own that I use for printing reports, and the font
is too small. I want to override the CSS that the company uses and replace it
with my own. Here is the HTML
TR valign=top
td nowrap class=smalltxtBandelnbsp;/td
td nowrap class=smalltxtGwennbsp;/td
td nowrap class=smalltxt7634288652nbsp;/td
td nowrap class=smalltxtnbsp;nbsp;/td
td nowrap class=smalltxtConfirmednbsp;/td
td nowrap class=smalltxtnbsp;nbsp;/td
/tr
When I try to set the text size with this:
td.smalltxt
{
font-size: 16px;
font-family: Arial;
}
It does not change. I can change the color, so it seems that color is not set
in their stylesheet, but font size is. I also know that you can use !important
to force, but that doesn't seem to work in this. Can someone show me how they
would go about forcing the user devine stylesheet to display the way I need it
to?
Thanks,
Mike
-
Yahoo! Messenger with Voice. Make PC-to-Phone Calls to the US (and 30+
countries) for 2¢/min or less.
__
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] IE not positioning navigation correctly
If anyone could take a look at this page: http://www.hospicevalley.org/ and see if you can figure out why IE on PCs push the top navigation way over to the right, I would much appreciate it. It seems to work fine in Firefox and Safari, but I'm not able to test on PCs right now. Here is the CSS: http://www.hospicevalley.org/css/basic.css My apologies, this is a repost, but I didn't get any replies the first time, and I'm really stuck. Thank you, Rose __ 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] Opera 8 and position:fixed
I was wondering...I've been Googling for the answer to this, and I can't
seem to find it. Basically, here's the problem:
I have a #wrapper container that's 700px wide and centered with margin:0
auto. I want a sidebar that is position:fixed and flush left and top
to the container - not the browser window. Amazingly, I've actually
gotten this under control in IE, and, of course, works fine in Mozilla
(had to add margin: 0 auto to the #sidebar to get it in there, but it
worked for some reason!). However, in Opera , it *literally* centers
the #sidebar in the browser window.
My #wrapper container centers itself just fine (I also have it
relatively positioned for IE purposes to emulate the fixed positioning),
but I cannot seem to get Opera to set the #sidebar to the left of the
#wrapper and not the browser window.
Is this a bug? Or am I missing something completely? Would anyone know
how I could get that #sidebar to flush left of the #wrapper and not the
browser window itself? I'd really appreciate any advice :)
Oh, and if it helps...
#wrapper {
position:relative;
width:700px;
height:18em;
margin:10px auto;
border:1px solid #000;
background-color:#EEE;
color:#000;}
#sidebar {
width:100px;
height:18em;
background-color:#CCC;
color:#FFF;
position:fixed;
margin:0 auto; /* this, for some reason, makes Firefox
position it where I want to. If I take it out, then the sidebar does
the same thing Opera does. If a leave it in, Opera centers the sidebar
in the browser window, overlapping the #wrapper div*/}
Thanks!
~Shelly
__
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] Started over - new questions - why not to use PNG's?
Hi! Niklas Kanthak wrote: Don't use PNG for images, only GIFs or JPGs. I'm just curious, why not to use PNG's. You mean PNG's in general, or only transparent PNG's? Because I like this format much more than GIF's or JPG's for it's better quality. I know that IE doesn't support transparent PNG's but support of normal PNG's is okay, or have I missed something? Thanks, Erik __ 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] User Define Stylesheet
The selector is located in an external stylesheet, so I figured that what I
have set would override what they have. In their external sheet they have:
.smalltxt {
FONT-SIZE: 11px;
FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
}
How can I force it to override what they have? Is it possible?
Mike Dougherty [EMAIL PROTECTED] wrote: try finding their selector and use
that in your stylesheet
My guess is that their selector has a higher specificity and it still trumps
your straightforward
selector
On Fri, 19 May 2006 11:07:08 -0700 (PDT)
Mike Tuller wrote:
I have a webpage, not of my own that I use for printing reports, and the font
is too small. I
want to override the CSS that the company uses and replace it with my own.
Here is the HTML
Bandel
-
Yahoo! Messenger with Voice. PC-to-Phone calls for ridiculously low rates.
__
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] Fun header challenge?
I'm just a rank beginner, but would a sliced header help? Could be sliced near the left side image area, then the two pieces included as backgrounds? The right side background could be a repeated gif to expand as needed? Dave __ 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] IE list padding/border bug
Eystein Alnaes wrote: http://www.eystein.no/test/xrs/template_main.php The li items in the navigation gets to much padding in IE6. I know this can be avoided by setting a border to them, however, that messes up the background images I'm using. Is there another solution to fix explorer? There are a number of ways to fix the gap that appears in IE when you make a elements block, but the one that works most often for me is to set the containing lis to display: inline;. Let us know if that fixes it for you. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Fun header challenge?
Why not use a background image? Also, when you say you don't want it to work in IE, just modern browsers, you have just lost most of your audience. IE6/7 is a modern browser, it's just problematic in its css support (proprietary box model etc). So unless your site is going to be viewed only by Firefox users or is for your own use, you have to make it work in IE, after coding it for Mozilla. -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ 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] Floats Vs Absolute positioning
Stevio wrote: What about using relative positioning? How does that fit in to this argument? Stephen, Relative positioning is mainly used to cure IE bugs, occasionally to shift elements from their normal position, but that's it. It's not used for creating columnar layouts because the element that is shifted leaves the space it would have taken up behind, which would create huge gaps in most designs. There are only three ways to create columnar layouts with CSS: 1. Floats 2. Absolute positioning (problematic) 3. Table display values (not supported by IE, even 7, so not in use much yet) One other thing: please make sure to trim your posts. The practice of including an entire quoted message below your added comments is really increases the size of your messages, making digests go out much more frequently. You must trim out all quoted material to which you are not directly replying, then add your comments above (discouraged) or below (greatly encouraged) the quoted material. This will really reduce the size of your messages and make many other people on the list a little happier. It's part of the list policies; see http://www.css-discuss.org/policies.html. Thanks, Zoe Gillenwater css-d list moderator __ 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] Persistant and preferred stylesheet
Stevio wrote: Is it possible to use both a persistent and a preferred stylesheet, if I specify both in my code? If you link to two style sheets, they will both be used on your page, with cascade and specificity determining which rules take precedence in case the rules in the two sheets contradict one another. You can include as many style sheets on your pages as you want and they will all be used to style the page. (Well, IE has some huge limit, but I can't remember what it is -- Georg?) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] I thought this was just an IE thing
but now I see it's the same in Safari... can someone please help me figure out why I don't have the 1px white space between the navbar (#bar) and the branding area (#top) in IE and Safari that I see in Firefox? http://www.skydogtech.com/pinck/html/ Thanks so much. __ 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] Style Families
Hello All, I apologize in advance for the length of this email but I'm just curious about something and thought I'd send out a feeler. While recently revamping my personal website, I had some specific requirements based on experiences on other websites. My favorite example that I wanted to avoid is the ribbon blog. I read a lot of blog entries either as part of a search for information or just casual reading. A problem I see a lot is the 400 comments below the blog that stretch on forever and ever with like 200 pixels of background (or more) on either side. I read the comments since they often contain valuable info as well and I use a large resolution, so that fixed layout kills me. I thought it might be a good idea if those designers had included a snap to full-width button which would switch the blog to the full width of the viewport. Now it occurred to me (and probably to you) that I could kill their styles altogether or they could have allowed a style switch, but I also found out a reason why they might not. Take for instance, the blog example. We have a blog we've formatted to a fixed width. But, we want to include a fluid width as well for easier reading of those lengthy entries. BUT we also have two themes: a light background and a dark background. Doing this is not possible in current browsers (X=active and O=inactive): X - darkBG.css O - lightbg.css X - fixed.css O - fluid.css So, we work around it in this way: X - @include(dark.css);@include(fixed.css) O - @include(dark.css);@include(fluid.css) O - @include(light.css);@include(fixed.css) O - @include(light.css);@include(fluid.css) * - darkBG.css * - lightbg.css * - fixed.css * - fluid.css Or in this way: X - fixedDark.css O - fluidDark.css O - fixedLight.css O - fluidLight.css Yeah, so? Big deal. you might be thinking, but what happens if we want to include more themes? Or column configurations? Say we want to add an example where the menu is on the left, or the right, or across the top? You can see this quickly becomes a nightmare of includes. There's javascript, sure. Couldn't we also try to advocate the introduction of something like familied style sheets though? And then allow a browser to specify an active stylesheet for each family, rather than just one active stylesheet? Then, our example could use this: link rel=stylesheet type=text/css href=dark.css media=screen,projection family=Theme title=The Dark Side / link rel=stylesheet type=text/css href=light.css media=screen,projection family=Theme title=Show Me the Light / link rel=stylesheet type=text/css href=fixed.css media=screen,projection family=Layout title=Fixed Width / link rel=stylesheet type=text/css href=fluid.css media=screen,projection family=Layout title=Fluid Width / ...and show this in the View Page Style options: Theme X - The Dark Side O - Show Me the Light Layout X - Fixed Width O - Fluid Width Maybe the introduction of such a thing to the W3C is a pipe dream and getting even Firefox or another fairly compliant browser to begin to implement that borders on the delusional, but I think my bigger question is this: Am I missing something? Is there some way outside the use of Javascript to implement such a thing already that I just overlooked? Perhaps even more important than that is the question of whether or not ANYBODY else agrees with me that something like that might be useful. I'm not too proud to think I might be the only one who could find uses for that. Thoughts, opinions, insults? Bill || | Bill Brown | | Webmaster, MacNimble.com | | http://www.macnimble.com | | mailto:[EMAIL PROTECTED] | | Phone: 215-237-2037| || __ 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] IE not positioning navigation correctly
This does fix the positioning of the text, but the background image gets cut
off at the bottom after the text ends.
I had originally fixed that by giving #topnav a min-height, 25 px, the
height of the image. Now that is being ignored after the list ends. Any
suggestions?
On 5/19/06, Matt Fitzwater [EMAIL PROTECTED] wrote:
It looks like the dreaded double margin float bug try putting
display: inline; on your #topnav{
GypsiiRose Baptiste wrote:
If anyone could take a look at this page:
http://www.hospicevalley.org/
and see if you can figure out why IE on PCs push the top navigation way
over
to the right, I would much appreciate it. It seems to work fine in
Firefox
and Safari, but I'm not able to test on PCs right now.
Here is the CSS:
http://www.hospicevalley.org
/css/basic.css
My apologies, this is a repost, but I didn't get any replies the first
time,
and I'm really stuck.
__
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] Fun header challenge?
On 5/19/06, Kenny Graham [EMAIL-REMOVED] wrote:
What if you gave the logo image:
#logo { margin:-10px; }
This would allow the H1 to collapse on it, right? As in the H1 would
only try to contain the height of the logo - 20, instead of the full
height? It usually seems to work this way.
That's similar to the way I'm currently doing it, but it doesn't work
with font-resizing. As the H1 gets taller or shorter, I want the
center of the logo to remain in the center of the H1, escaping the top
and bottom of the H1 if needed. Is it even possible? *hopes so* I'm
almost certain it's -not- possible with tables, but i'm young and
never learned to design with tables. (i was lucky i guess)
So then there should be a way to center the logo vertically? If the
logo was not baseline with the text, but rather middle-aligned, so it
will always remain centered with the text, then it will site in the
vertical middle of the background as the header expands... right?
Sorry I don't have time to test it myself.
On 5/19/06, Kenny Graham [EMAIL-REMOVED] wrote:
What if you gave the logo image:
#logo { margin:-10px; }
This would allow the H1 to collapse on it, right? As in the H1 would
only try to contain the height of the logo - 20, instead of the full
height? It usually seems to work this way.
That's similar to the way I'm currently doing it, but it doesn't work
with font-resizing. As the H1 gets taller or shorter, I want the
center of the logo to remain in the center of the H1, escaping the top
and bottom of the H1 if needed. Is it even possible? *hopes so* I'm
almost certain it's -not- possible with tables, but i'm young and
never learned to design with tables. (i was lucky i guess)
I'm just a rank beginner, but would a sliced header help? Could be
sliced near the left side image area, then include the slices as
backgrounds? Or, the right side background could be a repeated gif to
expand as needed?
Dave
__
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] I thought this was just an IE thing
Suzanne Goodwin wrote: but now I see it's the same in Safari... can someone please help me figure out why I don't have the 1px white space between the navbar (#bar) and the branding area (#top) in IE and Safari that I see in Firefox? http://www.skydogtech.com/pinck/html/ See if adding padding-bottom: 1px; to the #bar ruleset closes the gap in FF. Regards, ~dl -- http://www.dlaakso.com/gustave/ __ 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] Started over - new questions - why not to use PNG's?
Erik Gyepes wrote: Hi! Niklas Kanthak wrote: Don't use PNG for images, only GIFs or JPGs. I'm just curious, why not to use PNG's. You mean PNG's in general, or only transparent PNG's? Because I like this format much more than GIF's or JPG's for it's better quality. I know that IE doesn't support transparent PNG's but support of normal PNG's is okay, or have I missed something? One thing to be aware of is PNG color-shifting in IE. If you try to use a non-transparent PNG with non-square edges and fill in the background color, then place it inside a region with a CSS background-color, they may not match up exactly, even with supposedly the same hex values. Even when opening the PNG in Photoshop, it will show the PNG as having the correct hex value. In these circumstances, it's best just to use a 10x10 pixel flat color PNG as your background-image for the container region. Don't use smaller tiles than 10x10 (i generally go for at least 20x20 myself) as this puts a lot of strain on the client and you may get strange rendering glitches, especially on older machines. Of course, similar problems arise with JPEGs, especially when saved at low-quality, but at least with JPEGs you can validate the hex value shift in Photoshop. david __ 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] vanishing imgs color in IE/PC and Firefox/PC
I recently overhauled my domain web-site and brought it up to date with XHTML and CSS. I'm self-taught, but that hasn't stopped me from trying to have a pretty good-looking (if quirky) site. But I'm stumped and hope that my problem will be glaringly obvious to one of you. The URL: http://www.jaykinney.com The problem: Everything seems fine on my Mac (Safari, IE, Mozilla, Firefox), but the header art (3 varieties on 3 types of pages) and background color vanish on my wife's PC laptop (IE and Firefox). I'd attribute this to some IE bug, but the problem is there in Firefox/PC, too! Both the XHTML and CSS are validated. If anyone has any suggestions, I'd be very grateful. --Jay Kinney __ 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] Started over - new questions - why not to use PNG's?
One thing to be aware of is PNG color-shifting in IE. If you try to use a non-transparent PNG with non-square edges and fill in the background color, then place it inside a region with a CSS background-color, they may not match up exactly, even with supposedly the same hex values. Even when opening the PNG in Photoshop, it will show the PNG as having the correct hex value. In these circumstances, it's best just to use a 10x10 pixel flat color PNG as your background-image for the container region. Don't use smaller tiles than 10x10 (i generally go for at least 20x20 myself) as this puts a lot of strain on the client and you may get strange rendering glitches, especially on older machines. Of course, similar problems arise with JPEGs, especially when saved at low-quality, but at least with JPEGs you can validate the hex value shift in Photoshop. david That is an interesting tip I didn't know about. I've always preffered PNGs for their quality and for being free (as in freedom ;-))... I've found something in a page ( http://www.cristalab.com/tips/21618/png-con-transparencia-alpha-en-internet-explorer) suposed to correct transparency problems, which I don't quite understand. What do you think?: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader» (src='imagen.png',sizingMethod='scale'); img src=imagen.png style=filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='imagen.png',sizingMethod='scale'); alt= / There's also a way of coming around png problems in IE using javascript. http://www.aoyama.com.mx/foros/viewtopic.php?t=24 __ 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] Style Families
There's javascript, sure. Couldn't we also try to advocate the introduction of something like familied style sheets though? And then allow a browser to specify an active stylesheet for each family, rather than just one active stylesheet? It's very early here in Oz, and I might have missed a critical part of your question (please forgive me if I have). It sounds to me as if bodyswitching will solve your problem. No? http://www.alistapart.com/articles/bodyswitchers/ __ 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] Retrofitting Abs positioning to work with CMS
Hello, I'm trying to retrofit a design I developed a couple of years ago (with absolute positioning) to work with a CMS--specifically, I would like to place a tools div at the top of the page. I've been trying to revise the existing design/css so that all the content will shift when the toolbar div is placed. The example page I've been working with on the redesign is http://www.id.iit.edu/~colbath/work/CMS_Typo3/1.1.0.html and the CSS is http://www.id.iit.edu/~colbath/work/CMS_Typo3/include/gcStyles2_CMS.css The classes I'm promarily dealing with are: .divBodyLow .divCrumbs .divHeadline .divNav Firefox issues: The breadcrumbs were positioning themselves just fine until I moved the logo for the page to the background, now they're offset from the top of the viewframe. The main content container (.divBodyLow) has this odd padding-issue going on, though I set no padding in the CSS. The navigation is also lower than it should be. IE issues: Oddly enough, the only problem in IE that I can see is that the navigation is set in from the left more than it should be. The design seems fine in Dreamweaver, but has the aformentioned issues in browsers. I think I can safely say that I've learned my lessons with absolute positioning, but the solution to this problem is just escaping me... Any help would be greatly appreciated. Thanks! -=gc=- __ 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] Retrofitting Abs positioning to work with CMS
Firefox issues: The breadcrumbs were positioning themselves just fine until I moved the logo for the page to the background, now they're offset from the top of the viewframe. The main content container (.divBodyLow) has this odd padding-issue going on, though I set no padding in the CSS. The navigation is also lower than it should be. IE issues: Oddly enough, the only problem in IE that I can see is that the navigation is set in from the left more than it should be. ...first, try setting padding on body to 0 to strip all padding -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ 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] Style Families
I wasn't raising a problem. I already have a javascript solution in place for my website and you even included the part of my email where I mention I'm already aware of javascript solutions, whether custom or plugin. My email is raising a question about the way in which style sheets are used and supported by browsers, not a design problem I'm having. Thanks. || | Bill Brown | | Webmaster, MacNimble.com | | http://www.macnimble.com | | mailto:[EMAIL PROTECTED] | | Phone: 215-237-2037| || -Original Message- From: jack fredricks [mailto:[EMAIL PROTECTED] Sent: Friday, May 19, 2006 5:29 PM To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Style Families There's javascript, sure. Couldn't we also try to advocate the introduction of something like familied style sheets though? And then allow a browser to specify an active stylesheet for each family, rather than just one active stylesheet? It's very early here in Oz, and I might have missed a critical part of your question (please forgive me if I have). It sounds to me as if bodyswitching will solve your problem. No? http://www.alistapart.com/articles/bodyswitchers/ ___ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.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] about quoting on css-d
Please read what Zoe Gillenwater wrote to the list a couple of hours ago: One other thing: please make sure to trim your posts. The practice of including an entire quoted message below your added comments is really increases the size of your messages, making digests go out much more frequently. You must trim out all quoted material to which you are not directly replying, then add your comments above (discouraged) or below (greatly encouraged) the quoted material. This will really reduce the size of your messages and make many other people on the list a little happier. It's part of the list policies; see http://www.css-discuss.org/policies.html. LOL... Thanks Andree. In response, I have only this to say... One: I don't generally respond in that way. Regular readers of this list know that I either respond off-list or by appending rather than prepending my reply. I apologize for prepending my hasty reply to an email which didn't warrant a reply in the first place. Two: Zoe's email is meant to clarify an issue which is not clearly defined in the list policies: Quoted directly from http://www.css-discuss.org/policies.html (item 3): Trim your replies. If you have more quotation than original text, think about cutting down on the quoted stuff. The list members can look at the message to which you responded, or check the archive. Prune that quoted text with ruthless abandon. Everyone else will thank you for it, especially the list admin(s). Don't forget, thankful list admins are less hasty with the unsubscribe button. This portion which reads ...think about cutting down on the quoted stuff... is abiguous at best. I also had not fully read Zoe's reply, which was included in a reply to another question. While it's nice to think that every message sent to the list is read in its entirety, that's probably unrealistic. I imagine if Zoe thought I was a regular violator of this practice, she would have emailed me to set me straight. Three: Don't you have any reply or line of thinking relating to my ORIGINAL email? ___ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.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] I thought this was just an IE thing
Suzanne Goodwin wrote: Hey, David: Thanks for your reply! I actually want the white separation, but can't Safari or IE to behave. Adding negative padding or margin to #bar has no effect. David Laakso wrote: Suzanne Goodwin wrote: but now I see it's the same in Safari... can someone please help me figure out why I don't have the 1px white space between the navbar (#bar) and the branding area (#top) in IE and Safari that I see in Firefox? http://www.skydogtech.com/pinck/html/ See if adding padding-bottom: 1px; to the #bar ruleset closes the gap in FF. Regards, ~dl Adding margin-bottom: 1px; to the #bar ruleset gives the separation on my end in XP_IE6.0; and, Opera9beta(your page has no separation in IE or Opera)-- however the horizontal separation appears just ever so slightly thicker in Opera. I do not have Safari. Its on my server until midnight tonight if you want to check to see if this is what you are after: http://www.dlaakso.com/chelsea/boston.html Best ~davidLaakso -- http://www.dlaakso.com/gustave/ __ 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] Two columns equal length
I'm trying to create two columns that have an equal length using a background-image that gets repeated the length of the columns and using two floats to position the text. The problem I've been trying to solve is that the background-image does not appear behind the floats. It's all part of a bigger page that I've reduced to just show the problem. The one good thing is that the problem appears in FF, IE and Opera, so there's something I'm missing here and would like any help I can get. http://www.gateway.org.nz/v2/example.php http://www.gateway.org.nz/v2/css/example.css Many thanks to all the people who contribute their time and knowledge to this list. Gavin __ 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] Anidated divs IE problem
Hi guys, i have an issue about anidated divs... look.
I don't know why when I put a div immediately inside of another div, the
first element in the anidated div, IE doesn't displays the correct format
defined in the CSS file (Firefox displays all fine). Yeah, I know, my
description it's a little messy... better I put an example:
Part of the HTML file:
div id=first
div id=second
h1First element/h1
h1Second element/h1
/div
/div
Part of the CSS file:
#second h1{
margin: 20px 0px 10px;
font: normal bold 15pt Trebuchet MS;
border-bottom: 1px dashed #00;
letter-spacing: -1px;
color: #00;
}
In the IE, the output shows the First element with all the properties
except the border, Second element (and all after that) looks totally
fine... in Firefox all the elements shows the border... Plus, if I put
anything before h1First element/h1, even a simply letter, the element
displays his respective border... somebody knows what's this problem? I
really appreciate any help, thanks!
__
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] Started over - new questions - why not to use PNG's?
kuasar wrote:
I've found something in a page (
http://www.cristalab.com/tips/21618/png-con-transparencia-alpha-en-internet-explorer)
suposed to correct transparency problems, which I don't quite understand.
What do you think?:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='imagen.png',sizingMethod='scale');
img src=imagen.png
style=filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='imagen.png',sizingMethod='scale'); alt= /
I use a slightly more complex method to accomplish this, I attach a
behavior file in an IE-only stylesheet (using conditional comments) to
everything with a class png:
.PNG {
behavior: url(/path/to/pngbehavior.htc);
}
The behavior file is a modified version of something I found on the web
somewhere a long time ago:
public:component
public:attach event=onreadystatechange onevent=setAlpha() /
script language=javascript type=text/javascript
document.transparentImage = ../img/trans.gif;
function setAlpha()
{
// images
if (this.src this.src.indexOf(document.transparentImage) == -1
this.src.toLowerCase().indexOf(.png) != -1) {
this.runtimeStyle.filter +=
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + this.src +
',sizingMethod='scale');
var width = this.width;
var height = this.height;
this.src = document.transparentImage;
this.width = width;
this.height = height;
}
// background images
var bgImg = this.currentStyle.backgroundImage;
bgImg = bgImg.slice(bgImg.indexOf('')+1,bgImg.lastIndexOf(''));
if (bgImg.indexOf(document.transparentImage) == -1
bgImg.toLowerCase().indexOf(.png) != -1) {
this.runtimeStyle.backgroundImage = none;
this.runtimeStyle.filter +=
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + bgImg +
',sizingMethod='crop');
}
}
/script
/public:component
I've never really gotten around to optimizing and/or checking out edge
cases for this file, so YMMV. It should really only be running the
script when readystate=4, that's pretty obvious now that I look at it...
The thing to be aware of here is that you can't use this for tiling
background images, or when you need to adjust the background-position
property. As far as I know, there's no way to accomplish that in IE.
Also, IE's proprietary filters are resource hogs, so I tend not to use
these for icons that appear too many times on a page (for example in
long lists or grids).
david
__
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] Fun header challenge?
Why not use a background image? The logo is a transparent png, and it needs to be on top of a background color that will expand/contract based on font size. I suppose I might be able to get it to work as a background images if I added a div in there, but I'd really prefer to have the logo still show with CSS disabled. Also, when you say you don't want it to work in IE, just modern browsers, you have just lost most of your audience. It's the personal equivalent of an internal site. It's just gonna be for myself and a group of friends. I don't -want- it to break in IE, I just don't care either way, so I'm serving it properly as xhtml. IE 6/7 is a modern browser, it's just problematic in its css support (proprietary box model etc). I don't consider 5 years old to be modern in regards to software. I'll consider IE7 to be modern chronologically but not technologically. My problem with it isn't its CSS bugs, but it's inability to even attempt to parse xhtml. __ 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] Pseudo class links
Hi Folks,
I admit I'm no CSS wizard but I'm very perplexed why some very basic CSS to
style my links is not working:
http://www.douglasniven.com/books.php
I have the following embedded directly onto the page above:
style type=text/css!--
a:link {color: red} /* unvisited link */
a:visited {color: blue} /* visited link */
a:hover {color: green} /* mouse over link */
a:active {color: yellow} /* selected link */
--/style
Yet no colored links! Very confused. Any help would be much appreciated!
Best, Doug
Santa Cruz, CA
__
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] Pseudo class links
I have the following embedded directly onto the page above: [snip] Yet no colored links! Very confused. Any help would be much appreciated! You have font tags inside your links overriding the 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] Pseudo class links
From: Doug Niven [EMAIL PROTECTED]
I admit I'm no CSS wizard but I'm very perplexed why some very basic
CSS to
style my links is not working:
http://www.douglasniven.com/books.php
I have the following embedded directly onto the page above:
style type=text/css!--
a:link {color: red} /* unvisited link */
a:visited {color: blue} /* visited link */
a:hover {color: green} /* mouse over link */
a:active {color: yellow} /* selected link */
--/style
Your page is in pretty bad shape. You need a DOCTYPE and you need to
get rid of the proprietary Adobe tags. For your links, they should
work if you remove your font tags.
--
Al Sparber
PVII
http://www.projectseven.com
Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that
repairs are scheduled for next Tuesday.
__
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] Pseudo class links
How about the fact that you're using font tags that are overriding the CSS calls? a title=Another Vietnam, from National Geographic Books href=http://short Link target=_blank font face=Arial color=#d8d8d8 size=2Another Vietnam/font/a You need to get rid of those font tags. ~Shelly __ 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] Two columns equal length
Gavin Sharon wrote:
The problem I've been trying to solve is that the background-image
does not appear behind the floats.
http://www.gateway.org.nz/v2/example.php
The container doesn't expand to contain those floats, which is correct
according to CSS standards. The result is that the background-image has
no container-space to repeat down.
To make it expand, add...
div.half_block_center
{
overflow: hidden;
}
* html div.half_block_center
{
overflow: visible;
width: 100%;
}
...which is according to specs[1] for the good browsers, and according
to Microsoft[2] for IE/win. Looking good in my browsers.
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] Two columns equal length
Thanks so much Georg, it worked!
I'm still learning my way around CSS but enjoying it as I go.
Gunlaug Sørtun wrote:
Gavin Sharon wrote:
The problem I've been trying to solve is that the background-image
does not appear behind the floats.
http://www.gateway.org.nz/v2/example.php
The container doesn't expand to contain those floats, which is correct
according to CSS standards. The result is that the background-image has
no container-space to repeat down.
To make it expand, add...
div.half_block_center
{
overflow: hidden;
}
* html div.half_block_center
{
overflow: visible;
width: 100%;
}
...which is according to specs[1] for the good browsers, and according
to Microsoft[2] for IE/win. Looking good in my browsers.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
[2]http://www.satzansatz.de/cssd/onhavinglayout.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] Opera 8 and position:fixed
On Sat, 20 May 2006 02:26:28 +0800, Design Groups
[EMAIL PROTECTED] wrote:
I have a #wrapper container that's 700px wide and centered with margin:0
auto. I want a sidebar that is position:fixed and flush left and top
to the container - not the browser window.
[snip]
in Opera , it *literally* centers the #sidebar in the browser window.
Using Opera 8(.54), it's not literally centered - resize the window to
see. It has an amusing repaint glitch too.
Is this a bug?
Yes. Opera 9 displays your page just like Firefox.
#wrapper {
position:relative;
width:700px;
height:18em;
margin:10px auto;
border:1px solid #000;
background-color:#EEE;
color:#000;}
#sidebar {
width:100px;
height:18em;
background-color:#CCC;
color:#FFF;
position:fixed;
margin:0 auto; /* this, for some reason, makes Firefox
position it where I want to. If I take it out, then the sidebar does
the same thing Opera does. If a leave it in, Opera centers the sidebar
in the browser window, overlapping the #wrapper div*/}
My Firefox (1.5.0.3) did not need that margin. Removing that margin
changed nothing in the display of my Firefox, Opera or IE.
Regards,
--
Andrew Gregory, URL: mailto:[EMAIL PROTECTED]
URL: http://www.scss.com.au/family/andrew/
__
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] Opera 8 and position:fixed
According to the spec[1], using position: fixed is *always* relative
to the viewport, unlike absolute positioning, which is relative to a
relatively or absolutely positioned containing block or, that
failing, the viewport.
Fixed positioning is like this because the element is positioned in a
specific place on the screen—other boxes have no effect on it.
I'm wondering if you perhaps want absolute position instead of fixed.
With the code you supply, page does very odd things when the window
scrolls.
[1]: http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning
Visual formatting model
--
Ryan
http://RyanCannon.com/
On 19 May 2006, at 5:53 PM, [EMAIL PROTECTED] wrote:
I have a #wrapper container that's 700px wide and centered with
margin:0
auto. I want a sidebar that is position:fixed and flush left and
top
to the container - not the browser window. Amazingly, I've actually
gotten this under control in IE, and, of course, works fine in Mozilla
(had to add margin: 0 auto to the #sidebar to get it in there,
but it
worked for some reason!). However, in Opera , it *literally* centers
the #sidebar in the browser window.
My #wrapper container centers itself just fine (I also have it
relatively positioned for IE purposes to emulate the fixed
positioning),
but I cannot seem to get Opera to set the #sidebar to the left of the
#wrapper and not the browser window.
Is this a bug? Or am I missing something completely? Would anyone
know
how I could get that #sidebar to flush left of the #wrapper and not
the
browser window itself? I'd really appreciate any advice :)
Oh, and if it helps...
#wrapper {
position:relative;
width:700px;
height:18em;
margin:10px auto;
border:1px solid #000;
background-color:#EEE;
color:#000;}
#sidebar {
width:100px;
height:18em;
background-color:#CCC;
color:#FFF;
position:fixed;
margin:0 auto; /* this, for some reason, makes Firefox
position it where I want to. If I take it out, then the sidebar does
the same thing Opera does. If a leave it in, Opera centers the
sidebar
in the browser window, overlapping the #wrapper div*/}
Thanks!
~Shelly
__
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/
