Re: [css-d] thanks and gallery links wanted
~davidLaakso wrote: Or follow this tutorial for a float gallery and roll your own :-) Whoops! The missing link to the tutorial is: http://css.maxdesign.com.au/floatutorial/tutorial0401.htm ~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/
Re: [css-d] Specifying CSS definition via HTML attributes IE6
Attribute selectors are part of CSS 2. http://www.w3.org/TR/CSS2/selector.html#attribute-selectors Whoops - David is absolutely right. It was only Substring matching attribute selectors that got added in CSS3. I plain forgot that attribute selectors predated that. __ 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] Conditional (x)HTML
[EMAIL PROTECTED] wrote: I'm building a site where I'm trying to keep content first in the source. [mega trim] I guess I am missing something? Twenty-eight of the 40 layouts on this page http://blog.html.it/layoutgala/ are three column layouts with the content fist in the source order. They work well cross-browser. No hacks required for ie (providing you play your cards right and avoid the box model hacks by keeping horizontal padding and vertical borders off width bearing containers when you add /your/ content). 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/
Re: [css-d] h2 tags with padding don't hover properly
note: links for this subject are at: - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/ hey roger... style sheets for above pages are at: - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/new-menu.css - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/new-menu-19c.css also roger - note that in IE the hovers of the menu work over the entire button area not just the text by using the * html hack - look at the bottom of the stylesheet. for reference, here's my original question: 1) in first menu, hover of main headings (h2 tags) work fine as long as zero padding is applied to the h2 tags 2) in second menu, hover of h2 tags don't catch the padded areas of the h2 tags seems that the hover should apply to the padded areas, but they don't (on windows IE, firefox and opera)... i'm pretty sure that hovers usually work over list items with padding, but why not h2 tags ?? =fgx= [EMAIL PROTECTED] mail2web - Check your email from the web at http://mail2web.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] h2 tags with padding don't hover properly
ok - try the pages directly: - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/dev19b_menu-only.html - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/dev19c_menu-only.html thanx! sorry to confuse you... =fgx= [EMAIL PROTECTED] Original Message: - From: Roger Roelofs [EMAIL PROTECTED] Date: Fri, 20 Oct 2006 14:06:49 -0400 To: [EMAIL PROTECTED] Subject: [SPAM] Re: h2 tags with padding don't hover properly Francis, On Oct 20, 2006, at 1:53 PM, [EMAIL PROTECTED] wrote: note: links for this subject are at: - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/ hey roger... style sheets for above pages are at: - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/new-menu.css - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/new-menu-19c.css also roger - note that in IE the hovers of the menu work over the entire button area not just the text by using the * html hack - look at the bottom of the stylesheet. for reference, here's my original question: 1) in first menu, hover of main headings (h2 tags) work fine as long as zero padding is applied to the h2 tags 2) in second menu, hover of h2 tags don't catch the padded areas of the h2 tags seems that the hover should apply to the padded areas, but they don't (on windows IE, firefox and opera)... i'm pretty sure that hovers usually work over list items with padding, but why not h2 tags ?? There are no link elements or imported style sheets in the document at http://www.fatgraffix.com/hrblshop-dev/shop_dev19/ when viewed with Flock (a firefox 1.5 variant) Is it possible your server is checking user agent strings and serving different content to each one? Roger, -- Roger Roelofs [EMAIL PROTECTED] mail2web - Check your email from the web at http://mail2web.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] SOS almost there
Greetings All, I am using son of suckerfish for my menu and I am almost there. I have gotten the drop downs to not be all the way over to the right but, they are still not below the top nav button/link as it should be (IE). Can someone please have a look and let me know where I am going wrong. Thanks! http://www.jcislord.org/index.php http://www.jcislord.org/templates/jcil/css/template_css.css http://www.jcislord.org/templates/jcil/css/ie.css All help appreciated. Schalk __ 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 problem
Tee G. Peng wrote:
Hi, I am doing a page that I can't change the markup and source order
(think CSS zen garden!), and is facing a problem with background image.
The markup looks like so
div id=wrap
divcontent goes here /div
divmore content ... /div
div id=footer pwith background image in the footer div /p/div
/div
CSS:
#wrap {
background: url(images/content-bg.png) repeat-y ;
width:914px;;
margin:80px auto 0 auto;}
#footer {
clear: both;background: url(images/ftr-bg.png) no-repeat left bottom;
text-align: center;}
The wrapper background image goes all the way down which is great
but it goes beyond the footer. I need the footer image sticks to the
bottom.
You need the footer to stick to the bottom of the wrapper? In that case,
position the wrapper relatively, then position the footer absolutely and
give it a bottom value of 0. Full CSS at:
http://scott.sauyet.com/CSS/Demo/FooterDemo1.html
http://solardreamstudios.com/learn/css/footerstick/
(both the same)
There is a less buggy way of making a footer stick, but it requires
placing the footer outside the wrapper, so it won't work for you. The
method referenced above should work for most cases, so I wouldn't worry
too much about it.
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
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] absolute positioning bug
page w/ absolute position works fine in most or all browsers, except IE 6 is off by one pixel right, and one pixel bottom... anybody know why? - http://www.fatgraffix.com/testing/test-absolute-position/absolute-test.html thanx all. =fgx= [EMAIL PROTECTED] mail2web - Check your email from the web at http://mail2web.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] IE6 or IE7 Standalones
If this is off topic, please accept my apologies reply off-list. Like many of you, I would like IE6 and IE7 on the same box. I've been told that standalones of the IE browsers don't guarantee the same display/performance as the integrated versions because of shared DLLs, i.e. there is no true separation. Comments? dan storm ~ web developer ~ amazon.com ~ w: 206.266.0292 ~ c: 425.503.9580 __ 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] z-index and stacking order
I am trying to get my head around the concept of stacking order, so far unsuccessfully. I have a site at www.cromartyview.com. I would like the thistle image, which is a background image on #wrapper to appear over the main image, #headimage which is in div#container. I think my problem is in working out which stacking context each is in and how to use the z-index to change the stacking order. Any help appreciated. Regards, Mike Davies -- Mike Davies Integra Web Design, Huntly, AB54 4XP 01466 700213www.integrawebdesign.co.uk __ 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] floats, fieldsets, and margins
Matt Tibbits wrote: I have a fieldset within a fieldset, I cannot put a top margin on the nested fieldset. Here’s a silly little example: HYPERLINK http://www.tibbits.ca/webdev/test.phphttp://www.tibbits.ca/webdev/test.php It doesn’t seem to matter whether or not there is text floated to the left of this nested fieldset element. I’m thinking that it probably has something to do with the preceeding inline element occurring in the form of a legend tag…but not really sure. Actually, when I removed the float on the label, it *did* recognize top margin in FF, so it seems to me it does matter whether there is text floated to the left of the fieldset. Now, whether it should matter is a different story. I don't think it should. I don't have time to test on other browsers to see where exactly this bug occurs. (Could you post a page with a top margin on the nested fieldset so it's easier to test please?) But I think you can change your markup and avoid the whole problem. You shouldn't have a label element sitting outside of a fieldset -- it can't label the fieldset. That's what the legend element is for. So, just get rid of that label entirely and make its text the legend of the nested fieldset instead of the select one text that is there 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 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] margin: 0 auto and float dont work together
On 10/20/06, Martin Breuer [EMAIL PROTECTED] wrote: Hi, I have one div with static width and height and a dynamic content from on to three divs with static width and height which have to be centered. To get them in one line, I use float: left. To center them I tried margin: 0 auto; But it doesn't work. Margin: 0 auto OR float: left. It shouldn't work either, if my understanding of CSS is close to correct. Floating an object removes it from the normal flow of elements so it has no reference point for centering itself to anything. There is, unfortunately perhaps, no float: center; rule. __ 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] Inaccesible column items
Hi everyone!
This is not a specificaly css related topic, but has a lot to do with
it. I'm using DirectX filters to render the png alpha layers on IE. I'm
used it in several elements but when it comes to the column that
contains the search and links sections something weird happens.
I can't select, click or hover any of the links nor write in the text
box or push the search button. It's like there was a layer or coat
preventing me from touching anything inside the element. I've run some
tests and (as long as any of you says I'm wrong) is the filter who's
causing all this mess. Whenever I remove it the element and its clidren
behave normaly.
Can you please help me? Thank you very much
Here's the code
CSS:
.columnaD {
float: left;
margin: 0 0 0 20px;
padding:0;
width:250px;
height: 1430px;
background: url('./Imagenes/columna_links.png') no-repeat;
text-align: left;
}
* html .columnaD{
margin-left: -25px ;
background-image: url(blank.gif);
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=./Imagenes/columna_links.png,
sizingMethod=scale);
}
HTML:
div class=columnaD
ul
liList of links.../li
liList of links.../li
liList of links.../li
...
/ul
/div
__
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] h2 tags with padding don't hover properly
[EMAIL PROTECTED] wrote: see link below with two menus: - http://www.fatgraffix.com/hrblshop-dev/shop_dev19/ 1) in first menu, hover of main headings (h2 tags) work fine as long as zero padding is applied to the h2 tags 2) in second menu, hover of h2 tags don't catch the padded areas of the h2 tags seems that the hover should apply to the padded areas, but they don't (on windows IE, firefox and opera)... i'm pretty sure that hovers usually work over list items with padding, but why not h2 tags ?? Hi Francis, It is the definition of what a padding is. The simplified explication [1]: it is the space between an element an the element inside. In your case, if the element is the h2, and you give a padding to the h2, the embedded element (the a.../a) will start at the distances given by the padding. The background of the a element is displaying only there (if it is a normal background or a hovering one doesn't matter). See image of screenshot with other paddings of the h2: * http://home.tiscali.nl/developerscorner/css-discuss/images/test-1_dev19c.gif If you hover over the a element, only the (yellow) background of that element is changed; not the background of the surrounding h2. [2] Now if you want the hovering background color for the whole h2 space, you can set all paddings of the h2 to zero, and give the padding to the a element. Then the background of the a is filling the background of the whole h2, and thus @hover of the a is changing all. See image of screenshot with padding to the a: * http://home.tiscali.nl/developerscorner/css-discuss/images/test-2_dev19c.gif :-) If you want some more space between the search box and the first h2, you can apply a border-bottom to a search box element: * http://home.tiscali.nl/developerscorner/css-discuss/images/test-3_dev19c.gif Succes and greetings, francky [1] w3c-specs: http://www.w3.org/TR/CSS21/box.html#box-dimensions [2] unless you make an at-hover changing backgound for the h2; but then IE doesn't understand (because the h2 itself is not an a). __ 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] Page-break-before/IE7... anyone know where we post IE7/CSS bugs now that the beta support is closed?
My issue is with print-break-before:always in combination with any page contents that have a height spec. Pagination is ignored. Submitted about 45 days ago to the MS beta feedback site, and also to http://groups.google.com/group/microsoft.public.internetexplorer.general/bro wse_thread/thread/128625a5b4dc25ff/f189bcf7f90f0d4f?lnk=stq=rnum=1hl=en This is the sample code that breaks when printed. Each div should be at the top of a page, but they are not. htmlheadtitle/title/headbody p style=background-color:red;height:800px;Page 1/p div style=page-break-before:always;p style=background-color:red;height:600px;Page 2/p/div div style=page-break-before:always;p style=background-color:red;height:6in;Page 3/p/div /body/html Other than standing on a street corner with a sign, not sure what to do. Depressing to have stuff that has worked for years broken. Page-break-after seems to be OK, but it's not quite the same... Sometimes the stuff before doesn't know what comes next... So don't know whether to force a page break after or not. Alan K. Gay [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/
[css-d] PVII horz tabbed nav alignment help please
Hello, I'm Deb and am brand new to this group as of a few days ago. I have been a very basic css w/tables user for several years and the past year I've ventured into more use of css trying to learn something new and apply it as often as possible. I just am getting into table-less design so I'm very green at both table-less design and the css that goes w/it. I rather feel like a fish out of water w/o my tables. The design in question is my second table-less design. It's very simple (I guess!) but it's a start. Was wondering if a few of you folks would have a look at my problem that I haven't been able to get worked out. I bought me a treat today - the PVII Horizontal Tabbed Nav :) I have it installed on this page: http://www.cedarcreekimages.com/new/ it would be the secondary nav holding the portfolio, bio, etc ... links. Rollover them to view the drop downs. From my end it looks good in FF, Opera 9 and NS7 - but gee - never fear - IE is here to spoil my fun :( When you mouseover the drop down links slide wa over to the right and I haven't been able to get them where they belong. You can see how they're supposed to be by viewing in the other browsers. CSS is here: http://www.cedarcreekimages.com/new/p7tbm/p7tbm_center_08.css Your help would be greatly appreciated. Thank you. Deb | PBC Web Design __ 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] IE7 is stealing my content!
I don't know how else to describe it. Even my super simple testcase features the awesome new issue I have discovered. http://stalkinggear.com/ie7testcase/what.html Nothing inside of .left shows up! I'm not entirely certain if it's taking up space or not, but I can tell you that it's not missing, it's more like, invisible. There's a text link in the left hand side, if you mouse over it, you'll get the hand cursor, heck, you can even click on it, and it will take you away! For fun I tried playing with z-indexes. I tried floating everything inside .left (blindly hoping maybe this had somethin to do with hasLayout). Nothing changes. CSS is embedded. HTML and CSS validate (exception of it's dislike of my use of 'orange' but the problem was happening without that too, and I *like* orange.) Any thoughts, suggestions, musings, etc are greatly appreciated! jen __ 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 7 - Extra padding-top
Hello All, I came across a situation where IE7 (fresh copy downloaded today) inserts extra padding-top when applied to an element inside a cleared div that comes after a floated div. It also seems like it is related to using the shortcut to apply a background color. Check out my test case here: http://www.stammbt.com/testing/testie7.html It can be fixed a number of ways. 1. If you add a border to the div with the property: clear:both 2. Removing the background property 3. Completing the background property shortcut - adding url(image) no-repeat 0 0; 4. removing the float on the first div You get the point... This page displays correct in every browser that I've loaded it into except IE7. __ 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!!
Hi list, Cross browser check please. http://www.highburytearooms.com.au http://www.highburytearooms.com.au/highbury.css There are a couple of errors that I am aware and I would like some help in sorting them out. IE 6.0 two layers not showing up . I have fooled around with z-index etc to no avail. FF 1.5 All seems to be in order and rendering ok Opera 9.0 I have an ongoing prob with font size ... view zoom is set at 100% also an unwanted background color showing up on the h4 tags Thanks in advance, Keno. __ 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] clearing logo in print output
This is so silly, I can't clear the logo in the print output. I did have it, briefly and only in Firefox, but then I changed something to fix it in IE and it's not clearing again. I can't see why the clearing div isn't working, since it works on the screen. Thanks Maren __ 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] floats, fieldsets, and margins
Matt Tibbits wrote: [...] http://www.tibbits.ca/webdev/test.phphttp://www.tibbits.ca/webdev/test.php It doesn’t seem to matter whether or not there is text floated to the left of this nested fieldset element. I’m thinking that it probably has something to do with the preceeding inline element occurring in the form of a legend tag…but not really sure. Can someone explain to me why this happens? Any suggestions on how to fix it would also be welcome. Hi Matt, I didn't get the stream of css-d mails the last day, so there is a retard somewhere and maybe I'm too late. ;-) - I cannot explain the why?, but did some playing with margins and paddings. The result is this: * Testpage 1 http://home.tiscali.nl/developerscorner/css-discuss/test-tibbits_form-legend-1.htm It is working in FF1.07 and IE6 on Win98SE, but ... not in Opera(8.01), while the original didn't come through in Opera either. * See Opera-sceenshot http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-tibbits_Opera8.01.gif. Floating the inner fieldset doesn't help. Seems Opera just cannot manage nested fieldsets. Then I removed the outer fieldset, and replaced it by an alternative common styling. The result is this: * Testpage 2 http://home.tiscali.nl/developerscorner/css-discuss/test-tibbits_form-legend-2.htm Now working in Opera8.01 too! And according to browsershots: in Opera9, in Safari on Mac, in FF1.5 on Linux, in IE7 on Win, and Konqueror on Linux: too! [1] :-) See: * http://browsershots.org/website/http://home.tiscali.nl/developerscorner/css-discuss/test-tibbits_form-legend-2.htm I hope you can use some of this. Succes and greetings, francky [1] for some of them fine tuning of the width of the form box (or input width) is needed. __ 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 border quirk
Something strange is happening in IE6 (as usual). I am creating a
page, using Safari/Mac as my default browser - then every time I
upload a change I check it on PC in IE6/Win. Everything was laid out
in the correct position on both browsers - the page can be seen at:
www.lifeonwheels.com/beta2.
Under the heading are two columns, followed by a footer. At this
point the right column is complete, and I am still adding the left
column content. To help in troubleshooting, I originally placed a
border around the entire page and around the two columns. I removed
both borders to see how things looked - and in IE6/Win the left
column moved under the right column. Turned out that the border
around the two columns is creating the problem. If I remove it (first
line in #colunmwrapper, below) or, if I put in a column style of
none, the problem occurs.
#columnwrapper {
border:0.1em solid white;
border-bottom:5px solid #c90;
padding-bottom:5px;
position:relative;
}
Since my client was going to be viewing the page this weekend, I put
in an invisible border, reflected in the CSS rule above. Note that
the border-bottom (line 2) is part of the design.
Question - why would removing the border declaration cause the entire
left column to move? It was my understanding that a border is not
part of the actual container, only an outline. FYI, the initial CSS
rule for the left column is:
#leftcolumn {
position:absolute;
width:690px;
overflow:hidden;
}
Any help in understanding why this is happening would be appreciated.
Thanks, LindaQ
__
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] some sort of problem.
http://www.phazm.net/stamps/products.html If you view this page in FF it's fine, but IE kinda... doesn't like it. I have no idea what's wrong with it though (still learning the IE hacks) - can someone help me? (I use digest, so please reply to my email directly if you can) [EMAIL PROTECTED] Also, if you can tell me how to bring the Next Page up a bit, I would appreciate it :) (if you see any other problems not related to what my post is about, please let me know, I'm trying to learn to code GOOD compliant xhtml/css. So I need to know if I'm making a mistake.) 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/
[css-d] Nested divs, constrain one within the other.
http://proximita.com/garnierarq/proyectos-garnier-arquitectos.html http://proximita.com/garnierarq/garnier.css Hello, thanks for your time. In the html page above (table/css) #DivNoTable is the container for #imgCont, and I cant get #imgCont to constrain itselft to #DivNoTable. I want #DivNoTable to grow accordign to #imgCont but haven't been able to do that so far. Help would be greatly appreciated. Proximita Web Mario Merino [EMAIL PROTECTED] tel: (506) 524-0479 mobile: (506) 843-0482 __ 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] how to prevent 'stuttering' browser rendering with e.g. images
Hello, when images (and probably also some div id s) don't get width/height set on the page, the rendering in the browser can look 'stuttering'. divs and texts appear earlier, images start to appear and push the content further down or the side. another behaviour is that at short pages the scrollbar disappears, making a centered content jump offset to the right a bit. e.g. I have short pages with few textlines and with one either vertical or horiziontal pic. when one clicks through the pages, this offset jumping is annoying. what do you do in such cases? - provide a large empty div box in the background with a minimum height that makes sure a scrollbar (area) will always appear? - set the margin of a footer div id very high? - ... bye, beate de nijs __ 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] image not showing up in NS7
Hello to you all,
I'm new to the list and this is actually my 2nd post. I never did see
my first post hit the list nor any responses so I'm going to try again.
I'm Deb and it's nice to meet all of you. I've been designing for
about 10-11 years now but always w/tables. Over the past few years I
began using more css w/my tabled designs and less in page
old-fashioned coding. It's just over the past few weeks that I
ventured into tableless and more use of css. I'm trying hard to
learn but it's not easy for me.
The following issue is my 2nd tableless design. I'm sure those of
you who do tableless and major css will find it's very simple but for
me it was a major undertaking.
I have an issue in NS7 on this page:
http://www.cedarcreekimages.com/new/
If you view in IE6 or FF, Opera 9 you'll note there is a letter *I*
image at the beginning of the first paragraph. The problem is in NS7
the image doesn't show up. I was wondering if someone might have a
fix for this?
The css file is here:
http://www.cedarcreekimages.com/new/css/cci3columns.css
and the specific rule for this image is:
#content .imagine p {
padding: 10px 5px 20px 35px;
background: url(images/letter-I.gif) no-repeat 35px top;
font-size: 105%;
text-indent: 35px;
}
Any help you can provide would be greatly appreciated, thank you.
Deb | PBC Web Design
__
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] PVII horz tabbed nav alignment help please
At 04:55 PM 10/20/2006, you wrote: CSS is here: http://www.cedarcreekimages.com/new/p7tbm/p7tbm_center_08.css Your help would be greatly appreciated. Thank you. You can disregard this. This post was sent a day or two ago and just hit the list now. The issue has been resolved in the mean time. Thank you! :: Deb | PBC Web Design :: http://www.PBCWebDesign.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] IE7 is stealing my content!
jennifer ham wrote: ... http://stalkinggear.com/ie7testcase/what.html Nothing inside of .left shows up! ... For fun I tried playing with z-indexes. I tried floating everything inside .left (blindly hoping maybe this had somethin to do with hasLayout). Nothing changes. ... Disappearance often occurs because an ancestor has no layout. By giving haslayout to the parent (try zoom:1; for div.content), the invisible div.left reappears. Ingo -- http://www.satzansatz.de/css.html __ 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 7 - Extra padding-top
Nate Kresse wrote: I came across a situation where IE7 (fresh copy downloaded today) inserts extra padding-top when applied to an element inside a cleared div that comes after a floated div. It also seems like it is related to using the shortcut to apply a background color. ... http://www.stammbt.com/testing/testie7.html It can be fixed a number of ways. 1. If you add a border to the div with the property: clear:both 2. Removing the background property 3. Completing the background property shortcut - adding url(image) no-repeat 0 0; 4. removing the float on the first div ... hmm. - a padding or - zoom:1 for #pagehead does fix it too. Ingo -- http://www.satzansatz.de/css.html __ 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 7 - Extra padding-top
Nate Kresse wrote: Hello All, I came across a situation where IE7 (fresh copy downloaded today) inserts extra padding-top when applied to an element inside a cleared div that comes after a floated div. It also seems like it is related to using the shortcut to apply a background color. Check out my test case here: http://www.stammbt.com/testing/testie7.html It can be fixed a number of ways. 1. If you add a border to the div with the property: clear:both 2. Removing the background property 3. Completing the background property shortcut - adding url(image) no-repeat 0 0; 4. removing the float on the first div You get the point... This page displays correct in every browser that I've loaded it into except IE7. I have no idea what is going on. Or why it is going on. Or what causes something to correct it.. Tight coding seemed to yield a consistent result? http://www.chelseacreekstudio.com/ca/cssd/bug.html http://www.browsercam.com/public.aspx?proj_id=293476 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/
Re: [css-d] Page-break-before/IE7... anyone know where we post IE7/CSS bugs now that the beta support is closed?
Alan K. Gay wrote: My issue is with print-break-before:always in combination with any page contents that have a height spec. Pagination is ignored. ... This is the sample code that breaks when printed. Each div should be at the top of a page, but they are not. htmlheadtitle/title/headbody p style=background-color:red;height:800px;Page 1/p div style=page-break-before:always;p style=background-color:red;height:600px;Page 2/p/div div style=page-break-before:always;p style=background-color:red;height:6in;Page 3/p/div /body/html Inserting something before the p seems to fix it in your test case. div style=page-break-before: always; !--[if IE 7]br style=height:0; line-height:0![endif]-- p style=background-color:red;height:600px;Page 2/p /div Ingo -- http://www.satzansatz.de/css.html __ 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] suckerfish should go over text
http://www.blue-fly.co.uk/trisco/test.php the css __ 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] sukckerfish over text
I'll try again.. The html http://www.blue-fly.co.uk/trisco/test.php the css http://www.blue-fly.co.uk/trisco/css/ The problem is suckerfish goes behind the text (performance and events). Any help would be appreciated. I have had this problem berfore due to the dropdowns being absolutely positioned. thanks, Ross __ 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] how to prevent 'stuttering' browser rendering with e.g. images
when images (and probably also some div id s) don't get width/height set on the page, the rendering in the browser can look 'stuttering'. divs and texts appear earlier, images start to appear and push the content further down or the side. another behaviour is that at short pages the scrollbar disappears, making a centered content jump offset to the right a bit. e.g. I have short pages with few textlines and with one either vertical or horiziontal pic. when one clicks through the pages, this offset jumping is annoying. what do you do in such cases? - provide a large empty div box in the background with a minimum height that makes sure a scrollbar (area) will always appear? - set the margin of a footer div id very high? That and setting width and height in the image attributes. You can enforce the scrollbar with a height of 100.01% http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] image not showing up in NS7
PBC Web Design wrote:
...
I have an issue in NS7 on this page:
http://www.cedarcreekimages.com/new/
If you view in IE6 or FF, Opera 9 you'll note there is a letter *I*
image at the beginning of the first paragraph. The problem is in NS7
the image doesn't show up. ...
http://www.cedarcreekimages.com/new/css/cci3columns.css
#content .imagine p {
padding: 10px 5px 20px 35px;
background: url(images/letter-I.gif) no-repeat 35px top;
font-size: 105%;
text-indent: 35px;
}
Try setting
background: url(images/letter-I.gif) no-repeat 35px 0px;
Specification:
- in CSS2.0:
Keywords cannot be combined with percentage values or length values
- in CSS2.1:
Combinations of keyword, length and percentage values are allowed
N7 does not follow the newer 2.1 here.
Ingo
--
http://www.satzansatz.de/css.html
__
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] absolute positioning bug
[EMAIL PROTECTED] wrote: page w/ absolute position works fine in most or all browsers, except IE 6 is off by one pixel right, and one pixel bottom... anybody know why? http://www.fatgraffix.com/testing/test-absolute-position/absolute-test.html Hi Francis, I didn't investigate this 1px question, for I think there has te be thought about some (IMO) more important other things first... Oops-Help! If I visit the page in Internet Explorer in my screen resolution of 1280x1024, I see very very small font sizes. And I cannot enlarge them in IE. - So for lots of visitors the page will be inaccessible... * Screenshot IE at 1280x1024. http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-herbalife-1280x1024.gif * About 80-85% of the visitors is using IE: http://www.thecounter.com/stats/2006/September/browser.php * About 20% is surfing with a 1280x1024 screen size: http://www.thecounter.com/stats/2006/September/res.php * And more and more people are buying and using screens 1280x1024px. * Then 16-17% of the visitors can have severe accessibility problems with the fixed font sizes of 11 px and 9 (!) px. On the other hand, if I visit the page in a resolution of 800x600px, the page is walking out of the screen on the right side, and I need to use the horizontal scrollbar to read what is on the page. * About 16% of the visitors is still using 800x600 screens: http://www.thecounter.com/stats/2006/September/res.php * Then these 16% has less usability because of the fixed width of 961px. On the third hand, if I visit the page in other browsers than IE, in a resolution of 1280x1024px, I can enlarge the font size. But scaling the font-size upwards, already in a few steps the text is extending the header area. * Screenshot Firefox at 1280x1024, font-size client side enlarged with 3 steps: http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-herbalife-1280x1024-enlarged.gif All together, I agree cordially with the recommendation of the BrowserNews: * Recommendation. A good way to ensure that sites will work for as many resolutions as possible is to design sites to be resolution-independent, i.e. not to specify widths in absolute units (e.g. pixels) /unless/ a width is that of a fixed-width object, e.g. a GIF, JPG, or PNG image. * http://www.upsdell.com/BrowserNews/stat_trends.htm#res * As a rule of thumb, I use em's for font-sizes, and % for the width of a container (and: mostly no div-height! Then the height of the boxes can grow or shrink together with the font-sizes). * In the same way, I try to avoid Absolute Positioning as much as possible: it is fixing the elements; then they cannot shift upwards or downwards if needed. To rebuild a site with all fixed styles into a flexible css is not easy. But everything can be made with css! [1] So I hope you will consider to make a fresh start ... ;-) Success and greetings, francky [1] Illustration of flexibility: a page in the Belgian CSS Zen garden Gigastyle: * http://www.gigastyle.be/?cssfile=41/elastico.css It is not for the beauty of the design, just a test page for showing possibilities of fluid css coding. You can try different screen sizes, different window sizes, different font-sizes, and different browsers. The page and the comments in the stylesheet are in Dutch, the css is universal. :-) Reading stuff for instance: * The Sizing Text pages of the css-Wiki: http://css-discuss.incutio.com/ * The Float Layouts page of the css-Wiki: http://css-discuss.incutio.com/?page=FloatLayouts * http://www.cssliquid.com/ * Not enough? Google for liquid style css! __ 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] sukckerfish over text
Try adding a z-index to your #menu_holder. That should bring it above the rest of your material. I used z-index: 10; and it seemed to do the trick. On 10/22/06, Ross Hulford [EMAIL PROTECTED] wrote: I'll try again.. The html http://www.blue-fly.co.uk/trisco/test.php the css http://www.blue-fly.co.uk/trisco/css/ The problem is suckerfish goes behind the text (performance and events). Any help would be appreciated. I have had this problem berfore due to the dropdowns being absolutely positioned. thanks, Ross __ 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/ -- •--•--•--•--•--•--•--•--•--•--•--• Brian Zollinhofer email: [EMAIL PROTECTED] website: http://www.zollinhofer.com It is better to keep your mouth closed and let people think you are a fool than to open it and remove all doubt. - Mark Twain __ 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] sukckerfish over text
Works in ff but IE, (would you believe it?) Ignores this property. Any other options? http://www.aplus.co.yu/lab/z-pos/ Ross - Original Message - From: Brian Zollinhofer [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Sunday, October 22, 2006 2:48 PM Subject: Re: [css-d] sukckerfish over text Try adding a z-index to your #menu_holder. That should bring it above the rest of your material. I used z-index: 10; and it seemed to do the trick. On 10/22/06, Ross Hulford [EMAIL PROTECTED] wrote: I'll try again.. The html http://www.blue-fly.co.uk/trisco/test.php the css http://www.blue-fly.co.uk/trisco/css/ The problem is suckerfish goes behind the text (performance and events). Any help would be appreciated. I have had this problem berfore due to the dropdowns being absolutely positioned. thanks, Ross __ 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/ -- •--•--•--•--•--•--•--•--•--•--•--• Brian Zollinhofer email: [EMAIL PROTECTED] website: http://www.zollinhofer.com It is better to keep your mouth closed and let people think you are a fool than to open it and remove all doubt. - Mark Twain __ 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] sukckerfish over text
Hi,
IE does not like this for some reason. It is totallty ignoring it.
#nav li:hover ul
{
top:30px;
z-index:2000;
}
Is your javascript correct. I have never used the Son Of Suckerfish. anyone
else?
Ross
- Original Message -
From: Schalk Neethling [EMAIL PROTECTED]
To: Ross Hulford [EMAIL PROTECTED]
Cc: Brian Zollinhofer [EMAIL PROTECTED]
Sent: Sunday, October 22, 2006 3:26 PM
Subject: Re: [css-d] sukckerfish over text
Ross Hulford wrote:
Works in ff but IE, (would you believe it?) Ignores this property.
Any other options?
http://www.aplus.co.yu/lab/z-pos/
Ross
- Original Message -
From: Brian Zollinhofer [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Sunday, October 22, 2006 2:48 PM
Subject: Re: [css-d] sukckerfish over text
Try adding a z-index to your #menu_holder. That should bring it above
the
rest of your material. I used z-index: 10; and it seemed to do the
trick.
Hey there Ross, Brian
I am also using suckerfish for my drop downs at www.jcislord.org. I do not
have the problem you are experiencing but, I cannot for the life of me get
the drop down to go under the top nav element, it keeps pushing it over to
the right hand side. Maybe having a look at what I did will help you with
your problem.
Also, can you please have a look at my nav in IE and let me know if you
can see why my drop downs are being pushed to the right.
Thanks!
__
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] image not showing up in NS7
At 07:36 AM 10/22/2006, you wrote:
PBC Web Design wrote:
...
I have an issue in NS7 on this page:
http://www.cedarcreekimages.com/new/
If you view in IE6 or FF, Opera 9 you'll note there is a letter *I*
image at the beginning of the first paragraph. The problem is in NS7
the image doesn't show up. ...
http://www.cedarcreekimages.com/new/css/cci3columns.css
#content .imagine p {
padding: 10px 5px 20px 35px;
background: url(images/letter-I.gif) no-repeat 35px top;
font-size: 105%;
text-indent: 35px;
}
Try setting
background: url(images/letter-I.gif) no-repeat 35px 0px;
N7 does not follow the newer 2.1 here.
I tried it, then the image doesn't show up in IE or Firefox.
:: Deb | PBC Web Design
:: http://www.PBCWebDesign.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] image not showing up in NS7
PBC Web Design wrote: background: url(images/letter-I.gif) no-repeat 35px 0px; N7 does not follow the newer 2.1 here. I tried it, then the image doesn't show up in IE or Firefox. I tried it too, and the image shows up just fine in the mentioned browsers. Can you show us the style-version you tried? 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/
Re: [css-d] image not showing up in NS7
At 10:27 AM 10/22/2006, Gunlaug Sørtun wrote: PBC Web Design wrote: background: url(images/letter-I.gif) no-repeat 35px 0px; N7 does not follow the newer 2.1 here. I tried it, then the image doesn't show up in IE or Firefox. I tried it too, and the image shows up just fine in the mentioned browsers. Can you show us the style-version you tried? I'm sorry, I don't know what you mean, George. Would you explain a little bit more, please? Thank you. :: Deb | PBC Web Design :: http://www.PBCWebDesign.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] absolute positioning bug
[EMAIL PROTECTED] wrote: page w/ absolute position works fine in most or all browsers, except IE 6 is off by one pixel right, and one pixel bottom... anybody know why? http://www.fatgraffix.com/testing/test-absolute-position/absolute-test.html IE6 isn't any good at calculating with odd numbers. Odd numbers here... div style=width: 953px; height: 55px; ...tend to land 1px off in IE6, while even numbers... div style=width: 954px; height: 56px; ...will give a perfect line-up even in IE6. Call it a bug, and adjust for it where you find necessary. 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/
Re: [css-d] sukckerfish over text
Ross Hulford wrote:
Hi,
IE does not like this for some reason. It is totallty ignoring it.
#nav li:hover ul
{
top:30px;
z-index:2000;
}
Is your javascript correct. I have never used the Son Of Suckerfish.
anyone else?
Ross
Yes, IE does not understand li:hover that is why there is the JavaScript
that adds the class to the LI and then triggers the drop down. You
should use:
#nav li:hover ul, #nav li.sfhover ul
{
top:30px;
z-index:2000;
}
I separated the IE 'hacks' from the rest of the CSS and placed it in the
ie.css file.
HTH!
__
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] Div positioning
I'm trying to produce tabular type layout for venues and gigs using divs where I end up with something like this; VENU 1 VENU 1 DETAILS | V1g1 DETAILS|v1g1 PICTURE v1g2 PICTURE|v1g2 DETAILS V1g3 DETAILS| VENU 2 VENUE 2 DETAILS | v2g1 DETAILS| v2g2 DETAILS|v2g2 PICTURE Etc You'll notice that some gigs have pictures and some don't, and the pictures are staggered left and right. A gig with a picture always starts a new 'row'. I thought I'd end up with something like; DIV ID=venu1 class=venueVenu1 name div ID=venu1det class=venudetailsvenue 1 details/div div id=v1g1 class=giggig 1 details/div div id=v1g1pic class=gigpicimg src=v1g1.jpg/div div id=v1g2pic class=gigpicimg src=v1g2.jpg/div div id=v1g2 class=giggig 2 details/div div id=v1g3 class=giggig 3 details/div /div div id=venu2 class=venueVenu2 name div ID=venu2det class=venudetailsvenue 2 details/div div id=v2g1 class=giggig 1 details/div div id=v2g2 class=giggig 2 details/div div id=v2g2pic class=gigpicimg src=v2g2.jpg/div /div All gigs and pictures will be 50% of the width What I wondered if there is some way of forcing this pattern of divs and ensuring they start a new 'row' when there is a pictures associated with the gig details. Regards Pete __ 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] image not showing up in NS7
PBC Web Design wrote: I'm sorry, I don't know what you mean, George. Would you explain a little bit more, please? Well, you wrote the image doesn't show up in IE or Firefox when you tried this... background: url(images/letter-I.gif) no-repeat 35px 0px; ...but since that piece of style worked just fine in IE and Firefox at my end for a copy of your page, it left me wondering what made it *not* work at your end. There must be a difference between my background-property version and yours. What's there now is what you started out with - not what you said you tried, so as part of a simple debugging-procedure I'd like to see *what* you tried. 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/
Re: [css-d] image not showing up in NS7
At 11:02 AM 10/22/2006, you wrote: PBC Web Design wrote: background: url(images/letter-I.gif) no-repeat 35px 0px; ...but since that piece of style worked just fine in IE and Firefox at my end for a copy of your page, it left me wondering what made it *not* work at your end. There must be a difference between my background-property version and yours. What's there now is what you started out with - not what you said you tried, so as part of a simple debugging-procedure I'd like to see *what* you tried. Ok, thanks for explaining. I have a sample page up. The first url is not for this as I have sent it off to the client for review and I don't want to be playing w/it while she's looking at it. So, here is a new link: http://www.cedarcreekimages.com/new/3col-layout.html and here is the css for it: http://www.cedarcreekimages.com/new/css/cci3columns2test.css I copy/pasted your code in so I was sure I used what you sent and commented out mine. The letter I image is not showing up in my Firefox, my IE6, Opera 9 or my NS7 (which is 7.02). :: Deb | PBC Web Design :: http://www.PBCWebDesign.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] image not showing up in NS7
PBC Web Design wrote: ... http://www.cedarcreekimages.com/new/3col-layout.html and here is the css for it: http://www.cedarcreekimages.com/new/css/cci3columns2test.css I copy/pasted your code in so I was sure I used what you sent and commented out mine. The letter I image is not showing up in my Firefox, my IE6, Opera 9 or my NS7 (which is 7.02). you forgot to copy/paste the semicolon. Ingo -- http://www.satzansatz.de/css.html __ 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] image not showing up in NS7
At 11:33 AM 10/22/2006, Ingo Chao wrote: you forgot to copy/paste the semicolon. Ohmahgosh! Yes, I did and when I went in and fixed it - the image is now showing up even in NS7 - problem solved! Thank you Georg for the fix and Ingo for pointing out my mistake! :: Deb | PBC Web Design :: http://www.PBCWebDesign.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] Proper float behavior question
On Oct 23, 2006, at 7:04 AM, Jared Stein wrote: Hey folks, I'm trying to figure out what the proper behavior is for the following simple example: [code snipped IE 6 Win allows #elthree to set the position it's top outer edge to the top outer edge of #elone. Firefox Win only allows #elthree to set the position of its top outer edge to the top outer edge of #eltwo--the clear: left in #eltwo constraining the flow of the following floaters. Relevant W3C specs ( http://www.w3.org/TR/CSS21/visuren.html#float- rules or http://www.w3.org/TR/CSS21/visuren.html#propdef-clear ) don't make the proper behavior clear to me. If anything, they suggest that IE Win 6's rendering is correct (A floating box must be placed as high as possible.) But IE is wrong, as often the case. A floated box cannot be higher than a previous floated box, See rules 5 and 6 in http://www.w3.org/TR/CSS21/visuren.html#float-position 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] Strange Navigation Menu Problems
Henry, On Oct 22, 2006, at 1:58 PM, Henry Felton wrote: Could I get some help on a new site I'm doing? The navigation menu is a normal drop down system; but the drop down parts aren't inline with their parent. Its obvious if you look at the site (www.oscar-radio.org/ static) only working in IE as yet. I am guessing that you found your solution. I just tried it in ff1.5 and it worked just fine. I also noticed the the sub-menus were marked up as sub-lists, which is necessary for the Son of Suckerfish technique. You might want to consider a min-height for the sub list elements to they are of equal height whether the link takes 1 line or two. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Strange Navigation Menu Problems
FF seems OK but any ideas on IE? On 22/10/06, Roger Roelofs [EMAIL PROTECTED] wrote: Henry, On Oct 22, 2006, at 1:58 PM, Henry Felton wrote: Could I get some help on a new site I'm doing? The navigation menu is a normal drop down system; but the drop down parts aren't inline with their parent. Its obvious if you look at the site (www.oscar-radio.org/ static) only working in IE as yet. I am guessing that you found your solution. I just tried it in ff1.5 and it worked just fine. I also noticed the the sub-menus were marked up as sub-lists, which is necessary for the Son of Suckerfish technique. You might want to consider a min-height for the sub list elements to they are of equal height whether the link takes 1 line or two. hth -- Roger Roelofs Remember, if you're headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke -- H D C Felton Website:www.henryfelton.net MSN: [EMAIL PROTECTED] Gmail Chat: [EMAIL PROTECTED] Phone: 07763799241 __ 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] Strange Navigation Menu Problems
Hi guys,
Could I get some help on a new site I'm doing? The navigation menu is a
normal drop down system; but the drop down parts aren't inline with their
parent. Its obvious if you look at the site (www.oscar-radio.org/static)
only working in IE as yet. The movement away from where they should be is
not a general shift to the right and so can't be altered by 'position:
relative' alterations. Any comments on the general design would also be
welcome?
The CSS involved is below; it seems a simple problem but no obvious
solution?
Many thanks,
Henry
/* NAVIGATION */
.navbutton {background-image: url('/images/new/nav.png');
background-repeat: repeat-x;
width: 130px; height: 38px;
border-bottom: 1px solid #2B2B2B; border-right: 1px solid #2B2B2B;
font-family: arial; color: #dcdcdc; font-weight: bolder;
text-align: center; font-size: 19px; letter-spacing: 1px; padding-top:
5px}
.curvededge {background-image: url('/images/new/navend2.png');
width: 66px; height: 38px;
padding-top: 5px}
/* MENUS */
#nav, #nav ul {padding: 0; margin: 0; list-style: none;}
#nav {width:995px;
height: 38px;}
#nav a {display: block; } #nav li {float: left;}
#nav li ul {position: absolute; left: -999em; margin: 10px;}
#nav li:hover ul {left: auto;} #nav li ul li a:link, a:visited
{text-decoration: none; /*Links on Drop Down */
color: #dcdcdc;
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
padding-top: 4px;
padding-bottom: 4px;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;}
#nav li ul li {background-color: #65; /* Drop Down */
border-left: 1px solid #393939;
border-right: 1px solid #393939;
border-bottom: 2px solid #393939;
width: 125px;
font-family: arial;}
#nav li ul li a:hover {background-color: #8B8B8B;}
.topdrop {border-top: 1px solid #393939;} /*Gives a line on the top of the
drop down menus */
.topdrop a:hover {background-color: green;
text-decoration: none;}
__
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] Strange Navigation Menu Problems
Subject: Re: [css-d] Strange Navigation Menu Problems FF seems OK but any ideas on IE? Actually FF isn't ok. Menu works but content is waaay down the page. You need to validate your html tho'. see: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.oscar-radio.org %2Fstatic Also good idea to put JavaScript showtime and sfhover off page. Have a quick look at http://www.iyesolutions.co.uk/examples/dropdown-menu/ which should give you the answer to you menu issues. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.408 / Virus Database: 268.13.9/490 - Release Date: 20/10/2006 __ 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] Web Testing
Is there a way to test how a site looks in all the major browsers online? I have a Mac and I run FF 1.5. It is useless for me to test on IE 5 for Mac as it is now obsolete. I don't want to have to fire up my old Dell laptop to test a site. So is there a way to check how a site looks online? Like a browser emulator? IMHO, you should still make sure that your sites are accessible in ie Mac. Regarding emulators à la Browsercam, there are many issues screenshots do not reveal. It is better to use a service like BC-Remote because it lets you see how your layout behaves when you change the width of the viewport, when you hover over links, etc. etc. If not, I use the Web Dev and Firebug FF extensions a lot when figuring out problems (extremely helpful when finding out what is wrong with other people's sites). Is there anything similar for IE6 for Windows? http://www.visionaustralia.org.au/info.aspx?page=614 --- Regards, Thierry | www.TJKDesign.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] Proper float behavior question
Hey folks, I'm trying to figure out what the proper behavior is for the
following simple example:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html
head
titleYo/title
style
#elone { width: 20%; float: left; background: green; }
#eltwo { width: 20%; float: left; clear: left; background: red;
}
#elthree { width: 80%; float: left; background: orange; }
#elfour { width: 80%; float: left; background: blue; }
/style
/head
body
div id=elone1/div
div id=eltwo2/div
div id=elthree3/div
div id=elfour4/div
/body
/html
IE 6 Win allows #elthree to set the position it's top outer edge to the
top outer edge of #elone. Firefox Win only allows #elthree to set the
position of its top outer edge to the top outer edge of #eltwo--the
clear: left in #eltwo constraining the flow of the following floaters.
Relevant W3C specs ( http://www.w3.org/TR/CSS21/visuren.html#float-rules
or http://www.w3.org/TR/CSS21/visuren.html#propdef-clear ) don't make
the proper behavior clear to me. If anything, they suggest that IE Win
6's rendering is correct (A floating box must be placed as high as
possible.)
Jared Stein
Director of Instructional Design Services
Utah Valley State College, MS 149
http://www.uvsc.edu/disted/
__
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] Web Testing
I also use a Mac. I ran across this site this morning: http://www.browsercam.com/default.aspx. It isn't free, but it would cost a fortune to have access to everything they offer. They do have a free trial. I'm going to give it a whirl to see how it works. -Bob On Oct 22, 2006, at 6:22 PM, Brian Zollinhofer wrote: Is there a way to test how a site looks in all the major browsers online? I have a Mac and I run FF 1.5. It is useless for me to test on IE 5 for Mac as it is now obsolete. I don't want to have to fire up my old Dell laptop to test a site. So is there a way to check how a site looks online? Like a browser emulator? If not, I use the Web Dev and Firebug FF extensions a lot when figuring out problems (extremely helpful when finding out what is wrong with other people's sites). Is there anything similar for IE6 for Windows? -Brian -- •--•--•--•--•--•--•--•--•--•--•--• Brian Zollinhofer email: [EMAIL PROTECTED] website: http://www.zollinhofer.com It is better to keep your mouth closed and let people think you are a fool than to open it and remove all doubt. - Mark Twain __ 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] Web Testing
http://browsershots.org/ At the moment it's a free service, so enjoy it while it lasts! Of course, it only shows you how your site will *look* in a particular browser. There's no way to test the functionality. As far as I know, there's no WebDev equivalent for IE. -- Marcello - Original Message - From: Brian Zollinhofer [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Sunday, October 22, 2006 6:22 PM Subject: [css-d] Web Testing Is there a way to test how a site looks in all the major browsers online? I have a Mac and I run FF 1.5. It is useless for me to test on IE 5 for Mac as it is now obsolete. I don't want to have to fire up my old Dell laptop to test a site. So is there a way to check how a site looks online? Like a browser emulator? If not, I use the Web Dev and Firebug FF extensions a lot when figuring out problems (extremely helpful when finding out what is wrong with other people's sites). Is there anything similar for IE6 for Windows? -Brian -- •--•--•--•--•--•--•--•--•--•--•--• Brian Zollinhofer email: [EMAIL PROTECTED] website: http://www.zollinhofer.com It is better to keep your mouth closed and let people think you are a fool than to open it and remove all doubt. - Mark Twain __ 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] Web Testing
Is there a way to test how a site looks in all the major browsers online? I have a Mac and I run FF 1.5. It is useless for me to test on IE 5 for Mac as it is now obsolete. I don't want to have to fire up my old Dell laptop to test a site. So is there a way to check how a site looks online? Like a browser emulator? If not, I use the Web Dev and Firebug FF extensions a lot when figuring out problems (extremely helpful when finding out what is wrong with other people's sites). Is there anything similar for IE6 for Windows? -Brian -- •--•--•--•--•--•--•--•--•--•--•--• Brian Zollinhofer email: [EMAIL PROTECTED] website: http://www.zollinhofer.com It is better to keep your mouth closed and let people think you are a fool than to open it and remove all doubt. - Mark Twain __ 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] Test_please_1
Hi list,
I would appreciate a cross browser check please!!
http://www.highburytearooms.com.au/
http://www.highburytearooms.com.au/highbury.css
Site page renders fine in both FF 1.5 and IE 6
Experiencing problems with Opera 9.0.1 where the page font is smaller
than in the other browsers.
ViewStyle Author mode
Viewzoom100%
--
I have unwanted background color in the following text block:
**Hours:**
*Dinner *Fri-Sat**
*Morning Tea Lunch *Thurs-Sun**
**Wed-* Appointment only (Group Bookings)*
---
Also there is a 1px border part way around the maim image
I have: img {
border: none;
}
---
Thanks in advance,
Keno.
__
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] Test_please_1
Administration wrote:
http://www.highburytearooms.com.au/
http://www.highburytearooms.com.au/highbury.css
Site page renders fine in both FF 1.5 and IE 6
Experiencing problems with Opera 9.0.1 where the page font is smaller
than in the other browsers.
Keno.
Keno,
I did not see the image border problem that you mentioned in xp :: ie7,
ff, or opera.
And I do not know what you mean about the background color for the text
you wrote about.
You do need a background-color for the page, see:
http://www.chelseacreekstudio.com/ca/cssd/images/temp.jpg.
To bump the font size for Opera only, use the appropriate selector(s)
with this filter at the very bottom of the style sheet:
@media screen and (min-width: 0px){
#foo { font-size: whatever%!important; }
} /*be even nicer to opera */
Regards,
~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/
Re: [css-d] Web Testing
On Oct 22, 2006, at 7:48 PM, Thierry Koblentz wrote: Is there a way to test how a site looks in all the major browsers online? I have a Mac and I run FF 1.5. It is useless for me to test on IE 5 for Mac as it is now obsolete. I don't want to have to fire up my old Dell laptop to test a site. So is there a way to check how a site looks online? Like a browser emulator? IMHO, you should still make sure that your sites are accessible in ie Mac. Regarding emulators à la Browsercam, there are many issues screenshots do not reveal. It is better to use a service like BC-Remote because it lets you see how your layout behaves when you change the width of the viewport, when you hover over links, etc. etc. Actually, browsercam offers both screenshots and remote access. I use screenshots for the first pass, and if everything looks okay I double-check with the remote access. True, browsercam ain't cheap, but you can have up to 20 people on one account. Find 19 others to go in on a membership with you and it comes down to something like twenty bucks a year. I found 19 other people through www.fundable.org. Regards, Julie Hathaway www.pilcrow.biz __ 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] cascading problem with tables
Hi, I'm having a problem with text size in a series of tables on one page. The text on each page seems to get smaller on each table, especially with the list texts, and heightened with nested lists. I have tried all sorts of things to try and remedy this, but something is escaping me. I'm not sure if it is something inherited or what. http://www.eurovisionltd.co.nz/library_test_results.php stylesheet: http://www.eurovisionltd.co.nz/styles/layout.css David __ 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] some sort of problem.
Jon Hughes wrote:
http://www.phazm.net/stamps/products.html
If you view this page in FF it's fine,
Hi Jon,
It's fine ... until the visitor is enlarging the font-size with one or
more steps (then the placeholders are shifting away) ...
Screenshot-1
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-stampdepot_scale-1-up.gif
... or is scaling down (then the placeholders are gluing together) ...
Screenshot-2
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-stampdepot_scale-1-down.gif
... or has a screen of 1280x1024 or bigger (then the used area is only
30% or less of the available screen area)...
Screenshot-3
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-stampdepot_1280x1024.gif
but IE kinda... doesn't like it.
I have no idea what's wrong with it though (still learning the IE hacks)
- can someone help me? (I use digest, so please reply to my email
directly if you can) [EMAIL PROTECTED]
Also, if you can tell me how to bring the Next Page up a bit, I would
appreciate it :)
(if you see any other problems not related to what my post is about,
please let me know, I'm trying to learn to code GOOD compliant
xhtml/css. So I need to know if I'm making a mistake.)
Thanks!
- Jon
... but is is not yet a week after the Graphical Designer came to the
CSS Guru, and he has some more weeks to go. ;-) [1]
I'm not a Guru, but while time is going on, maybe I can provide you with
some hints in the meantime.
In general I use my 7 Golden Rules of Webdesign:
1. Work in the TOP-DOWN approach of a page, and write the css in the
same order.
2. Do it STEP-BY-STEP (and first the model, the beautiful
content-styles you have in mind - the real stuff things - have to
wait ...). If working on an existing page, comment out all
elements you don't work on yet (maybe they have styles which are
disturbing the rest, or have styles which have to be a part of the
rest, but aren't there). Take no risk!
3. With TESTING-AND-TESTING-AND-TESTING at each small step, you'll
never find surprises at the end!
Testing: the html-validator every now and then, the css-validator
(mostly the warnings can wait), the font-scaling, the resolution.
So testing at (almost) EACH STEP: Is it still working what I made
before?.
4. Paste all STYLES IN THE HEAD as long as the work is not finished,
is easy adapting, and a condition for:
5. the personal archive: SAVE EVERY STEP with an OWN VERSION NUMBER!
(If you don't, and notice an error after say 5 steps, you have to
remember all changes you made in between. My experience is: I
always forget some... I had such a beautiful solution, but it
doesn't work anymore. - Where did I change things, and what was
the last step before it went wrong?).
6. For each step: DEVELOP IN FIREFOX (or OPERA), as that is nearly
standards compliant. And if it's working as you want it, then
CORRECT FOR IE afterwards. - The other way, first working for IE
and correcting for other browsers is almost impossible, due to
the 1000's of IE-only proprietary rules and all known and
mysterious IE-errors and IE-bugs...
7. To see where you are: use TEMP BACKGROUND COLORS for the
div-boxes, ul's, li's and other elements. Sometimes a TEMP
{border: 1px dashed red;} can do the same, but that is a bit more
risky, because adding/removing borders can influence the layout.
And don't forget to play with margins and paddings: see what happens!
Now in practice. I think the elements in your page need some more space
to breathe. How can we make your page more liquid?
I started with your original, threw the html-validator on it, and got
the following:
Testpage-1
http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-1.htm
Html-validator and css-validator congratulate. - To get rid of the
(only) 500px width of the model, we can adapt the #wrap. Then the width
becomes relative to the screen width, and the page uses the same
relative width in each resolution. See (and see the comments in the
source code):
Testpage-2
http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-2.htm
Html-validator and css-validator still congratulate. - Changing
resolution to 800x600 and to 1280x1024: no problems with this model. But
now the header (image), the sidebar, the content and the footer have
wrong places. And in IE the placeholders are still not besides each other.
In the top-down approach we forget the rest, and start with the header.
The right top-corner is somewhere in the center, doesn't belong there!
Taking the right corner away of the image, we can put it apart as a
background image, liquid moving on the right side. We get something like:
Testpage-3
http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-3.htm
Html-validator and css-validator
[css-d] disappearing text
http://dragonofchaos.net/play/ When I try the above page in IE the blockquote disappears. Works fine in Firefox Netscape. The gray above the picture I'm pretty sure is a png problem. __ 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] cascading problem with tables
On Oct 23, 2006, at 10:31 AM, David Bailey wrote:
I'm having a problem with text size in a series of tables on one page.
The text on each page seems to get smaller on each table, especially
with the list texts, and heightened with nested lists.
I have tried all sorts of things to try and remedy this, but
something is escaping me. I'm not sure if it is something inherited
or what.
http://www.eurovisionltd.co.nz/library_test_results.php
stylesheet:
http://www.eurovisionltd.co.nz/styles/layout.css
From your stylesheet:
.resultTable td,{
padding: 5px;
font-size: .85em;
line-height: 1.5em;
color: #666;
}
/*
.resultTable li, li li {
margin: 0;
font-size: .85em;
}
The td has .85em, then the li, **descendant** of the td, is again .
85em, or .85em from .85em.
BTW, I presume that, in the second selector above, your 'li li'
applies to a li that is descendant of .resultTable. But yiu have
the selector wrong. The way it is written now, that 'li li' means any
li that is a descendant of a li. You have have various selectors like
that.
(and that also results in that progressively smaller font-size)
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] cascading problem with tables
Hi Philippe,
Thanks for your comments.
However, I'm not sure why you have made this comment (unless I'm
missing something, which is quite possible), as the .resultTable li,
li li selector is actually commented out (it was just an experiment,
which I should delete). I am aware that the li li affects the
nested li.
What amazes me is that each table in the series decreases in font size.
Regards
David
I'm having a problem with text size in a series of tables on one
page.
The text on each page seems to get smaller on each table, especially
with the list texts, and heightened with nested lists.
I have tried all sorts of things to try and remedy this, but
something is escaping me. I'm not sure if it is something inherited
or what.
http://www.eurovisionltd.co.nz/library_test_results.php
stylesheet:
http://www.eurovisionltd.co.nz/styles/layout.css
From your stylesheet:
.resultTable td,{
padding: 5px;
font-size: .85em;
line-height: 1.5em;
color: #666;
}
/*
.resultTable li, li li {
margin: 0;
font-size: .85em;
}
The td has .85em, then the li, **descendant** of the td, is again .
85em, or .85em from .85em.
BTW, I presume that, in the second selector above, your 'li li'
applies to a li that is descendant of .resultTable. But yiu have
the selector wrong. The way it is written now, that 'li li' means any
li that is a descendant of a li. You have have various selectors like
that.
(and that also results in that progressively smaller font-size)
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/
__
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 border quirk
Linda Quinn wrote: www.lifeonwheels.com/beta2. Question - why would removing the border declaration cause the entire left column to move? It was my understanding that a border is not part of the actual container, only an outline. Borders affect interaction between elements under certain circumstances, not only as a visual outline. There are more than one factor at play here, so I'll try to spell them out. What the border does across browser-land: Didn't look deep, but it looks like the border is preventing some margins on elements from escaping #columnwrapper. Visible change in Opera and Firefox too when the border is removed - without the disastrous result that IE6 shows. A simple test shows that a 'padding-top: 1px;' can replace the 'border:0.1em solid white;' and achieve the same effect, and this is a clear sign that 'collapsing margins'[1] are at play. You have accidentally found one of the many workarounds for this standardized but often unwanted effect. --- IE6 has a bug: What's bugging IE6 in particular is a bit more complex. It's a real IE-bug affecting _absolute positioned elements next to floats_, and that bug is somehow contained along with any collapsing margins in your case. IE6 is otherwise not affected by 'collapsing margins' in your page, probably because there are too many elements with default or triggered 'hasLayout'[2] in there. Another reason can be differences in margin-defaults in IE6 vs. other browsers. No margins = no collapse. The IE-bug can in itself be cured by placing a non-floating and non-positioned element between the end-tag of 'leftcolumn' and the start-tag of 'rightcolumnholder'. A zero-size element - like a div with nothing but a comment inside - as separator, will kill the IE-bug... /div !--end leftcolumn-- div!-- --/div div id=rightcolumnholder ...without affecting other browsers. I would still keep the 'border' or 'padding' on #columnwrapper though, as containing those margins will make the line-up more cross-browser reliable. --- Now, making that source-code a little more valid and in accordance with the chosen doctype, wouldn't hurt. The CSS validator can't find the stylesheet through the page - amongst other things. Fixing the source-code won't change rendering in any browser - that I know of, but it sure will help during debugging and maintenance. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins [2]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] disappearing text
Daniel wrote:
http://dragonofchaos.net/play/
When I try the above page in IE the blockquote disappears. Works fine
in Firefox Netscape.
IE-win's stacking problems...
Add...
blockquote {position: relative;}
...to make it stay on top and be visible.
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/
Re: [css-d] Web Testing
Julie Hathaway wrote: On Oct 22, 2006, at 7:48 PM, Thierry Koblentz wrote: IMHO, you should still make sure that your sites are accessible in ie Mac. Regarding emulators à la Browsercam, there are many issues screenshots do not reveal. It is better to use a service like BC-Remote because it lets you see how your layout behaves when you change the width of the viewport, when you hover over links, etc. etc. Actually, browsercam offers both screenshots and remote access. That what's called BC-Remote ;-) --- Regards, Thierry | www.TJKDesign.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] Web Testing
At 05:40 PM 10/22/2006, Robert L. Hicks wrote: I also use a Mac. I ran across this site this morning: http://www.browsercam.com/default.aspx. It isn't free, but it would cost a fortune to have access to everything they offer. They do have a free trial. I'm going to give it a whirl to see how it works. What I've known others to do is get a group together and go in on one account. I don't know the particulars how it's done, was a member once but I didn't set it up. You all split the cost then for a year's subscription. Get 20-25 people together and it winds up costing only like $20-$25 for a year. :: Deb | PBC Web Design :: http://www.PBCWebDesign.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] css list
Hi, I have a 16px x 16px image that I want to set as the background image of a li how would i go about setting my css to accomplish this Thanx __ 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/
