Re: [css-d] My Last (I Think) IE7 Bug
Tony Crockford wrote: Chris Williams wrote: Thanks for the reply. Funny, the convoluted use of negative margins is all over the place, and I got it from a couple of different references, both books and example sites. And it works in every browser on the planet... Except IE7?? I've never seen it used in that way before, but then I'm in the habit of avoiding padding on container elements as much as possible. I didn't mean to imply you'd done something wrong, just that it *felt* odd to me. have you any references for this use of -ve margins, they'll probably need to be rewritten! Ah. I googled and discovered that IE has a fixable bug in relation to content that overlaps a negative margin, which seems to be the case here... apply position: relative; to the h5 and all will be okay. hat tip: http://www.communitymx.com/content/article.cfm?page=4cid=B0029 quoteIE will cut off the portion of an object that overflows its parent container due to negative margins. Luckily, there's a quick fix: apply position: relative to the float, and the cut off portion appears!/quote CSS Negative Margins - Part One __ 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] My Last (I Think) IE7 Bug
I fixed the silly h2li thing, don't know how that happened... Validates now, both the HTML and the CSS. As for negative margins... It's funny that it works in IE7 on all borders, except the bottom one? This makes me think this is a red herring... The reason why I do it is because then I'd have to have the .box (with no padding) and then some bogus internal container (.inbox??) that has some margin on it. And it would have to be everywhere there is a box (like all over the site), as every box has this padding. Now, *that* seems convoluted to me. Not that it couldn't be done, but that seems like a ridiculous thing to do, a complete overhaul of the site, for one browser. Thanks for the reply, Chris -Original Message- From: Tony Crockford [mailto:[EMAIL PROTECTED] Subject: Re: [css-d] My Last (I Think) IE7 Bug I've never seen it used in that way before, but then I'm in the habit of avoiding padding on container elements as much as possible. __ 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] My Last (I Think) IE7 Bug
Chris Williams wrote: The reason why I do it is because then I'd have to have the .box (with no padding) and then some bogus internal container (.inbox??) that has some margin on it. And it would have to be everywhere there is a box (like all over the site), as every box has this padding. Now, *that* seems convoluted to me. err no. you just apply margin to the ul's, p's and hx's that you put inside the box. I've been avoiding horizontal padding since I discovered IE5's box model so it's second nature to me to think in terms of no padding on a container (apart from 1px top padding to prevent margin collapse) and then margin anything inside it away from the sides. but hey, position:relative is your friend... ;o) __ 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] My Last (I Think) IE7 Bug
THAT'S IT! That fixed it. Super, thanks so much. Chris -Original Message- From: Tony Crockford [mailto:[EMAIL PROTECTED] Subject: Re: [css-d] My Last (I Think) IE7 Bug apply position: relative; to the h5 and all will be okay. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie showing background image, but not other styles
Some other thing about your arbeidsliv page. I noticed that @ first load and @ refresh the page has a latency time, and is jumping up and down (IE6 and FF1.07 and Opera8.01 under Win98SE), due to the javascript for the rounded corners. And I'm guessing: that happens too when going from one page in the site to another. What about css styled corners/borders? Because of the fixed width, the corners can be 2 simple background images (or combined to 1). Quick downloaded (once), no latency, no jumping, and working too if browsing with disabled javascript! :-) Ah, and I see that with disabled js the page is missing the right blue margin, and has just a bit of a horizontal scrollbar: some 20px less in width? Greetings, francky Thank you for the heads up. I forgot about that. This page needs to be solid. The reason for the javascript etc. is that when I started out the page had sort of a fluid layout (all widths set in em's), but the client changed to fixed witdth later on. Without the javascript solution I won't need the disabled javascript backup. Nice! Eystein (still 50cm from my only 2 screens) __ 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] site check, please - cchy website
Kay C. Tien wrote: http://kt1.clarityconnect.net/cchy/index.html I've checked it on FF, SeaMonkey, Opera on Win XP, and Safari, FF, and IE on the MAC OS X. They're all fine, but in IE on Win XP, I have this gap between the menu buttons and the picture right above it. Any ideas? It's the browser-default for images - block vs. inline. Browsers have 'display: block' as default for that doctype (Transitional), except IE/win which have 'display: inline' as default - regardless of doctype. Solution; add... #navbar img {display: block;} ...and the gap is gone. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, please - cchy website
Yep. That did the trick. Thank you! Kay At 09:45 AM 9/12/2006 Tuesday, Gunlaug Sørtun wrote: Kay C. Tien wrote: http://kt1.clarityconnect.net/cchy/index.html I've checked it on FF, SeaMonkey, Opera on Win XP, and Safari, FF, and IE on the MAC OS X. They're all fine, but in IE on Win XP, I have this gap between the menu buttons and the picture right above it. Any ideas? It's the browser-default for images - block vs. inline. Browsers have 'display: block' as default for that doctype (Transitional), except IE/win which have 'display: inline' as default - regardless of doctype. Solution; add... #navbar img {display: block;} ...and the gap is gone. 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/ -- Kay C. Tien Clarity Connect, Inc. 200 Pleasant Grove Road Ithaca, NY 14850 Toll Free: 1-888-322-4900 | Main: 1-607-257-8268 Fax: 1-607-257-4431 www.clarityconnect.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] site check, please - cchy website
On 9/12/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote: It's the browser-default for images - block vs. inline. Browsers have 'display: block' as default for that doctype (Transitional), except IE/win which has 'display: inline' as default - regardless of doctype. Is that affected by quirks mode? Or is the default 'display' for images not specified by CSS and therefore not affected by standards mode? -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, please - cchy website
Gunlaug Sørtun wrote: It's the browser-default for images - block vs. inline. Browsers have 'display: block' as default for that doctype (Transitional), except IE/win which have 'display: inline' as default - regardless of doctype. While your solution is sound (and appropriate), I'm curious as to where you get the impression that browsers use display: block; for img / elements under any doctype--even when there isn't one. This has never been my experience, and I don't believe it's the case in the specifications, either. __ 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 and IE 6 Installs
I am wanting to download IE 7 for testing, but I need to keep IE 6 for now, since thats where 90% of my traffic comes from. Does anyone know of a way to have both versions installed on the same system? -- Kevin Murphy Webmaster: Information and Marketing Services Western Nevada Community College www.wncc.edu 775-445-3326 __ 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] piping bullets into lists
Is there a way to tell the lists to use the pipe symbol | as a bullet in an unordered list? -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 7 and IE 6 Installs
I am wanting to download IE 7 for testing, but I need to keep IE 6 for now, since thats where 90% of my traffic comes from. Does anyone know of a way to have both versions installed on the same system? IE7 Standalone by Treadsoft - http://tredosoft.com/IE7_standalone Jough __ 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] Permanent change of state??
Hi gang: A quick question. Is there any way -- using just css -- that the act of moving the cursor over whatever can change it's state from off to on such that it remains on after the cursor moves off whatever? This is what I want to do -- I want to have something that looks like a css menu where if you move your cursor over it, it changes to a background color. However, unlike a css menu, when your cursor leaves the menu, the menu keeps showing the background color and does not return to its original color. Something similar to a not-visited/visited link. I'm afraid there's nothing like that in css, is there? tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.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] IE 7 and IE 6 Installs
Ooh, I was waiting for that standalone RC1 release. I'm currently working the other way round, with a standalone IE6 from here: http://browsers.evolt.org/download.php?/ie/32bit/standalone/ie6eolas_nt.zip and an installed IE7. It's pretty painful though, as the IE version is changed in the registry every time you launch either version -- hours of fun! Standalone IE7 is the easier way round I think, but I'm slightly wary as to its accuracy compared with a full install. -- Rob Wilmshurst [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] piping bullets into lists
Is there a way to tell the lists to use the pipe symbol | as a bullet in an unordered list? No, but you can use a border on the LI element instead. Hope this helps. __ 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] piping bullets into lists
[EMAIL PROTECTED] wrote: Is there a way to tell the lists to use the pipe symbol | as a bullet in an unordered list? you could use an image of a pipe symbol. Or, maybe having left thin solid border would work for you? -- Joel Goldstick www.columbuswebmakers.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] Print header/footer
Adrienne Latimer wrote: Does anyone know of a way to surpress the header and footer info that browsers place on a printed page. I am referring to the page numbering and the date/url information that the browser places on the page that is outside of the canvas area of the web page itself. Short answer is: you can't (as far as I know). Long answer is: you can't, and that's a good thing because a browser should be putting information at the disposal of the user, not the user at the disposal of the web site. __ 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 acting up with horizontal menus
Well, I've almost got it figured out... Safari is now behaving the same as FF and Opera I've been trying to create a menu system where the active selection is highlighted - but highlighted using conditional CSS, rather than inserting a .selected class into the HTML (i.e. the HTML for the navigation menu is identical for every page). The CSS has got a lot more complicated that I had anticipated. And it's still not perfect (I've lost the hover effect (underline) on the lower level links). Here it is: http://www.richardnicholson.com/testing/menu/editorial.html And the CSS: http://www.richardnicholson.com/testing/menu/menu.css I'm interested to know whether it works in IE 5 and IE 6 PC (I guess not!) It's a bit of a mess in Mac IE 5.2.3 (sub menus overlap with main menus). I think the problem is with the CSS that structures the menu (rather than the conditional CSS the controls the menu's highlighting). Any idea of how to fix it? Thanks Richard __ 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] Print header/footer
Adrienne Latimer wrote: Does anyone know of a way to surpress the header and footer info that browsers place on a printed page. I am referring to the page numbering and the date/url information that the browser places on the page that is outside of the canvas area of the web page itself. This is controlled by the browser setting for printer setup. On FF its under File-Page Setup Same for IE. I use WinXP. Not sure about other Operating systems, but I am pretty sure its true for all -- Joel Goldstick www.columbuswebmakers.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] IE 7 and IE 6 Installs
On 9/12/06, Al Sparber [EMAIL PROTECTED] wrote: Standalone installs can be problematic. MS Virtual PC is now free. I recommend it highly as you are totally insulated from any possible issue. And issues there are. I, unfortuntely, used neither VirtualPC nor a standalone install; I installed IE7, and then after trying it out, uninstalled it to revert to IE6. I wound up with a nonfunctional browser that was irrepairable short of reinstalling Windows (and I tried, scouring Microsoft's knowledge base[*] and the rest of the web for solutions which didn't, alas, work). My IT dept's handy-dandy repair IE6 tool sure didn't do the trick; it rendered my system completely unusable, so it's being reinstalled even as I type this (on my Mac, which is PPC and so not very useful for trying Windows browsers). (*) Totally off-topic: why is it that Microsoft, within the very same knowledgebase article that has you tweaking registry entries where both the key and value are long meaningless strings of hexadecimal numbers, feels that asking you to open up the C:\Windows\Inf folder is too technical? How is it that I, their apparent target audience member, can navigate to a specific key in Regedit - without even the benefit of copy and paste for the path to said key - but to find the ie.inf file, the instructions say to use Find files or folders?? -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check, please - cchy website
Bradley Wright wrote: While your solution is sound (and appropriate), I'm curious as to where you get the impression that browsers use display: block; for img / elements under any doctype--even when there isn't one. This has never been my experience, and I don't believe it's the case in the specifications, either. Correct. I got the differences usually seen between standard mode and almost standard mode in a number of browsers, mixed up with what happened in this case - because the solution is, or can be, the same. In the case 'display: block' fixed (one of) IE's whitespace bugs, and is a sound, case-dependent, fix. In other cases 'display: block' will simply solve differences seen between the different modes - the way browsers line up images. I invite Philippe to forward his off-list description to the list (so I don't have to), to eliminate any confusion I may have introduced on this matter. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print header/footer
Adrienne Latimer wrote: Does anyone know of a way to surpress the header and footer info that browsers place on a printed page. I am referring to the page numbering and the date/url information that the browser places on the page that is outside of the canvas area of the web page itself. Thanks in advance for any info. might I suggest providing a PDF if you want to exert some control over print format? what gets printed from a browser is in the control of the user, other than a print stylesheet, which again, only suggests how the page should be rendered. __ 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] Issues with CSS and Safari
Hello, I'm new around here, but i was hoping someone could help me with some CSS problems ive been having. Ive been working with CSS for a while now but ive never done much dealing with floats and positioning. Anyway, let me get to the point :) My recent client uses Safari on a Mac, and since my development has been from a PC i havent had the chance to really test in that enviroment. Things came out pretty horrible looking on the clients machine and i was wondering if anyone had any good reference links to Safari issues and fixes for CSS. Or if anyone has any suggestions on how to fix the sample page. Heres a link to a sample page: http://www.boldmouth.com/clients/iinstore/5/iinstore.html Basically from what ive gathered, the floats are breaking like they did on IE (which i managed to finally fix in IE, altho probably not as well as i could have). However this is not the only issue that Safari has done, there was comments about images being split up and possibly something to do with negative top margins. So any reference links to Safari issues for CSS would be greatly appericated. Thanks in advance, Christopher __ 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] application/xhtml+xml: background-color disappears!
Dave Pierce wrote: Nick nicely noted: If you look at http://nicku.org/index.shtml you will see the body background-color is a light greeny colour #e5f5e9, but if you look at http://nicku.org/index.sxhtml in firefox 1.5.0, you will see that the background-color is missing. (If you look at http://nicku.org/ you should get whatever your browser asks for). Nick, you have another problem there too, on http://nicku.org/ index.sxhtml there's some content behind the other items. To view, go to http://www.pierceartanddesign.com/pages/testshots.html Hope this is important... Dave Maybe another point. The html-validator doesn't remark, but Tidy found a NewLine (hard return in the code) in a place where is not allowed. Maybe disturbing something in the one or other browser? See screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-urbanik-Tidy.gif. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print header/footer
In the case of software (i.e. a web app) there are possible use cases where suppressing browser header/footer info is required. Maybe in CSS3? From: Bradley Wright [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Subject: Re: [css-d] Print header/footer Date: Tue, 12 Sep 2006 16:58:20 +0100 Adrienne Latimer wrote: Does anyone know of a way to surpress the header and footer info that browsers place on a printed page. I am referring to the page numbering and the date/url information that the browser places on the page that is outside of the canvas area of the web page itself. Short answer is: you can't (as far as I know). Long answer is: you can't, and that's a good thing because a browser should be putting information at the disposal of the user, not the user at the disposal of the web site. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why does border change positioning?
This seems very familiar, and I'm sure will be obvious, but I'm trying to understand why adding a border is changing the size of a div. On this page: http://infopeople.org/search/tools.html And I'm looking specifically at this code: div class=logo clearfix a href=/img src=/images/ifp_logo_drkblue_orange_arr.gif alt=Infopeople.org //a h1Best Search Tools/h1 /div There's this in-line style: #searchtools .logo { border: 1px solid red; } In firefox, when I change the ID to not match then the logo div gets bigger and then the h1 text moves relative to the image. Can someone explain that behavior (or point me where I can read about it)? Thanks, -- Bill Moseley [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why does border change positioning?
Bill Moseley wrote: Can someone explain that behavior (or point me where I can read about it)? Margin-collapse. http://www.complexspiral.com/publications/uncollapsing-margins/ Uncollapsing Margins (Complex Spiral Consulting) -- Join me: http://wiki.workalone.co.uk/ Thank me: http://www.amazon.co.uk/gp/registry/1VK42TQL7VD2F Engage me: http://www.boldfish.co.uk/portfolio/ __ 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] Why does border change positioning?
Bill Moseley wrote: This seems very familiar, and I'm sure will be obvious, but I'm trying to understand why adding a border is changing the size of a div. On this page: http://infopeople.org/search/tools.html And I'm looking specifically at this code: div class=logo clearfix a href=/img src=/images/ifp_logo_drkblue_orange_arr.gif alt=Infopeople.org //a h1Best Search Tools/h1 /div There's this in-line style: #searchtools .logo { border: 1px solid red; } In firefox, when I change the ID to not match then the logo div gets bigger and then the h1 text moves relative to the image. Can someone explain that behavior (or point me where I can read about it)? Thanks, Hi Bill, Collapsing margins! :-) See for instance: Andy Budd's blog article http://www.andybudd.com/archives/2003/11/no_margin_for_error/. And in the css-2.1 Box model page: 8.3.1 Collapsing margins http://www.w3.org/TR/CSS21/box.html#collapsing-margins. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem with margins and IE
Hello, I'm stuck with what seems a simple problem, but I can't find the solution. I have a container and two div's inside it, one is floated left (and it has a left margin), and the other is floated right (and it has a right margin). While FF renders everything correctly, IE doen't respect the margins. Here's the code: * !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es head meta http-equiv=content-type content=text/html; charset=utf-8 / title.../title style type=text/css * { margin: 0; padding: 0; } body { font-size: 100%; text-align: center; font-family: verdana, arial, sans-serif; background: #42b587; } .clearit { clear: both; } #contenidor { width: 766px; margin: 0 auto; text-align: left; background: #fff; } #principal { width: 581px; float: left; background: aqua; margin-left: 7px; } #secundari { width: 150px; float: right; background: yellow; margin-right: 16px; } /style /head body div id=contenidor div id=principal pprincipal/p /div div id=secundari psecundari/p /div div class=clearit /div /div /body /html * Thanks for helping. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with margins and IE
Bernat Lleonart wrote: While FF renders everything correctly, IE doen't respect the margins. Looks like this IE-bug... http://www.positioniseverything.net/explorer/doubled-margin.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] Problem with margins and IE
Bernat Lleonart wrote: Hello, I'm stuck with what seems a simple problem, but I can't find the solution. I have a container and two div's inside it, one is floated left (and it has a left margin), and the other is floated right (and it has a right margin). While FF renders everything correctly, IE doen't respect the margins. Here's the code: * !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es head meta http-equiv=content-type content=text/html; charset=utf-8 / title.../title style type=text/css * { margin: 0; padding: 0; } body { font-size: 100%; text-align: center; font-family: verdana, arial, sans-serif; background: #42b587; } .clearit { clear: both; } #contenidor { width: 766px; margin: 0 auto; text-align: left; background: #fff; } #principal { width: 581px; float: left; background: aqua; margin-left: 7px; } #secundari { width: 150px; float: right; background: yellow; margin-right: 16px; } /style /head body div id=contenidor div id=principal pprincipal/p /div div id=secundari psecundari/p /div div class=clearit /div /div /body /html * Thanks for helping. try: #principal { width: 581px; float: left; background: aqua; margin-left: 7px; display: inline; } #secundari { width: 150px; float: right; background: yellow; margin-right: 16px; display: inline; } floated elements with a defined width trigger a doubled margin bug in IE, making them too wide for your container no doubt. see: http://www.positioniseverything.net/explorer/doubled-margin.html IE Doubled Float-Margin Bug - CSS fixes and workarounds __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with margins and IE
Thank you Gunlaug and Tony, now it works. On 9/13/06, Tony Crockford [EMAIL PROTECTED] wrote: Bernat Lleonart wrote: Hello, I'm stuck with what seems a simple problem, but I can't find the solution. I have a container and two div's inside it, one is floated left (and it has a left margin), and the other is floated right (and it has a right margin). While FF renders everything correctly, IE doen't respect the margins. Here's the code: * !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; xml:lang=es head meta http-equiv=content-type content=text/html; charset=utf-8 / title.../title style type=text/css * { margin: 0; padding: 0; } body { font-size: 100%; text-align: center; font-family: verdana, arial, sans-serif; background: #42b587; } .clearit { clear: both; } #contenidor { width: 766px; margin: 0 auto; text-align: left; background: #fff; } #principal { width: 581px; float: left; background: aqua; margin-left: 7px; } #secundari { width: 150px; float: right; background: yellow; margin-right: 16px; } /style /head body div id=contenidor div id=principal pprincipal/p /div div id=secundari psecundari/p /div div class=clearit /div /div /body /html * Thanks for helping. try: #principal { width: 581px; float: left; background: aqua; margin-left: 7px; display: inline; } #secundari { width: 150px; float: right; background: yellow; margin-right: 16px; display: inline; } floated elements with a defined width trigger a doubled margin bug in IE, making them too wide for your container no doubt. see: http://www.positioniseverything.net/explorer/doubled-margin.html IE Doubled Float-Margin Bug - CSS fixes and workarounds __ 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] site check, please - cchy website
On Sep 13, 2006, at 1:40 AM, Gunlaug Sørtun wrote: Bradley Wright wrote: While your solution is sound (and appropriate), I'm curious as to where you get the impression that browsers use display: block; for img / elements under any doctype--even when there isn't one. This has never been my experience, and I don't believe it's the case in the specifications, either. Correct. I got the differences usually seen between standard mode and almost standard mode in a number of browsers, mixed up with what happened in this case - because the solution is, or can be, the same. In the case 'display: block' fixed (one of) IE's whitespace bugs, and is a sound, case-dependent, fix. In other cases 'display: block' will simply solve differences seen between the different modes - the way browsers line up images. I invite Philippe to forward his off-list description to the list (so I don't have to), to eliminate any confusion I may have introduced on this matter. I have to do the copy pasting then, uhuh ? :-) Right, then. Some short notes about a behaviour that confused Georg and maybe some other people. In whatever mode: quirks mode, 'almost standard' mode (transitional doctype), standards mode (Strict doctype), images are always inline elements by default (because that is how the html4.0 describes them). But in quirks mode and 'almost standard' mode, in some cases images behave slightly differently, depending on the environment. The difference is about where the image rest. Images are treated as inline, but behave like Quirks mode does in the following case: when the image is the only element in a (pseudo)- block element, then the (fictional) baseline that may be generated is ignored. Mostly the case of images in table-cell. This may give the impression that the image is not an inline element in this case. If the image is part of a line of text (word word [image] word word), then they are 'pulled upwards' and rest on the baseline. At least that is what Gecko does. Safari behaves the same in this regard. And that is about the only reason reason why that almost standard mode was introduced. Try little files to illustrate: almost standard: http://dev.l-c-n.com/_georg/inline-image1.html standard: http://dev.l-c-n.com/_georg/inline-image2.html quirks: http://dev.l-c-n.com/_georg/inline-image3.html One famous article that touches on the subject: http://developer.mozilla.org/en/docs/Images%2C_Tables% 2C_and_Mysterious_Gaps 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] photo-caption pairs layout problem
Oops. It's taken me this long to realize I forgot to add the URLs. I really wanted to look smart here :-) I wanted a fluid layout for photo-caption pairs. Except for the trouble of putting every pair into its own div, it's a simple layout. But I'm getting some gaps in the layout and I can't figure out why. All the photos are the same size and orientation. Would appreciate comments. Thanks! html: http://wrjsoutheast.org/savannah.html css: http://wrjsoutheast.org/inside3.css -- Betsy webdesign: http://flamingofactory.com photojournal: http://garfieldz.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] Why does border change positioning?
On 9/12/06, Bill Moseley [EMAIL PROTECTED] wrote: This seems very familiar, and I'm sure will be obvious, but I'm trying to understand why adding a border is changing the size of a div. Because, in the CSS box model, that is what it is supposed to do. Also adding padding changes the size on screen of an element. If you have a DIV that is 100px wide with a 2px border and 10px of padding that div will be 100 +4 +20 = 124 px wide. That's the way the standard is written and browsers that comply with the standard do it that way. -- Ed Seedhouse __ 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] Issues with CSS and Safari
On Sep 13, 2006, at 2:56 AM, Christopher Fisher wrote: Things came out pretty horrible looking on the clients machine and i was wondering if anyone had any good reference links to Safari issues and fixes for CSS. Or if anyone has any suggestions on how to fix the sample page. Heres a link to a sample page: http://www.boldmouth.com/clients/iinstore/5/iinstore.html Basically from what ive gathered, the floats are breaking like they did on IE (which i managed to finally fix in IE, altho probably not as well as i could have). However this is not the only issue that Safari has done, there was comments about images being split up and possibly something to do with negative top margins. So any reference links to Safari issues for CSS would be greatly appericated. Well, you don't specify a width on #content, which is floated. For some reason, the computed width of that div is 774 px in Safari. Declare a width for it, and it will work well. I suspect the fact that you use a transitional doctype may have something to do it with it. I've noticed some glitches in Safari with that mode. But I never really analysed those. I only use strict doctypes. General issue, you should check your layout at different font-sizes. My browsers are set to use a minimum font-size of 12px, and a few things end up elsewhere than you expected. 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] ie showing background image, but not other styles
Eystein Alnaes wrote: Francky wrote: I noticed ... javascript [...] What about css styled corners/borders? [...] Ah, and I see that with disabled js [...] Thank you for the heads up. I forgot about that. This page needs to be solid. The reason for the javascript etc. is that when I started out the page had sort of a fluid layout (all widths set in em's), ... REM: Liquid corners/borders can be made with css only too! [1] :-) ... but the client changed to fixed witdth later on. Without the javascript solution I won't need the disabled javascript backup. Nice! Beautiful! Eystein (still 50cm from my only 2 screens) francky 1 screen cockpit, 1/2 x 768px distance, to see the 1x1 spacer.gif's :-) [1] Liquid corner playgarden http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-index.htm __ 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] photo-caption pairs layout problem
Betsy Garfield wrote: Oops. It's taken me this long to realize I forgot to add the URLs. I really wanted to look smart here :-) I wanted a fluid layout for photo-caption pairs. Except for the trouble of putting every pair into its own div, it's a simple layout. But I'm getting some gaps in the layout and I can't figure out why. All the photos are the same size and orientation. Would appreciate comments. Thanks! html: http://wrjsoutheast.org/savannah.html css: http://wrjsoutheast.org/inside3.css Hi Betsy, If you turn on the Outline Outline Block Level Elements in the FF Webdeveloper toolbar [1], you 'll see immediately what is happening: some of the picture boxes have a different height, and a next box can not float back to the left of the page; it just has to stop floating to where the right side of the large box is ending. See screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-savannah.jpg. To get the photo's in pairs: you can make a class=leftclear with .leftclear {clear: left;} and place that after each pair of photo containers: div class=float img src=image1.jpg p class=captionA, B and C/p /div div class=float img src=image2.jpg p class=captionD, E and F/p /div div class=float leftclear img src=image3.jpg p class=captionG and H/p /div div class=float img src=image4.jpg p class=captionI, J, K and L/p /div div class=float leftclear img src=image5.jpg p class=captionM and N are a pair/p /div div class=float img src=image6.jpg p class=captionMore pairs/p /div Then the bottom of each pair wil get the level of the lowest one of both, and the new pair can start at the real left side. :-) Greetings, francky [1] http://chrispederick.com/work/webdeveloper/ __ 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] photo-caption pairs layout problem
francky wrote: Betsy Garfield wrote: I wanted a fluid layout for photo-caption pairs. Except for the trouble of putting every pair into its own div, it's a simple layout. But I'm getting some gaps in the layout and I can't figure out why. ... html: http://wrjsoutheast.org/savannah.html css: http://wrjsoutheast.org/inside3.css Hi Betsy, If you turn on the Outline Outline Block Level Elements in the FF Webdeveloper toolbar [1], you 'll see immediately what is happening: some of the picture boxes have a different height, and a next box can not float back to the left of the page; it just has to stop floating to where the right side of the large box is ending. See screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-savannah.jpg. To get the photo's in pairs: you can make a class=leftclear with .leftclear {clear: left;} and place that after each pair of photo containers: div class=float img src=image1.jpg p class=captionA, B and C/p /div div class=float img src=image2.jpg p class=captionD, E and F/p /div div class=float leftclear img src=image3.jpg p class=captionG and H/p /div ... Then the bottom of each pair wil get the level of the lowest one of both, and the new pair can start at the real left side. :-) Greetings, francky [1] http://chrispederick.com/work/webdeveloper/ Thanks, Francky, for a clever solution! And thanks to you who wrote me off list. I had trouble with the header and turned on my borders but forget to look at the photo divs. -- Betsy webdesign: http://flamingofactory.com photojournal: http://garfieldz.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] Background image not repeating!!
Hi all, I am new to css and the list ... I would really appreciate some help with the following problem: Main page - Background image not repeating!! * IE - Pages seem to render ok * FF - No background image ... images/pagebg4.jpg repeat-y ... not happening!! * Opera - No background image ... images/pagebg4.jpg repeat-y ... not happening!! I initially created the site and tested it in IE where my images/pagebg4.jpg background repeats ok http://www.kenomultimedia.com.au/ http://www.kenomultimedia.com.au/keno.css Thanks in advance, Keno __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I'm lost on this IE glitch, help appreciated
From: Stuart Swan [mailto:[EMAIL PROTECTED] Hi List, I've come across an error in IE, on this page http://www.stuartswan.com/v6/index.php on the part that says 'You are in: Home' it has a background image 400 pixels wide, in Firefox it looks perfect and attaches to both sidebars nicely but in IE it has a bit of padding on either side. Hi Stuart I see your problem hasn't been resolved yet. This should help you out: http://www.positioniseverything.net/explorer/threepxtest.html You have a (left) float on your leftsidebar and a margin on your content div to position it adjacent to the sidebar. This is what triggers the bug. If you add more text to your content div you'll see the text jog in action (or rather, the jog will disappear) once it goes down below the left navigation. The above link has a solution that should implement fine on your current page, but if you have trouble write back and I (or another list member) will help you out. I'm at work right now so I don't have much time to spare I'm afraid. HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ 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] Table vs. CSS when decorative graphic required?
I'm scratching my head over this one. I've got two different versions, one using a table and one using CSS to layout the bars, but in neither case can I achieve a consistent underline across the screen as required. See http://www.language-works.com/swimdesign/no-tables.htm for the two versions, plus the graphic mockup which I'm trying to imitate! I greatly appreciate any insights. Can this even be done? Anne __ 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 image not repeating!!
Administration wrote: ... Main page - Background image not repeating!! ... http://www.kenomultimedia.com.au/ http://www.kenomultimedia.com.au/keno.css Welcome, Keno. FF and Opera are right, #page does not contain the floating columns #c1, #c2, #c3, therefore, it is not expanded by them and gets no height. See the wiki page and read the containing floats article. http://css-discuss.incutio.com/?page=ClearingSpace I initially created the site and tested it in IE where my images/pagebg4.jpg background repeats ok Understanding CSS-concepts like floating is easier if you start creating your site in FF or Opera. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table vs. CSS when decorative graphic required?
Anne, On Sep 13, 2006, at 12:03 AM, Anne E. Shroeder wrote: I'm scratching my head over this one. I've got two different versions, one using a table and one using CSS to layout the bars, but in neither case can I achieve a consistent underline across the screen as required. See http://www.language-works.com/swimdesign/no-tables.htm for the two versions, plus the graphic mockup which I'm trying to imitate! I greatly appreciate any insights. Can this even be done? Yes, but the html needs to change. Getting the html well structured before working on the css often helps stabilize the design. Also, using good html markup will help users with css turned off and users with devices that don't support css. Not to mention that using valid, well structured markup helps browsers render your page more consistently. Try something like this... div class=tabnavbar !-- h3 is arbitrary, use whatever header makes sense within the rest of the document -- h3Regions:/h3 ul lia href=spanNorth America/span/a/li !-- lose the spans if possible -- lia href=spanAsia/span/a/li lia href=spanEurope/span/a/li lia href=spanAll/span/a/li /ul form name=form2 method=post action= select name=select size=1 option selectedChoose a Sector/option option value=Sector 1Sector 1/option option value=Sector 2Sector 2/option /select /form /div div class=tabnavbar h3Products:/h3 ul lia href=spanRisk Diagnostic/span/a/li lia href=spanIRAPS/span/a/li lia href=spanPortfolio Monitoring/span/a/li lia href=spanBespoke/span/a/li lia href=spanEducational/span/a/li /ul /div Given that markup (which is usable unstyled too) the bottom blue line you are having trouble with is as easy as .tabnavbar { border-bottom: 1px solid; } If you choose to use this markup and have difficulty applying your other styles to it, let me know and I'll see if I can help. -- 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 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/