For some reason when you go to the homepage of my site:
bluestarnj.com on chrome or safari the top of the page is cut off. This only occurs on laptops with small browser heights. It renders perfectly fine in firefox. Now if I tell it to position itself 300px from the top, it will render correctly in those browsers, but then in firefox it is pushed too far down the page. CSS code for the class is below:
.main_content {
width: 1000px;
height: 900px;
margin: auto;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(white, grey);
border-style: solid;
border-width: 0.188em;
border-radius: 1.563em;
border-color: red;
display: block;
}
You need to remove margin: auto; from your .main_content div.
When the window is smaller than that div it's still centering itself but at the cost of going off the page. Don't worry about vertical centering on smaller screens, and just do that on desktop once the viewport is bigger than that div.
The problem seems to be with the margin of the "main_content" div. I tested on my laptop and on a huge monitor with chrome and this is what I get:
As you can see, on a smaller screen the top and bottom margins become negative. I found this question: Margin auto goes to negative values where someone mentioned a conflict between top and bottom. This is exactly the case here: you set the top and the bottom as well as the fixed height. For some reason Chrome first sets the top to 50, then tries to adjust the margin (because it's set to auto) so that bottom will be 0. Remove bottom: 0px and it works!
EDIT: but it won't be centered vertically anymore.
Related
need some help with a website I'm working on.
Portrait mode on Android looks like this:
Now, landscape, no css change:
No problem whatsoever. Follow me to the next screenshot illustrating what happens on iOs Safari/Chrome in portrait mode. Everything fine:
Landscape mode goes to "fullscreen" since it's an SE so I figured the screen, being quite small, goes full screen and that still looks fine.
I can scroll through the content no problem. However, when I click a link to go to another page this happens:
The behavior of the page is quite simple: the scrollable content is inside a div which is the rounded one which mustn't move during scrolling. What happens is that the rounded div is set to be 100% height of the screen and when top and bottom navbars appear on iOs, the rounded div won't change its height to adapt to the usable screen part.
body css is as following:
body {
margin: 0;
height: 100%;
overflow: hidden;
-webkit-text-size-adjust: 100%; }
while rounded corners div is managed like this:
.rcorners {
position: absolute;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%-20px;
height: 100%-20px;
background-color: white;
border-radius: 10px;
-moz-box-shadow: 0 0 6px 2px #C0C0C0;
-webkit-box-shadow: 0 0 6px 2px #C0C0C0;
box-shadow: 0 0 6px 2px #C0C0C0;
overflow:hidden; }
Any ideas on how to make the height right everytime the usable screen size changes?
Thank you
So sadly iOS has been notorious for this type of stuff for what seems years. First it was the top address bar, and now it is the browser menu. So you have a couple options. YOu can set a media query for landscape and shorten the height of that container and just have it scroll if you need. Could probably drop font-size too. Or there are a couple options in this article that might help.
You could also try 100vh instead as well. As that will make it the full height of the available viewport which I have seen at times act the way I needed it to vs 100% height.
https://www.eventbrite.com/engineering/mobile-safari-why/
I have problem with margin: auto - vertical centering
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
This work in every modern browser - when the page (viewport) is higher then 300px, its centered vertically, but, when the page(viewport) is lower then 300px stopped it works everywhere except in firefox... In firefox run it good (maybe it is bad functionalitiy, but its logical functionality) in other browsers the top of centered element disappers in the top of viewport.
http://jsfiddle.net/LhHed/2/ Here is god example - when you resize result window, in firefox work it well, in others browsers not. Is posible tu fix it? Or its bad functionality of firefox?
EDIT: live example http://dev8.newlogic.cz
From what I gather, you're wanting the top of the divider to display at the top of the page. This currently isn't happening because you have the position set to top:0; bottom:0;, the top property is conflicted by the bottom property, ultimately positions the divider to the bottom of the page. Simply removing the bottom property prevents the top of the element appearing outside of the viewport:
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
margin: auto;
}
JSFiddle.
I removed the problem in browsers, when i use position: relative to the body element. Now its working in firefox and in other browser too. Live example on http://dev8.newlogic.cz
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
I've got a simple page, and I'm trying to set a border on the bottom of my page's body in CSS like so:
body {
height: 100%;
border-bottom-color: #ad3127;
border-bottom-style: solid;
border-bottom-width: 5px;
}
This works great if I've got enough content to fill the whole window, especially when it needs to scroll: the bar appears at the bottom of the page (not the window. I don't want it to be floating over content or anything like that).
The problem is when there's not enough content to fill up the whole window, the bar just appears at the bottom of whereever the content ends. This sort of makes sense, but it's obviously not what I want.
I've tried something like
html {
height: 100%;
}
Which seems to work in both cases, except when I resize my window it gets mangled (at least in Firefox 4) and in Mobile Safari it renders at the bottom of my viewport (ie kind of just in the middle of my content). So this does not appear to be doing it for me.
There must be a way to solve this (with as little sorcery as possible, please :)).
Instead of height: 100%, use min-height: 100vh:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
Because of box-sizing: border-box, border of the body will be accounted in the body height. The only hack here is for content margins pushing the border below viewport, which is fixed with an arbitrary padding-top value.
Chris Coyier did an interesting article on body borders a while back. Here is the link for reference: http://css-tricks.com/558-body-border/
To do what you want, the most cross browser way would be to create a div that acts like a border, and then give it a fixed position of bottom 0. Something to this effect:
HTML:
<div id="bottom"></div>
CSS:
#bottom {
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
A little bit less hacky way, albiet less compatible with older browsers is to use pseudo elements:
body:after {
content: "";
position: fixed;
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
How to display a div at center top position of the page, which need to be work under all size of monitors using CSS.
Mainly I get issues on IE, where not aligned properly.
For margin: 0px auto;
to work width needs to be provided
style:
div#center
{
width: 300px;
margin: 0px auto;
}
html:
<div id="center">content</div>
CSS
div
{
margin : 0px auto;
}
Are you comparing the rendering in both IE and another browser by switching back and forth? If so, you might be noticing a shift because of the scroll bar. IE reserves the space for the scrollbar, while browsers such as Firefox only show the window scroll when necessary.
div#center
{
width: 300px;
margin: 0px auto;
}
not working on IE...