Something strange is happening with a margin setting in Firefox, I have a div with an id "wrap" with a top margin of 20px, when a user is logged in a div appears above the wrap div with an id of user_nav I don't want any margin above this div, but Firefox is for some unknown reaslon propagating the top margin I have on the wrap div to the user_nav div above it, it isn't happening in any other browsers.
If I remove the top margin from the wrap div it is removed from both.
I can get rid of it by giving the user_nav div a negative top margin, but that messes up all the other browsers.
div#user_nav {
width: 980px;
margin: 0 auto;
}
div#wrap {
width: 980px;
margin: 20px auto 30px auto;
}
Any ideas about what is happening?
Thanks
Rob Fenwick
It is indeed quirky behaviour - and it appears to be one of the effects of this old bug related to clearing block elements (or one of its many, many duplicates):
https://bugzilla.mozilla.org/show_bug.cgi?id=451791
One way to get around it is getting rid of the <div class="clear"> and using the overflow method of clearing instead (though that's not always possible, e.g. - obviously - if you have content inside the cleared element that will extend outside it):
http://www.quirksmode.org/css/clearing.html
I.e., remove <div class="clear"> from inside user_nav_frame and apply overflow: hidden (and width: 100%) to it in the CSS instead to clear the floats:
div#user_nav_frame {
background-color: #0A4D84;
overflow: hidden;
width: 100%;
}
JSFiddle: http://jsfiddle.net/69aD9/2/
There are counter-hacks too, if this won't work out in your case. See the above bug report.
Related
I have an angular page, home, which is comprised of 2 components and a router-outlet
<div class="home-container">
<header></header>
<sub-header></sub-header>
<router-outlet></router-outlet>
</div>
I want the home-container above to always be, at a minimum, full screen height. The header should show, then the sub-header, then the contents of the router-outlet should always fill up at least the rest of the screen (or more if there's more content of course).
Normally this is easy but it seems the router-outlet is messing it up. Example can be seen http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas , hit run and then click the "Heroes" link to route. In this example I don't want the Heroes div to be taller than the screen, and don't understand why it is.
My styles to accomplish this are. (assume router-outlet is on 'my-page')
html, body {
height: 100%;
}
.home-container {
height: 100%;
}
.my-page {
height: 100%;
}
My expectation here obviously is that home-container is full screen, shows header, shows sub-header, and that my-page then fills in at a minimum the rest of the vertical height.
What is actually happening though, is that there's a scroll bar with available height that appears equal to my header and sub-header.
This plnkr http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas illustrates exactly my meaning. If you click Run and then the link for "Heroes" you will see the router-outlet contents, in this case heroes-list.component, with a green background. I do not understand why the green here is bleeding below the screen when everything is set to 100%
Update I have tried using all manner of different CSS attributes to different levels in this nesting. Including 100vh vs 100%, min-height vs height, and every combination of body/html/home-container/my-page. I have also tried the same with Angular's CSS :host, to the same result of no different
Update2 If I move it out of the element then everything behaves as you'd expect and there's no vertical scroll bar. Something about the router-outlet wrapper adds vertical space somewhere but I cannot figure out where or what is causing it.
Final Update The below answers might be useful for some applications but I ended up just solving it by giving the .my-page a specified height, just doing height: calc(100vh - $headerheight - $subheaderheight) which gets the job done
As far as I understand, 100% on a child will be equal to the size of the parents natural height. If you want to fill the space available, you really should be using flex unless you have a requirement to support IE9 and below.
I would update your Anchors to be contained in a div (or another wrapper)
<h1 class="title">Component Router</h1>
<div>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</div>
<router-outlet></router-outlet>
I would then utilize flexbox to allow the content to expand as required
.hero-list {
background-color: green;
height: 100%;
overflow:auto
}
undefined {
flex: 1;
}
body, html, my-app {
height: 100%;
}
my-app{
display: flex;
flex-flow: column;
}
Plunker to test: http://plnkr.co/edit/yE1KOZMr1pd5jQKlVYIN?p=preview
On chrome i still have scroll bars due to an 8px margin on body - this can easily be removed with CSS for a scroll free full height experience.
There are two causes that make your <body> element taller than 100% of the viewport:
Default margins of the <body> element that come from the browser's built-in styles and usually are 8px. This means that the <body> element will be as tall as the <html> element, but also will have 8px space above it and below it, causing the <html> element to overflow.
The top margin of the <h1> element "falls out" from the container due to margin collapsing. This makes the space above the <body> element equal to the default top margin of <h1> (about 21px instead of 8px).
Setting zero margin to <body> (part of ToTaTaRi's answer) helps you to solve the 1st issue. To solve the second one, you should make the <body> element or (probably better) the .my-app container establish the new Block Formatting Context. The easiest and most cross-browser way for this is setting the container overflow:hidden (other options are display:flow-root, which works for modern Chrome/Firefox, or column-count:1, which works in IE10+ and all modern browsers, you can compare nearly all the options in this live example).
First of all you should reset browser default styles at least somehow like this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Then you could achive what you want without a flex layout if prefered through splitting the page into a header section and main content section with a preset division... So lets say the heading and the links go together into a container div with i.e. a height of 20% and the main content which is at the moment hold in a tag "undefined" gets a height of 80%, if you now set the height of the app container to 100% or 100vh it should work as expected!
EDIT (because the topic is still open...):
Have you tried this css code like explained above, works like charm!?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, my-app {
height: 100%;
height: 100vh;
}
h1 , h1 + div {
height: 10%;
height: 10vh;
}
undefined {
display: block;
background-color: green;
min-height: 80%;
min-height: 80vh;
}
The Margin Issue
I am working with extra large block elements (2000-4000px for both width and height) and most of these elements overflow the window/viewport. That is fine and is the intended effect of my application. However, when I apply margin to the element on all sides, say 40px, it is applied only to the top, left, and bottom sides. The far right edge is flush with the edge of the window after scrolling over. I am looking to have an even margin on all sides of the block element.
The Code
See below or view this jsFiddle of a reduced test case.
<!-- HTML -->
<div></div>
/* CSS */
* {
margin: 0;
padding: 0;
}
div {
background: #000;
height: 3000px;
margin: 40px;
width: 3000px;
}
What I Have Tried
I have tried the above method, which I initially assumed would work, but it didn't. I have also tried applying a padding of 40px to the body element, and removing the margin from the div altogether, but got the same result. The same was true for a containing element with padding applied.
Any help would be greatly appreciated. Thanks!
How about making your div an inline-block element.
Add display:inline-block to your div and that should solve the issue.
See the updated fiddle- DEMO
I've noticed that if I view the page at wider resolution, the content of a section gets aligned to the right, instead of centered.
I use
margin: 0 auto;
width: 998px;
overflow: hidden;
It seems to have this bug, at least in Safari, Firefox and Chrome. I tried disabling overflow: hidden and it gets rid of the bug, but messes up my floats inside the content.
You can see an example at the page live here:
http://autouncle.dk/da/brugte-biler/Kia or http://autouncle.dk/da/brugte-biler/Ford (you have to view it at at least 1500px widescreen to see the bug).
Any ideas on what can cause this bug and what are possible solutions?
About the reason of the problem: this is due to the page-title element of your header:
#header-outer element contains some floated elements but you forgot a clearing, so the offset left of the main section of your site starts where the page-title ends. (you can verify this by hiding page-title element — when you set display: none the page is correctly centered)
So adding
body#basic_page #header-outer {
overflow: hidden;
}
you solve the problem
As a sidenote strongly avoid to put empty div only for clearing purposes: there're cleaner methods that don't require extra markup, like easyclearing
Your solution is removing overflow: hidden
To fix the float bug on the second example you gave try to use 100% of the width:
body#basic_page.brands_controller #content .text_info {
overflow: hidden;
font-size: 12px;
width: 100%; /* new rule */
}
Remove the
overflow:hidden
from div#content and put its contents in an extra <div> in it which has
width:100%;
overflow:hidden;
This resolves the problem for me.
All,
In a centred layout (960px width; margin: 0 auto;), I have two menu bars, one floated to the left & other to the right, underneath both of which I want to float an iframe.
Unfortunately, it does not appear to be floating. The iframe moves to the left most available space of the viewport. Unfortunately, I cannot use absolute positioning due to the layout being centred & having max. width of 960px.
Is there a way to make this happen please?
EDIT:
Further to the comments, for which Im grateful, here is the code.
HTML:
<iframe id="iframing" src="mannequin.html" width="640" height="500" frameborder="0" ></iframe><br />
CSS:
#container {
min-width: 960px;
height: 100%;
background: rgba(255,255,255,0.8);
margin: 0 auto;
position: relative;
} /* The is the main container on body */
#iframing {
float: left;
width: 640px;
height: 500px;
margin: 10px auto 10px;
clear: both;
}
HI all,
Its finally resolved, hurrah! I had set the width to min-width on the main container which was the reason of the iframe extending to the far end. Resolved. And thank you for helping with this. Cheers.
A centered layout and absolute positioning don´t exclude each other but I don´t think you need absolute positioning anyway.
As far as I can understand your question, the first thing I would do is add a clear:both to the iframe.
Does the iframe have a fixed with?
Take a look at this example, it should point you in the right direction: http://jsfiddle.net/WsyCb/
All you need to do to position the iframe within the centered layout is given the container a relative position and move the iframe left by the fixed width of the left content.
Additionally, as far the floats go, you might be able to fix this by selectively clearing the floats. I'm not sure of any other reason why the iframe wouldn't join the flow of the other floated elements. Try making the container overflow:auto.
This is really weird. When this page is viewed in FF, it gets a white stripe on top which is part of body - I know because I use red border technique to see the elements.
Any ideas why?
http://www.codecookery.com/allbestimages/index.php?main_page=home
try adding:
#main-page-body-wrapper{
height: 0px;
}
or set the background color to black. I checked it out in chrome and firefox. Used firebug and the chrome inspect element tool. This is not the body that is creating the white space but the #main-page-body-wrapper element.
The problem is that your #slideshow element is positioned absolutely. This removes it from the normal page flow and therefore your #main-page-body-wrapper is essentially empty and just sitting at the top of the page.
I suggest you avoid absolute positioning unless you're really, really sure you need it. I'd recommend making a few changes. First of all get rid of the absolute positioning:
#slideshow {
height: 541px; /* Height of the slideshow */
position: relative;
/* Remove width, left, top and margins from here */
}
position: relative; in the above block sets the current position as the starting point for any child elements that are absolutely positioned (such as your slideshow images). If this doesn't make sense then check out:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You don't need width: 100% on divs and other block-level elements because that is the default so remove that:
#main-page-body-wrapper {
/* Remove width from here */
text-align: center; /* IE6 centering Part 1 */
}
#main-page-inside-wrapper {
margin: 0 auto;
overflow: hidden;
padding: 10px 0 0;
width: 1000px; /* Width of the slideshow */
text-align: left; /* IE6 centering Part 2 */
}
I don't see why you should need #content-wrapper inside #main-page-inside-wrapper - it doesn't look like it's doing anything. You should try to keep your HTML as simple as possible to avoid mess and confusion; You only really need 2 divs to do cross-browser centering like you're doing so I'd get rid of #content-wrapper if I were you.
This is by no means a complete solution but should help you get to where you're going. Good luck!
The solution was to set padding/margin to 0.