Why does IE display a vertical scrollbar with this 100% height content? - html

I have a Silverlight video player that I want to display in a "100% browser width/height" mode (i.e. not fullscreen, but filling up the entire browser display area).
Regular player: http://play.nimbushd.com/lfu53b5
Fullscreen version: http://play.nimbushd.com/lfu53b5/fullscreen
I have tried nearly every node in the DOM and set width/height to 100%, with margin: 0px, padding: 0px. Seems to work great in Firefox. Why, then, does IE display a vertical scrollbar with a little whitespace at the bottom?
Edit: Since this issue is fixed, the short explanation: A 100% height/width Silverlight control within an ASP.NET <form> tag spills over just a bit in IE because of the form tag.

This behavior is caused by inline elements within the <form> - inline elements always render a line-height worth of pixels. Any of the following CSS rules will fix it:
form { font-size: 0; }
or
form * { display: block; }
Alternatively, you could try to get rid of all inline descendants of <form> (this includes text nodes) - but I'm not sure it would actually work (not tested). Plus it would render your markup hard to maintain (you'd need to strip all newlines and such... could be done during deployment, but I think this is taking it too far).

You need this this styling in you html:
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {margin: 0px}
</style>
Note that this applies a style to both html and body to enforce the height of html element to the viewport height and therefore also the body.

Related

Why does JSFiddle show scrollbars when setting <html> and <body> to 100%

Why does JSFiddle (and also the other JS playgrounds I tried) do present Scrollbars when setting the width and height style of body and html element to 100%? A simple example on JSFiddle. This wouldn't happen on a "pure" site.
Is there a way to solve this without overflow hidden? I need this to present a specific problem where that matters. Do you know of any alternatives where this works correctly?
Most browsers add a margin to the document by default, which causes the overflow at 100%;
Add this style:
html, body {
margin: 0;
}

Footer tag defies assigned behavior

The basic layout is
<body>
<div class="wrapper">
<nav></nav>
<myContent></myContent>
</div>
</body>
<footer></footer>
Where the footer should drop below the body and not be affected by the CSS of the body or its children.
I aim for the footer to be at the bottom of the page no matter how much or how little content the body contains. This CSS should do the trick:
body, html {
height: 100vh;
}
.wrapper {
min-height: 96vh;
position: relative;
}
footer {
width: 100%;
height: 4vh;
position: relative;
bottom: 0;
font-size: .75em;
}
On inspection in my browser, the footer is contained within the body tag. This makes no sense. In addition, the footer shows its width to be the same as the viewport but does not reflect that in the demo model. Instead its left border is on the left side of the page and has about 10% vw worth of whitepace to the right. Setting backround-color: yellow confirms this. And finally, the position fails to go to the bottom unless <myContent> pushes it below the screen's view.
What's wrong with this set up?
In HTML5, most everything that is not specifically in a <head> or <body> element, whether you actually declare it so or not, gets assigned to whichever is appropriate. If the necessary element doesn't exist, it's created.
As per the HTML5 spec, <html>, <head>, and <body> are optional. Most browsers work by creating missing elements as necessary. (In my experience, mostly noticed with tables and <thead> and <tbody>.)
Note that the code you see by using the browser's inspector is usually the code that the browser is working with after "fixing" what it got from the server.
In HTML, the body tag encloses the visible elements of the page. HTML has a HEAD element, but that element is not for visible content, it is for non-visible elements such as links to stylesheets, etc. Your FOOTER element rightly belongs in the BODY element.
footer header and other specific semantic tag must be enclosed to body => http://www.w3schools.com/html/html5_semantic_elements.asp
The problem is, that having elements outside of the body is not valid HTML. Modern browsers will correct for this and move this elements inside.
Thanks for the above notes regarding footer/body placement. Last I read one could place the footer either inside or outside the body, but your comments have been noted.
My footer was misbehaving because the inspector zoom on the index page was changed, but not for any other pages. I don't how that happened, but resetting put it where it needed to be.

Can I drop the css #wrapper and shift styles to the html tag and the body tag?

Can I drop the css #wrapper and shift styles up a level to the html tag and the body tag for a fixed width, centered layout?
html {
background-color: lightgrey;
text-align: center;
}
body {
margin: 0 auto;
width: 800px;
background-color: white;
display: block;
}
It seems to be working perfectly well on Firefox, Chrome and IE7+. What are the potential drawbacks?
There is nothing wrong with using the <body> as a wrapper except if you're tying to support IE 7 .. due to a peculiar zoom "bug" ..
When a margin or width is applied to the body and the user zooms, IE7 incorrectly treats the left edge of the body as the edge of the viewport. This shift bumps content on the right hand side of the page outside of the screen.
I don't see any drawbacks .. only benefits. It's now easier for you to override styles on html or body on other pages by adding a class to them. I guess it would be a drawback if you didn't want to be able to do that (or if you wanted to make it harder).
I'd also advocate for not using IDs in stylesheets at all .. and even elements (i.e. stick to classes and pseudo-classes). This makes styles for elements easier to update by simply adding and dropping other classes. Using html and body is probably okay, though, since there is only ever one of each of those.

How do I make a header that remains in the top at all times?

I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test

Unknown black area on my homepage

There is an horizontal scroll bar on my homepage only (http://balloonup.com) and a black border appears on the right?
How is it possible? Thank you for you help
Here is the new solution. Add the inline style float:none to the highlighted element.
in oldcount.css
.home_count {
display: block;
margin: 0 auto;
width: 420px;
}
remove the width
The black "border" is actually the background of your page (#28292B, defined in stylehome.css for the HTML tag). Your problem is that the width of the <BODY> only depends on the window size, not on the content of the elements contained within. You can force the to the minimum width of the page using:
body { min-width: 930px; }
Alternatively, if you want IE6 / Opera 6 support (they don't support min-width) you need to add a dummy <DIV> to force the page width. You can use this as the very first <DIV> of your document:
<div style="position:absolute; top:0; left:0; width:930px; height:1px"></div>
However, there is another problem that stretches your content more than needed and this is caused by that questions counter on the right side. You can fix that by removing that "width" property from the .home_count rule as it's useless.
You may also revise that double .home_count .comma rule as this seems like an error to me.
Anyway, by applying those two modifications described above your page looks fine on FF4 whatever window size (except for the "Log in" button covering the phone number, but that's out of the scope of this question).
In reset-fonts-grids.css, find all the instances of float:right and replace them with float:none.
Try using this:
body{
margin-right:-50px;
}