Re: [css-d] Min-Height
On 2/24/06, Paul Novitski [EMAIL PROTECTED] wrote:
At 08:00 AM 2/24/2006, Chris Ovenden wrote:
This area is slightly problematic, because min-height is not yet
supported by IE7 (though we're promised it for the proper release). If
we assume it will be included, the neatest solution that works in all
browsers is:
#element { min-height:100px }
* html #element { height:100px }
Some people are against CSS hacks, but this is the only solution I
know of that is valid CSS and unlikely to have any adverse effects in
the future. [AFAIK (I can't test it here), the /*\*/ hack Stu uses is
not necessary, and in fact will make it break in IE5/mac.]
Internet Explorer conditional comments are validated by the W3C
engine and allow one to differentiate IE from other browsers and to
differentiate among IE versions.
Well, yes, but that isn't a CSS solution, it's a markup solution. Many
developers are either unable or unwillng to change the markup in this
way. It also has maintenance implications.
Chris
__
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] Opera IE bugs?
On Feb 23, 2006, at 9:36 PM, Andrew Gregory wrote: On Fri, 24 Feb 2006 10:02:57 +0800, Arlen Walker [EMAIL PROTECTED] wrote: http://uscf.arachnidae.com/tla/tlaworkcsg2.html 2) Note the corny buttons across the top for the styleswitching. Now load it in IE6/Win2K and tell me what happened to my buttons? I mean they ain't much, I'll grant you, but is that any reason to throw them away completely? They aren't thrown away completely, they just occupy the full width. Maybe it's the width:100% on .switcher dd a:link? OK, this was strange. There was a confluence of interesting things going on. I think I was victimised by an unexpired cached css file in the first place, because what I saw didn't relate to what Andrew saw. After scratching my head for a while, I walked away to let it simmer, and when I returned (after rebooting the windows test machine) what I saw related more to what Andrew saw. It was still wrong, but now wrong in a way I could almost understand and fix. It was more than the width rule, but that was part of it. Now I'm left with three more puzzles, one in IE and 2 in Opera. 1) In IE, the print forces a page break before the #sections div begins, distributing the earlier material along the page vertically in what appears to be an attempt to use the whole page. All other browsers don't put nearly as much whitespace on the first page. Does IE believe in exercising heroic measures to avoid page breaks in a div? 2) In Opera, the green background returned, but only in the last DL (class generalinfo). I tried assigning a background color to that block in both the screen and print CSS files, but to no avail. 3) Also in Opera, the background of dd a:link extends outside of dd. There is a border around dd but not around dd a:link and there's padding left and right on dd a:link but no width specifications involved. If it matters, the purpose of the page is to produce a page formatted both for viewing and printing from information collected in a form in another part of the site. Creating a reasonably good-looking printed page is a requirement. Have Fun, Arlen -- In God we trust, all others must supply data __ 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] Fixing Positioning Issues
Dear All: I have a mock-up here: http://www.cfl.in/dev/9th%20Feb.jpg Page: http://www.cfl.in/dev/CFL%202.0/ I'm trying to work on converting to HTML/CSS, and have run into a couple of problems. 1. The horizontal navigation (listomatic-sourced), when it expands, pushes the next div down. How could I solve this? Ideally I don't want it to outgrow the grey-background at all. 2. As above, when the h-nav expands, it outgrows the background too soon. How can I ensure that this doesn't happen? 3. With white text on a whitish background, the h1 becomes invisible after about four-levels. I have read that 3 zoom-levels either way is what one should strive to accommodate. Is this a good strategy? Please note that this is a page in development, so it will look quite different from the mock-up. Thanks, 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] Opera IE bugs?
On Feb 25, 2006, at 10:48 AM, Arlen Walker wrote: 1) In IE, the print forces a page break before the #sections div begins, distributing the earlier material along the page vertically in what appears to be an attempt to use the whole page. All other browsers don't put nearly as much whitespace on the first page. Does IE believe in exercising heroic measures to avoid page breaks in a div? Never mind this one. In the true spirit of Murphy, I discovered this one less than 30 seconds after hitting send. My bad. The other two problems are still there, though. Have Fun, Arlen -- In God we trust, all others must supply data __ 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] absolute positioning within a DIV
I'm in the process of putting together a CSS image map (with help from http://www.alistapart.com/articles/imagemap), and I'm clearly doing something wrong. I haven't yet gotten to the point of placing images onto the links (or even creating all of the images), but I've got text placeholders. The work-in-progress page is here: http://www.fileh.com/kungfujoe/WebDVD/index.html (with CSS here: http://www.fileh.com/kungfujoe/WebDVD/WebDVD.css - the last line is for a stupid free hit counter that fileh.com automatically inserts into my HTML file) My understanding from the CSS spec is that when it comes to absolutely positioned elements: The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Isn't a DIV a containing block? More specifically, how do I make a DIV into a containing block? I've absolutely positioned the a elements, just as the example on A List Apart does, but they're being positioned with respect to the upper-left corner of the portal window, and not of the parent DIV. Unfortunately, the example given on A List Apart forces its menu to the upper-left corner of the portal window (a convenient fix for my problem), but I really want to have mine centered. I'm not quite sure what I'm doing wrong here. Any help would be appreciated. Thanks in advance Erik Harrishttp://www.eHarrisHome.com -AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172- Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.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] absolute positioning within a DIV
At 05:41 PM 2/25/2006, Erik Harris wrote: The work-in-progress page is here: http://www.fileh.com/kungfujoe/WebDVD/index.html [...] specify offsets with respect to the box's containing block. Isn't a DIV a containing block? More specifically, how do I make a DIV into a containing block? I've absolutely positioned the a elements, just as the example on A List Apart does, but they're being positioned with respect to the Never mind.. I managed to fix it with the div-in-a-div method (I forgot about that, though I'd used it before). I still don't quite understand why a relatively-positioned div can't be a containing element, but I guess it's a design choice made by the W3C folks... Erik Harrishttp://www.eHarrisHome.com -AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172- Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.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] centering an absolutely positioned DIV
Okay, sorry to send three messages for the same page... I thought I had solved my problem by double-div'ing, but now I can't seem to get the container div to center horizontally. Could someone glance at this page and let me know how I can center the menu (horizontally) in the browser window? It seems to place it in an apparently-random place, just left of center in Firefox, and way the heck over to the right in IE. The work-in-progress page is here: http://www.fileh.com/kungfujoe/WebDVD/index.html (with CSS here: http://www.fileh.com/kungfujoe/WebDVD/WebDVD.css ) Any help would be appreciated. Thanks in advance, Erik Harrishttp://www.eHarrisHome.com -AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172- Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.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] centering an absolutely positioned DIV
Erik Harris wrote:
I thought I had solved my problem by double-div'ing, but now I can't
seem to get the container div to center horizontally.
http://www.fileh.com/kungfujoe/WebDVD/index.html
Try adding...
#MenuContainer {width: 655px;}
...which should have the desired effect on browsers that use 'margin:
auto' for centering. The other browsers (older IE-versions) will need...
body {text-align: center;}
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering an absolutely positioned DIV
Erik Harris wrote:
Okay, sorry to send three messages for the same page... I
thought I had solved my problem by double-div'ing, but now I
can't seem to get the container div to center horizontally.
Could someone glance at this page and let me know how I can
center the menu (horizontally) in the browser window? It
seems to place it in an apparently-random place, just left of
center in Firefox, and way the heck over to the right in IE.
A div takes the full available width, unless you set the width,
or the margins.
You set the margins to auto, so the width of the div is as wide
as it wants to be.
Give it a width, and it will center. (I reckon a width of 655px
would be suitable ;-) )
To a question in your other mail:
Yes, a div with position:relative *is* a containing block, there
is no need to have two nested divs for that.
General advice: if you find stuff like this not doing what you
want, add *{border:1px solid red;} to your stylesheet
(temporarily of course), so you can see the borders of the
elements. You would instantly have seen the width of
#MainContainer :-)
On your page, you can take off the #MainContainer, and in the
stylesheet, take off the styles for it too, and change the
position: absolute; top: 0; left: 0; on #MainMenu to position:
relative; margin-left: auto; margin-right: auto;.
BTW, if you have an option of hosting examples like this
somewhere else, it would be good. I now had to wait for a blocked
popup, and then wait very long (on a 3MB DSL line) for each image
to load.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can a DIV be targetted like an iFrame...by name?
Not in CSS, I don't believe it can. Although I didn't know you could target an iFrame by name either, so I could be wrong. Out of interest, what is the syntax used to target iFrames by name in CSS? You can target a div (or iframe) via Javascript, and change the attributes of the div or iframe, but it's not done purely with CSS. This is typically done to change the visibility of the div, or similar treatments. You'll see this in places that have 3 tabs of product into. The common approach to that is targeted divs. But anything going down that road is off-topic here, and should be researched in the appropriate place. Now, that does bring up an interesting questionWhat are the effects of CSS on content contained within iframes?... Will the stylesheet of the main page effect the content of an iframe?... That is an interesting question -- Karl __ 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] centering an absolutely positioned DIV
At 08:01 PM 2/25/2006, Els wrote: To a question in your other mail: Yes, a div with position:relative *is* a containing block, there is no need to have two nested divs for that. On your page, you can take off the #MainContainer, and in the stylesheet, take off the styles for it too, and change the position: absolute; top: 0; left: 0; on #MainMenu to position: relative; margin-left: auto; margin-right: auto;. Strange. I was positive that this is _exactly_ what I had in there before, and it caused the buttons to appear relative to the portal window instead of the DIV. I must've had a typo I didn't catch, because it works when I do it this way now. Thanks for the help! Wonder what my typo was... Whatever it was, it prompted an hour or more of troubleshooting before I sent my first email. :-( BTW, if you have an option of hosting examples like this somewhere else, it would be good. I now had to wait for a blocked popup, and then wait very long (on a 3MB DSL line) for each image to load. I didn't even notice that. Firefox opens this page up instantly and doesn't block any popups. I tried it on IE, and it took forever to load. I went back to Firefox and realized that it was because I hadn't told NoScript to allow hitflow.com - when I did that, Firefox took awhile to load the page too, and blocked a popup. I guess I'll rework this page. I'm using fileh.com because they give me 2.5GB of space, and I've got 200+MB of videos to incorporate into this. It'll be easy to host the HTML files themselves on my ISP's 10MB space and link over to fileh.com for the AVI files. The script seems to be kicked off by the lines that the site auto-inserts into any HTML files uploaded, and doesn't affect other file types. Thanks for pointing this out! I'd have never noticed it if someone who set their browser up to allow all of that crap didn't point it out for me, since I do my cross-browser testing locally. ;-) Erik Harrishttp://www.eHarrisHome.com -AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172- Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.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] Displaying two a href's on two lines
I am getting very fustrated about trying to figure out how to get A picture Description a blak line General Resume for Angus MacKinnon. I believe it is probably simple, however, at this late hour it is not coming. Help please. Thank you. HTML: http://www.infoforce-services.com/personal/index.php CSS: http://www.infoforce-services.com/css/layout.css Angus MacKinnon MacKinnon Crest Saying Latin - Audentes Fortuna Juvat English - Fortune Assists The Daring Web page http://www.infoforce-services.com Choroideremia Research Foundation Inc. 2nd Vice president http://www.choroideremia.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] Border question
Hi Debbie: Iorhael wrote: I am drafting up a new layout here and was wondering if there would be any way to tweek the menu links to seamlessly extend the dashed line (a left border on the content div) up to right under the banner. Unfortunately, as they are two different sets of containers, you would not be able to do that. However, if you change your markup slightly, wrap a border div around the blue area, and assign that a background-image, that would work quite well. So: div id=border div id=menu [--Snip!--] /div!--End Menu Div-- div id=content [--Snip!--] /div!--End Content Div-- /div!--End Border Div-- In your CSS, you would have to add a background-image to #border, which was set to repeat-y. You could use a small image file, with your current width (776px?), and about 10px tall, to duplicate the border effect. This approach is essentially the same as A List Aparts faux columns approach. You can read more on that here [1]. Thanks! Debbie www.drkdesign.com/chloejoseph/ Regards, Rahul [1] http://alistapart.com/articles/fauxcolumns/ -- . . . . . . . . . . . . . . . . . . . . . . . . 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] update on horzontal menu failing for Safari
Hi All On 24 Feb 2006, at 15:59, [EMAIL PROTECTED] wrote: it fixed the menu problem. I thought that using the 2 forward slashes was a proper way to comment CSS. I have a picture of what is happening at: http://www.cregy.co.uk/downloads/Picture9.jpg Can anybody help Bob please? 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/
