I recently noticed that CSS property width does not have the same effect when using bootstrap. Could someone know why?
I use firefox developer console to inspect box model and see actual dimensions.
Simple html code:
<div style="width=400px;height=30px;background-color:red;"></div>
Here is a fiddle with a simple div with a fixed width/height. Its sized 404*34
https://jsfiddle.net/nszvxfwq/
Here the same one including bootstrap. You can see the box size to be 400*30
https://jsfiddle.net/nszvxfwq/1/
Thanks Adrift, your answert really helped me!
Because bootstrap applies box-sizing: border-box; to all elements, whereas >your example retains the initial box-sizing value of content box (which draws >padding & border outside of the specified width & height). – Adrift yesterday
Related
Attempting to have three backgrounds with various z indices is resulting in only one layer being shown.
This jsfiddle has the relevant code and examples (minus the huge foundation css file... the behaviour is unaltered without it).
the classes that are failing are
skyline
and
#footer_container
whereas #header_container is running properly.
I've updated your fiddle here.
#footer-container wasn't displaying its background image because of your CSS syntax. Since you combined both the background image URL and no-repeat, you would need to use the background shorthand rather than the background-image property.
A great way to check this sort of thing is to inspect your element with your browser (in Chrome: Right Click > Inspect Element) and find the element that isn't displaying properly. You'd notice that the background image property of your #footer-container div was being literally crossed out by Chrome because of a syntax error.
There was also a bit of a syntax problem in your .skyline class. First, both your body and the inner div have a class of .skyline. This is kind of confusing so you should remove it or be more specific in your CSS, e.g. with p.skyline, div.skyline, etc. As you've got it currently written, both your body and that .skyline div will get the background image. You also didn't include a closing </body> tag. I'm assuming you don't want the background image on both that div and the body, so I removed your body tag in the updated fiddle.
Also, in your .skyline css, you have both height: 546 and height: auto. First of all, height in CSS should have a specific value (e.g. px, em, %). For an <img src="img.jpg" height="546" />, however, simply putting "546" as its height would be fine. Second, you should only have one height value per class.
The skyline problem itself is that you didn't close your curly bracket on line 126, so no styling at all was applied to .skyline. Once it's closed, there's still a problem. It has no width. So let's set it to 100%. Still nada. This is because .skyline's parent div#container also is widthless. So let's toss a 100% width at it too. Then we're in business.
A good text editor that highlights syntax errors could help you out a bunch, especially when you're just starting out.
I am trying to get a div to fit to only the content using intrinsic sizing, but chrome dev tools seems to be rejecting that style.
In the dev tools, that style has a strike-though through it and a yellow triangle with an exclamation mark as if it is an invalid style.'
The style gets a strike-through if I do it without vendor prefixes or with so none of the following are working:
.box{
width:-moz-fit-content;
width:-webkit-fit-content;
width:fit-content;
}
All of them have a strike-through through them.
What am I doing wrong? I have the latest versions of Firefox and Chrome and they are supposed to support this.
Update:
Here is a screenshot of what I am seeing in chrome dev tools:
http://cl.ly/image/1k0I21192Q36
The code you have written in your answer:
.box{
width:-moz-fit-content;
width:-webkit-fit-content;
width:fit-content;
}
should work totally fine. However the code in your screenshot:
div.container{
height:-webkit-fit-content;
height:fit-content;
}
won't work. This is because fit-content only applies to width and not height.
See the Mozilla Developer Network for working values for width and height - there are way more available for width:
https://developer.mozilla.org/en-US/docs/Web/CSS/height
https://developer.mozilla.org/en-US/docs/Web/CSS/width
According to MDN, the fit-content width does the following:
fit-content Experimental The larger of: the intrinsic minimum width
the smaller of the intrinsic preferred width and the available width
So for a height you can expect a div to expand it's height to fit the content within it (unless the content is positioned absolutely or floated). To get it to fulfil the last part (making sure it doesn't exceed the available space) you could add max-height:100%; depending on the structure of your html.
Hey guys I am having a small issue with an assignment. I have to create this page and it looks great in Chrome but every div cell renders one pixel smaller in Firefox, I believe it has something to do with border width. Is there a work around or something I am doing wrong?
I am using a CSS reset, and I have declared my doc type.
Should I have just built this page using tables instead? Sorry no link to published code, also when I place the code in the code block it still displays the HTML.
https://docs.google.com/file/d/0B8uifJLGRXapcHF1VzRNNGo1b2M/edit?pli=1
Thanks in advance.
Try using CSS outline that will also work. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
However, the outline property is different from the border property.
The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.
ie.
.example {outline: 1px solid pink;}
Try using the box-sizing property in CSS to fix this problem. box-sizing:border-box; will render the border and padding inside the actual width and height of the element. For a better description check this http://css-tricks.com/box-sizing/
I'm trying to accomplish something specific around platform constraints I'm under.
I created a somewhat self-explanatory jsfiddle of the problem at http://jsfiddle.net/MrV5M/4/
The specific problem:
On Chrome, the right border of the input box is cut off.
On Safari, the width of the content class cell exceeds the container so it spills over the border.
On IE9, the label doesn't float to the left of the content div
The main reason I care about Safari is because I'm working on a JQuery Mobile/PhoneGap app which is also a web app. I'm only supporting modern browsers, but this is driving me nuts. Normally I'd just use a table for the container, but the text-overflow: ellipsis styles on the content div don't work when inside a table. (Basically, I'm trying to keep the content to a single line and have ellipsis without enforcing a fixed width or calculating a width with Javascript)
Anyone have the l33t CSS skills to make this work? I sure don't... :)
Just add this CSS to your Stylesheet, and get peace of mind on your issue :D
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You may not like this answer. I made some adjustments in the css which fixes Chrome and IE9 issues. Take a look,
http://jsfiddle.net/MrV5M/11/
There are many ways to do what you are trying to do, but if you insist on using 'flex' stuff which is largely un-supported (even in the majors see here), you'll need to add the vendor prefixes to flex.
e.g... -webkit-flex, -moz-flex
Also, I don't think you need to be setting widths on elements that have the flex property.. not positive though.
So your browser issues:
-IE doesn't support flex at all so you're label won't float unless you use a float.
-The reason your input/content is spilling over the container and getting cut off is not really anything to do with flex.. but the way css works.. setting an element to 100% width means setting it to the width of its parent. But by default, css doesn't count the padding/border-width as part of that width. So you end up getting 100% width plus the L/R padding and border. But, since you are only supporting modern browsers.. box-sizing:border-box; to the rescue. Google it for details, but putting it on your input element should do the trick.
UPDATE
Here's a fiddle to play with:
http://jsfiddle.net/UnsungHero97/RQCt3/1/
Here are two screenshots that show what I'm encountering...
The weird thing I'm encountering is this. When I hover my mouse over the <img> element, it shows its dimension as 288x72, which is what I expect it to be since I set the height of the image as 72.
However, when I hover over the <div id="logo"> element, it shows its dimensions as 288x76, which means there is an extra 4 pixels somewhere contributing to this height.
If you notice the CSS properties for the <div id="logo"> element, there are no paddings or margins or heights specified.
So where are these pixels coming from? Why is this happening?
An easy way to fix this is:
img{
vertical-align: top;
}
Live example: http://jsfiddle.net/RQCt3/2/
The reason is that images in HTML are considered inline elements and so by default are aligned on the font base line. The extra space is probably to allow for the bottom of letters etc.
Similarly adding display:block will also do the job:
img{
display:block;
}