Re: [css-d] How to construct a 3 Column layout to a centered Page Layout
Kevin J Pledger wrote: I have read extensively articles, looked at code and looked at the websites others are building who are on this list. I am used to doing everything in tables, but CSS looks more interesting but so much to learn for a newbie. CSS has a pretty steep learning curve compared to HTML tables. Guess I am trying to walk before I crawl in the CSS world. Guess that's a natural human reaction. Happens all the time :-) It is impossible to make www.oneyed.com/mt look like www.oneyed.com/mt/LayoutGala07.html without changing both the CSS and source-code radically. Two different methods are used. For a start: the former is based on 'absolute positioning' and the the latter is based on 'float'. 'A:P' layout-methods pretty much excludes 'float' as layout-methods in such a case. How can I using the present code specify a minimum height for the left / right content area's. The minimum height would be 100% of the tallest column, for all columns. That's easy with CSS in all browsers that supports 'CSS tables'... http://www.w3.org/TR/CSS21/tables.html ...but someone forgot to tell MSIE about that part of CSS - so we have to fake it one way or another... http://www.gunlaug.no/tos/moa_11.html http://www.positioniseverything.net/articles/onetruelayout/ http://www.alistapart.com/articles/fauxcolumns/ I still don't quite understand the difference between wrapper / container and the use of float in the code. I try to experiment and get frustrated. The built-in flexibility/complexity of CSS based layouts compared to 'HTML table', may be frustrating. HTML tables behave and appears one way - with only a few variations, while CSS can make most element-combinations behave and appear in a multitude of ways - and can also simulate HTML tables to perfection when needed. The only real limitation with CSS design is lack of support in browsers, where especially IE (all versions) is weak. In www.oneyed.com/mt/LayoutGala07.html #wrapper and #container are just IDs they've used on two different container-divs, since they style them to do different things. That's the flexibility of CSS again. - The 'float' property makes #wrapper expand (stretch in height) to contain #content and the two side-floats; #navigation and #extra. That's in part how the 'equal height columns' appearance is created in that layout. Floats and normal in-flow elements can be contained this way, but 'absolute positioned' elements, like you use in your page, can not. What would be a good book for me to go and buy to use as reference and online references, besides this list. I can't recommend any books on CSS since I haven't read any - yet. I _can_ recommend the 'CSS 2.1' specification... http://www.w3.org/TR/CSS21/ ...and especially the 'Visual formatting model'... http://www.w3.org/TR/CSS21/visuren.html ...since everything anyone needs to know about CSS - in order to start designing with it, is contained there. 'Web Design References' with 'Cascading Style Sheets' and all the other stuff, may also help... http://www.d.umn.edu/itss/support/Training/Online/webdesign/ regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A List Apart example doesn't work on IE7 - Help!
Hey experts, I run a web site that makes use of a drop-down menu that was first implemented here: http://www.alistapart.com/articles/horizdropdowns - http://www.alistapart.com/d/horizdropdowns/horizontal2.htm It works very well on browsers like Firefox and IE6/Win but I noticed that it doesn't work properly on the new IE7/Win. The author of this menu had workaround for the IE6 (Mystery IE6 Bug) but this workaround is useless for the IE7 .. Wee, I tried to contact the author of the menu but his personal and company web sites are down .. so any help of you is highly appreciated! Thanks in advance, Andre __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Changing the z-index of a background image
Dear list,
On this page:
http://www.polarissc.com/hr.html
I have two background images (only one of which is actually a
background image in the body tag): gradient.png and greensmoke.jpg .
Here's the relevant code:
style type=text/css
body {
background-image: url(images/gradient.png);background-repeat: repeat-
x;background-position: left bottom; background-attachment: fixed; z-
index: 1;
}
/style
body
img src=images/greensmoke.jpg width=955 height=600
style=position: absolute; top: 0; left: 0; z-index:0; visibility:
visible; /
/body
What I'd like is for GRADIENT to have a higher z-index than
GREENSMOKE, but I can't seem to make that happen: only the opposite.
Considerations:
1). GRADIENT must be a real background image, because I need it to
be fixed at the bottom of the viewport and IE6 can't seem to handle
that any other way.
2). I tried making GREENSMOKE a background image also, but it just
stopped displaying GRADIENT when I'd done so.
Can anybody help me?
Many thanks,
Chris.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A List Apart example doesn't work on IE7 - Help!
André Wilms wrote: Hey experts, I run a web site that makes use of a drop-down menu that was first implemented here: http://www.alistapart.com/articles/horizdropdowns - http://www.alistapart.com/d/horizdropdowns/horizontal2.htm It works very well on browsers like Firefox and IE6/Win but I noticed that it doesn't work properly on the new IE7/Win. The author of this menu had workaround for the IE6 (Mystery IE6 Bug) but this workaround is useless for the IE7 .. I just finished a two-level horizontal menu that had a similar problem, though for different reasons. To fix it, give the ul li a a width: http://www.seventysevendesigns.com/horizontal2/horizontal2.htm In this ALA example, a width of 138px seems to fit perfectly. Also changes background and text color when you hover the link boxes (i.e., not just over the actual text), as it does in FF. Tested and works in FF2/Win, Opera9/Win IE7/Win, and IE6/Win. Brian -- Brian Riley http://www.seventysevendesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page check please
~davidLaakso wrote: Larry, I think it is probably working as you intend in ie7.0 and the latest versions of ff and opera. IE 6 and down do not support position fixed so problems are anticipated there. The flower image works on hover but not the header image on hover. There is left column float drop in ie/6.0-- probably due to the horizontal padding on the width bearing right column. Moving that padding to the inside elements might help (although others on the list may have an easier css work around). The page is against the left rail in ie5 and 5.5. Try adding text-align: center; to the body declaration. And text-align: left; to #wrap. Best, ~dL Thanks David. Did as you said. Unable to center the various buttons in the sidebar - despite margin 0 auto and text-align-center. Pls re-check for me? Also any suggestion - how to center those 'buttons'? Deeply appreciate your support. The 'fixed' problem implies I modify the design? Best. Larry From: ~davidLaakso [EMAIL PROTECTED] To: Jehangir Larry [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Sunday, January 14, 2007 9:51 AM Subject: Re: [css-d] page check please Jehangir Larry wrote: Appreciate a page check - different user agents (specially older IE), with suggestions for improvement. www.teerthyatri.com Many TIA. Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] cssmania
Funnily (or not) the HTML/CSS of the show-case http://cssmania.com do not validate! We are all human, I guess. Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] cssmania
While exploring this issue, I checked a random site show-cased - http://www.justinshattuck.com/ and it fails validation. Standards protagonists urgently need to look at this. IMHO. Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sigh, CSS and Explorer
Morning Ed You wrote; On 1/13/07, Jan Erik Moström [EMAIL PROTECTED] wrote: + How common is Explorer 6, should I bother to try to fix this? Well unless Microsoft's push for IE7 is going faster than I think it's probably still the majority browser out there. + Is there some simple way of fixing this (I tried to find some reference of how to fix it but I didn't find anything)? First you have to get rid of the comments before your DOCTYPE declaration. For IE6 (and 7) the declaration must be the very first thing in the file or it will render in quirks mode instead of standards mode. In IE that's a much bigger deal than with other browsers because in quirks mode it sizes screen boxes incorrectly. snipped a bit -- Ed Seedhouse Just to clarify, MS fixed [1] the doctype switching caused by the XHTML Prolog preceding a complete XHTML Doctype in IE 7. Best to you all. [1] http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx Jim Nannery www.beebar.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Spanning a bg to the very bottom (cross-browser)
http://goonsquad.org/santini/site/index.html This works fine as far as I can tell in FF2.0 and IE 7, but when I run a browsershots.org on it, the left and right borders don't span to the bottom of the page. Anyone know how to get them to span to the bottom? Thanks, - Jon __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Spanning a bg to the very bottom (cross-browser)
Hello Jon. I think the height : 100% on the div's with ids 'l' and 'r' is causing the problem. Regards Sathish __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Spanning a background image beyond the visible area?
This is somewhat of a re-post, but I didn't realize what was happening last time. http://goonsquad.org/santini/site/index.html If you make the visible area of the website less than the whole website (allow vertical scrolling) you will notice that the left and right borders do not continue down. How do I fix that? (this is an image from browsershots to explain what I mean: http://browsershots.org/png/full/c2/c2537fd91b7a4a8e30bf3cae4834f274.png ) Thanks, - Jon Hughes __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Spanning a bg to the very bottom (cross-browser)
Hello again! I think the height : 100% made the image extend all the way to the bottom of the browser window, but not all the way to the bottom of the document because document's height browser window's height. Specifying the height in pixels may help. I also found that a part of the links at the top of the page are hidden behind the blue bars when I see them in FF2.0, although I'm not sure how to fix this. I'm new to CSS, so please bear with me. Regards Sathish __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page check please
Jehangir Larry wrote:
Pls re-check for me? Also any suggestion - how to center those
'buttons'?
Change to...
.center { text-align:center; width: 190px;}
...and the buttons will be centered.
The '.center' will otherwise collapse to the width of two buttons, and
there's no width to center within. There's nothing to adjust any
auto-margins against anyway, so no use in those.
The 'fixed' problem implies I modify the design?
Don't know. That's a design-decision.
The addition of...
* html a#swamiji {position: absolute;}
...will make that anchor appear where it should in IE/win but scrolling
with the page. Nothing will happen in IE/win on :hover though.
Comment: Please don't put my email address inside your stylesheet (or
anywhere else). I don't want it spread around more than it is. If
anything - put my site-address in there. It's on the bottom of this mail
in most mail-agents :-)
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE crashing and Horizontal scroll bar woes!
Hi! I am new to the world of css and have just poured two weeks into trying to fathom it all out... After several attempts I have achieved something that validates and is somewhere near what I want... however, i just noticed it crashes in IE - any advice? Also why is there a horizontal scroll bar even though the page has a fixed width less than my screen size? Site is at: www.quoakle.co.uk Thank you! Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE crashing and Horizontal scroll bar woes!
Hi Mark, Having 50% left margin and a width of 800px automatically makes the page wider than any screen less than 1600px in width. That's why you have the scrollbar. Just contain your design in a right aligned div and that should fix that problem. Haven't experienced crashes here in IE7 so far. Are you sure your html validates? Adam Frame Mark Finney wrote: Hi! I am new to the world of css and have just poured two weeks into trying to fathom it all out... After several attempts I have achieved something that validates and is somewhere near what I want... however, i just noticed it crashes in IE - any advice? Also why is there a horizontal scroll bar even though the page has a fixed width less than my screen size? Site is at: www.quoakle.co.uk Thank you! Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Este mensaje y cualquier fichero adjunto esta dirigido unicamente a sus destinatarios y pueden contener informacion confidencial. Si usted considera que ha recibido este correo electronico por error (por asunto, por remitente o por cualquier otra causa), le informamos que cualquier revision, alteracion, impresion copia o transmision de este mensaje o de cualquier fichero adjunto esta prohibida y puede constituir un acto ilegal. Por favor, notifiquele el error al remitente respondiendo a este e-mail y elimine el mensaje y su contenido inmediatamente. This e-mail and any files transmitted with it are intended soley for the use of the intended recipients and may contain confidential information. If it appears (from the subject matter or address information or otherwise) that you received this email in error, please note that any review, dissemination, disclosure, alteration, printing, copying or transmission of this e-mail or any file transmitted with/within it is prohibited and may be unlawful. Please notify me by return email and delete this email and its contents immediately. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] importing css styles into a main css file
Hi - I've been lurking here for some time and learning a lot thanks. I'm a relatively experienced with websites for societies etc., and not a professional. I have used CSS for some time to style text, tables etc., and am slowly making the move away from tables - and so my css file(s) were getting larger and more difficult to manage. I discovered that you can import other style sheets into another and found the technique shown below helpful to keep separate aspects of css apart and easy to maintain. It also means that xhtml files don't need to have multiple lines of links to css files. As I haven't seen too many other people using it I'm wondering if there is a disadvantage I may have missed. I'm aware of what cascading does and the need to keep styles in certain orders - so wondering if this technique will give a problem with cascading. What's the opinion here please: in each xhtml page link href=../css/main.css rel=stylesheet type=text/css / /* CSS Document main default file */ @import url(fonts.css); /* typography styles */ @import url(general.css); /* main layout */ @import url(nav_horiz.css); /* navigation */ @import url(lists.css); /* lists */ @import url(images.css); /* images */ -- Malcolm -- ~Malcolm N ~ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page check please
Jehangir Larry wrote: ~davidLaakso wrote: Thanks David. Did as you said. Unable to center the various buttons in the sidebar - despite margin 0 auto and text-align-center. The above reference was to center the page. The page is centered now. However, the search thing is too wide-- consequently, the left column is dropped and hooked under the right column. The width of the left column is approx 190px. The search thing can be no wider (or a little less wide) than that. Pls re-check for me? Also any suggestion - how to center those 'buttons'? I am not sure what you mean by buttons. If buttons means all those validation buttons, personally I'd delete all of them. They confuse users. And have nothing to do with the content of the site. Deeply appreciate your support. The 'fixed' problem implies I modify the design? Someone else will have to advise you regarding the ie position fixed issue and the header not opening on hover. Best. Larry Regards, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Request for site check (and critique if you've got time!)
Hi everyone - I've recently finished a redesign of my site, a blog dedicated to - what else! - web design and web standards. http://www.thenestedfloat.com I'd really appreciate a site check. I'm on a mac, so I've done only limited testing in all versions of IE/Win. Let me know if you find anything amiss. (I'm particularly concerned that all parts of the design - header, body, and footer - are all centered, as I know centering using auto margins in IE can be problematic, and I'm mixing my methods here.) Also, I'd really appreciate any feedback you have about the look or feel of the site. Thanks so much! Matt __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page check please
Though I believe everything is working as you intend, I would suggest rethinking the header rollover trick. When I roll over the header image, the image extends, and thus increases the height of the page. But then if I move on to the navigation bar - in an effort to navigate to a particular section - the page shrinks, and my mouse pointer is effectively pulled away from the nav bar. i have to scroll up the page to get to it, now that the page has reverted to its shorter length. For what it's worth, I'm on Firefox 2.0 on the mac. I'm actually not sure how other browsers handle this type of scenario - though now I'm intrigued to find out! matt On 1/13/07, Jehangir Larry [EMAIL PROTECTED] wrote: Appreciate a page check - different user agents (specially older IE), with suggestions for improvement. www.teerthyatri.com Many TIA. Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Request for site check (and critique if you've got time!)
Hi Matt I've recently finished a redesign of my site, a blog dedicated to - what else! - web design and web standards. http://www.thenestedfloat.com I'd really appreciate a site check. I'm on a mac, so I've done only limited testing in all versions of IE/Win. Let me know if you find anything amiss. (I'm particularly concerned that all parts of the design - header, body, and footer - are all cantered, as I know centering using auto margins in IE can All looks fine to me in FF2, IE6/7, Opera 9.0 WinXP Prof SP2 Looks clean and typically Bloggie to me. Good luck Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.432 / Virus Database: 268.16.10/625 - Release Date: 13/01/2007 17:40 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Changing the z-index of a background image
On 1/15/07, Christian Kavanagh [EMAIL PROTECTED] wrote:
Dear list,
On this page:
http://www.polarissc.com/hr.html
I have two background images (only one of which is actually a
background image in the body tag): gradient.png and greensmoke.jpg .
Here's the relevant code:
style type=text/css
body {
background-image: url(images/gradient.png);background-repeat: repeat-
x;background-position: left bottom; background-attachment: fixed; z-
index: 1;
}
/style
body
img src=images/greensmoke.jpg width=955 height=600
style=position: absolute; top: 0; left: 0; z-index:0; visibility:
visible; /
/body
What I'd like is for GRADIENT to have a higher z-index than
GREENSMOKE, but I can't seem to make that happen: only the opposite.
1) Gradient appears to be an opaque image, therefore if displayed in
front of greensmoke it would obscure it. hence I doubt if you really
want that.
2) The concept of z-index only applies to elements, not to background
images. background images are stacked according to the elements which
contain them
Considerations:
1). GRADIENT must be a real background image, because I need it to
be fixed at the bottom of the viewport and IE6 can't seem to handle
that any other way.
2). I tried making GREENSMOKE a background image also, but it just
stopped displaying GRADIENT when I'd done so.
Can anybody help me?
I think you want soemthing like the following:
style type=text/css
body {
background: #fff url(images/gradient.png) repeat- x left bottom fixed;
margin:0; padding:0; }
.outer { background: url(images/greensmoke.png) no-repeat top left; }
/style
body
div class=outer
[...rest of page]
/div
/outer
2 background images = 2 elements to attach them to (until everyone
supports the incomplete Css3 background module).
I've zeroed the margins on body to correctly position .outer, hence if
you were depending on any explicit padding on body you would need to
add that padding to .outer.
Note the colour added to the body background - this will avoid chunks
of whatever non-white bg colour the user has defined appearing between
the images.
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Request for site check (and critique if you've got time!)
Matt Dawson wrote: http://www.thenestedfloat.com I'd really appreciate a site check. I'm on a mac, so I've done only limited testing in all versions of IE/Win. Matt re: xp Looking good in latest version of opera and ff. If it makes any difference to you, you are drawing a small horizontal scroll bar in ie7.0 and ie 6.0 (but not in ie/5.5 nor 5.01). Your very nice logo is a no-show in the dead ie/5.01. The page holds a very nice font scaling with and without a side bar in place and folds nicely. A missing letter a in margin is keeping your css file from validating without error (tsk, tsk). It is a nice, clean, minimal design. Nice job, Matt. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Implementing navigation bars w/certain requirements, using CSS
Hello -- I'm a systems administrator, not a Web developer, so please excuse any naivete'. I need to set up informational Web pages for users, which meet these Requirements : 1. Navigational links in a bar(s). 2. When the cursor hovers over a link in a navigational bar, a menu drops down. This dropdown menu can have submenus, which can also have submenus, and so on. 3. Does _not_ use frames. 4. When the user makes a selection, the href displays in a portion (div of the _same_ window as the navigation bar - i.e., the navigation bar _remains_ on the page when the href content is displayed. and these desired Features : A. Uses CSS to the maximum extent possible. B. Does not use JavaScript. (I don't know JavaScript, really don't have the time to learn it). C. Opensource code There is a _lot_ of information on navigational bars on the Web. I've spent a fair number of hours on this, and found some particular code that : - meets all Requirements, except 4. - meets Features A and C, but not B. As for 4., the only way I can get the code in question to not _replace_ the content of the current window (including the navigation bar) is to use the target attribute of the a tag. However, my understanding is that that attribute is deprecated, so I would like to avoid using it. As for B., the impression I get is that JavaScript may be needed to meet the Requirements. The questions : 1. Can anyone supply pointers to resources that meet the 4 requirements AND Feature B. ? 2. Can Requirements 3. AND 4. be met, even with using JavaScript ? If so, can anyone supply pointers to the techniques to be used ? Thanks very much for any help on this. ___ David Perel IST University Computing Systems New Jersey Institute of Technology [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] importing css styles into a main css file
Malcolm N wrote: As I haven't seen too many other people using it I'm wondering if there is a disadvantage I may have missed. I have used the method you describe for several years, and haven't encountered any problems. I know of only one possible disadvantage with it: IE/win (all versions) will not get the CSS file if you add 'media' to the @import, so the following... @import url(basestyles.css) screen; ...will give pretty unexpected results. Of course, that IE-bug can be turned into an advantage, as described here... http://www.gunlaug.no/contents/wd_additions_12.html I use @import so that basic stylesheets for a 2-column, a 3-column and other possible base-layouts, all imports the same stylesheets for what's common for these layouts. I then use @media wrappers in each stylesheet for media-specific styling. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image makes border and footer disappear
I'm working on a revamp of a site: http://www.ambientglow.com/garage/DT/index.html Each section will have a different dreamy collage-type background image -- at the moment only the home and Contact page have the image on the page. As you can see, when there is no background image, #footer and the border around #container shows up -- but when I pop the background image in, both disappear. Anybody got any ideas on how to fix this? Thanks, Peg ambientglow.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page check please
Thanks David, Georg, Matt. Except for the header roll-over (the customer is king) implemented all suggestions. Long live this great list. Comment: Georg, your email in the css was due to a hasty cut/paste. Its gone :-) Regards, Larry - Original Message - From: Matt Dawson To: Jehangir Larry Cc: css-d@lists.css-discuss.org Sent: Monday, January 15, 2007 4:33 AM Subject: Re: [css-d] page check please Though I believe everything is working as you intend, I would suggest rethinking the header rollover trick. When I roll over the header image, the image extends, and thus increases the height of the page. But then if I move on to the navigation bar - in an effort to navigate to a particular section - the page shrinks, and my mouse pointer is effectively pulled away from the nav bar. i have to scroll up the page to get to it, now that the page has reverted to its shorter length. For what it's worth, I'm on Firefox 2.0 on the mac. I'm actually not sure how other browsers handle this type of scenario - though now I'm intrigued to find out! matt On 1/13/07, Jehangir Larry [EMAIL PROTECTED] wrote: Appreciate a page check - different user agents (specially older IE), with suggestions for improvement. www.teerthyatri.com Many TIA. Larry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image makes border and footer disappear
Peggy Coats wrote: I'm working on a revamp of a site: http://www.ambientglow.com/garage/DT/index.html Each section will have a different dreamy collage-type background image -- at the moment only the home and Contact page have the image on the page. As you can see, when there is no background image, #footer and the border around #container shows up -- but when I pop the background image in, both disappear. Anybody got any ideas on how to fix this? First off, background images are better left delegated to the CSS file since they are for presentational purposes only (i.e., not actual content). But the reason why things are disappearing is #background's z-index. Just remove that line from the CSS file, and everything should show up. Good luck, Brian -- Brian Riley http://www.seventysevendesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] need some help - MAC IE browser (linked style sheet question)
[thanks Georg for your help and insight on how to approach cross-browser issues. i've compared your example to mine and learnt a great deal on how to simplify the layout. i feel like i've got a long, long, long way to go before i can say i fully understand all the ins and outs of CSS, but you certainly made me feel that with some help and feedback it is possible to get a wee bit closer.] yet another thing i don't understand, is why a linked style sheet would make the 'text-indent' tag not work in IE (mac)? see: www.thestudioformovement.com. I was using a linked style sheet and IE for Mac was not reading the text-indent on the main content window (rightContent). I find this very strange, because when I added the style sheet back to the web page, it worked fine. The code is exactly the same! Or am i just missing something here? i compared the code line by line and it's the same. I left the other pages with the linked style sheet to display what i mean (see classes, gallery etc...). Is there something one needs to do when linking a style sheet, so that Mac IE won't have problems reading some of the tags? it works fine on every other browser. (i've not added a home link yet, so sorry about the non-user-friendly navigation). thanks in advance for help, -mary From: Gunlaug Sørtun [EMAIL PROTECTED] To: hiptojive @hotmail.com [EMAIL PROTECTED] CC: css-d@lists.css-discuss.org Subject: Re: [css-d] need some help - MAC IE broswer + Safari problems and some text tag help Date: Sun, 07 Jan 2007 01:20:08 +0100 hiptojive @hotmail.com wrote: [...] On Safari and IE, it's about a pixel off on the right hand content pane, because of the border i have put on it. And then on IE the left hand nav pane is really off (too short). Any insight as to how to fix this problem would be HUGELY appreciated. We usually solve such problems by letting the browsers adjust on their own, so it looks alright in all browsers. That's easier than to count and correct such differences across browser-land. Usually that means avoiding 'position: absolute' for large parts of our layouts. [...] Apparently Apple-chancery or zapf chancery should work for Safari because it seems to be installed on most Macs, but it doesn't work. Am i coding this incorrectly? A missing '}' at the end of that declaration. Some browsers will then correctly ignore the entire declaration, while others will use what they can. www.thestudioformovement.com of course any other feedback would also be very helpful and appreciated. I found it quicker to rewrite the parts I found less good or not working, instead of explaining how to correct them one by one. Here is a cross-browser (win Mac) tested example you can compare with your existing page... http://www.gunlaug.no/tos/alien/test_07_1230.html I've used floats and float-containment, and a list with anchors for navigation. I've left the details to you. regards Georg -- http://www.gunlaug.no _ Dont waste time standing in linetry shopping online. Visit Sympatico / MSN Shopping today! http://shopping.sympatico.msn.ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Setting width on the Select element of the form (problem in IE)
Hi all Setting the width on the select element of the form works fine in all browsers except for IE. The width that I have set the select element to is smaller than the width of the longest item in the dropdown list. In IE the dropdown values get cut off at 160px (the width that I have set it to). However, in all other browsers when click on the dropdown menu, the list automatically resizes to the width of the widest dropdown item. Is this what is supposed to happen, and if so why does it work the way I want it to in all other browsers? :-( Regards Bojana __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Setting width on the Select element of the form (problem inIE)
Ahh just found this: Warning: on IE, if the width suggested is narrower than the presentation of an option requires, the option is displayed truncated, with no possibility to see the whole text (without looking at HTML source)! http://www.cs.tut.fi/~jkorpela/forms/present.html#select :( -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bojana Lalic Sent: Monday, January 15, 2007 2:32 PM To: css-d@lists.css-discuss.org Subject: [css-d] Setting width on the Select element of the form (problem inIE) Hi all Setting the width on the select element of the form works fine in all browsers except for IE. The width that I have set the select element to is smaller than the width of the longest item in the dropdown list. In IE the dropdown values get cut off at 160px (the width that I have set it to). However, in all other browsers when click on the dropdown menu, the list automatically resizes to the width of the widest dropdown item. Is this what is supposed to happen, and if so why does it work the way I want it to in all other browsers? :-( Regards Bojana __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 not showing CSS rollover effects
Hi all, I'm new to CSS. I've been designing with tables since 2003, putting off the transition to CSS. In the past week, I've taken CSS to bed and woken up to first thoughts of a possible solution to all kinds of problems. This has been a rough journey - going from elation to exhausted annoyance. sort of an electronic manic depressive state. The CSS text effects are fine enough, but the layout is another story altogether. Finally, this site layout (http://www.crazyacesentertainment.com) seems to be displaying properly in IE7 and NN8/Firefox, but alas. a look at IE6 is horrific. At any rate, the Problem: IE6 will not display the button up and over, though for some reason (and I figure this should be an easy investigative signified to tie to a signifier somewhere, but it's not working for me, novice that I am) the only button under which an image shines through is this how to play button - it appears to be in a constant hover/active state. The other problem is that the #content section is all over the place in IE6. I've been looking at IE6 hacks, but none seem to address the button issue. So I figure it must be a designer problem. If you can offer insight, I'd be grateful. The site is http://www.crazyacesentertainment.com Critter __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] need some help - MAC IE browser (linked style sheet question)
On Jan 15, 2007, at 12:51 PM, hiptojive @hotmail.com wrote: yet another thing i don't understand, is why a linked style sheet would make the 'text-indent' tag not work in IE (mac)? see: www.thestudioformovement.com. I was using a linked style sheet and IE for Mac was not reading the text-indent on the main content window (rightContent). I find this very strange, because when I added the style sheet back to the web page, it worked fine. The code is exactly the same! Or am i just missing something here? i compared the code line by line and it's the same. I left the other pages with the linked style sheet to display what i mean (see classes, gallery etc...). Is there something one needs to do when linking a style sheet, so that Mac IE won't have problems reading some of the tags? it works fine on every other browser. In both cases the text-indent is not applied, seen from here. It is a bug: http://www.macedition.com/cb/ie5macbugs/#indentimage You may want to use some other unit in this case. Your container is fixed width, 10% will always be 10%. Maybe try with em (makes the text-indent dependent on the user font- size, quite nice). Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] need some help - MAC IE browser (linked style sheet question)
hiptojive @hotmail.com wrote: [... i feel like i've got a long, long, long way to go before i can say i fully understand all the ins and outs of CSS, but you certainly made me feel that with some help and feedback it is possible to get a wee bit closer.] Give it time, and you'll get as far as you want to. yet another thing i don't understand, is why a linked style sheet would make the 'text-indent' tag not work in IE (mac)? see: www.thestudioformovement.com. (It's the 'text-indent' _property_ but that's another matter :-) ) [...] Is there something one needs to do when linking a style sheet, so that Mac IE won't have problems reading some of the tags? it works fine on every other browser. Not quite the same amount of text-indent across browser-land though, and (I guess) that's part of the problem. Looks like browsers don't agree on what to calculate 'text-indent: percentage' from and onto, and IE/Mac seems to resolve it to zero when that 'property: value/unit' pair is found in the external stylesheet. Using Firefox (2.x) as norm, I came to a value of... text-indent: 66px; ...and all browsers, including IE5.2.3/Mac, agreed on that amount of text-indentation. I noted Philippe's bug-reference in the mean time, and luckily we ended up with similar solutions :-) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Clear: both Problem?
Hi All Could you help me with a little problem I am having please? This site works as a home page: http://www.nanadobbie.com/ but as soon as I navigate to a category we get this: http://www.nanadobbie.com/index.php?main_page=indexcPath=1 It is Zen-Cart based template using this design as a starter: http://www.nanadobbie.com/index.html CSS is at: http://www.nanadobbie.com/includes/templates/nanadobbie/css/stylesheet.css Any ideas why the float is not clearing please or maybe why it works as a home page and not a category page? Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image makes border and footer disappear
Brian and Rick -- thanks for the z-index solution. I always forget that! Brian, you mentioned that the backgroundimages are best left in the CSS file -- since this would normally be associated with the body tag, and there will be different backgrounds for each main page, how would the CSS be written for this? I know how to do this if writing for a div or class, but not sure how for body. Thanks! Peg On 1/14/07, Brian Riley [EMAIL PROTECTED] wrote: Peggy Coats wrote: As you can see, when there is no background image, #footer and the border around #container shows up -- but when I pop the background image in, both disappear. Anybody got any ideas on how to fix this? First off, background images are better left delegated to the CSS file since they are for presentational purposes only (i.e., not actual content). But the reason why things are disappearing is #background's z-index. Just remove that line from the CSS file, and everything should show up. Good luck, Brian -- Brian Riley http://www.seventysevendesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image makes border and footer disappear
Might try setting up a unique ID for each different page, assign that to body tag of the appropriate page, then define the background for each ID in your CSS. At least I think that's how others have done it. BTW, I don't believe the list is a fan of top-posting ... Peggy Coats wrote: Brian, you mentioned that the backgroundimages are best left in the CSS file -- since this would normally be associated with the body tag, and there will be different backgrounds for each main page, how would the CSS be written for this? I know how to do this if writing for a div or class, but not sure how for body. Thanks! Peg On 1/14/07, Brian Riley [EMAIL PROTECTED] wrote: Peggy Coats wrote: As you can see, when there is no background image, #footer and the border around #container shows up -- but when I pop the background image in, both disappear. Anybody got any ideas on how to fix this? First off, background images are better left delegated to the CSS file since they are for presentational purposes only (i.e., not actual content). But the reason why things are disappearing is #background's z-index. Just remove that line from the CSS file, and everything should show up. Good luck, Brian -- Brian Riley http://www.seventysevendesigns.com -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A table of images using sprites...
Hello - I've subscribed to this list for years - and at last have a project and a reason to post... A client of mine had a site done in Flash. http://www.stephenporterstudio.com He has decided that he now wants nothing to do with Flash, and has asked me to recreate the file in HTML. I want to do two pages as a proof of concept for myself, to show that I'm on the right track. I've been following the article here: http://alistapart.com/articles/sprites to recreate the navigation on the first page, and I think I've been pretty successful. http://www.stephenporterstudio.com/html/index.html I've now started on the second page (the gallery link) - and it's a bit more complex. There's a grid of 9 buttons that have both roll over effects and cause a second image to come up when clicked. Rather than jump into doing this with a table and JavaScript, I thought I'd try to use the sprite method for this too - but I wonder if I've hit a dead end. The article above says this when they discuss making buttons: Since we can’t rely on the ul for placing the original background image, we’ll end up applying it to all lis instead It's not clear to me why we can't still rely the UL for placing the image - but, any maybe this is part of the problem - it seems I can't position the li elements in the second or third columns. The hovers work just fine on the first elements of the rows (I've only done the first two rows) but the 2nd and 3rd elements don't seem to want to move over. You can see some type I was using as a test for li's number 2 and 5. Perhaps I'm being silly here and should just use tables - this is a table of buttons after all. And I suspect I'll have to use JS to make the secondary image pop up anyway, but I thought it would be pretty elegant if i could get this to work. Thanks to anyone who takes the time to look at this - and either tell me it's possible, or to just get over it and do it with a table and JS. Hugo Heriz-Smith __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
