Re: [css-d] Firefox behaviour - Child element margins applied to parent elements instead
On 25/07/2007 12:05, Tony Haddon wrote: My problem lies in the margin I've applied to the h1 element here. It ought to offset the h1 block from the containing #inner element. In IE6 it works as planned, but Firefox appears to apply the margin to the element two steps up the tree e.g. the #outer element. The XML prologue is causing IE to go into quirks mode, so you may want to remove this. Secondly, to get the spacing you want, instead of using margins on the h1 element, you could try padding your #outer element instead, and zeroing the margins on the h1 element. -- http://antanova.blogspot.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] Background image disappears when not repeated
CSS-d,
I have some text which is inside a span tag that has the following CSS
specifications:
.footer-text-right {
height:inherit;
float: right;
margin:0px 50px 0px 0px;
padding: 0px 0px 0px 12px;
background-image:url(footerbreak.png) no-repeat;
background-position: left;
}
The image footerbreak.png is a 1 pixel wide image that is intended to
appear as a border on the left side of the text.
If I make background-image have a setting of repeat, then the one
pixel image repeats across the length of the span, as I would expect it to.
However, with the settings above, with background-image set to
no-repeat, and background-position set to left, the background image
disappears completely.
Am I missing a necessary setting? Or perhaps I'm confused about the
nature of background images within span tags?
How do I get the background image to appear once, on the left side, of
my span?
Thank you for any advice.
--
Dave M G
CSSed
Zend Studio 5.5
Photoshop 7 (Wine)
Inkscape, GIMP, Ubuntu 7.04
__
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 not centring correctly in Firefox
Try adding border:1px solid red; height:600px; to your body definition and you'll see the problem. It's because FF is (correctly) interpreting that your body has a 0px height (there's only a single absolutely positioned element in it)...so the vertical center means put half of the image in the page, half above the top of the page -Jerod On 7/25/07, Seona Bellamy [EMAIL PROTECTED] wrote: Heya, I was under the impression that by setting the background-position to center center you could get your background image sitting in the middle of the screen. IE is doing this just fine, but with Firefox I am finding that the image sits right up at the top, half off the screen. You can see it in action at http://www.frontandback.com.au/temp/ What have I done wrong? The CSS is in the head of the document for purposes of debuging this. As you can see, there's not much to it so I doubt it's being thrown out by something else. Any suggestions would be appreciated. Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image not centring correctly in Firefox
Seona Bellamy wrote: I was under the impression that by setting the background-position to center center you could get your background image sitting in the middle of the screen. IE is doing this just fine, but with Firefox I am finding that the image sits right up at the top, half off the screen. You can see it in action at http://www.frontandback.com.au/temp/ You must have fixed it - the red block looks centered here on FF 2.0.0.4 for Linux ... -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] vertically centering a div
Date: Thu, 26 Jul 2007 12:09:31 +1000 From: Seona Bellamy [EMAIL PROTECTED] Subject: Re: [css-d] Background image not centring correctly in Firefox To: CSS-D css-d@lists.css-discuss.org Just out of curiosity, is there a nice easy way of vertically centring a div? I seem to recall seeing this discussion once before and the conclusion being that there isn't, but someone may have come up with a way since then. (Well, I can dream...) :) Seona. Hi, Seona; I came upon these useful URLs in a previous css-d list: For horizontal centering: http://css-discuss.incutio.com/?page=CenteringBlockElement For vertical (as well as horizontal) centering: http://tutorials.alsacreations.com/centrer/ http://vmalek.murphy.cz/ and for vertically centering elements of unknown height: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html http://brunildo.org/test/shrink_center_4.html Hope that's of some help. - Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 issues, float related? - [Re-post]
Hi all, Thanks to browsershots, I see I've an issue in Win/IE6 (at least) with form fields acting strangely near a float. Page: http://www.cprtools.net/datarecovery/requestform.php CSS: http://www.cprtools.net/datarecovery/styles/style.css WinIE6 Screenshot: http://www.cprtools.net/datarecovery/win.ie6.issue.png The page validates for CSS and XHTML Strict, and looks as I expected (intended) for it to look in most browsers other than WinIE6. There, the portions of the form to the left of my right floated div, is misaligned as are the labels for the form elements. I'm thinking this is a 'has layout' issue, but am just not sure how to 'fix' it. The page does break on UA resizing, but I've been told not to worry about that (by the guy who signs the check), so I'm not (for the moment). This is not a crucial issue as usability isn't at stake, but any suggestions will be greatly appreciated. Thanks in advance, ~Ray __ 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] Battling IE's improper z-indexing
On 7/26/07, jennifer ham [EMAIL PROTECTED] wrote: Here's the page (css is embedded): http://stalkinggear.com/zindex/ie_zindex.html Basically what happens in IE is that ONLY the last popup layer appears over the other images on the page (which are relatively positioned). All the others are hidden by the relatively positioned divs/images that come after in the source. ... What's the best and most elegant way to solve this problem? I'm answering my own question in the hopes that someone might have a better answer. I was able to make it work by dropping the relative positioning of the thumbnails, and positioning each popup absolutely based on the corners of the box that contains all the thumbnails (the clisting div which is now relatively positioned). You can see it here: http://stalkinggear.com/zindex/ie_zindex_fix1.html The reason I don't like this is that I have to explicitly state the top and left position of EACH popup div individually. Is there no better way? thanks! jennifer __ 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 + text next to it off baseline
Hi all, I have a simple problem with lining up text next to an image p id=carta href=/cart.aspimg src=/grafx/shoping_cart.jpg alt=View Cart /0 Items/a/p The image is a shopping cart icon. #cart holds text formating only, no positioning or floats, etc. the text gets pushed a little lower than the image, probably 4px off baseline of the image. This is an ascii exaggeration :) == IMAGE 0 Items the image is fully cropped (no white space) so it should be sitting together, but they aren't. Suggestions? __ 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] Cascade confusion!
oh yeh for IE give that ul that contains the navigation, a float:left. then clear:both; for the breadcrumb element afterwards... i believe basically it does not 'contain' the float children, like draw a border around the ul be4 and after the rule change. I bet be4 the border doesnt wrap around the li, and after rule does. Since the ul doesnt 'contain' the li, it is basically empty. and the next thing (breadcrumbs) gets margins leaked through from previous in flow element, p_address? i dunno i am taking a big guess, without much effort. good luck. Arin __ 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] font problem in Contribute
Hi- I have a page with a font size display problem: http://www.lawrence.lib.ks.us/childrensroom/index.html Here's the style sheet attached to it: http://www.lawrence.lib.ks.us/childrensroom/styles/children-styles2.css The problem: font size displays fine in browsers and DW as far as I can tell, but in Contribute, they are HUGE. I was wondering is anyone can spot an error I am making. Thanks for your help! Note: other pages do fine with that style sheet. __ 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] IE6 issues, float related? - [Re-post]
Arian Hojat wrote: hey Ray, Try setting #header padding to 0? or most 2ems somewhere else are showing up. i would focus on trying to get the right float to line up flush against container's right side as thats what firefox is doing. Havent looked at your stuff detailed myself. Might wanna look around for any float that has margins, cause IE will double float margins unless u put display: inline for them. __ 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/ Thanks again, Arian. I will have at all this 1st thing in the morning. Your help is greatly appreciated. ~Ray __ 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] IE6 issues, float related? - [Re-post]
Arian Hojat wrote: If you look at that top right image float in IE6 with the IE developer toolbar, i think the right image slightly tips over the input fields, so since those are regular in flow content, floats can push them over (just like text wraps around an image float). Not sure why this occurs in IE, probably something with margins or padding or width is a little bit higher than in FF. Look at that image is way more to the right in IE, than FF. good luck, Ari __ 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/ Thanks Arian, I'll widen the containing div and hit it again. I'd done this already, but perhaps didn't widen it enough. I appreciate your input! Best regards, ~Ray __ 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] Making a container of two columns stretch to contain the longer of the two
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Dave M G wrote: What I need is for the container div to stretch out to be as long as whichever of the side-menu or article-container is longest, so that its borders and background enclose both columns all the way down to the bottom. Looks like a float containment problem to me. Try setting overflow: auto; on the container. Hope this helps, Ricky -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.7 (GNU/Linux) iD8DBQFGqMiLZBKKLMyvSE4RAqQ/AKDWBh2U5Plc5tHeiUANy3lwdKKWbwCfQiHm ZN2n0VWi45fCt6W98CgpGAw= =fGI+ -END PGP SIGNATURE- __ 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] Table extending past 100% of browser window width
Philippe,
I tried what you suggested:
I added float:left; to
div#mainContainer{
float:left;
position:relative;
text-align:left;
min-width:800px;
height:100%;
}
In FF, it seemed to work, but it didnt extend all the way to contain the
whole table.
For IE7, the content area jumped underneath the left menu area so it didnt
help at all.
I think the hardest part about this problem is that the browsers are doing
what they are supposed to and there is no way to change the table sizes, so
I think I am stuck with it.
The good news is that yesterday I was able to make the basic background
image repeat in the body section so that there is no abrupt change in
colors, so even if the table jumps outside the legal area of the browser,
the user will never notice but will see a scroll bar. The only thing that
now looks ugly are the footer and (of course) the scroll bars, which I can't
help. Since you can only make one background image repeat in the body
section and the footer always changes vertical position, I cant make the
footer a background image. So now the footer always ends pretty much where
it used to and doesnt look correct.
Parag
__
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] CSS site with asp/html not working in Firefox
Ingo!! You were exactly right This works fine! Thank you, so very much ;-) Suzanne Ingo Chao [EMAIL PROTECTED] wrote: [EMAIL PROTECTED] wrote: ... The problem is occurring with the Find Licensee. When entering a county such as Rankin, which has a very long list of licensees, all of the data is sent to the page, but just after the H listings, the page goes white. If you look at the source code, the data is there, but it is not displayed, and the page is white where the data should be. Once the data ends, the footer appears as it should. Looks like https://bugzilla.mozilla.org/show_bug.cgi?id=242582 large table doesn't get rendered all the way to the bottom This problem seems to be related on your overflow:auto setting in #colorbarcontent /* advanced.css (line 223) */ Did not look into it, but I guess its about containing floats? Remove that overflow and insert float:left, at least in firebug this works for me. Ingo __ 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] my CSS is often working offline but not online , why is that so?
Zoe M. Gillenwater [EMAIL PROTECTED] wrote: lavinia Ebert wrote: Hi, why is it that the behaviour from the browsers is offline different to online? The browsers (testing on IE6, Opera, Fireforx2 and Netscape) are interpretating my CSS often differently offline and online. Can I do something about this? Its an annoying process to have to upload everything again and again to see when the code is finally working correctly... Lavinia, Can you be more specific about how the browsers are interpreting [your] CSS often differently offline and online? Do they sometimes fail to show any styles? Do they sometimes fail to show just the updates you've made to the styles? Something else entirely? Etc. Also, can you send us a link to a page we can look at? Thanks, 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/ I had that problem as well, really strange, my .htm page looked one way on my PC with explorer and then different when I looked at it online. No idea why that happened, strange as there shouldn´t be any reason why this happens surely!! - Building a website is a piece of cake. Yahoo! Small Business gives you all the tools to get online. __ 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] Maps, Google or Virtual Earth use
Mcdaniel, Brett wrote: I am wondering if anyone out there is using either Google Maps or Virtual Earth? Have you been able to embed stuff into a CSS file if you have? Just starting a project with maps and wanted to know how people are doing them. Brett, Can you be more specific about what stuff you're trying to do with CSS to your maps? 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] Firefox behaviour - Child element margins applied to parent elements instead
Philippe Wittenbergh wrote: On Jul 25, 2007, at 8:05 PM, Tony Haddon wrote: My problem lies in the margin I've applied to the h1 element here. It ought to offset the h1 block from the containing #inner element. In IE6 it works as planned, but Firefox appears to apply the margin to the element two steps up the tree e.g. the #outer element. The behaviour in Firefox, and Opera, Safari, iCab, Konqueror and all other modern browsers is correct and expected. It is called escaping margins sometimes. IE is wrong because your parent container (#outer) has a width applied, which trigger the dreaded 'hasLayout' property. Tony, For more information about the concept Philippe is talking about, see this article: http://www.complexspiral.com/publications/uncollapsing-margins/ 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] Background image not centring correctly in Firefox
I can't remember who it was, but I do recall it was on this list. Someone sent a how to on vertical centering of unknown height items last year, I think. The URL is here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html I've found it to be a life-saver on many occasions when I need to do it. Very simple, and I think one of the cleanest methods I've found (even if it does call for extra divs!) Whoever it was that posted it before - awesome, and thank you. ~Shelly __ 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 Pop Menu Magic not hovering on top of Flash or Tab Panel Magic
On Mac, Safari Version 3.0.2 (522.12) your menu is dropping over the tab menu =) Chris Blake: Visit my Website at 3 Point contact | [EMAIL PROTECTED] - 07816163420 | aim - blakeybounce | msn - [EMAIL PROTECTED] On 26 Jul 2007, at 07:31, Joanne wrote: I have a page where I have a Pop Menu Magic drop down menu and a Tab Panel Magic. http://www.baysportsaustralia.com.au/lanai.htm How do I get the drop down menu to drop ON TOP of the tab panel and not underneath it. (And knowing how to get it to do this over a flash file would be handy too.) Joanne __ 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] PVII Pop Menu Magic not hovering on top of Flash or Tab Panel Magic
I have a page where I have a Pop Menu Magic drop down menu and a Tab Panel Magic. http://www.baysportsaustralia.com.au/lanai.htm How do I get the drop down menu to drop ON TOP of the tab panel and not underneath it. (And knowing how to get it to do this over a flash file would be handy too.) Joanne __ 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] Cascade confusion!
this rule:
#calendar .navbar .calendar li {
background:url(../graphix/round_corners/tab_right_yellow.gif) no-repeat
top right;
}
should be
#calendar .navbar li.calendar {
background:url(../graphix/round_corners/tab_right_yellow.gif) no-repeat
top right;
}
Since li is not some list element under another element that has a class of
calendar. li itself has a class of calendar.
Not sure of other problem maybe take a look later.
good luck,
Arian
The page in question is
http://depts.washington.edu/hortlib/test/news_eventsTabs.shtml
Thanks for any ideas!
~Tracy
__
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 not centring correctly in Firefox
On 26/07/07, Shelly [EMAIL PROTECTED] wrote: I can't remember who it was, but I do recall it was on this list. Someone sent a how to on vertical centering of unknown height items last year, I think. The URL is here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html I've found it to be a life-saver on many occasions when I need to do it. Very simple, and I think one of the cleanest methods I've found (even if it does call for extra divs!) Whoever it was that posted it before - awesome, and thank you. I second those thanks. This is exactly the sort of thing I was looking for. :) Cheers, Seona. __ 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] IE6 issues, float related? - [Re-post]
hey Ray, Try setting #header padding to 0? or most 2ems somewhere else are showing up. i would focus on trying to get the right float to line up flush against container's right side as thats what firefox is doing. Havent looked at your stuff detailed myself. Might wanna look around for any float that has margins, cause IE will double float margins unless u put display: inline for them. __ 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] Making a container of two columns stretch to contain the longer of the two
Whoops forgot to send to list:
Hey Dave,
The container will stretch to fit content that is flow normally in the
document. So far... the article is in normal flow (aka no crazy stuff like
floated or positioned), and left guy is floated. When floated, it breaks out
of normal flow. If you had text in the container, it would move around it,
but to its parent its almost as if floated content doesnt exist so the
border only goes as far as the article which it does know 'exists'.
You can do a few things, some target FF/IE separately. Some work in both but
less elegant.
btw what u want is called Containing or Enclosing Floats.
1. You can add a clearing div inside the container, just be4 the end; it
clears the float from be4. and gives the parent a frame of reference of the
last thing in normal flow to base its borders off of.
2. float the parent. if you float the parent, it will 'contain' its
children. Note the element after the container, needs clear:both applied to
clear the float.
3. add overflow: hidden; or overflow: auto; on parent. Some weird W3 rule
says if u apply this to parent, then it 'contains' its floats.
IE6 doesnt follow this, so It has another rule you can target it with. IE
has an internal property called hasLayout; u can set this to true and
activate some funky stuff. Applying height:1% or height:1px; any dimension
really, zoom:1;, etc gives it layout, and causes IE6 to actually expand to
fit its float children (one of side effects of getting an element's
hasLayout property to be activated).
Can be done like so:
.container{overflow:hidden;} /* for normal browsers like FF*/
* html .container{zoom:1;} /* or use IE conditional comments to target IE
without this '* html' hack which IE6 recognizes */
4. :after solution which i use... new browsers adds a empty, invisible div
automatically just be4 end of container which clears the div. almost like
soluton 1, but without need for non-semantic html tag(aka a tag thrown in
purely for design).
.container:after{ content: .; display: block; height: 0; clear: both;
visibility:hidden; } /*need a period here just to give some content to put
in document, not sure why doesnt work; but everyone recommends just
throwing in a period*/
* html .container{zoom:1;}
Note: To target IE6, i used to use height:1%, or overflow:auto; but i think
there were a few instances where i was throwing a height on some container
to contain its children but i legitimately use overflow with that same
element and then the scrollbars appear, and sometimes i would use overflow
to contain its children but forget that div has a height (causing scrollbars
again). So i use IE propietary CSS prop zoom. which is alright if u dont
mind css stylesheet not validating. if client wants it 100% validated, then
move this specific rule in IE conditional comment.
Hope that helps,
lates,
Ari
__
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] Making a container of two columns stretch to contain the longer of the two
CSS-d, I have been looking around the web to try and find the right solution for my issue. Although I've seen many articles describing how to get two or three columns to match each others length, I can't quite seem to apply the information to my situation. Unfortunately I can't show a live example, but I've uploaded a screenshot and the CSS to here: Screenshot: http://autotelic.com/Screenshot.png CSS: http://autotelic.com/style.css I've added borders so that it's more clear where the boundaries of the relevant div tags are. I have a container div (green border), and inside of it is a side-menus div (blue border) and a article container div (purple border). The side-menus div is floated to the left, and the article-container div has a margin on the left side that is a little wider than the side-menu's width. I think it's a fairly standard approach to creating a two column layout, except that both columns happen to be inside a div. I don't need necessarily need either the side-menu or article-container divs to stretch to match the other. This seems to be the effect that most online instructions cater to. What I need is for the container div to stretch out to be as long as whichever of the side-menu or article-container is longest, so that its borders and background enclose both columns all the way down to the bottom. Right now, basically the container stretches to match the height of the article-container column only. So if the article-container side happens to be longer than the side-menus, all is good. But, if the side-menus column is longer, as it is in the screenshot, then its content stretches past the background of the container. No good. At first I thought my problem was the collapsing margins issue described here: http://www.w3.org/TR/CSS21/box.html#collapsing-margins But I've added a 1 pixel padding to all sides of the relevant divs, and it still doesn't work. Then I read that when a div is floated, it falls outside of the document flow. However, what I don't get is that I have a footer below both Left and Right, that has a clear: both property in it. So it slides underneath the side-menus, and pulls down the length of the container. I thought that setting the height on all the nested divs to 100% should at least have some effect, but it doesn't. At this point I'm quite confused. Can anyone recommend a reliable way to get the divs inside my container div to reliably reach down to the footer? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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] my CSS is often working offline but not online , why is that so?
lavinia Ebert wrote: Hi, why is it that the behaviour from the browsers is offline different to online? The browsers (testing on IE6, Opera, Fireforx2 and Netscape) are interpretating my CSS often differently offline and online. Can I do something about this? Its an annoying process to have to upload everything again and again to see when the code is finally working correctly... Lavinia, Can you be more specific about how the browsers are interpreting [your] CSS often differently offline and online? Do they sometimes fail to show any styles? Do they sometimes fail to show just the updates you've made to the styles? Something else entirely? Etc. Also, can you send us a link to a page we can look at? Thanks, 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] Javascript stops CSS Validation
On 26/07/2007 04:30, Christopher Blake wrote: Hi, If it helps, this is the page I am trying to validate the CSS for: http://www.3pointdesign.com/ I am trying here: http://jigsaw.w3.org/css-validator/ and this is what I get: Servlet has thrown exception:javax.servlet.ServletException: Timed out I just tried the same thing and for the same result. Then, using the Firefox web developer toolbar selected validate local CSS instead. The result was Lexical error at line 210, column 2. Encountered: / (47), after : Looking through your stylesheets searching for '', I found an IE conditional comment in there. I think this is likely to be your problem - these shouldn't be in your stylesheet. Put this somewhere in the head of your document xhtml, and that should sort things out. -- http://antanova.blogspot.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] Cascade confusion!
I'm trying to implement Andy Budd's (CSS Mastery) tabbed navigation
bar. The home page tabs worked out fine (right corner graphic in the
li and the left corner graphic in the a).
Now I'm trying get my interior pages to use another color to show it's
the active tab.
I can get this to work with just background color (no graphics), but
when I try to override the default tab graphics with my section graphics
I can only get the a graphic to show, meaning the original li tab
graphic is still showing.
Another annoying thing is IE7 puts a gap between my nav bar and the main
content, all other browsers show no gap (FF/O/S) : (
The page in question is
http://depts.washington.edu/hortlib/test/news_eventsTabs.shtml
Thanks for any ideas!
~Tracy
#calendar .navbar .calendar li{
background:url(../graphix/round_corners/tab_right_yellow.gif)
no-repeat top right;
}
#calendar .navbar .calendar a{
background:url(../graphix/round_corners/tab_left_yellow.gif)
no-repeat top left;
cursor: default;
text-decoration:none;
}
.navbar {
background-color:#33;
}
.navbar ul{
margin: 0px;
padding: 0px;
list-style:none;
width: auto;
float:left;
}
.navbar li{
float: left;
background: url(../graphix/round_corners/tab_right.gif) no-repeat
top right;
list-style:none;
margin: .3em 0 0 0;
}
.navbar li a{
display: block;
padding: 0 2em;
line-height: 2.5em;
background:url(../graphix/round_corners/tab_left.gif) no-repeat top
left;
text-decoration:none;
color:#FF !important;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.navbar a:hover{
color: #00 !important;
}
headers ...
body id=calendar
...
div class=navbar
ul
lia href=http://catalog.lib.washington.edu/search~b1a1/;
title=Search for booksCatalog/a/li
li class=usinga
href=http://depts.washington.edu/hortlib/using_library/hours_contact.shtml;
title=Hours, directions and FAQUsing the Library /a/li
li class=collectionsa
href=http://depts.washington.edu/hortlib/collections/collections.shtml;
title=What you'll find at the libraryCollections and Services/a/li
li class=resourcesa
href=http://depts.washington.edu/hortlib/resources/resources.shtml;
title=Recommended books, websites and tutorials Resources/a/li
li class=calendara
href=http://depts.washington.edu/hortlib/calendar/news_events.shtml;
title=Library news, programs and regional event calendarsNews and
Events/a/li
li class=homea
href=http://depts.washington.edu/hortlib/index.shtml; Home/a/li
/ul
__
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] IE6 issues, float related? - [Re-post]
If you look at that top right image float in IE6 with the IE developer toolbar, i think the right image slightly tips over the input fields, so since those are regular in flow content, floats can push them over (just like text wraps around an image float). Not sure why this occurs in IE, probably something with margins or padding or width is a little bit higher than in FF. Look at that image is way more to the right in IE, than FF. good luck, Ari __ 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] Firefox behaviour - Child element margins applied to parent elements instead
On Jul 25, 2007, at 8:05 PM, Tony Haddon wrote:
My problem lies in the margin I've applied to the h1 element here.
It ought
to offset the h1 block from the containing #inner element. In IE6
it works
as planned, but Firefox appears to apply the margin to the element
two steps
up the tree e.g. the #outer element.
The behaviour in Firefox, and Opera, Safari, iCab, Konqueror and all
other modern browsers is correct and expected. It is called escaping
margins sometimes.
IE is wrong because your parent container (#outer) has a width
applied, which trigger the dreaded 'hasLayout' property.
The only fix I have been able to find is putting a border on the
#inner
element (see example at
http://www.tonyhaddon.com/cssbug/test2.html)http://
www.tonyhaddon.com/cssbug/test2.html.
That is one way to solve your problem.
This seems to apply the padding in all the right places...
I think you mean 'margin' there (padding is _not_ the same a margin).
but now I have a
border on my #inner that I don't want!
In your case, you also could also use a tinny amount of padding-top
for #inner.
#inner {padding-top:1px;}
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] Battling IE's improper z-indexing
Jennifer Ham wrote: On 7/26/07, jennifer ham [EMAIL-REMOVED] wrote: Here's the page (css is embedded): http://stalkinggear.com/zindex/ie_zindex.html Basically what happens in IE is that ONLY the last popup layer appears over the other images on the page (which are relatively positioned). All the others are hidden by the relatively positioned divs/images that come after in the source. What's the best and most elegant way to solve this problem? I'm answering my own question in the hopes that someone might have a better answer. I was able to make it work by dropping the relative positioning of the thumbnails, and positioning each popup absolutely based on the corners of the box that contains all the thumbnails (the clisting div which is now relatively positioned). You can see it here: http://stalkinggear.com/zindex/ie_zindex_fix1.html The reason I don't like this is that I have to explicitly state the top and left position of EACH popup div individually. Is there no better way? thanks! jennifer Hi Jennifer You have made this way more complex than is needed in both the html and CSS. There no need for position:absolute, z-index or javascript for any browser (apart from IE6 and similar). Instead of changing your html or CSS, I made up a quick demo. http://css-class.com/test/popup.htm It uses the dynamic pseudo class :hover. Works in Firefox and IE7. You will need some suckerfish javascript or similar to make it work in IE6 or similar browser. Kind Regards, Alan __ 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] Making a container of two columns stretch to contain the longer of the two [SOLVED]
Arian, Ricky, Thank you for responding. Arian Hojat wrote: 3. add overflow: hidden; Thanks for the multiple suggestions and the explanation for each. Very informative. I've decided to go with the one you've suggested above. It was pretty much a coin toss between this and the :after solution you offered, as they both seem to be on equal terms in ease of implementation and effectiveness. It's working great, and I also now have a better understanding of floats and the div tags that contain them. Much appreciated. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ 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 spacing question
Hello folks, I am starting my first (almost) all CSS site, and I already have a question. Probably typical... If you look at the site: http://www.johnkehm.com/jk http://www.johnkehm.com/jk/style.css The 'print examples, web examples and contact' box renders differently between Firefox and IE6. IE moves it down and left quite a few pixels and also adds spacing between the links. It must be an easy fix? I would like to learn the hacks etc as I go. Any help is appreciated, John __ 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 Pop Menu Magic not hovering on top of Flash or TabPanel Magic
I have a page where I have a Pop Menu Magic drop down menu and a Tab Panel Magic. http://www.baysportsaustralia.com.au/lanai.htm How do I get the drop down menu to drop ON TOP of the tab panel and not underneath it. (And knowing how to get it to do this over a flash file would be handy too.) Joanne, I haven't looked at the style sheets but have you tried changing the z-index of the Pop Menu Magic sub menu items? As far as flash, I believe there is a fix for this but don't remember off the top of my head. Bob __ 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] Battling IE's improper z-indexing
Hi All I've got something I thought was simple and elegant enough, and worked beautifully in the reasonable browsers. IE (6 7) made a huge mess though. Here's the page (css is embedded): http://stalkinggear.com/zindex/ie_zindex.html Basically what happens in IE is that ONLY the last popup layer appears over the other images on the page (which are relatively positioned). All the others are hidden by the relatively positioned divs/images that come after in the source. I did locate an article* that seemed to explain the issue, but the solution seems to be to give each element that misbehaves its own z-index. This is something I'd really like to avoid doing since I'll have more than 20 of these on the page, and ideally I'd like them to come from my content management system and with minimal nonsense. What's the best and most elegant way to solve this problem? thanks! jennifer * http://www.aplus.co.yu/lab/z-pos/index.php __ 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 + text next to it off baseline
On Thu, 26 Jul 2007 20:38:11 -0400, Brian Cummiskey wrote:
Hi all,
I have a simple problem with lining up text next to an image
p id=carta href=/cart.aspimg src=/grafx/shoping_cart.jpg alt=View
Cart /0
Items/a/p
The image is a shopping cart icon.
#cart holds text formating only, no positioning or floats, etc.
the text gets pushed a little lower than the image, probably 4px off baseline
of the
image.
You almost answer your own question. :)
It sounds like the image is sitting on the baseline of the text --
in other words, it has a space underneath where the text descenders lie
(tails of g, j, p, etc.)
Try adding this rule:
#cart img { vertical-align: bottom; }
Cordially,
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/
