my border is moving when you have the download file ?tab? open on chrome (haven't tested it with any other browser). This completely destroys the look of my website, the text is still in the same position but the border and background moves up a bit.... I have tried every position but it didn't work... I'm really annoyed at this problem, any help would be appreciated.
here is the css code
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 11%;
top: 110px;
right: 5px;
left: 5px;
}
This is simply how Chrome works when you start a download. You can work around this with css, but please provide us with some code or a demo with what you've already tried.
A quick thought:
The first thing that comes to mind is to not use percentage for your height property, since it takes 11% of the current height, which depletes when you get the download bar in your screen, since the download bar takes up space of your screen.
If you give the class a fixed height, for example 100 pixels, you will see the class won't decrease in height.
So the code will be:
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 100px; /* just an example, does not need to be 100px */
top: 110px;
right: 5px;
left: 5px;
}
Related
I have a site I am building and I'd like the content to be in a div with a border, and I'd like that div's border to be 20 px away from all edges no matter what is going on with the sizing of the window. I have been trying to use right: left: right-margin: and left-margin: with little success. Here is the css code as it currently is:
#content_div {
border-radius: 15px;
border: 2px solid #E07A1A;
padding: 20px;
color: LightGray;
font-family: var(--global-font-family);
font-size: 1.5rem;
position: absolute;
top: 130px;
left: 20px;
right: -20px;
margin-top: 0px;
margin-left: 0px;
width: 100%;
height: 90%;
}
This is the result:
The top border is behaving because I hard coded the position for it at 130 px, which honestly, I am fine with. The left: attribute seems to be working at keeping the border 20 px away from the left edge of the browser. The right: not so much.
The bottom just disappears off the page (actually I gave up trying to get it to work and removed bottom: and margin-bottom from the code for now).
Any suggestions would be appreciated :)
In response to the comment below, having just top, bottom, right, and left and nothing else results in the left and right being glues to the browser's edge, and the bottom glued to the bottom of the text, like so:
I'm currently trying to make a new design for my website. I got to this point, but I cannot find out how to remove the blank space to the right of the picture (slide the webpage to the right and you see it, a huge blank space).
Here is the JSFiddle: https://jsfiddle.net/yscu95hb/1/
And here is part of the code that I think I have to change.
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
}
.images {
margin: auto;
position: relative;
width: calc(100vw - 260px);
align-content: center;
}
.images img {
max-height: calc(100vh - 35px);
max-width: 100%;
position: absolute;
z-index: 990;
}
Can anyone help me?
Thank you.
-- edit --
I already posted the code that shows the image but I cannot make it to center. Any suggestions?
the reason you see the "white" space on the right side is the css you are applying to your #conteudo element.
This is your css for the element:
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
width: 100vw;
}
there are multiple ways to fix this. one way would be to remove the margin attribute or change the width to something lower than 100vw.
What you are doing is saying the element should be as wide as the browser window (100% of the window width) and then also saying that outside that width it should have more margin (in your case 15px on the right and 260px on the left), and that is "streching the page", causing the total widht to be larger than window width.
Add Eric Meyers resets to the top of your css file. It removes all styling that the browser automatically includes such as margin and padding. It seems like alot and most of it will go unused, but its nice to have all of it just in case.
Its good practice to have a set of resets at the beginning of every webpage and from my experience this one is the best.
http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form
I was trying to install this theme on my blog and I noticed a little problem - the avatars in the comment section are not displaying in full, they're cut off as well as the container. I've edited the codes a hundred times but I just can't figure out what the problem is. Help would be much appreciated!
Use your developer toolbar (Chrome) and inspect the image. If you don't see anything wrong with the image, work up the DOM until you see the problem. Check their widths, heights, paddings, margins, and "top" and "left" CSS attributes.
This element <div class="avatar-image-container vcard"> has max-height: 36px which is too small.
The image element itself has width and height attributes of 35x35 even though the image is 45x45.
You're restricting the height, that's why it's cutoff.
Comment out the height rules like this:
#comments-block .avatar-image-container {
left: -41px;
width: 48px;
/* height: 48px; */
margin-top: 25px;
}
.comments .avatar-image-container {
float: left;
/* max-height: 36px; */
overflow: hidden;
width: 36px;
}
#comments-block .avatar-image-container {
/* height: 37px; */
left: -45px;
position: absolute;
width: 37px;
}
Turning off those 3 rules shows the image with dimensions that you've defined in the rule #comments-block .avatar-image-container img.
Remove these three and it should do the trick. I think padding is the main culprit here along with other things.
#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}
1) Remove padding from
2) Remove max-height from .avatar-image-container
3) You're done. Play with settings to get desired results.
.comments .avatar-image-container has max-height:36px. Remove it or your avatars will be chop off since this element has overflow:hidden.
The image also has height="35" inline, which is not affecting on chrome, but can be removed.
I have two div-elements, the top one has the height of 40% and the other one 60%.
In my example I have positioned the first one to top: 0; and the second one to bottom: 0;. My issue is that I get a 1px distance between them in Webkit, sometimes!
I have created a jsFiddle that recreates the issue in Webkit (Safari and Chrome, but works fine in Firefox.)
http://jsfiddle.net/bVxDA/ (Resize the window to see the bug in action)
This is the code I'm using.
HTML
<div id="cover-top"></div>
<div id="cover-bottom"></div>
CSS
html, body {
background: red;
height: 100%;
}
#cover-top,
#cover-bottom {
background: #000;
position: absolute;
width: 100%;
}
#cover-top {
height: 40%;
top: 0;
}
#cover-bottom {
height: 60%;
bottom: 0;
}
I would be fine with a solution that uses JavaScript or jQuery.
If the height of html, body height is an odd number there is a 1px line "remainder".
Webkit can't divide 1px and doesn't try.
See: http://jsfiddle.net/iambriansreed/gPu3Y/
You could make the 1px line disappear if you set the following:
#cover-bottom {
height: auto;
top: 40%;
bottom: 0;
}
this happens every time 40% isn't a whole number. lets assume your page is 98px height, so we get:
40% = 39,2px
60% = 58,8px
since we can't draw "half" pixels, the first div gets a height of 39px and the second one gets 58px. also, the second one is drawn 40px from above because both divs can't "overlap" (remember: the first one is 39,2px heigh, so we can't start drawing at 39px - there would be 0.2px overlapping) - and so we end up with this very weird "gap" between them.
just change last rule in
#cover-bottom {
top: 40%;
bottom: 0;
}
so it doesn't matters if the height of the <html> element is odd
http://jsfiddle.net/bVxDA/4/ (I changed background colour just to check the fill behaviour)
I am trying to add some extra padding to the right side of a scrollbar, but when I zoom in the browser window (with ctrl+= and ctrl+-) the actual pixel width of the padding grows and shrinks accordingly (as if I had specified it in ems). I would like the right property for the container to be exactly 8 pixels, not 0.5ems (8/16=0.5).
Is there a way to set the top, bottom, left, and right css properties to a fixed value that doesn't change depending on the font size (I don't mind using JavaScript if I have to)?
Here's my CSS:
#page-bg
{
background-color: #FFFFFF;
padding: 0px;
border-width: 2px;
border-radius: 2em;
position: absolute;
top: 1em;
left: 10%;
right: 10%;
bottom: 0px;
overflow: hidden;
z-index: 0;
}
#page-content
{
overflow: scroll;
position: absolute;
top: 8px; /* these are what I'm talking about */
left: 8px;
right: 8px;
bottom: 8px;
z-index: 1;
}
To keep the "padding width" fixed even when you zoom, you need to find out the zoom level using JavaScript.
It's sort of possible, but it's totally not worth it because it's unreliable, see: How to detect page zoom level in all modern browsers?
Maybe there's a better way to achieve the same thing - you should post a jsFiddle demo of what you have so far.
Most browsers appear to virtually change the resolution of the page; this change is out of the control of javascript and css. The short answer is you can't and if you find one browser that does work you have to decide between standards and consistency and how it looks on one browser. Html, css and javascript arnt made for this type of control