I have a simple fixed header, that seems to be shifting up when the body is scrolled a slight amount, but only on the homepage (and only on mobile display). Other pages are okay, so I assume it's related to an element being shown/not shown on one instance and not the other.
I can't figure out a fix for the homepage to make it stay fixed.
http://dev.bellavou.co.uk (best to inspect and use responsive design mode to view on mobile).
http://dev.bellavou.co.uk/request-a-consultation/ This shows the header staying fixed when scrolling fine.
Can anyone help identify where the issue lies?
body.fixed-header #header {
position:fixed;
z-index: 100;
width: 100%;
top:0;
}
The problem with height is caused by CSS classes that is triggered below certain point.
And it is caused by additional minimal CSS class that is added to <header> and affects many elements below in DOM structure.
You can see that for example #branding is affected by added minimal CSS class.
By the way, as you can see your header doesn't really have 100% width.
It's because it's CSS:
body.fixed-header.home #header {
width: calc(100% - 15px);
}
Changing above to below fixes the issue.
body.fixed-header.home #header {
width: 100%;
}
You styles are overwritten:
With width: 100%:
In situations like that always remember to check dev tools and track down actual, final, computed CSS styles. :).
Related
I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.
I am trying to make a Asp.net website, The homepage design is a single page portfolio style; by having each or "projects" as 100% height of the view port underneath each other allowing me to use anchor tags. My problem is that when I am using the tag it messes up my css and does not work properly so how can I fix this?
I have tried the following:
/* in CSS*/
html, body{
height:100%;
width:100%;
}
And I have added the height 100% tag to each of the parent divs and or elements of the divs I want to be 100% but still no luck. I am out of options!
I can't post the full code because it is way to long and I am on a different computer to my one with code.
I think I understand what you're asking, but I'm not completely sure, nor am I sure where the DOCTYPE, anchors or ASP.NET come into play.
Here's a demo of a full page document, with a few full screen child divs.
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: auto;
}
div {
width: 100%;
height: 100%;
}
Please keep in mind that percentage heights can become a headache really fast, so you need to understand exactly what you are doing.
Also note, this page is running Normalize.css which fixes browser discrepancies.
*I'm re-posting this question because I only got one response before, and it didn't work. Hopefully someone new will see this and know what to do! *
I'm using IP Net Renderer to view my newly installed forum (http://www.datesphere.com/forum/) in IE7. If you care to take a look, you can see the forum is overflowing its containing element (it's wider than the 960px container I have for my entire site).
I've tried adding overflow:hidden to the .wrapper class as well as width:100% to .tborder per advice received on StackOverflow, but it didn't work.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
If you use IE9/8 and run the Developer toolbar you will notice that the global.css that is being generated is different for IE7 from IE8. Take a look at what is generating that Style Sheet for you and see if you can modify it to make the MIN-WIDTH:930px; or MIN-WIDTH:100%;
Or a second option add somewhere after the glboal.css style sheet a inline-style or on page css or link another style sheet .wrapper { MIN-WIDTH:930px !important; } or .wrapper { MIN-WIDTH:100% !important; } so that it overrides whats generated in the global.css file.
IE7:
.wrapper {
MIN-WIDTH: 970px; MARGIN: auto; WIDTH: 85%; MAX-WIDTH: 1500px
}
IE8:
.wrapper {
MARGIN: auto
}
Change your min-width value for your wrapper class. You can set an static width or set it to 100%.
Remove #wrapper div
And set IE7 specific .tborder {display:inline-table}
I have the following CSS:
#middle {
float: right;
width: 590px;
height: auto !important;
min-height: 100%;
height: 100%;
}
My goal is to get the #middle div to extend all the way to the bottom. This code works perfectly in FF but does not in WebKit browsers. I've figured out that this is due to the float: right property, without floating, this issue doesn't persist
In WebKit browsers, it looks like min-height is being deduced and permanently set on the #middle div. This can be viewed by loading the page with the window contracted and then expanding the window to a larger size.
Here is a demo site of the issue: http://staging.similarblue.com/about/beliefs/
I realize I could use some JS to handle this (on window resize) but I was wondering if there's a pure CSS alternative.
Here is a screenshot of the issue: http://i56.tinypic.com/s49e37.jpg
Thanks!
Two lines up in your style.css file there's a height:auto!important declaration, which is overriding your height:100% declaration. Without that line, your site looks fine!
What you may be looking for is this. It's served me well in the past, hopefully it helps you!
What you could do is make the background div:
position: fixed;
top: 0;
bottom: 0;
And then put the content in a separate div on top of the fixed background. Here's an example: Demo
EDIT: accommodated scroll.
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content