Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}
Related
Well this is an odd behaviour.
I'm coding the frontend of a metrics app that must be viewed in a large tv.
I use Html, Js and Css (bootstrap 4).
It's for general public so we must hide browser tabs, etc..
Whenever I set the browser to go fullscreen, a big white row appears at the bottom of the page. Please see attached picture.
The odd part is that there isn't any element there. It's like the viewport just gets bigger and forgets to cover the bottom with stuff.
Is this a known issue?
How to avoid this and cover on fullscreen?
I'ver tried auto, cover, 100% height, etc..
I found the solution right after posting my question.
html,body
{
min-height:100%;
}
The thing is that if you apply height only to body, it will seek for the parent (html) and found that the size is the same as before so both must have the property in order to get the 100% of the height.
I've been battling with this simple issue for a while and I'm looking for some help...
I'm trying to make a full width colour banner that spans the full width of the page, but doesn't in any way affect the browser viewport sizing. I want it to be visible to human eyes, but I don't want it to affect the size/location of the browser's start view or scrolling behavior... just like it's not really there.
I also want to be able to place the banner in-line in the HTML.
Here is my test page: http://www.tanatu.com/widthtest
The Green Banner works perfectly, but it's y-location is defined in CSS (which is a pain)
The Pink Banner is my best guess so far, and works as intended on Chrome, but not on Safari on iOS, where the viewport is skewed to one side
Safari iOS Positioning Issue
Correct Positioning
I've been playing with this for months so any help would be MASSIVELY appreciated! :0)
Thanks!
Because you are trying to break out of your parent container that is where your challenge is. You can do this a few ways but I think the easiest without completely changing your markup would be to use a combination of viewport width units and calc()
If you change these attributes on #widthtest4 it should work:
#widthtest4 {
width: 100vw;
margin-left: calc(-50vw + 426px);
}
I’m making my first full responsive site and I have run into an issue. The site seems to be working as intended in firefox and explorer. The browsers that are giving me issues are chrome and safari.
On the bio/landing page (http://designerdsite.com/new/) toward the bottom of the page are two sections one titled “I Got Skills”, the other titled “and they love me for them”. When I load the page (no matter what size the browser width is) it loads correctly however after the browser width is shrunk and then reopened the layout repositions. In the “skills” section the div on the right side is falling below the div on the left. In the setion “they love me” the text is falling below the pictures. It seems for some reason the width on the container div is not being understood. Perhaps its something else. I am really not sure what is going on here and would very much appreciate any advice anyone has. Thank you!!
I discovered a similiar issue on my site. As far as I could figure this out, it seems that Chrome/ Webkit has a problem with the correct (re-)positioning of floated elements.
So there are 2 (maybe more) options:
1. You may use Javascript to force the Browser to re-render (not reload!!!) these elements (e.g. by changing the display property to none and back to block)
2. Use another positioning variant like 'inline-block' or 'table-cell'
Why don't you use twitter bootstrap that will make your life really easy.
it seems like you used media-query for your site right???...anyway so iguess you know the reason....for example lets assume your last media-query max width was defined as 600px ...then it will work fine upto 600px and below(not far)....when your browser is resized to width:480px (for ex.) then your design like font-size,padding etc are getting very large to fit two divs side by side....so if you want to keep your design intact for microscopic width then lets have one more media query definig that limit max-width:480px;
for example
.fonts{
font-size:18px;
}
#media screen and (max-width:480px){
.fonts{
font-size:10px;
}
}
Seems like an issue with all the percentage widths. I know WebKit can have issues with nested and rounded percentages etc, so when the page is resized both the widths on the images and quotes, as well as padding on the parent element are recalculated.
You'll see if you remove the padding: 0 5% on the max-width class, the problem no longer occurs.
Try wrapping the quotes in a 100% width div:
<div class="quote-wrapper" style="width: 100%;">
<div class="reference clear-both">
<img src="images/monica.jpg" alt="Monica" class="reference-pic">
</div>
<div class="quote">
<p><em>“Paul is the most committed hard working person I've had the pleasure to supervise. If he was unfamiliar with something he did the research to inform himself and others. Paul is one of those rare breed of people who comes to a supervisor with options not just problems.”</em></p>
<p>Monica Luchak, Former Director of Creative Services, BoardSource</p>
</div>
</div>
It has to do with how browsers compute percentages. A quick fix for that is to set a max-width for the left container:
#skills-left {
float: right;
width: 47%;
max-width:411px;
}
I am quite some way through a pretty much CSS only solution to make a mobile site for our e-commerce site. It's actually going quite well, apart from the fact that the x-axis consistently has a margin that shouldn't be there - I have put it in the CSS that width is 100% for most properties.
The only thing that has worked in visual practice (it made the y-scrolling really stuttery) was the addition of:
html
{
overflow-x:hidden;
}
So although it looked great and was exactly what I wanted I couldn't get the scrolling to be fixed, which is pointless for a mobile site.
On top of that I also added this to the page to detect screensize:
<meta name="viewport" content="width=device-width,initial-scale=1" />
I think that somewhere the media query is causing havoc:
#media screen and (max-width: 480px) {
Because it is the only place that specifies the 480px aspect of anything, and that's exactly where the margins continue to. So is it something I'm doing wrong here?
In hindsight I'm not entirely sure where I got the 480px from - think it was a copy and paste job!
Other things I have tried were removing the absolute positioning from a lot of elements, making sure everything has width of auto and displaying in a block.
I'm out of ideas and just want everything to be like the overflow-x solution!
Thanks in advance.
As a rule, you shouldn't have to specify width: 100% on anything.
Chances are you have some padding or something on one of those elements causing it to be > 100%. All display: block elements will fill the width by default, you don't need to specify that.
It's not always the padding either, margin-right has caught me out enough times because you can't actually see it but it's there, pushing out the content
My guess is that a padding causes your element to be larger than 100%. If you want to avoid this, you can try applying box-sizing : border-box; to the affected element. Width and height will then include padding so you will actually get 100% ( or X pixels ) of width regardless of the padding and size of border you set.
Here is my site:
http://smartpeopletalkfast.co.uk/ppp/home-page.html
I want the input forms to be the same height as the buttons to their right. I've done this with a min-height value so the page would still be usable if the text size was set to greater than this height.
The problem is that IE6 doesn't recognize min-height. I could set a fixed height, but I'm worried about users resizing the text beyond this. As it's only a cosmetic issue, I'm tempted just to leave this.
Any suggestions?
Thanks
If the issue is indeed just getting min-height working in IE6, use the Min-Height Fast Hack:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
It's been around for a long time, so it's easily recognizable for anybody maintaining your CSS in the future.
In Internet Explorer 6, height is treated as min-height and min-height is not supported.
So you can write a rule which targets only IE6 to fix this. Let's say that you have the following:
#navigation .nav-menu-item {
min-height:50px;
}
In order to have the same effect in IE6 you could add a second rule which only IE6 will recognize. I tend to use the star HTML hack:
#navigation .nav-menu-item {
min-height:50px;
}
* html #navigation .nav-menu-item { /* for IE6 */
height:50px;
}
You can read more here.
Allow me to offer a different approach. This is your goal, as stated:
I want the input forms to be the same
height as the buttons to their right.
Plus, there is a condition of allowing for text resizing, as stated:
still be usable if the text size was
set to greater than this height
Knowing that, my suggestion is to base the height on EMs. Use EMs to define the container height of the input and the button, then set the heights of the input and button to be 100%. This way, as the user resets their font size (from smallest to largest), the container will grow and shrink, and the input / button will grow and shrink with them.
I've mocked up a simple example at the following url: http://jsbin.com/oguze5/2/edit
Things will need to be changed for styling purposes, but the general idea / concept is pretty sound.
Thanks for your post thirtydot. Ive seen that solution around but it didnt work for me, it set a fixed height non a minimum one.
Ive done it with the solution below and loaded the CSS for IE6 only for good measure. It works on the computer ive tested it on, I just hope it works for all IE6 computers:
http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/
Thanks