I have some images with height=auto because sometimes they are different heights whereas they are always the same width. It works in every browser but I.E., is there something similar I can use?
I found that adding min-height:1px solves the issue. Not sure why, but, worked for me.
Just leave
height=auto
out. If it's not given it's "auto" by default...
The solution was to add the typical IE fix :(
css:
height:auto !important;
i've tried all the solutions posted, and the only one that works is
height=100%
Use height: auto together with width: auto and it is going to work in IE. If you specify only one of them, IE gets upset.
height: auto;
width: auto;
There is also an IE issue when using images with height=auto within flex containers.
For me personally, the issue was caused due to the image being placed within nested flex containers. I was able to remove the parent flex container and the issue was resolved for me.
There are a few more work around solutions that people have mentioned in the page below:
https://github.com/philipwalton/flexbugs/issues/75
You can do width="100%" and max-width="100px" or whatever width you want and then simply height="auto". This worked for me.
BTW you may need min-width width your wanted width too if your parent element doesn't have the width that you want for your image.
For Edge browser you can use max-height, which will also work for other browsers
max-height: 100%;
I had the same problem and fixes with min-height and !important didn't work for me.
My img was in a flex container.
I then tried putting the img inside another, wrapping div and then height:auto worked.
In "IE9 compatibility view - IE7 Standard Document mode" leaving off height=auto may not solve the problem. Try adding conditional CSS and in your special css file for IE ("ie.css") add a line that assigns the appropriate min-height to your affected class/element.
for example:
.IE7 .[css element] {min-height: xxxpx;}
Where xxx equals the necessary image height.
height: initial; will work instead of using height: auto; in chrome and ie.
Related
I need a purple line along the top of the site. Instead of using an image I'm using the border-top property on the body. This works in full view but when I resize the browser window the purple line appears only in the viewport, when I scroll to the right I get a white space. Here's the fiddle so you can see what I mean. I've tried width: 100% on both the body and the container, but to no avail. Can someone suggest ways to accomplish what I need?
Thank you.
Not sure if this is the best way to accomplish it, but you can add position: absolute; to the body. This may have some undesired side effects.
If you know your documents width then you can specify a min-width.
body { min-width: 960px; }
Try the body border hack :)
http://css-tricks.com/558-body-border/
Designed for fixed position but should work for you as well.
Adding display: inline-block; to both body and container also worked. See http://jsfiddle.net/K5zVq/16/.
A secondary answer, related to skoh-fley's though maybe with less consequences, is to add float: left to the body: http://jsfiddle.net/K5zVq/20/. Though I think I would lean toward my first answer posted here (though you know your situation better than I).
I've designed a fixed-width page which renders equally in Chromium, Firefox, Safari, but has a small issue in (from what I can tell) ALL flavours of IE. I've added some conditional styles for IE, which make things a bit better, but it's still off (by only a couple of pixels).
The site in question is here: http://www.brushesfacepainting.co.uk/brushes/home
IE and Chromium rendering side by side is shown here: http://www.brushesfacepainting.co.uk/images/renderissue.jpg
I added conditional styles for IE to fix the width of all the elements, prior to this, the banner style was much narrower than the body.
I assume I'm hitting up against an IE bug, but I can't figure out which one! Can anyone help please?
Thanks,
Lee
Your mainbodyie rule has a width that is different than the width in your standard css. (851px vs 848px). Fix that to match your other wrappers.
Also your page is not centered in IE - I suggest you wrap whole page in a fixed width wrapper with margin:0 auto to center whole page - so you don't keep repeating the width multiple times in your css for each layout element.
/* ONLY FOR IE */
DIV.mainbodyie{
width: 848px;
}
DIV.mainbody{
padding-right: 0;
}
Use a div structure for enclosing all content like header,middle,footer inside it.Add following code for this div:
.test{
overflow:auto;
margin: 0 auto;
}
I have this code, which is behaving differently in firefox vs chrome.
<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>
the class fi_logo referenced above is :
.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}
In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.
So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?
Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/
Use combination of position relative and absolute.
Also, do not use div inside h2 - bad markup
Maybe if you set .fi_logo display:block
I think, your problem is with specific browser version.
I checked it in FF 3.6.2, which return same result like Chrome
Well it sounds like you still haven't sorted this out so I will make a little more commentary.
I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.
It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.
If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach
Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.
Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);
let's say I have a div with right-aligned text and a fixed with:
div{
width: 30px;
text-align: right;
}
is it ok if I increase the width of this div to 35px trough padding, to move the text away from the edge and avoid adding another element inside of it?
div{
padding-right: 5px;
}
I mean would any browsers behave weirdly about it?
The result would be exacly what you said: a div of total width 35px. It seems to me you understand what you are doing, but there is never a substitute for actually testing in all your target browsers.
While this small piece of CSS looks innocent, it can change the elements around them in a way you didn't expect.
No It'll be ok, in every major browser.
Internet Explorer in Quirks Mode would have a problem with it due to it's box model.
If this is a problem, I would use a nested div that uses margins instead.
Your other option could be including an IE specific CSS file.
This is an area that we are getting a lot more control over with css3. Have a look at
http://www.quirksmode.org/css/box.html.
I am trying to make a h2 header for sidebar widgets but I want the width of the div class to be whatever width the content becomes. It seems I can't just set a width because those headlines with longer content then shorter content makes it break.
How can I simply make width stretch/change depending on the length of content there is? Any help would be greatly appreciated.
As far as I know, display: inline-block is what you probably need. That will make it seem like it's sort of inline but still allow you to use things like margins and such.
If you are coming here, there is high chance width: min-content or width: max-content can fix your problem. This can force an element to use the smallest or largest space the browser could choose…
This is the modern solution. Here is a small tutorial for that.
There is also fit-content, which often works like min-content, but is more flexible. (But also has worse browser support.)
This is a quite new feature and some browsers do not support it yet, but browser support is growing. See the current browser status here.
The easiest is:
width: fit-content;
If display: inline; isn't working, try out display: inline-block;. :)
I faced the same issue and I resolved it by using: max-width: fit-content;
The best way to do this is to set display: inline;. Note, however, that in inline display, you lose access to some layout properties, such as manual height and vertical margins, but this doesn't appear to be a problem for your page.
width: -moz-fit-content;
width: fit-content;