I cannot figure out why my css is creating this funky bottom margin or border I took a little video so you can see it: http://img.zobgib.com/2011-04-25_1317.swf The margin/border doesn't show except when the page is resized to pretty small. My css is pretty standard, and I have not inline styling or JS styling that would cause it. What would cause this weird margin?
Here is my CSS
html {
}
body {
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#drawn {
background: #fff !important;
}
#content > * {
}
#toolcontainer {
left: 0;
right: 0;
height: 50px;
min-width: 940px;
}
#toolcontainer > * {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-left: 10px;
}
#slidescontainer {
position: absolute;
left: 0;
bottom: 0;
top: 52px;
width: 130px;
min-height: 658px;
}
#newslide {
background: url(/static/img/new_slide.png) !important;
border: 1px solid #FFFFFF;
}
#slidescontainer canvas {
position: relative;
}
#slidescontainer > * {
height: 80px;
width: 106px;
margin: 10px;
background: #ffffff;
border: 1px solid #000;
}
#container {
position: absolute;
min-height:608px;
min-width: 810px;
/* height: 608px;
width: 810px;*/
background-color: #fff;
background-image: none;
top: 52px;
bottom: 0;
right: 0px;
left: 132px;
background: #d5d5d5;
border: 10px solid #000;
}
#container canvas {
/* left: 50%;
margin-left: -405px;
top: 50%;
margin-top: -304px;*/
}
#debug {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
overflow: auto;
border: 1px solid black;
background: black;
color: #34e338;
z-index: 50;
}
canvas {
position: absolute;
}
#colorSelector {
position: relative;
width: 46px;
height: 46px;
}
#colorSelector div {
position: absolute;
border: 1px solid #FFFFFF;
background: #000000;
width: 46px;
height: 46px;
}
You are using a lot of browser-specific CSS, and it looks like you were accessing it in an unsupported browser (Firefox doesn't support Microsoft markup, for obvious reasons). I'd recommend trying CSS3 selectors and rules instead of the browser-specific rules.
Try adding style = "overflow:hidden" to your html tag like this:
<html xmlns="http://www.w3.org/1999/xhtml" style = "overflow:hidden">
If it is an issue with page height, that may clear it up
I fixed it by changing the min-height in #container to 638px.
Related
First of all Thank you for the solutions,
I want to create a progress bordered div using HTML and CSS. Similar to the attached image.
I need it with rounded borders.
:root {
--count: 60%;
}
body {
display: flex;
min-height: 100vh;
margin: 0;
}
div {
margin: auto;
width: 200px;
height: 160px;
border-radius: 20px;
position: relative;
border: 1px solid #ddd;
background-color: white;
}
div::after {
content: '';
display: block;
position: absolute;
left: -3px;
top: -3px;
right: -3px;
bottom: -3px;
background-color: transparent;
background-image: conic-gradient(orange, orange var(--count), transparent var(--count));
z-index: -100;
border-radius: 21.5px;
}
<div></div>
I need this button to stick at the bottom right of the screen, but as you can see there's something wrong with my code. What am I missing?
Can you help?
Thanks.
html {
background: #ccc;
}
.chat {
width: 55px;
height: 55px;
position: sticky;
bottom: 20px;
right: 20px;
background: red;
border: 0;
}
<button class="chat"></button>
You can reach it with using float: right;.
html {
background: #ccc;
}
.chat {
width: 55px;
height: 55px;
position: sticky;
bottom: 20px;
right: 20px;
background: red;
border: 0;
float: right;
}
<button class="chat"></button>
Try this:
.chat {
width: 55px;
height: 55px;
position: fixed;
bottom: 20px;
left: 20px;
background: red;
border: 0;
}
position: fixed is key element.
Hi guys i have one css code working on pure css, but i need to pass then for styled-components or material ui, and work too, anyone can help me ?
position: relative;
width: 200px;
height: 50px;
background-color: blue;
border-radius: 9999px 0 0 9999px;
margin: 30px;
text-align: center;
color: #fff;
padding-top: 10px;
}
#top,
#bottom {
position: absolute;
height: 30px;
width: 30px;
right: 0;
overflow: hidden;
}
#top {
top: -30px;
}
#bottom {
bottom: -30px;
}
#top::before,
#bottom::before {
content: "";
position: absolute;
right: 0;
height: 200%;
width: 200%;
border-radius: 100%;
box-shadow: 10px 10px 5px 100px blue;
z-index: -1;
}
#top::before {
top: -100%;
}
This code is used for create a curve on css, but i need to do the same in the styled component.
I try do to the same using makeStyles of material ui but i can't too.
I am having the following error when using
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: 100%;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
}
the issue is that the orange panels goes outside the screen. How can I fix this?Don't want to use fixed widths as it should be responsive
with width: inherit; to the orange block my example is working
body {
background-color: #ccc;
}
.container {
position: relative;
width: 300px;
background-color: #fff;
overflow: hidden;
padding: 50px 15px;
}
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: inherit;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
padding: 15px;
}
<div class="container">
<h1>Osloskolen</h1>
<div class="high-secuity">Your message</div>
</div>
I am looking for a way of creating a "Spiral" in CSS.
Here is an image to make it a bit more clear what I am trying to achieve:
So a partial circle with an outline that gets bigger.
Ideally I want to be able to set the length of the Spiral. (from (0) to 360°)
Also it would be nice to place a cricle at the end (just like in my sample)
Here is a codesnippet of what I came up so far.
* {margin: 0; padding: 0;}
div {
box-sizing: border-box;
width: 200px; height: 200px;
margin: 0 auto;
background: #fff;
border-top: 30px solid #fd0;
border-right: 40px solid #fa0;
border-bottom: 60px solid #f50;
border-left: 0 solid blue;
border-radius: 50%;
position: relative;
}
div::after { /* kreis */
content: "";
position: absolute; top: 80%; left: 8%;
width: 90px; height: 90px;
background: red;
border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
content: "";
position: absolute; top: 50%; left: 0;
width: 50px; height: 100%;
background-color: inherit;
}
<div></div>
I would also accept an svg way of doing this.
this what i came up with some tweaking Css and html i guess it similar to the image DEMO Not tested on IE not sure whether responsive it is
.spiral{
background-color:black;
width: 100px;
height:100px;
border-radius:50%;
}
.spiral:before{
content: '';
width: 27px;
height: 43px;
background-color: white;
position: absolute;
border-top-right-radius: 144px;
border-bottom-left-radius: 61px;
border-bottom-right-radius: 88px;
left: 53px;
top: 25px;
}
.spiral:after{
content: '';
width: 68px;
height: 52px;
background-color: white;
position: absolute;
left: 4px;
top: -11px;
transform: rotateZ(200deg);
}
<div class="spiral"></div>