This question already has answers here:
What is the box-sizing property for in CSS?
(4 answers)
Closed 3 years ago.
I am actually seeking A really simple and short answer, my discord friends kept telling me that I should write it every time I start programming a website and so on I did without actually knowing what it really does and Impacts.
box-sizing:border-box; defines how the elements are calculated i.e. height and width & do they really need padding and borders, these properties are taken care of box-sizing:border-box;. With box-sizing: border-box;, we can change the box model to an unusual way, where an element's specified width and height do not get affected by padding or borders. This has become so useful which helps in a responsive design that it's found its way into reset styles. You can find this list of browsers which supports box-sizing:border-box;
Related
This question already has answers here:
Partially overlap elements using CSS
(3 answers)
Closed 11 months ago.
Currently my site looks like this (making a browser based card game), please ignore the art for now - screenshot - I would like them to overlap slightly rather than wrapping around and creating a new line almost like someone is holding the cards. I have no idea where to even start with this without using js so I was wondering if anyone could help me come up with a solution that just uses pure css solution.
You can use margin-left and margin-right with negative values. Or you can set the card positions by using position: absolute and left and top properties.
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Why are my CSS properties being overridden/ignored?
(5 answers)
How can I detect overwritten css properties?
(3 answers)
Closed 3 years ago.
I am using timeline.js to add a timeline to my page. Unfortunately the width of an element with class .tl-slide-content is set somewhere I cannot see. As a result, the width is 940px or 448px depending on viewport width. This is causing issues with how the text next to the photo is being displayed.
I have tried selecting the element with every ascendant class available, including any IDs that I could find. Still there is no change and I am unable to figure this out.
What I want to know is this:
what is 'element' in this context?
are there tools in the developer console that enable me to find where width is being set to 940px?
If anyone has any experience with this particular library and could point me in the direction of the appropriate selectors that would be fantastic
I have tried putting my stylesheet after the timeline, I even tried putting it right at the bottom of the body tag. Still no change.
The 'element' selector is displaying all the properties set by the inline styling within the HTML file itself. Inline styles supersede all other styling because of cascading (first to last). Last iteration is displayed.
You can see the word inline to the right of the 'element' box.
If you do not have write access to the HTML file you are working with then you may need to use !important after your width: 100%. This is really a last resort.
My suggestion is to look at their CSS source code:
https://github.com/NUKnightLab/TimelineJS/tree/master/source/less
Overwriting their CSS would just bloat your code.
Duplicate the library(if you intend to use it again) and then use the duplicate to internally mess with their source code to achieve the results you want.
I know I didn't give you a direct answer, but libraries typically have their own conventional styling, etc. without looking at the source you're just guessing...
This question already has answers here:
How to make a child div transparent?
(2 answers)
Closed 5 years ago.
So as exposed in the title, i'd like to make a part of a container transparent, but only where there is another div, I know I can't tell it clearly, then I made an example :
I don't know if it is possible doing this, using ONLY CSS, I can't use JQuery, not even Javascript.
Thank you in advance for your answers :)
No, this can't be done with CSS alone. However, as CBroe has said, you could apply the same background image to the second/inner to give the illusion that it's transparent.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am always confused which one I should choose whether margin or position(relative, absolute) in making a web page responsive.
For example , I have an HTML element , now to align it properly, I can go for either margin/padding or Position, but I always think that which will be better to use so that I don't have to write lot of media queries for different devices .
Any help/advice is aprreciable !!!
Each property has their own usecase. but in responsive perspective
i feel padding would help more like in some case you simply give padding instead of element height and width.
Position/margin relative/abs is completely depends on requirement.
after that you can use % and em as well.
for me, position absolute and using top left or etc is troublesome, especially you will do the floating things between 2 div/section like my post here:
The never answered question
same does with margin and padding, you should know your own width and height divs, but it will too complicated when you turn into a responsive, you should set your width and height again.
the best thing to do responsive website i think you should follow the website structure. keep inside the wrap div or section.
in order to create the mobile view or responsive design you need the great media queries order, it help you to fit with a regular screen device like(iphone 5, 6 or ipad) but you have to consider that now market is in android. and android phone growing so fast and you can't learn what the resolution is(you won't update your media queries over time right?).
bootstrap
it typeless but it only 12 grid system which you can't manage a navigation with 7 menu, you should modify it by yourself.
flexbox
flexbox is good, you can maintain your container and you don't need to do using float and clear both.
like i said, it depends on your media queries. it's not about position or margin/padding, it's about everything in css.
if your question is only all about alignment, you can start using display flex with justify-content and align-items in parent div or section, this way you won't bother with what is your parent div's width and height.
cheers, might it help to understand :)
Position is not better for responsive design. It is useful but not recommended to use in place of margin/padding.
For example when you use position:absolute; on an element it takes that element out of normal content flow and adjusts its position only according to it's relative positioned parent element. If you use it too often, it is gonna create problems for you.
And responsive design is about using float
In short position is not to be substituted formargin/padding.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Please list CSS bugs/issues you encounter and how to solve them or a link to a site that solves them.
Please vote on what bugs you think people will encounter the most.
Thanks!
The Internet Explorer box model bug.
Double Margin Bug (< IE7)
IE6 doesn't support min-height.
You can use conditional comments to set height, which IE6 treats as a min-height.
Or you can use the child selector in CSS, which IE6 can't read, to reinstate height: auto on everything but IE6.
.myDiv {
height: 100px;
min-height: 100px;
}
.parentElement > .myDiv {
height: auto;
}
Using techniques like this can be problematic, but all popular modern browsers work in such a way that it's a valid technique.
Almost every HTML/CSS bug that you will encounter will be in Internet Explorer. IE6 has a lot of them, IE7 a bit fewer and IE8 subtantially fewer.
Having a proper doctype is a must. Without it the page is rendered in quirks mode, and especially for IE that is bad. It renders the page more or less as IE5 would, with the box model bug and everything.
Here are some common IE bugs:
Making the content of each element at least one character high. (Can be fixed using overflow.)
Expanding each element to contain it's children even it it's floating elements. (Can be fixed using overflow.)
Elements that are not positioned but has layout gets a z-index, although they shouldn't. (Can be fixed by making it positioned and give it a specific z-index, and do the same for all elements on the same level that needs it.)
Margins are not collapsed correctly. (Use padding instead if possible.)
Vanishing floating elements. (Give them a specific size.)
lots more... (including suggestions for fixes)
The most stable fix for most of the bugs is to rearrange the layout to avoid them, or to specify stricter styles (e.g. a specific size).
Chalk another one up for IE6:
DropDownList and DIV overlapping problem, with screen shots. The iframe fix is mentioned in the article. I'm not sure if there are CSS bugs that have consistent buggy behavior across all browsers.
here a link that list all IE known bugs and how to fix it:
PositionsEverything.net
Rumor has it that IE8 will not allow you to center elements with text-align: center;, only the text inside elements themselves. Instead, you must use margin: 0 auto;. If this is in fact the case, nearly all of the interwebs will implode.