Re: [css-d] float-setup with mysterious top-margin...
On 6 Feb 2006, at 3:49 pm, Jesper Brunholm wrote:
I've reopened a page with the setup on
http://www.triomio.dk/testsetup.html, and I am struggling to see how
this can be collapsing margins. As far as I can gather, the
contributing
factors are (all declared in
http://www.triomio.dk/script/oldstyle.css, only relevant style is
quoted below)
[...]
below that, the graphical element:
#sgraf {
border-top: 4px solid #c08e09;
width: 300px;
height: 400px;
clear: left;
float: left;
margin-bottom: 2em;
}
[]
I think that it is the clear:left; of #sgraf that is still clearing
when we get to the floated content. Actually, reconsidering, I think
that it _should_ do so (considering the rules). I was fooled by
Explorer's neat behaviour, and did not look far enough back into
my setup.
Can you confirm this, or show me the margin-collapse :-) ?
No margin-collapsing issues to be seen there :-)
here is the same file as a minimal sample (probably won't work in IE).
http://dev.l-c-n.com/_temp/trioMio.php
You are right when you isolate the 'clear:left' in #sgraf as the
problem.
Better you are to float the whole left-hand column:
http://dev.l-c-n.com/_temp/trioMio2.php
If that is what you actually want...
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] float-setup with mysterious top-margin...
I've reopened a page with the setup on http://www.triomio.dk/testsetup.html [...] I think that it is the clear:left; of #sgraf that is still clearing when we get to the floated content. [...] Can you confirm this, or show me the margin-collapse :-) ? No margin-collapsing issues to be seen there :-) Thanks - then I probably haven't missed the collapsing-margins concept :-) Better you are to float the whole left-hand column: http://dev.l-c-n.com/_temp/trioMio2.php If that is what you actually want... That's the solution I ended up using, see http://triomio.dk/index_e.html for an english version - do I interpret your anwer right, that you see a problem in this set up? Thank you again Best regards Jesper Brunholm __ 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] IE7b2's Doctype switch comments
I was just checking a few of the site's I look after in IE7's new beta, and was a little worried that some appeared just as in IE6, which I wasn't expecting. The two odd ones out are on a 3rd party CMS that doesn't do the XML declaration properly, and has a comment to kick IE6 into quirks mode. I'm not sure if it's worth adding to the wiki, but I can see it causing problems for people if this isn't general knowledge: Although IE7 now accepts an XML declaration above the doctype, any comment above the doctype will put it into quirks mode. Personally, I'm quite happy with this behaviour, it means I can target a group of browsers with predictable bugs hacks (IE 5.0 - 7b2). I'll leave this here if people want to check: http://alastairc.ac/testing/IE7_Doctypes/ Cheers, -Alastair __ 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] float-setup with mysterious top-margin...
Jesper Brunholm wrote: http://www.triomio.dk/testsetup.html I think that it is the clear:left; of #sgraf that is still clearing when we get to the floated content. Can you confirm this, or show me the margin-collapse :-) ? You're quite right - no margin-collapse there. It's obvious when I see the original case. Missed it the first time around :-) Your solution in http://www.triomio.dk/index_e.html is the right one for such a clearing-case. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] width variation
Hello, in a stylesheet I found: width: 158px; \width: 160px; w\idth: 158px; For which browsers are these different hacks? and why? Thanks. Uli -- Erst mal gar nichts unternehmen, alles andere ergibt sich dann von selbst. __ 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] width variation
Ulrich Wiederhold wrote: Hello, Hi :-) in a stylesheet I found: width: 158px; \width: 160px; w\idth: 158px; For which browsers are these different hacks? The first line is setting the desired width for all browsers. The second line sets a different width for WinIE and MacIE (although I've never seen that hack, I think it acts the same as the underscore hack: _property:value;) The third line sets the desired width back for WinIE6 and MacIE5, but not WinIE5. The result is that all browsers apply a width of 158px, while WinIE5 applies 160px. and why? Because IE5 doesn't add the borders after applying the width, but includes them in the width. IE6 wouldn't either if it's in quirks mode, so these stylerules only make sense in standards mode. From the above mentioned style rules, I deduct that the element in question probably has a left and right border of 1px. Thanks. You're welcome :-) -- Els __ 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] Photo Gallery's
Hi all, I am soon going to implement a online Photo Gallery in CSS and was wondering if any of you knew of any good sites that I can use as a references. Basically, I'd like to make it crisp and clean, and obviously make use of Thumbnails. Thanks Tryst __ 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] Photo Gallery's
Hi all, I am soon going to implement a online Photo Gallery in CSS and was wondering if any of you knew of any good sites that I can use as a references. Basically, I'd like to make it crisp and clean, and obviously make use of Thumbnails. Floating them in a list worked for me, with some extra DOM you can make them pretty slick, too: http://www.icant.co.uk/sandbox/picasa-dom-view/ If you use picasa for your gallery, you can check my template to generate the example: http://www.wait-till-i.com/index.php?p=212 General info on how to do the CSS part is in the floatutorial: http://css.maxdesign.com.au/floatutorial/ -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Menu does not display in IE7beta2
Although still in early stages, I am stumped as to why the left-side menu is completely missing from the display in IE7beta2 (WinXPsp2). The menu displays fine in FF 1.5 and Opera 8. page: http://plano.lib.il.us/testing/new/test3.html Any one run into this problem or have an answer? -- T. R. Valentine Use a decent browser: Safari, Firefox, Mozilla, Opera (Avoid IE like the plague it is) __ 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 won't let static content move up to flow around
snip So this innocent looking documentation attempt !-- This element fixes the isthereanameforit-bug -- !--[if IE] div class=clear_solvent/div ![endif]-- may cause problems that are difficult to debug. Authors are baffled when IE6 kicks one or two characters into the screen where they don't belong to. ( Or, I haven't had time to test it, are we allowed to add a comment phrase /inside/ the conditional comment? !--[if expression] comment_phrase HTML ![endif]-- or !--[if expression] HTML ![endif] comment_phrase -- I don't know, and I did not find a mention of it in [1]. Ingo Ingo- I don't know if you can place html comments within the conditional comments section, but you could certainly place css comments in there. That would avoid the problem entirely, right? I think I'm one of the few people who've encountered a crashing version of the duplicate characters bug, which you helped me solve. I believe the problem in my case was an empty div that IE was attempting to duplicate, causing the crash. Regards, Ron __ 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] Repost: tool tips + IE(6) = mess
I'm working on this demo http://ici1.umn.edu/beta/nceo/ If you click on either Participation Policy Variables or Response and view the page in IE it's a total mess. (Mozilla and Firefox are lovely) I used John and Holly's tool tips http://www.communitymx.com/content/article.cfm?cid=4E2C0 and I didn't see any mention of this being a problem. I used to do a lot of css, but since then I've gotten out of it so I'm pretty rusty on how to fix this. :) I tried taking the position:relative off the a when in tables, but that made the tooltips show up in the upper left hand corner of the content area. Also, if you go to http://ici1.umn.edu/beta/nceo/accommodations/state.asp?state=Alabama and hover over the links you'll notice that the text of the link below shows through. Could someone help me figure this out? Thanks Joelle __ 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 unscrollable content bug
I posted a question on Friday and was told I might be experiencing the ie
unscrollable content bug on this page:
http://www.lowandtritt.com/new/communicate.html
Now, I have made a #container { position: relative; top: 0; left: 0; height:
1%; }
and have put everything into this div. Still, the pc's I view this on here
are still showing no scrollbar.
This page says if I add height: 1% to the relative positioned container
everything should be fixed. Not working though.
http://www.positioniseverything.net/explorer/unscrollable.html
Any ideas? Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] HTML/PHP form - button problem in IE
Dear list, I usually can solve most issues by reading this list, but with this problem I've reached a dead end. I've created an HTML form and in IE the reset button appears towards the middle of the page, rather than being floated left as I'd like it to (in FF it all looks okay). Form page here: http://www.terranetwork.net/test/enquiry_form_060206.php For test purposes I have included the CSS inline. Any advice on how to position the button to the left in IE would be greatly appreciated! PS: form not yet completed - pressing buttons will redirect to homepage. I'm using IE6 on WinXP and FF 1.5.0.1 on WinXP. For some reasons, other forms I've created float as expected ... so something is wrong, but as I said - dead end, just can't find the error. many thanks! Edith Karnitsch __ 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] HTML/PHP form - button problem in IE
Edith Karnitsch wrote: I've created an HTML form and in IE the reset button appears towards the middle of the page, rather than being floated left as I'd like it to (in FF it all looks okay). Form page here: http://www.terranetwork.net/test/enquiry_form_060206.php For test purposes I have included the CSS inline. Any advice on how to position the button to the left in IE would be greatly appreciated! Edith- Did you fix this issue? It looks ok to me in IE6/Win2K. The Reset button is left of the Request Quote button, but not so far left that it lines up with the left border above it. It looks ok to me. Is this not where its supposed to be? Regards, Ron __ 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 Gallery's -( related question)
Floating them in a list worked for me, with some extra DOM you can make them pretty slick, too: http://www.icant.co.uk/sandbox/picasa-dom-view/ If you use picasa for your gallery, you can check my template to generate the example: http://www.wait-till-i.com/index.php?p=212 I have a question about this that I haven't seen answered: Is there a way to have thumbnails of varying sizes aligned along their bottom margins AND have captions that are top-aligned? (esp. noticeable when the captions are more than one line). Similar to this example using tables: http://66.117.159.181/products_buy_posters3.php Probably, I think it'll need help of some of the CSS gods here (Christian, Ingo...). Personally I would use the images as backgrounds and cover them with a transparent GIF with the correct alternative text the size of the whole cell, give the text content a top-padding that is big enough and voila. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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] HTML/PHP form - button problem in IE
Ron - thanks for checking! No, it's not fixed (wish it were!). The button should line up with the left edge of the box above. I realize it doesn't actually create an error but I just don't understand why it's not over on the left as in FF. I'm still learning CSS so I guess every problem is an opportunity :) Would just love to know why and what I can do to rectify. edith Pringle, Ron wrote: Did you fix this issue? It looks ok to me in IE6/Win2K. The Reset button is left of the Request Quote button, but not so far left that it lines up with the left border above it. It looks ok to me. Is this not where its supposed to be? __ 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] Boxes breaking out of formation (floats)
Hi Guys Could someone take a look at this site please? (CSS Embedded) http://www.theoldcoachworks.org.uk/ I am informed that the end box is breaking out of formation in IE (AOL). Is this correct and if so is there a reason please? Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 Gallery's -( related question)
Don Hinshaw wrote: I have a question about this that I haven't seen answered: Is there a way to have thumbnails of varying sizes aligned along their bottom margins AND have captions that are top-aligned? (esp. noticeable when the captions are more than one line). Similar to this example using tables: http://66.117.159.181/products_buy_posters3.php I don't think that it will work with completely unknown content, but if you just have to distinguish portrait and landscape images and none or some text, you can do a lot if you set min-width and min-height to the floated (list-)boxes ,give them position relative and play with position: absolute and margins for the caption. Not a gallery, images top-aligned but multiple associated text-boxes http://casaaxarquia.com/forsale/plot.php might give you some ideas. Susanne -- http://sujag.de - Webentwicklung und -beratung [EMAIL PROTECTED] Lottumstr. 22, 10119 Berlin, Tel: 030 - 440 483 47 __ 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] HTML/PHP form - button problem in IE
Ron - thanks for checking! No, it's not fixed (wish it were!).
The button should line up with the left edge of the box
above. I realize it
doesn't actually create an error but I just don't understand
why it's not
over on the left as in FF. I'm still learning CSS so I guess
every problem
is an opportunity :) Would just love to know why and what I can do to
rectify.
edith
Edith-
It appears that this is a bug in IE [0]. Your input#reset is inheriting
the 100px left margin from the #enquiry form container.
To solve it, you will need to feed IE a -100px margin-left on your
#reset. I added the following to fix it locally:
* html #reset {
margin-left:-100px;
}
You may wish to place this in a conditional comment instead.
Regards,
Ron
[0] after googling for IE css input bug, I came across this post:
http://jennifergrucza.com/blog/archives/2004/08/31/weird-ie-bug-inputs-i
ncorrectly-inherit-horizontal-margins-when-theyre-in-a-fieldset
__
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 unscrollable content bug
David Ross wrote: I posted a question on Friday and was told I might be experiencing the ie unscrollable content bug on this page: http://www.lowandtritt.com/new/communicate.html I believe you have a sligthly different bug here [1]. A solution could be to remove the top:205px on content-narrow, and get the same result with padding-top:205px on the same element. My first try was to use a margin-top:205px, but this seems to trigger yet another bug in IE. If I were you, I would try to use less positioning relative/absolute in that page. hth, Bruno [1] http://www.brunildo.org/test/IEWrelscroll.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] Photo Gallery's -( related question)
From: Susanne Jäger [EMAIL PROTECTED] I don't think that it will work with completely unknown content, but if you just have to distinguish portrait and landscape images and none or some text, you can do a lot if you set min-width and min-height to the floated (list-)boxes ,give them position relative and play with position: absolute and margins for the caption. Not a gallery, images top-aligned but multiple associated text-boxes http://casaaxarquia.com/forsale/plot.php might give you some ideas. Or you can save some energy, use a table for your thumbnails, and have lots of fun using CSS to, uh, style things :-) -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ 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 Gallery's -( related question)
I don't think that it will work with completely unknown content, but if you just have to distinguish portrait and landscape images and none or some text, you can do a lot if you set min-width and min-height to the floated (list-)boxes ,give them position relative and play with position: absolute and margins for the caption. Not a gallery, images top-aligned but multiple associated text-boxes http://casaaxarquia.com/forsale/plot.php might give you some ideas. Or you can save some energy, use a table for your thumbnails, and have lots of fun using CSS to, uh, style things :-) Well, the cool thing about floated thumbnails is that they fill up the space that is available without causing horizontal scrolling, which can be rather handy. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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 unscrollable content bug
Got it...thanks. I posted a question on Friday and was told I might be experiencing the ie unscrollable content bug on this page: http://www.lowandtritt.com/new/communicate.html A solution could be to remove the top:205px on content-narrow, and get the same result with padding-top:205px on the same element. __ 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 Gallery's
[EMAIL PROTECTED] wrote: I am soon going to implement a online Photo Gallery in CSS and was wondering if any of you knew of any good sites that I can use as a references. Basically, I'd like to make it crisp and clean, and obviously make use of Thumbnails. Tryst A simple question is becoming a complicated answer. See image galleries on this page: http://www.brunildo.org/test/index.html And putting the caption on top: http://www.w3.org/Style/Examples/007/figures.html Regards, ~davidLaakso __ 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] HTML/PHP form - button problem in IE
Pringle, Ron wrote:
Ron - thanks for checking! No, it's not fixed (wish it were!).
The button should line up with the left edge of the box
above. I realize it
doesn't actually create an error but I just don't understand
why it's not
over on the left as in FF. I'm still learning CSS so I guess
every problem
is an opportunity :) Would just love to know why and what I can do to
rectify.
edith
Edith-
It appears that this is a bug in IE [0]. Your input#reset is inheriting
the 100px left margin from the #enquiry form container.
To solve it, you will need to feed IE a -100px margin-left on your
#reset. I added the following to fix it locally:
* html #reset {
margin-left:-100px;
}
You may wish to place this in a conditional comment instead.
As an alternative to Ron's Fix, you may try
zoom:1; /*[1]*/
on
form
as IE7b2 still shows this bug
(did not re-re-reinstall IE6 yet, so I can't test it)
The negative margin does work on IE7 too, but not the star html hack. So
you have to put this into CC either way, since zoom does not validate.
Ingo
[1] http://www.satzansatz.de/cssd/onhavinglayout.html#hackmanagement
--
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] Boxes breaking out of formation (floats)
Rich wrote: Hi Guys Could someone take a look at this site please? (CSS Embedded) http://www.theoldcoachworks.org.uk/ I am informed that the end box is breaking out of formation in IE (AOL). Is this correct and if so is there a reason please? Many thanks. -- Rich Rich- Hmm. The main problem in IE is that there is invalid html code in your document. You need to enclose each photo caption within p tags. Currently you have: div class=in ltin tpin a href=http://www.theoldcoachworks.org.uk/rooms.html;img src=Old%20Coachworks_files/ocw-outside.jpg height=80 width=100OurbrRooms/a /div You need to have: div class=in ltin tpin a href=http://www.theoldcoachworks.org.uk/rooms.html;img src=Old%20Coachworks_files/ocw-outside.jpg height=80 width=100/apOurbrRooms/p /div If you want the captions to be linked as well, simply surround them with an a href tag identical to the one you're using on the image above it. This will fix the problem of the text running up next to the images on the right side, which is causing your box sizes to expand and some of them to drop to the next line. However... even after fixing this, one box drops. You simply don't have enough room in the container for each of those boxes. You should revisit the size of the container or margins/padding on the boxes. I fixed it by expanding the size of the overall container by 10 pixels. In the long run, since you've used ems for sizing the boxes, you will get some boxes dropping if the person viewing the site changes their text size settings. I'd recommend resetting the boxes in pixel units, and simply allowing the captions to expand in size within the boxes. This will end up fitting your needs better I think. You also need to validate your HTML and CSS: html: http://validator.w3.org/check?verbose=1uri=http://www.theoldcoachworks. org.uk/ Starting out with valid code will help you solve plenty of problems. Hope this helps you. Regards, Ron __ 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 Gallery's -( related question)
From: Christian Heilmann [EMAIL PROTECTED] Or you can save some energy, use a table for your thumbnails, and have lots of fun using CSS to, uh, style things :-) Well, the cool thing about floated thumbnails is that they fill up the space that is available without causing horizontal scrolling, which can be rather handy. Yes. I imagine a table can work depending on the presentation goals - floated elements in others. I like David Laasko's examples much better - though I still think a list is not necessary. There are lots of cool possiblities in using CSS to give the indivisual thumbs pizzazz, too. -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ 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] Boxes breaking out of formation (floats)
Richard Brown wrote: Hi Guys Could someone take a look at this site please? (CSS Embedded) http://www.theoldcoachworks.org.uk/ I am informed that the end box is breaking out of formation in IE (AOL). Is this correct and if so is there a reason please? Many thanks. Uncooperative little guys, arn't they? http://www.browsercam.com/public.aspx?proj_id=226076 Best, ~davidLaakso __ 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] HTML/PHP form - button problem in IE
Ron - big thank you! The problem is exactly as described in the links below and that gave me an idea ... Previously I had the input buttons outside a fieldset - I've now included the input buttons in the fieldset and the buttons now float correctly! Looks like it does have to do with the structure of form / fieldset / div / input which triggers the incorrect inheritance of the left-margin from a containing element and by positioning the button input element outside the fieldset it all got wonky. To explain: form/fieldset/div/input - all okay form/div/input - wonky in IE (left-margin inherited from form) many thanks for your help! edith (now I just got to write a PHP script to go with the form :) Pringle, Ron wrote: It appears that this is a bug in IE [0]. Your input#reset is inheriting the 100px left margin from the #enquiry form container. [0] after googling for IE css input bug, I came across this post: http://jennifergrucza.com/blog/archives/2004/08/31/weird-ie-bug-inputs-incor rectly-inherit-horizontal-margins-when-theyre-in-a-fieldset __ 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] HTML/PHP form - button problem in IE
Ingo - sorry, had solved issue locally and not posted onto server. To confirm problem: http://www.terranetwork.net/test/enquiry_form_060206.php solution: http://www.terranetwork.net/test/enquiry_form_060206_solved.php The grey border of the fieldset is only in the test code -my final design is differently styled. But the buttons now behave as desired! I'm actually not sure why I had the input buttons outside the fieldset in the first place. For now I'm happy to place the input buttons inside the fieldset - seems least worrying with regards to hacks / browsers but good to know the other options for future reference - you'll never know with IE when you need them :) many thanks to everybody! Edith Ingo Chao wrote: as IE7b2 still shows this bug __ 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] Can div be wider than viewport without horizontal scoll bar?
Is there a way to have a div wider than the viewport without causing the browser to display a horizontal scroll bar? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can div be wider than viewport without horizontal scoll bar?
On 06/02/06, James Eaton [EMAIL PROTECTED] wrote: Is there a way to have a div wider than the viewport without causing the browser to display a horizontal scroll bar? position: absolute; will take it out of the flow. Any flow, so a 200%-wide absolutely positioned div will take that space, but not physically. Only virtually, if you will. HTH -Rob. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can div be wider than viewport without horizontal scoll bar?
James Eaton wrote: Is there a way to have a div wider than the viewport without causing the browser to display a horizontal scroll bar? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ If you set the overflow of the div's container to hidden, that would allow the div to be as wide as you want without causing any scrollbars to display. __ 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] positioning image to bottom of div, top of footer
Roger Roelofs wrote: 1: Validate. Yeah, I should have been more diligent about this. 2: Remove the image from the html 3: Class or ID the container div around everything between .navbar and .footer 4: Style it with padding-left: 140px; background: #b4c2da url(/images/montage_top.png) bottom left no-repeat; margin-bottom: 0; I don't know why I did not think of that. It works great. I guess there is no way to put an image on the page like that but have any content that would appear above the image fill in the empty space as if the image were floated. __ 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] Using IE7b2 for testing
Hello everyone, I recently downloaded IE7 Beta 2 in order to see how the new design of my site is rendered using it and there are some serious issues, they are rendering bugs even and they do not manifest in IE6 or any other browser. So my question is, should I use IE7b2 as a reference browser and try and sort these issues with it in mind or is it wiser to wait worrying about it until IE7 is actually released when I can tell whether the issues are there to stay or no? Any advice welcome! Sincerely, Jakob Persson __ 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] Line-height in drop-down not adjustable
Howdy, I'm still getting my feet wet with CSS; the waters are deep! I've culled a horizontal navigation bar with a drop-down from a couple of places, and I can't seem to alter the line height in the drop-down, which is too high in IE. I'm testing in IE6, Gecko 1.7.12, and FireFox 1.5.0. Can someone suggest how to alter this? A second issue is that I've used the !important hack for display in IE, although I've paid attention today to the conditional comments suggestions. Can I jump in and out of these conditionals - as I might when intermixing PHP code with HTML- or is this used in some different manner? I've read http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp and tried to implement but didn't get the expected results: it seemed to invalidate the class where it was used. CSS is embedded in the page: http://home.capecod.net/~cape84/Start/navigate.html Thanks very much, David __ 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] WebKit and button/submit styling
On 5 Feb 2006, at 21:37, Jan Brasna wrote: Can anyone confirm this? It was posted on the WebKit blog a while back, so yes, it is accepting the CSS styling. - Geoffrey Sneddon __ 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] Line-height in drop-down not adjustable
At 02:06 PM 2/6/2006, [EMAIL PROTECTED] wrote: I can't seem to alter the line height in the drop-down, which is too high in IE. I believe this is the white-space bug. IE will render the white spaces between list items. One good technique for defeating the bug is to put the white space inside the list item tags, like so: ullistuff/li limore stuff/li liand so on/li/ul Note that the line break is INSIDE the tags, so there is no white space BETWEEN the tags. That's generally the easiest way to do it, although there are other methods, as well. A second issue is that I've used the !important hack for display in IE, although I've paid attention today to the conditional comments suggestions. Can I jump in and out of these conditionals - as I might when intermixing PHP code with HTML- or is this used in some different manner? You can't put conditional comments directly into a stylesheet at all. Typically, they are used to serve up a link to an independent IE-only stylesheet, like this: head link rel=stylesheet type=text/css href=regularstyles.css / !--[if lte IE 6] link rel=stylesheet type=text/css href=ieonlystyles.css / ![endif]-- /head Note that the conditional comments do not appear inside a style block, but are used directly in the document head to serve a link to a stylesheet. HTH, -Adam Kuehn __ 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] Line-height in drop-down not adjustable
I've culled a horizontal navigation bar with a drop-down from a couple
of places, and I can't seem to alter the line height in the drop-down,
which is too high in IE.
David,
You can use conditional CSS to adjust the position in IE. Add this CSS
in the head, below your styles and just before you start the javascript:
!--[if ie]
style type=text/css media=all
#navGrp { /* this is the
containing div for the horizontal nav group */
position: absolute;
top: 20%;
left: 13%;
width: auto;
}
/style
** Change the top to whatever percentage you want. As for mixing
important and conditional CSS, I am not exactly sure how to answer
that question. IE will just use all the styles that are defined in the
first block of CSS except for the ones that are overridden by
conditional CSS.
You can of course import an entirely different style sheet for IE. You
create a new style sheet with just the changed styles for IE or just add
the styles to the head - both ways work.
Hope this helps,
Kim
__
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] Line-height in drop-down not adjustable
I can't seem to alter the line height in the drop-down, which is too high in IE. I believe this is the white-space bug. IE will render the white spaces between list items. One good technique for defeating the bug is to put the white space inside the list item tags, like so: ullistuff/li limore stuff/li liand so on/li/ul Note that the line break is INSIDE the tags, so there is no white space BETWEEN the tags. That's generally the easiest way to do it, although there are other methods, as well. Thanks for the suggestion, Adam. As a test, I put the whole navigation group on a single line. It shrunk the line-height of the top-level navigation but left the sub-level untouched: http://home.capecod.net/~cape84/Start/navigate2.html Gives me some more stuff to think about, though. David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css scrollable tables..again
Hi paul, i've looked at your demo too. I found it useful for understanding the basis of css scrollable tables techniques, but, as i told, it is something lack. For example: i see an horizontal scrollbar, while i expected to see anyone (under Firefox). Morevover: your examples use fixed columns width, and this is a limit for my needs. Howerver, thanks for the hint :) In 2004 I came up with a solution to this problem: http://novitskisoftware.com/demos/fixedtableheads/fixedtableheads.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/
[css-d] Background Images Again
Apologies for my neophyte status. I now am having difficulty getting my background image to appear in a content div. http://www.zdsign.com/gwp/new2.html http://www.zdsign.com/gwp/new2.css Can anyone recommend the best CSS guide book? Thank you ever so much. __ 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] Using IE7b2 for testing
In short, it's a beta. In long: http://meyerweb.com/eric/thoughts/2006/02/03/charting-ie7b2/ Regards, Tyson -- Tyson Tate * Graphic Designer, CalPoly Library * Assistant Librarian Member, Mustang Band * Team Member, CalPoly Triathlon Team * Webmaster Active, Kappa Kappa Psi * Editor, Entropy Magazine * Freelance Graphic Designer On Feb 6, 2006, at 11:05 AM, Jakob Persson wrote: Hello everyone, I recently downloaded IE7 Beta 2 in order to see how the new design of my site is rendered using it and there are some serious issues, they are rendering bugs even and they do not manifest in IE6 or any other browser. So my question is, should I use IE7b2 as a reference browser and try and sort these issues with it in mind or is it wiser to wait worrying about it until IE7 is actually released when I can tell whether the issues are there to stay or no? Any advice welcome! Sincerely, Jakob Persson __ 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] Fluid design width problem
Hi all, I seem to be having a bit of a problem getting a div to fill the width of the screen. Here's the trouble page: http://www.rit.edu/upub/new/contact_us2.html Can anyone help me get the maincontent div to fill the remaining width of the screen? In order to get it to fill the width of the page, you have to leave a width off, and you can't float it. If you float it, it will expand to the width of its content -- and you have a bunch of blocks in there that want to be 100% of the window. They successfully become 100% of the window and push #maincontent down in the process. So, remove the width and the float and apply margin-left: 180px to #maincontent. Your new problem then becomes that the clearers you have within #maincontent are clearing the #sidebar too. This is because #sidebar and #maincontent are in the same block formatting context. You need to create a new block formatting context for #maincontent so that clearers within it pay no mind to #sidebar. The float you had on there before was establishing a new context, but it was unusable with a fluid layout. Luckily, you have several different ways: http://www.w3.org/TR/CSS21/visuren.html#q15 I applied display: table-cell to #maincontent in Firefox and it worked great. If this doesn't work in other browsers, you can try display: inline-block on them. Thanks for your reply, Zoe. It's always encouraging when someone compliments someone else's work. With this nagging clearer/float problem, I needed a boost of encouragement. That being said. I am still having problems and was wondering if anyone had any more ideas. I've tried your suggestions of display:table-cell and display:inline-block. The table-cell works mostly in Firefox (but then the maincontent div doesn't fill the whole screen at a large screen size), in IE the table cell has a space between the contacts (because of the nav on the left and clearer). With the inline-block method Firefox does what IE was doing with table-cell. All I can say is UGH! Add to this the fact that I need a sidebar on the right, and I just can't win because then even if I get the left side working correctly, the sidebar screws with those clearers. Is there some way to do this thing without putting clearers in my div.items? Anyway, I've reduced what I need down to a little diagram with just 6 block-level elements. Here's a link to the diagram image, including the requirements for each: http://www.rit.edu/upub/new/whatineed.gif So, to any kind soul that could help. Is the layout pictured in my diagram even possible to do with CSS and get it working on the major browsers? I just can't seem to get it to work right. The second div.item keeps displaying vertically below where either the sitenav of the sidebar ends. Again, thanks in advance for any more advice. -o- Jared Lyon RIT University Publications __ 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] Line-height in drop-down not adjustable
[EMAIL PROTECTED] wrote: I believe this is the white-space bug. IE will render the white spaces between list items. One good technique for defeating the bug is to put the white space inside the list item tags, like so: ullistuff/li limore stuff/li liand so on/li/ul Note that the line break is INSIDE the tags, so there is no white space BETWEEN the tags. That's generally the easiest way to do it, although there are other methods, as well. Thanks for the suggestion, Adam. As a test, I put the whole navigation group on a single line. It shrunk the line-height of the top-level navigation but left the sub-level untouched: http://home.capecod.net/~cape84/Start/navigate2.html Gives me some more stuff to think about, though. David Hi David, I've some more to think over: just IE-only adapting the padding of the li's, then the li li or single code line is not needed. See testpage over here http://home.tiscali.nl/developerscorner/css-discuss/test-navigate.html. I placed the IE-code in a conditional comment; seems all the other IE-hacks can possibly be dangerous in IE7... As long as there is no external style sheet needed, the CC can be placed directly in the head as well. Decisions, decisions! ;-) Greetings, francky ps: something in the DOCtype is not 100%, tells the html-validator. __ 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] Using IE7b2 for testing
is it wiser to wait worrying about it until IE7 is actually released when I can tell whether the issues are there to stay or no? See http://meyerweb.com/eric/thoughts/2006/02/03/charting-ie7b2/#comment-14367 Yes and no. There's no point doing any rework or expending much effort on a release that is so early and so broken in certain areas. But don't wait until the final release, keep an eye on the later, more complete and more dependable 'real' betas. Cecil Ward. __ 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] Using IE7b2 for testing
Cecil and Tyson: Thank you for your advice. Pretty much everything works perfectly apart from this detail, no hacks applied, so I'll see how things work once the RC versions start coming. Thanks, Jakob -Original Message- From: Cecil Ward [mailto:[EMAIL PROTECTED] Sent: Monday, February 06, 2006 11:37 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Using IE7b2 for testing is it wiser to wait worrying about it until IE7 is actually released when I can tell whether the issues are there to stay or no? See http://meyerweb.com/eric/thoughts/2006/02/03/charting-ie7b2/#comment-14367 Yes and no. There's no point doing any rework or expending much effort on a release that is so early and so broken in certain areas. But don't wait until the final release, keep an eye on the later, more complete and more dependable 'real' betas. Cecil Ward. __ 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] z-index? content menu hiding behind header
on a particular set of pages in my web site, i have a small, secondary tab-like menu in addition to the main navigation. on this set of pages, i'd like to move the main content area (which includes the sub-menu) up a little so that a big gap doesn't appear where the sub menu is taking up vertical space. the problem occurs in ff 1.5 (and opera 8.51) where the sub menu is hidden behind a blank area that the menu div is occupying. i tried putting position: relative; on the menu and sub menu to get z-index to work but i wasn't able to get the sub menu on top. i'm not even sure why it doesn't show up, as nothing in the menu area has a background that should be filling that area in. ie6 shows the menu where i'd like it to be. html and css validate except for a css line-height error that i don't understand. http://sltclan.com/images/cj/z-index-problem.html == other questions that are bugging me but not as bad as the menu: - is there any way to get ie to show my includes area 100% height like firefox? notice how the grey area only goes as far down as the content. and dang ie6's we-don't-do-alpha-transparency... - is there any way to get ff/ie to expand the whole red area to fill in the browser window (minus header/footer)? my ideal look is the vertical red bar to extend to the footer regardless of browser height so that i don't need that retarded red bar at the bottom to show an end to the section (since the right hand side has a background tint that cuts off). i tried putting height: 100% in the parents but i'm not getting something right as it never worked. - how can i move my background globe picture up 1-2em so that it clears the footer? it needs to stay on the body element(?), though. note: for anyone who wants to try a mouseover dom inspector, click the modi link on the menu and choose mouseover dom inspector or modiv2. very, very handy tools. thanks everyone. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Menu does not display in IE7beta2 // ALA Holy Grail fails in IE7b2
On 06/02/06, Pringle, Ron [EMAIL PROTECTED] wrote:
TR Valentine wrote:
Although still in early stages, I am stumped as to why the left-side
menu is completely missing from the display in IE7beta2 (WinXPsp2).
The menu displays fine in FF 1.5 and Opera 8.
page: http://plano.lib.il.us/testing/new/test3.html
Any one run into this problem or have an answer?
I see you're using the new holy grail layout from ALA.
Well, trying to! I've modified it to use ems instead of pixels for the
left column so the menu can grow with change of text size -- maybe
that modification creates an unsolvable problem.
You forgot to include the fix for IE:
* html #menu {
left: 150px; /* value equal to the right col width */
}
According to http://www.alistapart.com/articles/holygrail that is
supposed to be for IE6. I tried adding the fix, but it did not fix the
problem.
I went to http://www.alistapart.com/d/holygrail/example_1.html with
IE7b2 and found the left column is also missing. So at least there is
consistency in the problem.
I know there will be other problems (especially in IE sigh), but I'm
trying to win one battle at a time!
:-)
--
T. R. Valentine
Use a decent browser: Safari, Firefox, Mozilla, Opera
(Avoid IE like the plague it is)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
cj wrote:
[...]
html and css validate except for a css line-height error that i don't
understand.
http://sltclan.com/images/cj/z-index-problem.html
==
other questions that are bugging me but not as bad as the menu:
- [...]
- how can i move my background globe picture up 1-2em so that it
clears the footer? it needs to stay on the body element(?), though.
[...]
Hi cj,
Two out of the bunch:
- The css-error means that you didn't give a unit for the amount of the
line-height: Without units some browsers don't know what to measure: px
or em or miles. ;-)
- body {background: transparent url(graphics/bg-service-1.png) no-repeat
fixed right 80%; }
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] vertical stretch .. just can't get it
yes, I have tried both the faux columns approach that you use and the large padding solution.. can't get either to work very well. maybe you can correct me if I am wrong but the faux column approach sets a body background because the body tag will cover the whole page and therefore extend the height of the column. in my particular case (http://www.allanalog.com/aaw/) the column I am trying to stretch is the center column in middle section of my page (with About Us at the top) - so ideally I would like to have a wrapper only around column 2 and 3 (first column is generated by a CMS system and it is complex to wrap that one as well) where I thought I could (as you do with body) put repeating background image in the wrapper DIV... but, as I am guessing.. it is not like adding it to body; as it does not repeat the same anywhere else. I think bottom line is that CSS is not really at the stage where it can be used for page layout for complex layouts (not that mine is that complex - but still haven't seen a solution that can work here). seemed like a nice idea though.. maybe in a few years. Peter Lindstrom All Analog - Technical Design Consulting Ottawa, ON Voice: 613-612-1419 Email: [EMAIL PROTECTED] Web:www.allanalog.com ::-Original Message- ::From: Ricky Zhou [mailto:[EMAIL PROTECTED] ::Sent: Monday, February 06, 2006 9:14 PM ::To: [EMAIL PROTECTED] ::Subject: Re: [css-d] vertical stretch .. just can't get it :: ::On 2/5/06, Peter Lindstrom [EMAIL PROTECTED] wrote: :: I have managed to use this method to get what I was looking for.. but I ::had :: sort of been hoping there was a real way of stretching columns without :: that technique since there are limitations when doing this.. for example ::- :: the side column must be fixed width (which isn't really that big a deal ::in :: most cases).. ::The method described is used to get the container to stretch fully ::(the border is a completely different issue, which I solve with faux ::columns). If you want to avoid this, I think some people use a huge ::paddings/negative margins to stretch the columns to theh container ::(padding-bottom: 32767px; margin-bottom: -32767px;). Personally, I ::think that the image is a more flexible/clean solution, though. :: ::Hope this helps, ::Ricky __ 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] vertical stretch .. just can't get it
On 07/02/06, Peter Lindstrom [EMAIL PROTECTED] wrote:
in my particular case (http://www.allanalog.com/aaw/) the column I am
trying
to stretch is the center column in middle section of my page (with About
Us
at the top) - so ideally I would like to have a wrapper only around column
2
and 3 (first column is generated by a CMS system and it is complex to wrap
that one as well) where I thought I could (as you do with body) put
repeating background image in the wrapper DIV... but, as I am guessing..
it
is not like adding it to body; as it does not repeat the same anywhere
else.
There is a way to make a wrapper extend to the height of the body element. I
believe the trick is to set both the html and body elements to have a height
of 100%, and give your wrapper a height of 100% as well (although I've often
used min-height, which I find makes 'good' browsers play nicer and gets
treated as height by IE).
So you end up with something along the lines of:
html, body { min-height: 100% }
#wrapper { min-height: 100% }
Then it should just be a matter of what you put into the wrapper and what
you exclude.
Hope it helps,
Seona.
__
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] vertical stretch .. just can't get it
Peter: Peter Lindstrom wrote: yes, I have tried both the faux columns approach that you use and the large padding solution.. can't get either to work very well. maybe you can correct me if I am wrong but the faux column approach sets a body background because the body tag will cover the whole page and therefore extend the height of the column. in my particular case (http://www.allanalog.com/aaw/) the column I am trying to stretch is the center column in middle section of my page (with About Us at the top) - so ideally I would like to have a wrapper only around column 2 and 3 (first column is generated by a CMS system and it is complex to wrap that one as well) where I thought I could (as you do with body) put repeating background image in the wrapper DIV... but, as I am guessing.. it is not like adding it to body; as it does not repeat the same anywhere else. ?? - It does repeat the same everywhere. Simply enclose the middle portion of your page in a wrapper division and then add the faux-column to that. This is exactly what I am trying to do on this page, and have managed to do as well. http://cfl.in/ Note the sidebar, and the main body - two column solution, with a faux-column. You might have to do a google for a Sticky footer if you want a footer that stays at the bottom of the browser viewport if the content doesn't fill it. These two solutions are *not* exclusive to one another. I think bottom line is that CSS is not really at the stage where it can be used for page layout for complex layouts (not that mine is that complex - but still haven't seen a solution that can work here). Well - I don't know - CSS does have it's quirks. However, to say that it is not at a stage where it can be used for complex layouts...that is a different story, IMHO. This article might be of interest to you: http://alistapart.com/articles/outsidethegrid Oh - and if you really get stuck, why don't you post a mockup of what you're trying to achieve; one of the gurus on this site will *definitely* be able to help you. seemed like a nice idea though.. maybe in a few years. Well - I'm going to start using it right now, if it's all the same to you. ;-). Cheers, Rahul. -- . . . . . . . . . . . . . . . . . . . . . . . . Rahul Gonsalves Make PNG, not War. . . . . . . . . . . . . . . . . . . . . . . . . __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
francky wrote:
cj wrote:
[...]
html and css validate except for a css line-height error that i don't
understand.
http://sltclan.com/images/cj/z-index-problem.html
==
other questions that are bugging me but not as bad as the menu:
- [...]
- how can i move my background globe picture up 1-2em so that it
clears the footer? it needs to stay on the body element(?), though.
[...]
Hi cj,
Two out of the bunch:
- The css-error means that you didn't give a unit for the amount of the
line-height: Without units some browsers don't know what to measure: px
or em or miles. ;-)
Leading (line-height) is expressed as a raw number. There is no unit of
measure(px, em, %) used with it. The validator is just being a little
over-zealous, and complaining about a parse error open string.
line-height: 2; is correct.
To make the *validator* happy, close the string, like so:
line-height: 2.0;
~davidLaakso
- body {background: transparent url(graphics/bg-service-1.png) no-repeat
fixed right 80%; }
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-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 Images Again
Original Message: - From: Tyson Tate [EMAIL PROTECTED] Date: Mon, 6 Feb 2006 14:05:40 -0800 To: [EMAIL PROTECTED], css-d@lists.css-discuss.org Subject: Re: [css-d] Background Images Again Please validate your XHTML and CSS before posting to the list. Many problems posted to this list can be solved by simply validating. That said, the CSS validator[1] points directly to your problem: background: url(images/bg.gif) repeat x; Should be: background: url(images/bg.gif) repeat-x; I apologize. I had validated -- I missed it. Thank you Regards, Tyson Tate [1] http://jigsaw.w3.org/css-validator/ -- Tyson Tate * Graphic Designer, CalPoly Library * Assistant Librarian Member, Mustang Band * Team Member, CalPoly Triathlon Team * Webmaster Active, Kappa Kappa Psi * Editor, Entropy Magazine * Freelance Graphic Designer On Feb 6, 2006, at 1:12 PM, Zellie D. McClelland wrote: Apologies for my neophyte status. I now am having difficulty getting my background image to appear in a content div. http://www.zdsign.com/gwp/new2.html http://www.zdsign.com/gwp/new2.css Can anyone recommend the best CSS guide book? Thank you ever so much. __ 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/ mail2web - Check your email from the web at http://mail2web.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] IE6 Double-Clearing Problem
Argh! I've been unable to figure this out. http://comptonpappas.ryancannon.com/paintings HTML: div aimg //a -- Ryan Cannon Interactive Developer MSI Student, School of Information University of Michigan http://RyanCannon.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] vertical stretch .. just can't get it
I think bottom line is that CSS is not really at the stage where it can be used for page layout for complex layouts (not that mine is that complex - but still haven't seen a solution that can work here). You might be right, and I must say that by standing your ground and using a hybrid CSS/Table layout with properly named IDs and classes (my favourite is div class=block block-block id=block-block-1, I like Ian Dury) you have created a layout that is sure to give me hours of fun exploring the site: http://onlinetools.org/tests/shot.png That whole CSS Malarkey seems to be the same swindlle as being a superstar. The other day I spent hours making my hair cool with a lot of spray, taking some drugs and wearing my leather jacket and shades. I still had to pay entrance to the club and was neither approached by sponsors or jumped by love crazed groupies. Clearly it is not worth the effort to learn an instrument, take singing lessons or write some lyrics. As all users are idiots who don't know what is good for them the only good web design is creating GIFs of all the pages and covering them with image maps. Good authoring tools do that automatically for you. True, there is the search engine problem but I heard adding lots of keywords in meta tags, titles and the file name works around that little problem. * may contain sarcasm to avoid expletives. No animals of were hurt in the making of this email __ 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] vertical stretch .. just can't get it
On 2/6/06, Peter Lindstrom [EMAIL PROTECTED] wrote: I think bottom line is that CSS is not really at the stage where it can be used for page layout for complex layouts (not that mine is that complex - but still haven't seen a solution that can work here). seemed like a nice idea though.. maybe in a few years. Let's not go making broad statements just because we can't get a bug ironed out. Bottom line is you need to get your background to extend the height of the page. You can keep trying or give up, but at the end of the day thousands of developers have already implemented complex layouts in CSS, so I can assure you that it can be done. I'm pretty sure someone already solved your problem, but definitely let us know if you are still stuck. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.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] vertical stretch .. just can't get it
well YES.. certainly some frustration in my post - took me a weekend to learn PHP and another one to learn JS.. but 2 years and still table or css layouts drive me nuts. but my frustration aside; you must admit that the idea of using CSS for layout is a pretty cludgey art with present standards or lack thereof. Everything I have seen to try to make layouts such as faux columns or massively large paddings are simply tricks to get around the inherent lack of layout capability in CSS - and, as tricks come issues. why can't I just have: div header - height fixed div col1 - fixed width/div div col2 - fixed width/div div col3 - width to fill page/div /div div body - height to fill page or content div col1 - fixed width/div div col2 - width to fill page/div /div div footer - height fixed div col1 - fixed width/div div col2 - spacer width to fill page/div div col3 - fixed width/div /div and define my width, background colors, images etc per div as I see fit. pretty sure it doesn't really need to be this difficult. And my point about a few years off was in reference to improvements in the use of CSS for layouts that are coming to stds in the next year or so.. but likely not to browsers for a couple yrs after that. Peter... ::-Original Message- ::From: Christian Montoya [mailto:[EMAIL PROTECTED] ::Sent: Tuesday, February 07, 2006 1:18 AM ::To: [EMAIL PROTECTED] ::Cc: css-d@lists.css-discuss.org ::Subject: Re: [css-d] vertical stretch .. just can't get it :: ::On 2/6/06, Peter Lindstrom [EMAIL PROTECTED] wrote: :: I think bottom line is that CSS is not really at the stage where it can ::be :: used for page layout for complex layouts (not that mine is that complex ::- :: but still haven't seen a solution that can work here). :: :: seemed like a nice idea though.. maybe in a few years. :: ::Let's not go making broad statements just because we can't get a bug ::ironed out. Bottom line is you need to get your background to extend ::the height of the page. You can keep trying or give up, but at the end ::of the day thousands of developers have already implemented complex ::layouts in CSS, so I can assure you that it can be done. I'm pretty ::sure someone already solved your problem, but definitely let us know ::if you are still stuck. :: ::-- ::-- ::Christian Montoya ::christianmontoya.com ... rdpdesign.com ... cssliquid.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] vertical stretch .. just can't get it
On Feb 6, 2006, at 10:37 PM, Peter Lindstrom wrote: why can't I just have: div header - height fixed div col1 - fixed width/div div col2 - fixed width/div div col3 - width to fill page/div /div That would be nice, but then again, everyone and their dog would be web designers... no thanks. Have you surfed these sites: http://www.cssbeauty.com/ http://cssdrive.com/ http://www.nv30.com/mt/blogomania/index.php http://cssvault.com/ http://www.stylegala.com/ http://www.unmatchedstyle.com/ http://www.weeklystandards.com/ http://www.webstandardsawards.com/ http://www.cssreboot.com/ http://txpmagazine.kbbu.de/all_sites/ http://cssdesign.se/ __ 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] vertical stretch .. just can't get it
well YES.. certainly some frustration in my post - took me a weekend to learn PHP and another one to learn JS.. but 2 years and still table or css layouts drive me nuts. If you learnt PHP and JS in one weekend each then you are either a certified genius or you learnt some syntax and think you mastered the language and all that comes with it. Don't believe the hype of Teach yourself quantum physics and changing the time continuum in 24 hours books. That superficial knowledge will bite you where it hurts the first time someone with malicious intent checks the safety of PHP scripts developed on syntax alone. It is the same problem here: half of CSS is realising what it is - describing what the presentation should be like, not fixing it to make it impossible to change. but my frustration aside; you must admit that the idea of using CSS for layout is a pretty cludgey art with present standards or lack thereof. Everything I have seen to try to make layouts such as faux columns or massively large paddings are simply tricks to get around the inherent lack of layout capability in CSS - and, as tricks come issues. Maybe it is time to rethink layout for the web? We tried forcing print design best practices onto the web and failed. Both with tables and CSS as your example shows. Maybe it is time to open up a bit and let the browser deal with display and layout instead of enforcing it. What is the height you want to fill up? A web document is either a fixed height or it is as high as its content. If you want to fill an arbitary height like the browser window then you need to hack and expect odd behaviour. CSS is not to blame there, the design expecting this behaviour is. __ 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] Relative positioning/collapsing margins (?) and 100% height
Hello all, I'm seeking help on two problems: positioning of material within a wrapper and achieving 100% height in pages with short content. The following pages (with embedded css) differ only in the presence of a sub-navigation element. In both, I'm having problems in positioning the content to start 10-20 px below the navigation div. http://temporarius.massey.ac.nz/menu1.htm http://temporarius.massey.ac.nz/menu2.htm In Firefox and Opera, the content starts hard up against the bottom of the navigation div. It seems that the only way to achieve control of where the content starts is to place a 60-80px top margin in the content div - but this doesn't make sense to me as the top of the content div seems to be being measured from the bottom of the logo div, not the navigation div. In IE, things seem better - the top of the content div (top margin = red) appears where I expect it to be relative to the bottom of the navigation div in menu2.htm, but not in menu1.htm. I don't understand what's going on and consequently cannot work out the fix needed. Any guidance please? The second issue is how to I make the page fill the vertical space of the screen when the amount of material in the content div is short. Thanks in advance, Bruce __ 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/
