How is it possible to make SVG take the whole height inside a table cell?
The goal is doing this by changing just the code inside the cell () without hardcoding the height in pixels. It's working in firefox and safari, but in IE and chrome it's strange (no size in chrome, big in IE)
- The example in fiddle (you can't see the arrow)
Setting max-height:100% on your <svg> is a known work-around for Chrome.
See: http://jsfiddle.net/DyUGN/7/
Also adding display: block improves rendering further.
SVG {
display: block;
max-height: 100%;
}
See: http://jsfiddle.net/DyUGN/8/
I'm not sure what the hell IE is doing though. I don't know a workaround for that. You might have to use Phrogz's method. Or, if you can live with it, just set the <svg> width and height explicitly:
<svg version="1.1" width="18" height="18" ...
See: http://jsfiddle.net/DyUGN/9/
Here's the best answer I can come up with; it's not elegant. Use JavaScript to compute the height of the cell and set the height of the SVG to fill, minus a bit of arbitrary padding.
Demo: http://jsfiddle.net/DyUGN/6/
window.onresize = function(){
var svg = document.getElementsByTagName('svg')[0];
var td = svg.parentNode;
// No idea why an extra 2px need to be subtracted.
svg.setAttribute('height',(td.offsetHeight-2)+'px');
}
window.onresize();
The demo uses CSS to set the SVG to display:block (so that it does not get any extra 'height' from inline text descender spacing), sets the SVG to initially have a height of 1px (so that it is not initially too tall), and sets the cell specifically for the SVG to have no padding on it.
If you prefer to have padding on your cell, you will need to account for this explicitly in your code (subtracting off the amount of padding). Unfortunately there is no easy way in JS to calculate
the height of an element without its padding, nor to easily calculate the amount of padding applied in pixels.
Related
I have a significant difference in a logo image i have when it is displayed in Chrome compared to Firefox (I did my testserver on Firefox and then live in Chrome)
Here are the 2 differences:
Firefox
Chrome
It should be appearing as it does in Firefox. I switched the logo and added in image characteristics to make it fit rather than editing the CSS file.
Here is the code:
<a class="navbar-brand" href="index.html"><img src="img/logo09.png" width="250%" height="250%" alt="logo"></a>
Is there a quick fix to this? Thanks in advance for any help :)
Use stylesheet, inline styles or Dimension attributes are a nightmare to maintain...
height: 123px; /*or any other fixed/dynamic value, unit*/
width: auto; /*let the browser do the scaling */
would help (unless you're running into specificity issues)
Also it's goot to know that in HTML5 % are not allowed on attributes width="" and height=""
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
<img> attributes
width
The intrinsic width of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
height
The intrinsic height of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
The issue you may be having can be related to your use of percentage. You set them to 250% but percent of what? It should be the parent element but what is the parent element set to? The parent of the image is the anchor element which has no width set and is not a block level element.
Try setting the parent element to some fixed width and see if the issue goes away or both browsers display the same.
For example, I set the enclosing anchor element to display:block; and set its width to 500px.
Replace the percentage width with a fixed pixel width. Firefox and Chrome register % measurements differently, due to the fact that the containers are laid out slightly differently. Also, add the measurements to a class and give then an !Important attribute. I believe Chrome has a css file it uses on all the sites visited in it, which gives some design layouts etc.
UPDATE:
After your comment, try looking in developer tools at the element to see if something is overwriting it. If there isn't, then I'm not sure what to suggest. Maybe go with a different design, such as a centered div with the elements inside, or use a navbar with this logo in, or a centralised logo without the bar. There are lots of options. Sorry I couldn't be more help
Consider the following example:
<!doctype html>
<html>
<head>
<style>
td {
padding: 0;
background: red;
}
img {
display: block;
}
</style>
</head>
<body
><table
><tr
><td
><img src="https://raw.githubusercontent.com/sinatra/sinatra/v1.4.7/lib/sinatra/images/500.png"
></td
></tr
></table
></body>
</html>
There's a red line in chrome on the right of the image. No such line in firefox. It doesn't seem like a space, because the html markup has no spaces between tags. It doesn't seem like a margin, because Developer tools doesn't report any margin.
What is this? How much space could it take?
I'm running chromium-47.0.2526.111 (64-bit), if anything.
UPD I made an example without spaces specifically to show that the red line is not caused by spaces.
Next, it was found the line appears when Zoom is, for instance, 110%. So, everything is supposedly clear now.
It is because of the way <td> elements are displayed. As you can see, they are displayed as:
display: table-cell;
This is because of how table-cell is ment to calculate pixels. Since 1 pixel is not equal to 1 pixel in CSS if you have DPI scaling enabled (or you zoom), it will start to behave weird.
You can either find another approach of your <td> inside <tr> or simply change the display to display: inline;
It's all because of how pixels sizes are calculated. I know it sounds weird, but 1px is not 1 physical pixel. Essentially what happens is your td's background changes according to the size of your image. When your image hits an odd number (because of zooming or DPI scaling), it will either round down or up. This is when the calculation happens and is wrong.
Sources: https://www.w3.org/TR/css3-values/#absolute-lengths
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
There is no red line for me on initial load, however I can see red lines if I zoom in, which begs the question, is your browser set to zoomed in?
Look for the magnifying glass in the url bar of google chrome and make sure you're set to 100%
Causes when not zoomed
Since you have padding set to zero on your td element, that's fine, and the only thing that can make the same effect is to have the margin on the image (the margin on the child element sort of behaves like a padding on the parent element in this case). The margin could be set either by you, or by your browser's stylesheet (I don't see it on mine).
Set img {margin: 0} and it should be gone because you've covered both cases that could cause it.
Zooming problem
If you see it only when zooming, it's because of browser's sub-pixel rendering (when the pixel values become floats and the browser starts rounding or flooring them). And due to the extremely non-power-of-two dimensions of the image (313x161) it's highly likely to get that extra pixel line on various zoom levels when, say at 110% zoom, the calculated width of the td is 313.636 pixels, and the image 312.997 pixels, which become 313 and 312 when floored. That leaves us with the td element being one pixel wider than its child image, which is where the line (the red td background not being "covered" by the image) comes from.
img {width: 100%} fixes this (as Aziz already said in the comments)
This may help you:
td {
padding: 0;
background: none;
}
The correct answer is that for several years Chrome has handled images in tables defectively and no one can comprehend that this the actual problem. You have to take the images out of the table and put them in divs...
I have an svg that I'm using to show a wavy edge on a div. The svg needs to display as the same with as the div but due to some sub pixel snapping/rounding the alignment varies as you resize. Firefox seems to work fine. See demo:
https://jsfiddle.net/meojwnLv/
When using the svg as a background image with background-size:100% auto; it scales correctly but I want to be able to change the color so need it to be inline.
How can I prevent this from happening?
Thanks
It looks like Chrome is snapping the height and width of the SVG object to integer values. Since the SVG's width is much larger than its height, every 1px change in the height of the SVG is causing the width to change by about 10px.
viewBox="20 20 900 66"
There's an easy workaround for this — just make the SVG taller:
viewBox="20 20 900 500"
Here's an updated JSFiddle.
<html>
<head>
<style type="text/css">
div {
border:1px solid #000;
min-width: 50%;
}
</style>
</head>
<body>
<div>This is some text. </div>
</body>
</html>
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger. However, the border around the div stretches across the entire page width. This occurs in both IE and Firefox.
Suggestions?
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger.
min-width does not set a minimum starting width from which your block will grow; rather it limits how far the block can shrink.
In min-width: 50%;, the 50% is in reference to the containing block. I've never used percentages with min-width, but I find it can be useful with other units. For example if I have a block (like a column of text) that I want to be full width, but I don't ever want it to go below a minimum width, I could use something like {width: 100%; min-width: 250px;}.
Note the caveats on IE support mentioned by others.
If you provide absolute positioning to the element, it will be 50% in Firefox. However, IE doesn't like the min-width or min-height attributes, so you will have to define width as 50% also for it to work in IE.
Without min-width, your div will take whole page width, that is how display:block elements behave. Adding min-width cannot make it smaller.
Changing display property to absolute or float property to left will make the element to shrink to fit contents. Then, min-width start to make sense.
To add to what Chris Serra said, in IE < 7 (and in 7? I can't keep track these days, but definitely < 8), width behaves exactly like min-width is supposed to behave.
You are telling it that the minimum width is 50%. Since there is nothing else taking up the space, it will take all of it (except for margins).
If you give it a max-width of say 75%, firefox should constrain it to that. IE6 will still ignore it.
As David Kolar already said, many of us typically do not use percentages for min-width.
You may want to try an IE specific style-sheet and include and expression like:
print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");
This will change the width setting based on the width of the browser window at load time. I personally like to use px as the unit measurement, but you need to try it with your specific setup.
Summary
What's the best way to ensure a table cell cannot be less than a certain minimum width.
Example
I want to ensure that all cells in a table are at least 100px wide regards of the width of the tables container. If there is more available space the table cells should fill that space.
Browser compatibility
I possible I would like to find a solution that works in
IE 6-8
FF 2-3
Safari
In order of preference.
This CSS should suffice:
td { min-width: 100px; }
However, it's not always obeyed correctly (the min-width attribute) by all browsers (for example, IE6 dislikes it a great deal).
Edit: As for an IE6 (and before) solution, there isn't one that works reliably under all circumstances, as far as I know. Using the nowrap HTML attribute doesn't really achieve the desired result, as that just prevents line-breaks in the cell, rather than specifying a minimum width.
However, if nowrap is used in conjunction with a regular cell width property (such as using width: 100px), the 100px will act like a minimum width and the cell will still expand with the text (due to the nowrap). This is a less-than-ideal solution, which cannot be fully applied using CSS and, as such, would be tedious to implement if you have many tables you wish to apply this to. (Of course, this entire alternative solution falls down if you want to have dynamic line-breaks in your cells, anyway).
Another hack is the old 1x1 transparent pixel trick. Insert an 1x1 transparent gif image and set its width in the image tag to the width you want. This will force the cell to be at least as wide as the image.
I know this is an old question but i thought I'd share something that wasn't mentioned (Although pretty simple in concept..) you can just put a <div> inside the table (in one of the <td>'s or something) and set the <div> to min-width. the table will stop at the <div>'s width. Just thought I'd throw that out there in case somebody comes across this on google. Also, I'm not so sure about how min-width is handled in I.E6. but that has already been covered in another answer.
I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
what about this css property
min-width: 100px
but it doesn't really work in IE6 if not mistaken
if you don't want to do it in the css way, I suppose you can add this attribute
nowrap="nowrap"
in your table data tag
This is a cross-browser way for setting minimum width and/or mimimum height:
{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}
IE 6 doesn't understand !important
IE 6 sees width/height:200px (overwriting auto)
Other browsers understand the min- and the !important
I am not 100% familiar with the behaviour of widths in TD elements, but this all works nicely on eg DIV tags
BTW:
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
This is not working because of the order of the first 2 lines, they need to be in the right order (think about the above) ;)
IE6 handles width as min-width:
td {
min-width: 100px;
_width: 100px;/* IE6 hack */
}
If you want IE6 to handle width like normal browsers, give it an overflow:visible; (not the case here)