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.
Related
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. :).
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.
Hi I am building a store on Volusion, and can't figure this problem out. The issue is that in IE, Chrome, Safari, my padding for search_refinement_filters is looking fine, but in Firefox, they are being pushed about 350 px to the right. Check out the Firefox CSS issue here
Please let me know if you can help! I have tried moving search_refinement_filters from the content div to content area, but unfortunately I wasn't able to configure that to work either.
Thanks!
It's due to the left padding and left margin on #search_refinement_filters. You also have some weirdness with the absolute positioning. You may want to add position: relative to #content.
Take a look at Firebug. It is a convenient tool for analyzing code in Firefox.
Just add following styles to your #search_refinement_filters div. Remove others.
#search_refinement_filters {
position: absolute;
top: 100px;
left: 232px;
width: 700px;
}
And then apply position: relative to your #content div.
#content {
position: relative;
}
As 2C-B said #search_refinement_filters has left padding and left margin. These can be removed or overridden to prevent the issue with the styling.
You should definitely get Firebug for Testing purposes if you don't already have it.
Get it here: https://getfirebug.com/
It is an invaluable tool for debugging html, css, and javascript problems.
Hope this helps.
I'm new to responsive images but have figured out how to get my images to scale in Safari, Opera, and Chrome (don't know about IE) with the following CSS:
img {
max-width: 100%;
width: auto;
height: auto;
}
As the screen size is changed, the image scales. In Firefox, the image doesn't scale, unless I change width:auto to width:100%; Then Safari scrunches up the image to nothing upon load or reload; although, clearing cash makes it full size. I'm working on Drupal with the Zen 7.5-dev responsive theme. And I'm keeping my css files in SASS, but this is probably just a CSS issue. Maybe I've missed something on the HTML 5 or CSS3 side of things.
Anyway, I got things to work by overriding the image width a Firefox specific directive like this:
/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
#-moz-document url-prefix() {
img {
width: 100%;
}
}
I don't think I should have to do this, and googling doesn't seem to come across this issue.
This is the default CSS that is used for responsive Images:
img {
max-width: 100%;
height: auto;
width:100%;
}
And this is the indispensable Javascript: Bongard.net
Thanks to David Bongard for the Javascript.
Now add the following to the "if safari" rule of the Script:
for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].style.width = "auto";
}
Safari wants width:auto; the rest of the browsers i tested are happy with width:100%;
This works for me
#-moz-document url-prefix() {
img{
width: 100%;
max-width: 100%;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
img{
max-width: 100%;
}
}
I have similar problem, and found out setting max-width on the wrapper element kinda solves the issue. (Only tested with Firefox 23, but it should works with earlier Firefox too.) See also these JSFiddle:
http://jsfiddle.net/CLUGX/ (demonstrate the issue on Firefox)
http://jsfiddle.net/CLUGX/1/ (uses max-width on wrapper to fix the issue)
http://jsfiddle.net/CLUGX/4/ (demonstrate that responsive sizing works, try resizing inner frame)
Before max-width:
After max-width:
One thing to note, however, if you happens to set padding on wrapper element, it won't be taken into img's width calculation and will cause inconsistent results between Firefox and Safari (http://jsfiddle.net/CLUGX/3/):
Chances are your image is inside a shrink-wrapping container, which then has to compute it's width based on the width of the image. And then the max-width of the image is 100% of the container's width.
If that's what's going on, the CSS spec doesn't actually define the behavior of such markup, where the parent's width depends on the child and the child's width depends on the parent.
See https://bugzilla.mozilla.org/show_bug.cgi?id=823483 for some discussion on the issue.
If you use the width for image in px or gave padding or used display:table instead of display:block for the image, then image responsiveness will not work properly on some/all browsers
Well after trying all sorts of codes and fidles, this simple edition on my css did the trick for me:
img {width: 100%;}
Simply then where you wish your images to resize, define them without adding the "width" parameter (sizing to original from source); and then if you do wish to fix their size, simply add the "width" parameter on SRC style (regular width="" definition won't work). If it's an inline image on your paragraph, simply wrap it in a div and align that div to whatever side you'd like. Reeeeally simple!
It works both for Google, Firefox and IE. Cheers!
I have just had this problem and found a solution: When I set the img max-width in my CSS sheet, nothing happens - the image won't scale. When I set max-width in the page itself - where the image is called, it works in all browsers and on all devices.
No:
img {
max-width: 100%;
height: auto; }
Yes:
<img src ="image.jpg" style="max-width:100%; height:auto;">
If anyone can shed some light of wisdom on this, please do.
I used Kridsada Thanabulpong's jsfiddle but only got it to work when I removed display:table from the div wrapping my image.
I am trying to center page on IE. If I force quirk-mode by adding <!-- some comment --> before DOCTYPE declaration margin: auto; doesn't work properly and page is adjusted to the left. If I remove the comment page is centered, but some other elements are in mess. Could you give me some hints how to solve this?
Setting margin-left: auto and margin-right: auto for the body using CSS usually does the trick.
Forcing quirks mode probably isn't a great idea, though.
Of course, being in quirks mode is not where you want to be so quit doing that. The problem will lie with the rest of the markup but, unless you give us a link or a jsfiddle with the complete markup, anything we say will just be a wild guess.
Does the page work in a modern browser (anything but IE)?
You can use a 50% margin, and a negative left position with half of your element size:
position: relative;
width: 600px;
margin-left: 50%;
left: -300px;