I am having a page where i give max-height max-width property to image element. It is working fine in chrome and firefox but not in ie-7.
Try this css
*max-height:400px;
*max-width:400px;
like that
MAX width working in IE-7 according to Microsoft check the link below
http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#positioning
But you have to set appropriate doctype
*+html #div {
max-height: 300px;
max-width: 300px;
}
use this code ... i think its useful for you............
Related
I have a custom dropdown with some text options, and I need to set a fixed height. Seems simple enough, I added max-height and overflow-y: scroll. It works great! but on Chrome on device mode, with big resolutions it blurs the text.
I made a pen that shows this. https://codepen.io/a40637francisco/pen/OvbNyB
It seems these 2 properties don't go well with chrome.
max-height: 100px;
overflow-y: scroll;
I've tried several fixes using translate, perspective, smoothing, but no luck. Any ideas?
I guess it has to do with the mobile screen resizing. Setting it to 100% fixed it for me. Hope it helped!
I found a solution using also height
height: 100%
max-height: 100px;
overflow-y: scroll;
I am having an issue with firefox and the height of the div that contains all the content. I can't figure out why the min-height:100% won't apply.
PS: If I use width:100% instead, it will work but will cause some troubles on pages where the height is more than the height of screen.
Website : [URL-Removed (Problem Solved)]
Screenshot :
Opera/Edge/Chrome :
Firefox:
Thanks in advance
I set wrapper 100% height and it looks ok.
In #page-wrapper you should use height: 100%; instead min-height: 100%;
You should use this code :
height:auto;
I'm working on a large form and have noticed that if an image is within a fieldset it doesn't obey the max-width: 100% rule.
It works as expected in Chrome and Safari but in Firefox the image overflows the container and the image keeps its normal size.
I would prefer to not make changes to the html structure and keep the images inside the fieldsets.
Anyone have any ideas if there is a workaround or why this only happens in Firefox?
simple example
http://codepen.io/FernE97/pen/NPZKaR
For purely CSS solution, check this link http://codepen.io/saig/pen/RNXLwY
Tested with 800x400 and 400x400 image sizes
img {
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
height: auto;
}
You can check this link for max-width implementation by MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width?redirectlocale=en-US&redirectslug=CSS%2Fmax-width#Examples
You can try this workaround, width property defined. use max-width to overrides width property
img {
width: 100%;
max-width: 100%;
height: auto;
}
Edit : Please check this url : http://codepen.io/anon/pen/PwrWQK
I've added script which dynamically changes max-width property based on image dimension, hope this helps to fix your issue in Firefox.
Is there a way to constrict how far a <textarea> can expand? Or a way to format a <table> so that it doesn't look bad when you expand a <textarea>?
The only way I know is with the resize css property. It is a CSS3 property so it may not help you if you are dealing with older browsers.
Try applying this class to your text areas...
.noresize{
resize:none;
}
Use max-height and max-width for the style of textarea. This will prevent the textarea to be expandable.
Note: IE doesn't know max-width and max-height. but you can do something like this:
textarea{
width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}
If you do not want resizing completely then put a "resize:none;" style attribute on the textarea. If you want resizing in a controlled way then add something like max-width: 300px;
max-height: 250px; to the text area style.
textarea {
resize: vertical;
width: 350px;
min-height: 80px;
max-height: 200px;
}
Using this code, the user can resize the textarea vertically. Applying max- and min-height prevents the layout from breaking.
Is it possible to set the width of the tag "legend" at 100% in FF? In spite of all my efforts its length stays equal to the containing text.
I don't believe it is, no. Firefox 3.5 sets the following style on legends:
width: -moz-fit-content !important;
which, thanks to the ‘important’, is impossible to override (min-width and position are similarly affected).
display defaults to inline, but you can set it to block and nest a <span> inside it which you can then set to display: block; width: something;. But not 100% as that relies on the width of the legend (gah). The only way I can think of to truly get 100% would be to relative-position the fieldset and absolute-position the span inside the legend with left: 0; width: 100%;.
(Which is very ugly and potentially fragile.)
<legend> is always a tricky element to style in many browsers: its typical default rendering can't be done with plain CSS, so the browsers cheat in various ways that can bite you if you try to change the rendering too much. If you want to control the positioning of the element that specifically, you are probably better off forgetting <legend> and just using a styled <div>.
works on all browsers:
LEGEND { position: relative; width: 100% }
edit- check out this gem: http://www.456bereastreet.com/lab/styling-form-controls-revisited/legend/
Firefox from version 3.6 onwards honours { width: 100%; }. There appears to be no CSS-only fix for Firefox 3.5 (see bobince's answer).
set css width on fieldset
fieldset { width: 100%; }