Re: [css-d] div spacing problem
From: Aaron Gray [EMAIL PROTECTED] http://angray.members.beeb.net/Examples/CSS/test.html I have used extra div's instead of using padding for positioning and now believe have a working cross browser solution. It would be good to know why the above example had the extra line space though. As was previously explained, the lack of a doctype on your page puts ALL browsers into quirks mode, which can cause quite a variety of different renderings. For IE6, it means, for one thing, that it uses the old, broken box model of its even older relatives, IE5 and IE5.5 [1]. The /real/ box model says you should add borders and padding to the outside of the content width and height. So, for example, if you have a div with a height of 40px, and a top and bottom border of 5px and top and bottom padding of 5px, you have the following addition problem that the browsers are supposed to perform. 40px (declared height) + 10px (top and bottom borders) + 10px (top and bottom padding) = 60px (total height of the div) This can also be shown as 5+5+40+5+5=60 (note: this is just a height example, but width works the same way). When IE6 is in quirks mode (which it is with your page because it has no doctype [2]) and for IE5 and IE5.5, the borders and padding are computed INSIDE the content height. So, if you set the height of your div to 40px, then the borders and padding will stay within this confined space (essentially, as long as your content doesn't make it expand). It is your choice to use a doctype or not on your pages. Just as a caution, however, as you progress with building your page. As I stated before, without a doctype, ALL browsers use their quirks rendering mode, and you will likely find that there are even more differences as you add elements to the page than just what you have found so far. Most people recommend using a valid, standard-compliance-mode-rendering doctype to be placed on page to make most browsers render things in a similar way. If you decide to keep IE6 in quirks mode for your page, you can place a comment, or an XML declaration above the doctype (if you use XHTML) to make that browser behave like its relatives, IE5 and IE5.5. There will still be many differences you will have to account for with the IEs this way, as compared to better browsers. Some people do this all the time (you know who you are...) and some, perhaps most people don't, chosing instead to keep IE6 in standard-compliance mode. I hope that helps clear things up a little for you. ~holly [1] http://www.communitymx.com/abstract.cfm?cid=E0989953B6F20B41 [2] http://www.communitymx.com/abstract.cfm?cid=E2F258C46D285FEE __ 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] Need advice - css horizontal menu initially displays oddly when loading into a browser
Would anyone have any ideas as to why a horizontal css menu initially displays to the right side of the page first and then readjusts itself to the centre (as it should) when being loaded into a browser?? I would prefer that the menu displays in the centre of the page without it first showing up on the right hand side of the page. To see what I'm talking about go to http://www.tewksburycommercial.com.au/ Admittedly the whole site should have been developed in css but I'm only updating from a site that has originally been built using tables etc. Would appreciate if anyone can tell me if this can be fixed and, if so, how. Jasmin __ 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] CSS Tooltips
hey folks.
I know IE has issues with :hover on anything but a elements, but using
the following snippet:
a.info {
position: relative;
z-index: 20;
text-decoration: none;
}
a.info:hover {
z-index: 25;
}
a.info span{
display: none;
}
a.info:hover span {
display: block;
position: absolute;
top:2em; left:2em; width:18em;
border: 1px solid #0cf;
background-color: #cff; color:#000;
text-align: left;
padding: 3px;
}
I would assume that because its being used on an a element, it would
of worked. The aim if to provide CSS'd 'tooltips' as such.
Any ideas?
Scott.
__
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] CSS Tooltips
Scott Wilcox wrote:
I know IE has issues with :hover on anything but a elements,
but using the following snippet:
a.info {
position: relative;
z-index: 20;
text-decoration: none;
}
a.info:hover {
z-index: 25;
}
a.info span{
display: none;
}
a.info:hover span {
display: block;
position: absolute;
top:2em; left:2em; width:18em;
border: 1px solid #0cf;
background-color: #cff; color:#000;
text-align: left;
padding: 3px;
}
I would assume that because its being used on an a element,
it would of worked. The aim if to provide CSS'd 'tooltips' as
such.
Any ideas?
IE needs a trigger on the :hover to see the :hover span, and I'm
not sure if a change in z-index does it.
Does it work if you add a.info:hover{background-position:0 0;} ?
If not, could you provide an uploaded example of the problem?
--
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] div spacing problem
I'm commenting on this since the road one chooses, definitely affects how our CSS-styled pages are rendered and/or our approach to web design. Holly Bergevin wrote: Most people recommend using a valid, standard-compliance-mode-rendering doctype to be placed on page to make most browsers render things in a similar way. If you decide to keep IE6 in quirks mode for your page, you can place a comment, or an XML declaration above the doctype (if you use XHTML) to make that browser behave like its relatives, IE5 and IE5.5. There will still be many differences you will have to account for with the IEs this way, as compared to better browsers. Some people do this all the time (you know who you are...) (sure do :-) ) ...and some, perhaps most people don't, chosing instead to keep IE6 in standard-compliance mode. I most often recommend 'standard-compliance mode' to others - especially to those somewhat new to CSS based layouts. However, I myself leave mode-switching to the browser, since I use an XHTML doctype with an XML declaration on top. Not my fault that IE6 is broken on that point too, and it works to /my/ advantage[1]. IE6 isn't standard-compliant in any mode, so no big deal, IMO. I approach the layout in such a way that it doesn't really matter which mode (or mood) IE6 is in, so I can switch mode back and forth in IE6 without getting any major rendering-differences. That's all CSS, and pretty simple once one gets used to it - just like everything else in web design. I *recommend* that our creations are provided with a doctype that'll trigger standard mode[2] in standard-compliant browsers, so they default to the same standards. That is the only way to secure that the outcome of our work with CSS-layouts is somewhat close to what we want across browser-land. IE6 will always be off, but not by much :-) Think that's it on the subject ;-) regards Georg [1]http://www.gunlaug.no/contents/wd_additions_16.html [2]http://gutfeldt.ch/matthias/articles/doctypeswitch/table.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] Need advice - css horizontal menu initially displays oddly when loading into a browser
On Thu, 2006-07-27 at 20:21 +1000, Jasmin Marcolin wrote: Would anyone have any ideas as to why a horizontal css menu initially displays to the right side of the page first and then readjusts itself to the centre (as it should) when being loaded into a browser?? It doesn't do that for me in Firefox on Linux. What browser are you talking about? Would appreciate if anyone can tell me if this can be fixed and, if so, how. I think you need to post more information in order to get help. Best, Darren -- = D. D. Brierton[EMAIL PROTECTED] www.dzr-web.com Trying is the first step towards failure (Homer Simpson) = __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pixel perfect navigation tabs needed
On Jul 27, 2006, at 5:32 AM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Without seeing your styles or your complete mark-up, it's difficult to say. Hi Chris, Thanks for the quick response. My codes does valid. This is the first time I posted in CSS-list, I don't know why the CSS mail list software added my markup with pRENAMED_. I used to put a . in front of my markup because I was told, so that other who read email in HTML mode can read my markup, but I was just told by someone else from other list the other day that it won't matter with the .. Now I don't know whom to listen. I did provide the url, it seemed you didn't read my whole message before you response :) Anyway, here is the url and css link, if you still like to have a look. http://lotusseedsdesign.com/temp/home.html http://lotusseedsdesign.com/temp/css-files/global_1.css and the browsercam screen shot http://www.browsercam.com/public.aspx?proj_id=271980 Thanks! tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pixel perfect navigation tabs needed
On Jul 27, 2006, at 5:48 AM, Christian Heilmann wrote: Hi, I am driving myself crazy ... to be pixel perfect That is all to be said about this. If you make your header expand with the amount of content in it and add your tab list as the last element in it you don't have a problem at all. Yes, there might be a difference in the overall height of the header across different browsers, but at least you can resize the font without blowing the layout to smithereens. Booktip: Bulletproof Web Design by Dan Cederholm Hi Christian, It's almost sounds defensive to say this... this is a messy job... I only asked to code for the header; the whole page is already done, full of validation errors, horrible markup and codes and I have to code to the spec. I will have to fix it for free if I really care ( 99% of the time I do care.) Although I am guilty for divites, this page reflects better to my CSS knowledge http://sapotek.com/ just don't run the validation for inner page though as I was only responsible for setting up master template. I will have to rethink how to code the header per your suggestion. Thanks! I do have the Bulletproof Web Design book, haven't finish chapter 2 :) tee __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 7 News
Don't know if this is old news. Thought I would share though. IE7 will be available for XP... http://blogs.msdn.com/ie/archive/2006/07/26/678149.aspx Good news in my opinion. -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Divs not giving a scroll bar
Unless something changed very recently overflow-x/y has never worked for me in Safari. That sort of seems like the missing piece to me. IE Firefox can be worked with, but Safari only seems to support overflow:auto; as far as I've seen. Does anyone know a way to force Safari to emulate overflow-x? I've always had to resort to some goofiness with display:inline; and white- space:nowrap; It'd be nice to at least have control over the two default installed browsers (Safari IE) and the top 3rd party browser. Cliff On Jul 26, 2006, at 8:01 PM, David Gee wrote: Michael Landis wrote: Actually, scrollbars are pretty consistently supported. The issue is that overflow-x and overflow-y are not valid CSS 2 properties, but are IE extensions. If you look at the references for overflow-x and overflow-y at MSDN[1][2] you'll see that they are proposed additions to the spec, not parts of the spec. (By comparison, Microsoft describes overflow as actually being part of the specification.)[3] The only valid CSS 2 property dealing with scrollbars is overflow.[4] Give that a shot in place of overflow-x and overflow-y and see how that does for you. That said, overflow-x and overflow-y are part of the CSS 3 working draft, and AFAIR, do work in the latest versions of Gecko (Firefox 1.5): http://www.w3.org/TR/css3-box/#the-overflow-x I'm not sure what the level of support is in other browsers. Before Gecko supported the new overflow properties, it was possible to manipulate the scroll axis using this proprietary syntax: overflow: -moz-overflow-x and overflow: -moz-overflow-y __ 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] floated layout puzzle - correct URL
Sorry... here's the correct URL for anyone who's interested... http://audra.a0.aicdesign.net/news/?skin=193 -- Audra Coldiron Rock-n-Roll Design Hosting http://rock-n-roll-design.com Affordable, attractive websites for musicians that are a breeze to update. Designers - wanna use the tools on your own sites? Learn how: http://bandwebdesign.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] floated layout puzzle - correct URL
Audra Coldiron wrote:
Sorry... here's the correct URL for anyone who's interested...
http://audra.a0.aicdesign.net/news/?skin=193
Adding the styles to get a 'hanging float'...
#site_photo {margin-bottom: -175px;}
...and adjust the side-column to make up for it...
#teaser {padding-top: 170px;}
...is /one way/ to get the desired effect - if I understood your
description correctly :-)
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] Scaling Flash in IE vs. the Rest of The World
We have a site that we use CSS to set 100% width and 100% height to cover
the browser no matter the window size. We used a min-height setting to keep
the site scrollable when needed in smaller resolutions or if the window is
not maximized.
This (of course) works everywhere except Internet Explorer.
Has anyone had this same issue or found a workaround for IE so the file is
displayed properly?
Here¹s what we tried...
!--
/* start hiding from ie5 mac \*/
html { height: 100%;}
object, embed { height: 100%; min-height:600px; }
/* stop hiding from ie5 mac */
body { height: 100%; min-height:600px; }
--
Thanks for any input!
//angie jantz
__
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] floated layout puzzle
Audra Coldiron wrote:
Hi Everyone,
I'm hoping someone out there has the insight I lack to achieve this
certain layout.I'm not sure it's even possible.
I want to do a 2 column fixed width floated layout with a header and
clearing footer. Sounds simple enough, right? Well, I also want to
float a photo that appears above the header in the source and clear the
smaller column under the photo on the same side. The user has control
of the content so if a picture isn't there I want the column to suck up
under the menu. The problem is if I float the larger column (the main
content), it clears below the photo. If I don't float it portions of
the content clear below the photo. I can't change the HTML. Any
suggestions?
Yeah I found IE allows the floats to move up regardless of source order
on a recent project too but it wasn't beneficial. The effect you're
after can possibly be done using the sibling selector. IE6's rendering
could be mimicked using this horrificly hackish approach:
div#site_photo + div#header + div#navbar + div#content_wrapper {
position: relative; top: -170px;}
Assuming that div#site_photo only gets written in when there's an image
the above code will pull the content column up in modern browsers. It
will look stupid when re-sizing the text though and leave a big ole gap
at the bottom.
Its a pity you can't edit the html because if you could have the content
appearing above those teasers (or even if those teasers weren't part of
the navbar) you'd be in business. From messing around there's a few
workarounds using positioning but none of them are ideal. It relies on
whether the whole div#site_photo is there or not and then positioning
the teasers div absolutely.
You could show this to modern browsers only:
/*//
HEADER SITE PHOTO
If you want the user not to be able to change the main photo and/or
site title, place display: none in the style for that element.
//*/
htmlbody div#header {
text-align: center;
float : left;
width: 550px;
}
htmlbody div#header h1 {
position: relative;
z-index : 12;
}
htmlbody div#site_photo {
float: right;
position: relative;
z-index: 20;
}
/*
NAVBAR: TEASERS MAIN MENU
///*/
htmlbody div#navbar {
float : left; width : 550px; position : relative;
}
htmlbody div#teasers {
position: absolute;
top: -2.4em;
right : -200px;
width: 200px;
}
/* if the div#site_photo is there then the teasers will be moved down to
make room for the image */
div#site_photo + div#header + div#navbar div#teasers { position:
absolute ; top: 210px; }
htmlbody div#main_menu {
position: relative;
}
/*/
GENERAL CONTENT
//*/
htmlbody div#content_wrapper {
float:left;
width: 550px;
}
div#content {
}
Any help would be very appreciated!!
Thanks,
AC
Hope that helps, and like I said its a mingin solution. If you want me
to attempt to explain it better let me know.
I'd get that teasers div taken out of navbar and made separate if you can.
Rob
__
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] z-index in Internet Explorer (Version 6.0)
Hello everyone - I am new at this, so if this question has already been answered, please point me in the right direction for the answer. My problem: I am using a z-index in my css document to place a header. The following browsers display the page correctly: Firefox 1.5, Netscape 7.2, and Opera 8.51. Internet Explorer 6.0 places the image in the lowest z-index which totally hides the image I am trying place on top. Does Internet Explorer have a glitch or bug with the z-index property or am I just doing something wrong in my coding? Why does Internet Explorer read my css so differently? I do not have a place to upload my pages as of yet, so I know it might be hard to help me on this issue. If it would help, I can post parts of my code. Any help would be appreciated! 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/
[css-d] advantage to using doctype strict over transitional
As I am working on redisigning a website, I began to wonder what difference does it make whether I use the xhml1 transitional or strict doctype. I had done my first css site using transitional, and after reading the digests as I received them, I decided to change the doctype to strict. There was no change in how the browsers ie6 and ff1.5 rendered the site. So what advandages do you have using one over the other? MJ __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.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] CSS-driven dropdowns with JS imageswapping rollover
began with a suckerfish dropdown style menu. Per client desires, I want to have the menu items appear as images (to get the right font) after all. The upper level has the appropriate rollover appearance (the images change). The drop downs menus, while the appear correctly, don't change images. Any suggestions as to what to fix to make the lower level ones change also? Page: http://www.greenmountainaccess.net/~ktalmage/thirdsector/publicpart.php Scripts: http://www.greenmountainaccess.net/~ktalmage/thirdsector/js/rollmenu.js (Note: not all images for the list exist yet... ) Thanks kindly. Kir __ 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] advantage to using doctype strict over transitional
On 27/07/06, jaklitsch maya [EMAIL PROTECTED] wrote: As I am working on redisigning a website, I began to wonder what difference does it make whether I use the xhml1 transitional or strict doctype. strict is just less forgiving. Transitional gives you more leeway to use the odd deprecated element if there is no other choice. -- http://www.web-buddha.co.uk http://www.projectkarma.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] z-index in Internet Explorer (Version 6.0)
On Thursday, July 27, 2006 10:10 am, Matthew Stoneback wrote: I am using a z-index in my css document to place a header. The following browsers display the page correctly: Firefox 1.5, Netscape 7.2, and Opera 8.51. Internet Explorer 6.0 places the image in the lowest z-index which totally hides the image I am trying place on top. Does Internet Explorer have a glitch or bug with the z-index property or am I just doing something wrong in my coding? Why does Internet Explorer read my css so differently? I do not have a place to upload my pages as of yet, so I know it might be hard to help me on this issue. If it would help, I can post parts of my code. I don't remember the specifics, but had a similar issue with a page I developed using stacked images. I found that using absolute positioning solved my problem. And yes, IE does have issues rendering css properly. -- scott __ 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] advantage to using doctype strict over transitional
Dave Goodchild wrote: On 27/07/06, jaklitsch maya [EMAIL PROTECTED] wrote: As I am working on redisigning a website, I began to wonder what difference does it make whether I use the xhml1 transitional or strict doctype. strict is just less forgiving. Transitional gives you more leeway to use the odd deprecated element if there is no other choice. Right. An advantage of Strict is that it gets you used to coding without those deprecated elements. Keeps you honest, so to speak. But the real reason to choose one or the other is whether you will conform to its standards. If you're not ready to conform to Strict, choose Transitional. If you can meet the higher standard of Strict, choose it and do so. Also consider whether you need XHTML at all. If you're just going to be serving it as HTML, you might be better off sticking with HTML 4.01 for now. 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] advantage to using doctype strict over transitional
On 7/27/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: An advantage of Strict is that it gets you used to coding without those deprecated elements. Which means less to remember, and less stuff you have to learn if you are starting out. __ 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] z-index in Internet Explorer (Version 6.0)
Matthew Stoneback wrote: I am using a z-index in my css document to place a header. The following browsers display the page correctly: Firefox 1.5, Netscape 7.2, and Opera 8.51. Internet Explorer 6.0 places the image in the lowest z-index which totally hides the image I am trying place on top. Does Internet Explorer have a glitch or bug with the z-index property or am I just doing something wrong in my coding? Why does Internet Explorer read my css so differently? I do not have a place to upload my pages as of yet, so I know it might be hard to help me on this issue. If it would help, I can post parts of my code. What would help more is posting a link to the page that displays the problem. If you can't do that, yes, post the code, because we're not magicians. We have to see the problem to be able to fix it. :-) I bet you don't need to be setting z-index on the header at all (I've been doing CSS layouts for years and I have yet to ever use the z-index property), and I also bet that setting z-index will not make the images show up. Setting position: relative on them or giving them layout might. Or is it their container that needs layout? I can never remember on this bug... Anyway, send the page to the list and me or someone else will help. By the way, I recommend downloading the latest versions of those browsers you mentioned: Firefox 1.5.0.5, Netscape 8.1, Opera 9.0. Best, 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] advantage to using doctype strict over transitional
Ed Seehouse wrote: On 7/27/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: An advantage of Strict is that it gets you used to coding without those deprecated elements. Which means less to remember, and less stuff you have to learn if you are starting out. Yeah, that's a good point. There really are only a handful of elements in the Strict doctypes. 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] Scaling Flash in IE vs. the Rest of The World
100% height and 100% width XHTML Flash embed http://blog.deconcept.com/2005/01/02/100-height-and-100-width-xhtml-flash-embed/ HTH, gl, cheers. :) Micky __ 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] Three Column Layout in IE
I have a three column layout with a background image applied to a div that isn't displaying quite like I want in IE: http://demo.wfp.com/v2/story.htm In Firefox, this displays as desired, with the left column bg image spanning the full height of its containing element (called with astonishing complexity container). However, in IE, that bg image only spans to the height of the content in the third column (called auxnav). Any suggestions as to how I might get this to appear consistently across browsers? Note: I am utilizing some png's here for transparency and drop shadow affect, by way of AlphaImageLoader. I had to place an extra div with a transparent image to achieve the overlapping affect. As far as I can tell, this should have no bearing on the issue at hand. Just giving fairwarning on that... Thanks in advance! Christian. - Do you Yahoo!? Get on board. You're invited to try the new Yahoo! Mail Beta. __ 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] third column riding below
Hi,
I could use some help figuring out why the right column won't come up against
the main one but rides underneath instead. The page is at
http://www.emrec-beta1.com The stylesheet is internal. Thanks much for any
help.
Best regards,
Bill
stylesheet definitions
#left_col {
float: left;
background-color: #fcc;
width: 9em;
position: relative;
}
#main {
margin-left: 9em;
margin-right: 10em;
padding-top: 1ex;
padding-left: 1em;
padding-right: 1em;
background: white;
border-left: medium solid red;
border-right: medium solid red;
position: relative;
}
#right_col {
float: right;
background-color: #fcc;
width: 9em;
position: relative;
}
__
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] Three Column Layout in IE
xtiandc wrote:
http://demo.wfp.com/v2/story.htm
In Firefox, this displays as desired, with the left column bg image
spanning the full height of its containing element (called with
astonishing complexity container). However, in IE, that bg image
only spans to the height of the content in the third column (called
auxnav).
IE needs its 'hasLayout'[1] trigger in order to expand that 'container'
properly.
Adding...
#container {height: 1%;}
...will do the trick.
regards
Georg
[1]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] third column riding below
Bill Walton wrote: I could use some help figuring out why the right column won't come up against the main one but rides underneath instead. http://www.emrec-beta1.com That's how floats work - right_col can't float upwards past the non-floating main. For that kind of 'float/non-float' layout to work, you'll have to change the order in the source-code (HTML) so it becomes... - banner - topnav - left_col - right_col - main - footer ...and keep the CSS as is. 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] Safari ignoring hover
Greetings everyone, A couple questions on this page http://www.als.uiuc.edu/timo/ciba/ 1.) My left hand menu uses a border-right for hover and focus which works fine in everything except Safari (2.0.4) which totally ignores this hover. Safari works fine with other links elsewhere on the page so I'm assuming it has an issue with the border in the hover. I couldn't find any work-arounds. Any suggestions? 2.) When validating my CSS, the validator (http://jigsaw.w3.org/css-validator/) passes it but then lists all these Warnings about things that are either irrelevant or taken care of by the standard defaults. Are these Warnings worth heeding or what? 3.) There's also an issue with Safari and Opera regarding the negative margin-top I have on the validation icons at the bottom of the page. If you have a quick recommendation regarding that, great, otherwise I'll fiddle with it later. Much thanks for your insights. -Tim -- ** Tim Offenstein - Web Specialist - CITES ALS - 244-2700 * IGPA - 244-1398 ** It is impossible to learn while you're talking. - Timo __ 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] Safari ignoring hover
Tim Offenstein wrote: yone, A couple questions on this page http://www.als.uiuc.edu/timo/ciba/ 1.) My left hand menu uses a border-right for hover and focus which works fine in everything except Safari (2.0.4) which totally ignores this hover. Safari works fine with other links elsewhere on the page so I'm assuming it has an issue with the border in the hover. I couldn't find any work-arounds. Any suggestions? Yes, delete them. The Colorado Bar Association /and / vertical bars for the menu is really stretching it a bit, me thinks 2.) When validating my CSS, the validator (http://jigsaw.w3.org/css-validator/) passes it but then lists all these Warnings about things that are either irrelevant or taken care of by the standard defaults. Are these Warnings worth heeding or what? These are warnings, and they are probably safely ignored-- providing, of course, that you have thoroughly tested your site. 3.) There's also an issue with Safari and Opera regarding the negative margin-top I have on the validation icons at the bottom of the page. If you have a quick recommendation regarding that, great, otherwise I'll fiddle with it later. Yes, I have a quick recommendation-- delete them, too. You are setting your client up. And they are detracting from the content of the site. Much thanks for your insights. Insights? What insights :-) ? -Tim Regards, ~dL PS I think I'll go to a bar. __ 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] ul and its margins and how to shape them
Finally relized that my shortcut listings for the font was wrong and now the font link color problem is solved, but still need help in understanding the box that is ul. MJ __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.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] Safari ignoring hover
On Jul 28, 2006, at 9:53 AM, Tim Offenstein wrote:
A couple questions on this page http://www.als.uiuc.edu/timo/ciba/
1.) My left hand menu uses a border-right for hover and focus which
works fine in everything except Safari (2.0.4) which totally ignores
this hover. Safari works fine with other links elsewhere on the page
so I'm assuming it has an issue with the border in the hover. I
couldn't find any work-arounds. Any suggestions?
Safari has problems dynamically changing the display property on an
element.
A better approach is set the {display: block} on the a, and not
only on the a:hover as you do now
#leftMenu a {display:block; /*other properties as needed*/}
(in this case, it makes sense for every browser)
3.) There's also an issue with Safari and Opera regarding the
negative margin-top I have on the validation icons at the bottom of
the page. If you have a quick recommendation regarding that, great,
otherwise I'll fiddle with it later.
And what if Opera and Safari are correct ? Imho Gecko is wrong here.
Not sure what iExploder does, but that one is never quite a reference
anyway.
If you really want them to display consistently on every browser, put
them first in the source code.
(and I would simply delete them. See David's answer.)
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.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] ul and its margins and how to shape them
Finally relized that my shortcut listings for the font
was wrong and now the font link color problem is
solved, but still need help in understanding the box
that is ul.
MJ
MJ,
Part of the problem is that different browsers apply margins and padding
differently on uls. What I would do first is set the margin and padding
for the ul and li to 0. This way you start pretty much from a blank
slate. ( no matter what default browser settings there are. )
Then you will notice that if you have the bullets of the list will display
out the left side. This can be remedied by either putting margin left on
the lis or telling the bullets to list-style-position: inside;. Now if
you put the bullets on the inside it will look as though the bullet
indents the first line and the next line of text will go under the bullet
to the left side of the li.
If you want a little more control over your bullets you can get rid of the
list-style-image by saying list-style: none and putting a background
image on the lis. If you put an image on the lis you will want to put
padding on the li so you don't cover up the background image..
Putting a background image looks like this:
li {
background: transparent url(yourimage.gif) no-repeat 0px 0px;
}
first 0px is for horizontal spacing from left and second is vertical
spacing from top.
Also note that only vertical margin on elements can overlap not
horizontal margins. For example:
if you have a paragraph followed by a list and you put 10px of margin on
the bottom of the paragraph and then put 15px of margin on the top of the
ul there will only 15px of space between them. Which ever one is bigger.
I hope this helps.
Nick
--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
__
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] Safari ignoring hover
Thanks Philippe, that did the trick.
Also I should have mentioned this earlier, the validation icons are
temporary and will be removed once I submit the site to the client.
Cheers,
-Tim
On Jul 28, 2006, at 9:53 AM, Tim Offenstein wrote:
A couple questions on this page http://www.als.uiuc.edu/timo/ciba/
1.) My left hand menu uses a border-right for hover and focus which
works fine in everything except Safari (2.0.4) which totally ignores
this hover. Safari works fine with other links elsewhere on the page
so I'm assuming it has an issue with the border in the hover. I
couldn't find any work-arounds. Any suggestions?
Safari has problems dynamically changing the display property on an element.
A better approach is set the {display: block} on the a, and not
only on the a:hover as you do now
#leftMenu a {display:block; /*other properties as needed*/}
(in this case, it makes sense for every browser)
3.) There's also an issue with Safari and Opera regarding the
negative margin-top I have on the validation icons at the bottom of
the page. If you have a quick recommendation regarding that, great,
otherwise I'll fiddle with it later.
And what if Opera and Safari are correct ? Imho Gecko is wrong here.
Not sure what iExploder does, but that one is never quite a
reference anyway.
If you really want them to display consistently on every browser,
put them first in the source code.
(and I would simply delete them. See David's answer.)
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
--
**
Tim Offenstein - Web Specialist - CITES - ALS - 244-2700 * IGPA
- 244-1398
**
A cheerful heart is a good
medicine Proverbs 17:22 NRSV
__
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] background-repeat:no-repeat support in Opera 9?
On Jul 28, 2006, at 8:14 AM, charles wrote: I'm using a background image for a custom list marker. It looks just fine in a vast majority of browsers, but both Netscape 6 (Win) and Opera 9 (Win + Linux) appear to be ignoring background-repeat:no-repeat. Instead, they're treating it like background-repeat:repeat-y. There's an incredibly simple test case here: http://www.spiritone.com/~charlesd/testcase.html I can't seem to find this listed as a known bug, nor can I find a workaround. Any suggestions? No idea about Netscape 6. Opera 9 doesn't seem to like your image too much. It is not really repeating. The problem seems to be in the empty transparent space in your image (the arrow is 11px tall, the image 13px tall), Opera 9 attempts to fill that space by repeating the image. Quite weird. Here is a test file, nearly the same as yours, but I added lots of (top, bottom) padding on every li. If the image was repeating, it would fill that padding box. http://dev.l-c-n.com/_temp/background-Norepeat.php On top, I used your own image. The second list uses one of my own. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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] Divs not giving a scroll bar
On Jul 28, 2006, at 12:39 AM, Cliff Pruitt wrote: Unless something changed very recently overflow-x/y has never worked for me in Safari. That sort of seems like the missing piece to me. IE Firefox can be worked with, but Safari only seems to support overflow:auto; as far as I've seen. Future versions of Safari will support overflow-x and overflow-y. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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] google shok horror
I'll have to state up front that I have two big things that for me are even more evil than tables and I'd almost rather use font tags before I resort to them: 1. IE hacks* (e.g. backslash hacks or use of the * selector) 2. Quirks Mode * Note: I don't consider IE's conditional comments to be hacks Without those two things that I just can't justify (I think they constitute broken functionality are just as invalid as using tables for layout) I cant find CSS answers in IE for something like a fixed (px) height, fixed position, footer without using tables. Do you take a step backwards in your interface force yourself not to use a specific design just cause the standards say it can't be done? I've been really back forth on the issue, but I'm in the middle of a project that's going to need a solution for IE real soon. Just curious on the opinions how you guys solve your layout problems. Opinion #1: What I have found in my years with css is that the more I work with it the more complex layouts and designs I can successfully put together in all major browsers. (opera, firefox, safari, ie). The longer I work with it the more I see hacks as a fix for a symptom of something else that has gone wrong. I've used them hundreds of times but recently at couple lines in an ie only stylesheet has been enough. (via the ie comments). I agree sometimes you don't have the budget to spend hours on something that you can't figure out why it doesn't work. But the question for me is whether it will cost you more in the long run, primarily maintenance and slower, more markup intensive techniques, not to learn. Not to meantion the bandwidth you save... That's what the list is for helping people learn the language. If you need something 9 times out of 10 someone here has solved it already and understands your pain. Well I don't know about other people but I'm not going to let someone's poor understanding/interpretation of a standard and poor software engineering to cause me to do the same. Cliff, good questions I think every developer that does this for a living wonders why we should go through the hassle to push for standards. I just hope has much as we are pushing for them they are pushing for us.. Nick -- Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Problems with pics
On 7/28/06, got milk [EMAIL PROTECTED] wrote: Is it possible for me to add an image at both the top ad bottom of a div/span? if so, how? Kyle To be honest, I would have two divs (one inside the other) and apply one image to one and the other image to the other. That is, if you are talking about background images. -- -- Christian Montoya christianmontoya.com ... portfolio.christianmontoya.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] google shok horror
On 7/28/06, Cliff Pruitt [EMAIL PROTECTED] wrote: Do you take a step backwards in your interface force yourself not to use a specific design just cause the standards say it can't be done? More like just because it's not supported by the current set of browsers, but the answer is yes. Take this quote from Paul Stamatiou [1]: From what I've gathered at [Yahoo!], the use of negative margin is somewhat frowned upon as it is forcing elements of the website to do things they're not supposed to do naturally. So when the design of a certain element on the project called for an effect that could only be pulled off with negative margin, we changed the design. In Yahoo!'s case, the benefits of relying on CSS and other standards recommendations far outweight the benefits of committing to some particular design element. That may or may not be true for you too. [1] http://paulstamatiou.com/2006/07/22/top-7-things-ive-learned-at-yahoo/ -- -- Christian Montoya christianmontoya.com ... portfolio.christianmontoya.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] IE extra vertical space
Can anyone tell me how to get rid of the space between the left column and the bar with the home gif above it. It only shows up in IE. Sample is at http://www.liztestsitem.com/testsite/test.asp Thanks in advance, Liz __ 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/
