Re: [css-d] min-width, width, max-width
On Oct 18, 2012, at 13:06 , mem wrote:
Hello all,
I'm trying to make a certain video responsive.
width: 100% or max-width:100% and height: auto; will do.
Now, the problem is, in order to maintain the aspect ratio, if the screen is
to wide, the height is so height that we will have a scroll, hence, not being
able to see the video at all.
Is there a way that you may know about, so that we can archive something like
this
video {
max-width: 100%;
height: auto;
}
BUT avoiding the scroll bar to appear, without using overflow:hidden; ?
this doesn't seem to be possible, for logical reasons.
If we wish to keep the aspect ratio, then, if the width augments, the height
augments…
We may try to force it, just to see where we can get, and make something like:
width: 100% height: 100% …
but I've test this earlier and width didn't get the totality of the containers
width.
I believe this is undoable…
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width, width, max-width
Le 18 oct. 2012 à 21:06, mem talofo.l...@gmail.com a écrit :
Is there a way that you may know about, so that we can archive something like
this
video {
max-width: 100%;
height: auto;
}
BUT avoiding the scroll bar to appear, without using overflow:hidden; ?
i don't really understand. Are you constraining the height somewhere else ?
This works perfectly fine in my test:
div { border: 2px solid red; max-width: 85%; }
video { max-width: 100%; height: auto; width: 100%; }
The video resizes and keeps its aspect ratio (no height is specified elsewhere
- not using the width and height attribute on the html element)
divvideo controls=controls
source src=video.mp4 type=video/mp4
alt text
/video/div
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width, width, max-width
i don't really understand. Are you constraining the height somewhere else ?
I believe not. But perhaps that is what I should do ?
This works perfectly fine in my test:
div { border: 2px solid red; max-width: 85%; }
video { max-width: 100%; height: auto; width: 100%; }
The video resizes and keeps its aspect ratio (no height is specified
elsewhere - not using the width and height attribute on the html element)
divvideo controls=controls
source src=video.mp4 type=video/mp4
alt text
/video/div
On top of the video we have content.
At the bottom (the footer) we have content.
The video should stay on the middle of that.
The video should always be be, totally visible.
Here's a test case:
!DOCTYPE html
html lang=en
head
meta charset=utf-8
titleHello User!/title
style type=text/css
div#video-border { border: 2px solid red; }
video { max-width: 100%; height: auto; width: 100%; }
/style
/head
body
div
div
Im the navigation!! Wupii
/div
div
pI'm more text, more things/p
pI'm more text, more things/p
/div
div id=video-border
video controls=controls
source src=http://video-js.zencoder.com/oceans-clip.webm;
type=video/webm /
alt text
/video
/div
div id=footerpI'm the footer hello/ppI'm the footer yeah
again/p/div
/body
/html
Philippe
--
Thanks for your reply, for such an ignorant question.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width, width, max-width
I had a problem with the video aspect ratio that make me doubt of css and html. The problem however was within the aspect ratio and NOT html and css. To cut the story short: height: auto; max-width: 100%; do the job perfectly. I will pushing myself severely. Regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width, width, max-width
Are yo using iframe or obj tag?
See it works Ok here w/o those
http://webdesignerwall.com/demo/elastic-videos/html5-video.html
Check this out, it may help to solve your problem
http://webdesignerwall.com/tutorials/css-elastic-videos
Hakan Kirkan
IT Manager
http://miamirealestateinc.com
Miami / FL
On Thu, Oct 18, 2012 at 8:06 AM, mem talofo.l...@gmail.com wrote:
Hello all,
I'm trying to make a certain video responsive.
width: 100% or max-width:100% and height: auto; will do.
Now, the problem is, in order to maintain the aspect ratio, if the screen
is to wide, the height is so height that we will have a scroll, hence, not
being able to see the video at all.
Is there a way that you may know about, so that we can archive something
like this
video {
max-width: 100%;
height: auto;
}
BUT avoiding the scroll bar to appear, without using overflow:hidden; ?
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width and min-height ignored on resizable elements
On Apr 27, 2011, at 7:52 PM, Jarek Foksa wrote:
div id=box/div
#box {
resize: both;
overflow: auto;
background: #ccc;
width: 500px;
height: 500px;
min-width: 100px;
min-height: 100px;
}
It turns out that specified min-height and min-width values are
completely ignored and instead min-width is assumed to be the same as
width and min-height is assumed to be the same as height.
Obviously this makes no sense.
Does it not ? Per the spec, width/height overrides min-width/min-height unless
the latter is larger.
But then you specify the resize property. I'm not sure what should happen in
this case. Gecko 2.0+ allow resizing downwards, until the minimum size is
reached. Webkit doesn't allow resizing.
If you replace width/height with max-width/max-height, then WebKit allows
vertical resizing until the max-height is reached.
Do you know any simple workaround that
would allow me to specify minimal width and height of resizable
element?
What is your actual use case ? And what is the content of your your element ?
Floating the element will give slightly different results than the above.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width and min-height ignored on resizable elements
But then you specify the resize property. I'm not sure what should happen in this case. Gecko 2.0+ allow resizing downwards, until the minimum size is reached. Webkit doesn't allow resizing. I have just tried Firefox 4 and indeed it works as expected there. So this seems to be Webkit-specific issue. Here is my use case: http://pics.kiwi-themes.com/client/index.xhtml As you can see it's impossible to make the About window any smaller. The only solution I can think of is to track cursor position with JavaScript and resize the window when mousedown and mousemove events fire. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Width Question
On 12/08/2009, at 6:59 AM, Christopher Barth wrote: Under what circumstances might a container that has min-width set not grow beyond the size of min-width? I'm not sure exactly what you mean by this question. Do you mean - what are some possible reasons as to why an element that you believe should expand beyond it's min-width is not expanding? Or is there a more subtle question there that I'm not seeing? If you are in a situation where a box that you believe should be able to expand is not expanding I'd recommend providing a link for us to look at. Possibilities off the top of my head... - invalid HTML (always the first test) - invalid CSS (always the second test) - the width of the element's content is narrower than the min-width! - the browser doesn't support min-width (and perhaps has a width set in a separate stylesheet) - absolute or fixed positioned content (outside of document flow) - floated content (not really a width issue but if floats aren't contained then it may not be apparent what the width of an element is) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Width Question
Under what circumstances might a container that has min-width set not grow beyond the size of min-width? If the container doesn't need to grow beyond min-width. To put that answer in the context of your previous question, browsers would rather expand down than out. If an item can wrap, it will, and then the element width doesn't need to grow. So there are two ways around this: You can use nbsp; between your words to force the words to not wrap. (Non-Breaking SPace means that a line can't break at it. I forget, but I think some browsers may not actually implement this correctly) Or you can make your min-width big enough so your longest list-item doesn't wrap (300px will do, unless someone decides your text is too small, which is pretty likely). ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width: reasonable value?
John wrote: in a effort to make sure that my top banner is endless, no matter how big the monitor, I've set a min-width value of 4000 pixels. is that considered bad coding? what do other people do? thanks! John Is there a reason that width: 100% wouldn't work? It seems like a better choice than the min-width option. (somebody correct me if I'm wrong!) Will __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width: reasonable value?
John wrote: in a effort to make sure that my top banner is endless, no matter how big the monitor, I've set a min-width value of 4000 pixels. is that considered bad coding? Strange, at least :-) Sounds like that banner will create a horizontal scrollbar even on my 3840 wide monitors. what do other people do? Depends on the case, so we must see the live page to decide which of the available solutions that are best suited. Providing you're talking about a banner-image, I think most will apply it as background and let the page be more fluid, since backgrounds don't push containers and thus won't create horizontal scrollbars. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width in IE 6 on inline/block element?
Sophie Dennis wrote: IE6 treats width as min-width No it doesn't. This is a common myth. IE treats height like min-height, but not width like min-width. Case in point: make a page with a div with a red background. Give it min-width 500px. Observe that in Firefox the div will grow to fill the window at all widths except 500 and below, at which point it's fixed at 500px. Observe that in IE the div will never grow to fill the window but will always be 500px. Not the same at all. Not picking on you, Sophie -- lots of people make this mistake -- but this myth continues to get propagated and it's one of my pet issues to squash it. :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width in IE 6 on inline/block element?
Zoe M. Gillenwater wrote: Sophie Dennis wrote: IE6 treats width as min-width No it doesn't. This is a common myth. IE treats height like min-height, but not width like min-width. Case in point: make a page with a div with a red background. Give it min-width 500px. Observe that in Firefox the div will grow to fill the window at all widths except 500 and below, at which point it's fixed at 500px. Observe that in IE the div will never grow to fill the window but will always be 500px. Not the same at all. Not picking on you, Sophie -- lots of people make this mistake -- but this myth continues to get propagated and it's one of my pet issues to squash it. :-) Zoe Hi Zoe, You are quite right and quite right to pull me up on it. Serves me right for posting without brain engaged properly. I should have said that in certain cases you can use IE6's mishandling of overflow on a fixed width element to simulate the min-width behaviour of other browsers. But you can't use it to create fluid/flexible layouts in the way you can with proper min-width support. In fact, isn't this the same as height/min-height? It isn't that height in IE6 is *the same as* min-height. It's that IE will expand a box to fit its content, regardless of height/width specified. So in IE6 height: 500px won't give the same effect as height: 100%; min-height: 500px will in other browsers, just as width: 500px doesn't give the same effect as width: 100%; min-width: 500px. Now I've engaged brain here I think I may need to join your mission to squash sloppy thinking on this one ;-) [hangs head in shame...] Sophie -- Sophie Dennis, Creative Director Cayenne Web Development Limited www.cayenne.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width in IE 6 on inline/block element?
Sophie Dennis wrote: In fact, isn't this the same as height/min-height? It isn't that height in IE6 is *the same as* min-height. It's that IE will expand a box to fit its content, regardless of height/width specified. So in IE6 height: 500px won't give the same effect as height: 100%; min-height: 500px will in other browsers, just as width: 500px doesn't give the same effect as width: 100%; min-width: 500px. No, you're right about the combination of height and min-height, but I was merely referring to each of those properties when used independently (which they usually are, or should be most of the time). So, IE will treat a div with height: 500px; the same as other browsers treat a div with min-height: 500px;. It treats height exactly like min-height. But yes, if you start combining properties, you can't always get IE to emulate what better browsers will do. Now I've engaged brain here I think I may need to join your mission to squash sloppy thinking on this one ;-) [hangs head in shame...] No shame, but I would appreciate the backup on my mission. ;-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width in IE 6 on inline/block element?
Magenta Placenta wrote:
If you save out the following code and view locally, you'll see in
Firefox a min-width (red border) on certain li class=userchoices
bullets. This is what I'm after. If you open in IE 6, that min-width
is not recognized.
Is there a way to have min-width in IE 6 without resorting to
basically doing the horizontal list in divs with specific widths
applied? The min-widths need to be empty/blank/specific width, until
they're populated by the user. Any value that is returned that is
longer than the width will be truncated.
IE6 treats width as min-width, so you can just add an IE only rule
(I've used the star hack) telling it to use width:130px. You'll also
need to tell it not the wrap the text it you want to keep the boxes
inline. Like this:
* html ul#excel_legend li.userchoices {
width: 130px;
white-space: nowrap;
}
--
Sophie Dennis, Creative Director
Cayenne Web Development Limited
www.cayenne.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width/masx-width and IE
Shelly wrote: Hey all - I'm in need of some help here. I'm working on a site that I need to have a minimum width of 960px, and a max-width of 1280px - centered horizontally on the screen and with 3 columns. (If I can also accomplish a sticky footer, that's be awesome, as well - not necessary, but I have an image that need to stay at the bottom of the content if it's longer than the screen - or at the bottom of the screen if the content isn't long enough to push it down.) I can make all of these requirements function fine in everything but IE (are we surprised?) - I've even tried implementing the expression script in a conditional comment that's common to use, but as soon as I do, the three-column layout goes wonky (header disappears, left column disappears, right column drops to the bottom of the screen!) Shelly, I have never in my whole life been able to get those IE expressions to work, strangely. So I recommend just using JavaScript. I'm pretty sure IE expressions don't work unless JavaScript is on anyway (someone correct me if I'm wrong), so you're not losing any audience by using JavaScript for this. I recommend either the PVII or doxdesk scripts: http://www.projectseven.com/tutorials/css/minwidth/index.htm http://www.doxdesk.com/software/js/minmax.html Our wiki page could use some fleshing out, but there are a couple other things there: http://css-discuss.incutio.com/?page=MinWidth Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] min-width/masx-width and IE
Zoe M. Gillenwater wrote: I have never in my whole life been able to get those IE expressions to work, strangely. So I recommend just using JavaScript. Properly written and implemented IE expressions work every time at my end. IE expressions are based on javascript, but disguised as CSS. Using Javascript to simulate what IE/win lacks in CSS-support is fine, with one exception: none of the Javascript solutions I've seen works in sync with the browser and its CSS support, so you tend to get a time-lag. IE expressions do work in sync, so they tend to act smoother. I'm pretty sure IE expressions don't work unless JavaScript is on anyway (someone correct me if I'm wrong), so you're not losing any audience by using JavaScript for this. You're perfectly right... :-) ...so they both need a fall-back. 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] min-width/masx-width and IE
I'm sorry - I always forget that on this list, you have to reply ALL to get it out to the list. I need to stamp this on my forehead or something. Thanks for the advice - Georg's conditional comment/expression thing worked like a charm. Zoe - I was having the same problem - the expression wouldn't work no matter what I did. But Georg's was different, and by God it works wonderfully. Again, though - thanks for the help - you all rock :) ~Shelly __ 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] min-width/masx-width and IE
Gunlaug Sørtun wrote: Zoe M. Gillenwater wrote: I have never in my whole life been able to get those IE expressions to work, strangely. So I recommend just using JavaScript. Properly written and implemented IE expressions work every time at my end. Good for you. :-) Like I said, I've never gotten them to work on my pages. I didn't say that they don't work, just that they don't work for me, so I just recommend JavaScript. If you can get them to work, go ahead and use them if you like. I'm pretty sure IE expressions don't work unless JavaScript is on anyway (someone correct me if I'm wrong), so you're not losing any audience by using JavaScript for this. You're perfectly right... :-) ...so they both need a fall-back. Yeah, I never worry much about this, since (at least on my sites) min- and max-width has always been a nice to have, not an essential. As long as the site can still be used with JavaScript off, even if it doesn't look as nice, I'm happy. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] min-width/masx-width and IE
Shelly wrote: Would anyone have a tutorial or example or something that could point me in the right direction for this? Think so :-) http://www.gunlaug.no/contents/wd_additions_14.html 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] min-width/masx-width and IE
Can you post an example so we can gt a look at your page? -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] min-width and IE
On 6/22/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Tom Livingston wrote:
Your expression is still triggered by a fixed pixel-width, and doesn't
pick up and recalculate the trigger-point based on the browser's default
font-size.
Try this...
#wrapper { width:expression(((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth
: document.body.clientWidth) (1850/12)
* parseInt(document.body.currentStyle.fontSize)? 50em
: (((document.compatMode document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) (750/12)
* parseInt(document.body.currentStyle.fontSize)? 46em : 100%)); }
It's a tested and working expression, but I haven't tested and
fine-tuned it for your layout - just plugged in suitable values.
I'll write a separate 'min-width' only version later.
Georg
--
http://www.gunlaug.no
No idea what the difference is, but it works great! Thanks so much!
The difference is:
your first attempt...
document.documentElement.clientWidth :document.body.clientWidth) 750 ?
46em : 100%)); }
...vs. the corrected one...
document.documentElement.clientWidth :document.body.clientWidth) (750/12)
* parseInt(document.body.currentStyle.fontSize)? 46em : 100%)); }
See that...
(750/12)
* parseInt(document.body.currentStyle.fontSize)?
...? That's the calculation:
'window-width in pixels', divided by '/medium/ font-size in points',
multiplied by '/actual/ font-size in points' .
A clever bit of logic, don't you think? :-)
Can I increase the 1850 to something crazy so it will never be hit?
It is already so crazy that it won't trigger on windows less than around
1850px recalculated the same as above. However, no problem replacing
that 1850 with a larger value - any value.
Or you may set 100% instead of the 50em I used, since that'll mean
that no action will be taken when the 'max-width' trigger-point is reached.
Thanks again. Your very kind to help out!
No problem :-)
Georg
--
http://www.gunlaug.no
For the sake of the archives, here's the soluion I am using (including
the change of 50em to 100%) from CSS Master Georg
;-)
--
Tom Livingston | Senior Multimedia Artist | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] min-width and IE
Tom Livingston wrote:
I am using this for min-width in IE:
#wrapper{width:expression(document.body.clientWidth 800 ? 799px :
100% );}
If I use ems (50ems) in place of the 799px, IE has a heart attack if
I scale the text up at the min-width.
I'm not surprised :-)
Pixels and ems don't mix well in IE-expressions.
In FF, at the min-width, I scale up the text and the layout scales
too and I get a horiz scrollbar. This is the behavior I want.
Test link: http://66.155.251.18/jltservices.com/
You'll have to use an a bit more complex IE-expression if you want IE
to simulate min-width (and/or max-width) in 'em', but it can be done.
There's an em-based min/max-width expression here (you may have seen
it before ;-) )...
http://www.gunlaug.no/contents/wd_additions_14.html
...but I only use em for 'max-width', s you'll have to rewrite the
expression slightly so the correct calculation from IE's font-size
default in 'pt' to 'em' goes for the 'min-width' part also.
However, in order to avoid giving IE a heart attack, you'll have to
avoid setting font-size on all layout-carrying elements, and let IE use
its own default as base. Ignoring that part is a guarantee for failure.
If you wonder what IE's default is for different font-size options, then
just reload this page...
http://www.gunlaug.no/tos/moa_12.html
...with different font-size options in IE - and look at the footer.
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] min-width
Guillaume wrote: Does *min-width* behave the same way as min-height in standard friendly browsers and in Ie, meaning: min-width = min-width in standard friendly browsers min-width = width in Ie. No. You can test this yourself by creating a test page and playing with it in FF, Opera, and IE. You will find that they do not behave the same. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-width/Max-width: IE PC/IE Mac too?
Michael Hulse wrote: Oh, I also just found this: (Gunlaug's IE-expressions in CSS) http://www.gunlaug.no/contents/wd_1_02_01.html#item3 Unless you prefer to put IE6 in quirks mode (like I do most of the time) then you may be better of with a version that works in both Strict and quirks mode. Same page... http://www.gunlaug.no/contents/wd_1_02_01.html#item34 (IE/Mac still has a hard time following up on CSS-changes for that page, but it'll get there - one day) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-width/Max-width: IE PC/IE Mac too?
As a point of information, we've had this page floating around a long time: http://www.projectseven.com/csslab/testing/minmax/cssp5.htm All of the expression solutions we write work in strict mode. Most are descendant from solutions we pack with custom products but are useful in their own right. Poke around some of our PagePack demos and other gems can be found :-) Al Sparber - PVII http://www.projectseven.com DW Extensions - Menu Systems - Tutorials - CSS FastPacks - Webdev Newsgroup: news://forums.projectseven.com/pviiwebdev/ CSS Newsgroup: news://forums.projectseven.com/css/ RSS/XML Feeds: http://www.projectseven.com/xml/ - Original Message - From: Gunlaug Sørtun [EMAIL PROTECTED] To: Michael Hulse [EMAIL PROTECTED] Cc: css discuss css-d@lists.css-discuss.org Sent: Friday, December 02, 2005 4:20 AM Subject: Re: [css-d] Min-width/Max-width: IE PC/IE Mac too? Michael Hulse wrote: Oh, I also just found this: (Gunlaug's IE-expressions in CSS) http://www.gunlaug.no/contents/wd_1_02_01.html#item3 Unless you prefer to put IE6 in quirks mode (like I do most of the time) then you may be better of with a version that works in both Strict and quirks mode. Same page... http://www.gunlaug.no/contents/wd_1_02_01.html#item34 (IE/Mac still has a hard time following up on CSS-changes for that page, but it'll get there - one day) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-width/Max-width: IE PC/IE Mac too?
Al Sparber wrote: As a point of information, we've had this page floating around a long time: http://www.projectseven.com/csslab/testing/minmax/cssp5.htm I've ran some of your solutions earlier, and found them a bit slow and jerky. No such problems with this one though - it worked really smooth. Nice. Since this is js/expressions simulating standard CSS-properties, do you have an open page with a bit more info to go with those demos? Something that someone, who can read all kinds of code without necessarily being able to write them, can make use of before running site wide testing? Basically interested in min/max both height and width, as defined in CSS, for IE/win. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-width/Max-width: IE PC/IE Mac too?
From: Gunlaug Sørtun [EMAIL PROTECTED] Al Sparber wrote: As a point of information, we've had this page floating around a long time: http://www.projectseven.com/csslab/testing/minmax/cssp5.htm I've ran some of your solutions earlier, and found them a bit slow and jerky. No such problems with this one though - it worked really smooth. Nice. I guess that's better than calling me jerky :-) I'm glad you like this, though. If the jerky solution happened to be the Equal Height Columns script, the animation is probably the reason, but it can be easily turned off. Let me know if that was an issue - if not, let me know which solution you did find jerky so we can look at it... we haven't noticed anything, but if you see it, we'd like to examine it. Since this is js/expressions simulating standard CSS-properties, do you have an open page with a bit more info to go with those demos? Something that someone, who can read all kinds of code without necessarily being able to write them, can make use of before running site wide testing? We've been meaning to turn it into an article/tutorial like the EQ Columns one, but we're in the middle of developing a new commerical tool for Dreamweaver and are a bit backlogged. We'll get around to it though. If you have specific questions in the meantime, mail us offlist and we'll try our best to accomodate. Basically interested in min/max both height and width, as defined in CSS, for IE/win. We've never found a need to do height. Can you give me an example of how that would be useful? -or would a smoother Equal Height Columns solution take care of that? 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width/width setting with inputs
CJ Larson wrote:
I'm trying to create 3 divs that sit next to each other if there's
room and who move to the next line if there's not. I originally set
a width: 31% on them which worked great until I put a file upload
input inside. The text and headings still obey the width, but of
course the input does not.
http://www.geocities.com/gotcj/temp/inputproblem.html
Min-width should reflect the content-width - not the window-width. An
em-based min-width is most practical since content will expand with
font-size. That's more or less how IE/win acts anyway.
I tested with '.wrapper-div {min-width: 15em;}' on most, and
'.wrapper-div {min-width: 7.5em;}' on the two select. These values
worked well in Opera Firefox, where I got a nice line-up and drop to
new lines when needed - regardless of font-size. Trim these values till
you get the best result.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-width/Max-width: IE PC/IE Mac too?
On 12/1/05, Michael Hulse [EMAIL PROTECTED] wrote: 2. Should I be worried about the above expression breaking in IE7? If you are, use a conditional comment, [if lte IE 6] 3. How would I get min-width and max-width to work in IE/Mac? The above expression appears to have no affect on that browser/platform. If you are concerned about IE Mac, just use straight Javascript, it's the same as the expression but it's not invalid CSS: http://pro.html.it/articoli/id_620/idcat_31/pag_1/pag.html 4. What would you suggest is a good max-width for a fluid-layout site? I really like 1100 px. Of course, your width should be related to the number of columns, the width of each column, and the default size of your text... you might even want to use ems for your max width... I think you are the best judge of that. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-width/Max-width: IE PC/IE Mac too?
On Dec 1, 2005, at 11:37 PM, Christian Montoya wrote: I think you are the best judge of that. Thanks for the response Christian, I really appreciate your time. :) I probably should not worry about IE/Mac, but I do (I am a Mac guy, and I also like the feeling of having my CSS look good in that browser/Platform... although, I probably have gotten the biggest headaches in my lifetime because of stupid IE/Mac bugs/issues...) Oh, I also just found this: (Gunlaug's IE-expressions in CSS) http://www.gunlaug.no/contents/wd_1_02_01.html#item3 Thanks! Cheers, Micky -- BCC for Privacy: http://www.cs.rutgers.edu/~watrous/bcc-for-privacy.html My del.icio.us: http://del.icio.us/mhulse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width
On Tue, 12 Jul 2005 12:13:51 -0400, Michael Cassidy wrote: I've been trying to get a minimum width on my page. I'm having a problem with IE MAC Windows; what I thought would work on IE Windows doesn't seem to be working [I know what I wrote is giving me a fixed window; its just to help to see if the coding is working]. ... width:expression(document.body.clientWidth1080? 1080px: 100%); From what you show, IE should not give a fixed-width window, but one with a minimum width only. For what it's worth, Stu Nicholls has a CSS-only solution for min-width in IE. Does not work in Mac - I don't know how important that is to you. http://www.stunicholls.myby.co.uk/boxes/minwidth.html Cordially, David -- David Hucklesby, on 7/12/2005 http://www.hucklesby.com/ -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width
Michael Cassidy wrote: I've been trying to get a minimum width on my page. I'm having a problem with IE MAC Windows; what I thought would work on IE Windows doesn't seem to be working [I know what I wrote is giving me a fixed window; its just to help to see if the coding is working]. Jazz is freedom. - T. Monk www.panix.com/~cassidy Michael, Georg Sortun has some very helpful info on min-max width and IE 'expressions on his sitehttp://www.gunlaug.no/homesite/main_8_2.html-- might prove helpful... Regards, David -- David Laakso http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
