take a look at this:
Here is my css:
<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
margin: 0px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>
Why are margins not working?
I want the "backups_header" to be flush with the top of the backups.
And they are, but the font probably doesn't fill its entire height. There is a bit of spacing around a the letters that make it look like a margin of about two pixels. If you select it, the highlight will reveil the actual line height.
There is no proper way to fix this, because it can be different for each font and even slightly differ on each machine (especially different OS'es), but your best bet would be to set a line-height and tweak it until it is just right.
The main reason is that you are again changing the margins below. write margin:0px above!
`<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
margin: 0px;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>`
Related
my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing
here is css:
.card_main {
border: 1px solid black;
margin-top: 30px;
border-radius: 5px;
height: 900px;
background: #ffffff;
width: 100%;
}
.blog_content__text {
width: 95%;
height: 320px;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
.blog_heading {
font-size: 24px;
color: black;
}
.blog_details {
font-size: 16px;
color: black;
opacity: 0.7;
margin-top: 20px;
}
my html
<div className="card_main">
<div className="blog_content__text">
<h1 className="blog_heading">{data.blog_title}</h1>
<p className="blog_details">{data.blog_body}</p>
</div>
<div/>
how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css
When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;
If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.
.blog_content__text {
width: 95%;
height: 320px;
overflow-y:auto;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
remove the height: 320px;
if you must, use it as min-height: 320px;
try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.
You can also make use of the following property if you really want to set the height:
height: min-content;
Please bear with me as I'm new to IE11 debugging.
For the info, this bug is only happening in IE11, browsers like Chrome or FireFox do not have this issue
Currently part of my webpage is displaying that
This is ok.
However, when choosing through a different property, and clicking on one of the property this is what I have
From what I can see, the CSS is not used/read correctly by IE11.
This is my CSS
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
I've tried to add an !important on the width in the css but IE11 refuses to take into account and still gives me the wrong width.
.floor-details-item {
min-height: 160px;
width: 100% !important;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
When going through IE11 console when inspecting the element, this is what I have
Funny part is when I change it manually and typing 100% as you can see below, then the width issue is fixed.
Thank you for any insight you may provide.
update :
I have tried the following on the CSS. As this link is saying that IE 11 is not fond of width with !important, I added in the css the following
.floor-details-item {
min-height: 160px;
/*width: 100% !important;*/
/*adding auto and initial*/
width: auto;
width: initial;
But nothing so far.
Try to add min-width: 1px;. It saved my ass many times;-)
After many wrangles plus the help of my colleague, I found where the issue was located.
It was due to the css.
.floor-details {
width: 44%;
margin-left: 5px;
height: 555px;
float: left;
background-color: #FFFFFF;
border-radius: 5px;
border: 1px solid #eeeeee;
border-left: 20px solid #C2EFDF;
overflow-y: auto;
padding: 5px;
//display: flex;
align-items: center;
flex-direction: column;
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
//display: flex;
min-width: 1px;
IE11 does not like the display: flex; as a child. Removing it from the child also mean removing it from the parent as you can see from the code. Once done, the issue is fixed.
I've been looking for solutions everywhere but I can't understand how to separate the text from the iframe. Everything I tried did not work (for example, this answer).
This is a screenshot to have an idea:
this is the HTML (I used it very rarely in my life and never worked with containers before, so I'm sure the error is clearly visible to someone more skilled than me):
<div class="container">
<iframe src="link" width="500px" height="500px" align="left" style="border: 1px solid #ccc" frameborder=0></iframe>
<article>
<font face="calibri" size="30" style="background-color: powderblue;">title</font>
<h4></h4>
<font face="verdana">text</font>
</article>
</div>
This is the CSS (I was testing margin-left: 10px but 10 or 1000px won't change anything):
article {
margin-left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
I think you could solve it by setting position: relative; to your article tag. This way, you could then specify the position offset that you want it to have using the left property instead of using the margin-left property.
I mean:
article {
position: relative;
left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
If this is not exactly what you wanted, I also think that the position property, together with the left, right, top and bottom properties, seem quite suitable for your problem, so I suggest you should take a look of them.
HTML5 does not support those for iframe style, there is no way to set them through style sheet.
When I hover over an area on my testing website, I made it so a border is added. But because that happens, other elements move. I've looked up other posts, and they recommended adding padding, but that doesn't seem to work because it goes over other stuff.
This is where I add the border:
#logo:hover {
border: 2px solid cyan;
}
This is what it was added to:
#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
}
Does anyone know how to help me? Also about the way I asked my question.
#logo {
background-color: black;
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
}
#logo:hover {
border: 2px solid cyan;
}
<div id=logo></div>
Greetings,
TheWombatGuru
You also can use box shadow:
#logo{
box-shadow: inset 0 0 0 1px cyan;
}
#logo:hover {
box-shadow: inset 0 0 0 2px cyan;
}
You may add:
* { box-sizing: border-box;}
to your css sheet or maybe just to your #logo id.
you may find more info about this (for me at least amazing propertie ) here
(and just in case... the code marked applied the property to every html element in your web, which is exactly what I have been doing in my last many projects with absolutely no regret)
You should try adding this to your #logo :
border: 2px solid transparent;
which would make :
#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}
Or using box-sizing: border-box
Hopes it helps !
Cheers !
box-sizing: border-box doesn't really make the 'circle' render correctly with the border in this case - although it is an amazing property. If it were me, I'd change your css to the following:
#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}
and adjust your #logo class margins to
{margin: 0 9px 0 9px;}
a little 'hackier', but I prefer the behaviour
You should add box-sizing: border-box to the pertinent element in your CSS. This will put the padding inside the width of the container.
Here is a codepen to demonstrate: http://codepen.io/himmel/pen/LVPPvg
Alternatively to box-sizing: border-box; you could also use the calc function to subtract a value.
#logo:hover {
width: calc(200px - 4px);
height: calc(200px - 4px);
border: 2px solid cyan;
}
This method might be helpful when you are dealing with percentages, anyway it's a cool trick i situations like this.
Try adding border:1px solid transparent; to non hover element.
Try using position: absolute; because elements with position absolute have no effect on other elements. Make sure that the parent element has a position relative. For example
`
#parent-element {
position:relative;
}
#logo {
position:absolute;
}`
I am trying to create a small donut hold icon - green.
Here is what I tried :
.success-icon {
border: 1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
}
<div class="col-lg-3"><span class="sucess-icon"> </span>greater than or equal to 75%</div>
I couldn't get it to display. I am not sure what is going on.
By default a <span> is display: inline and so height and width do not apply to it.
Set display: inline-block or some other value to which those properties apply.
You also need to make sure you spell your class names consistently or the selector will not match.
.success-icon {
border: 1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
display: inline-block;
}
<div class="col-lg-3"><span class="success-icon"> </span>greater than or equal to 75%</div>
use display:inline-block in the style
.success-icon {
border:1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
display: inline-block;
}
Here are some extra styles to match it to what you were kinda wanting.
.success-icon {
border: 8px #62ae41 solid;
border-radius: 100%;
width: 30px;
height: 30px;
margin: 0 5px 0 0;
display: inline-block;
vertical-align: middle;
}
.col-lg-3{
vertical-align: middle;
}
<div class="col-lg-3"><span class="success-icon"></span>greater than or equal to 75%</div>