I'm trying to create a small navigation menu, however IE seems to render it differently, completely messing it up.
Here's what html/css I'm using (jsfiddle renders it correctly, as does chrome):
http://jsfiddle.net/Seytonic/gmp975sm
However IE renders it like this (I omitted the bootstrap in the jsfiddle):
EDIT: I'm using IE 11
This is one reason why it's important to declare a width on floated elements. If you don't, the box size may render differently across browsers.
Try adding width: 330px to the #navigation container.
Revised Demo 1
The 330px is just for example. You can use relative units, like percentages or ems, as well.
Again, to avoid unpredictable browser behavior, also specify a width for the two floated child elements:
#navbar li { width: 49.5%; }
Then adjust the spacing between the boxes on the top row:
#projects { margin-left: .5%; }
#about { margin-right: .5%; }
Lastly, width by default only includes the content box. Make it also account for padding and border with box-sizing: border-box:
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit;}
Revised Demo 2
Related
Scenario:
In HTML, I have 2 element (top bar and images). The top bar need to be
at position:fixed (which will break the flow, I understand that). And
the 2nd element has margin-top to push down the image after the
"top bar". This has no issue until I minimised my browser width, the
content in the "top bar" push the container height and overlap the 2nd
element, which is the image. And this look ugly.
Anyway to have the 2nd element in flow with the 1st element, so that no matter how I minimised my browser width, the 2nd element is
smart enough to push down.
Code: CSS
.TopBar { /* 1st Element */
background-color: #000000;
opacity: 0.5;
width: 100%;
position:fixed;
padding:10px;
}
.TopBar > div {
color:white;
}
.carousel { /* 2nd Element */
display: inline-block;
margin-top:73px;
}
.carousel_img {
width: 100%;
}
Problem:
As you already know, you can't force position:fixed to flow, so there isn't an answer to your question to do it the way you want.
But the way you describe the problem, it's about supporting different browser sizes. If that's the case, then it sounds to me as if media queries are the answer to your problem.
CSS supports #media { ... } blocks, which allow you to specify styles that only come into play at certain browser sizes. So in order to solve your problem, you need to find out what browser width causes the layout to change (resize very slowly; it will flip out at a specific size), and write a media query that changes your stylesheet for sizes lower than that.
Without (a lot) more detail of your layout, I can't really give you specific code, but there are a lot of resources available online to learn about media queries if you don't already use them.
It's also worth noting that position:fixed can often be troublesome at small browser sizes, so much so that a lot of mobile browsers deliberately didn't even support it for some time. That's changed now, but it can still cause layout gremlins, so you may want to use the media query to switch it off entirely in low-width browsers.
Respond to answer given by Spudley on using the #media to solve the issue, I have try to find some page that has the effect of "fixed" & overflow element, and inspect the code by viewing it through web editor. And this is what I get. I slowly delete all the CSS and related element one by one till I got the "fixed" not working. And while the is still set on position:relative, there is a CSS that attached to it, which when I remove it, the "fixed" effect was gone.
reference URL:
https://www.w3schools.com/css/css3_colors.asp
I filter the source file:
https://drive.google.com/drive/folders/0BzbdjY-H_HzZTC1Rci1nY0F4VFU?usp=sharing
Screen Capture of the coding that solve my problem (I guess)
Click Here to see the screen shot
If I understand what you want to achieve, there's a workaround to achieve similar results.
First, you effectively can't make your TopBar behaving like a flowing bloc element with position: fixed. So, let's make static.
The "fixed" behaviour will be provide by setting the body properties
body {
/* NOTICE the vertical flex box, makes the height adjust
automaticaly (no need to toggle)*/
display: flex;
flex-direction: column;
max-height: 100vh; /* Restrain the body to the window height */
overflow-y: hidden; /* Prevent scrollbar on body */
}
.TopBar {
display: block; /* Blocks have 100% widht by default, don't need to
specify */
padding: 10px;
position: static; /* No need to specify, it's the default value */
/* Helpers to make the TopBar easier to track */
background-color: #000000;
opacity: 0.5;
/* This is not part of the solution, it's only to make the height inversely proportional to window width
e.g. make it grow while the other decrease
*/
height: calc(200px - 10vw);
}
/*
Just under the TopBar, lets place a container element that will act
as scrolling window
*/
.container {
height: 100vh; /* max-height is superfluous because of the overflow. */
/* This will simply make the scrolling on the container instead of the body */
overflow-y: scroll;
}
.TopBar {
/* 1st Element */
}
.TopBar > div {
color: white;
}
/* simply to display some text */
p {
width: 50%;
margin: 1em auto;
}
Place your carousel inside the container and voilà! No need for position nor z-index fiddling. TopBar and container are flowing and the former will "push" the later.
That being said, some media query adjustments wouldn't hurt. According to your picture, elements in your TopBar are inlines (inline or inline blocks). You should consider making them "block". Flex-boxes would also worth some consideration.
Hope this help
I am using bootstrap for creating webpage.
I have derived body on two blocks(content and header). Inside the content block i have div with class .container .sameTable and inside it i have div with class .row .sameRow that derived on two other blocks(left and right). left has class - .col-xs-2, right has class - .col-xs-10 and both of them have class - .sameCol too.
In Opera, FF, IE i have no any problems. But in Chrome on different screen sizes, contents width has less then other blocks on ~1px. I read that i may be caused by percentage width defining, but i cant change bootstrap's classes. How can I avoid it?
image - http://c2n.me/3em6LU4.jpg
Additionally, if i removed float:none from left and right blocks, issue is wanised, but my left block became smaller then i need.
image - http://clip2net.com/clip/m421320/49445-clip-46kb.jpg
.sameTable, .sameRow, .sameCol it's my own classes that looks like:
.sameTable {
display: table;
padding: 0;
}
.sameRow {
display: table-row;
}
.sameCol {
float: none;
display: table-cell;
vertical-align: top;
}
It's a rounding problem with the Bootstrap grid. Since Chrome supports sub-pixel rendering, it will exhibit the bug. I wouldn't worry about it.
I am using Bootstrap 3.3 for a simple layout and the way I have it is:
For the body,html:
html,body{
background: #fff;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
and then on each child section I have the following code:
.section-name{
height:100%;
}
so that each section takes up 100% of the given device screen size. Now I don't know why but I have quite a big gap between each section, see the screen shots below:
Notice the gap between the section, here's another screenshot:
Now I went to the dev tool, in both Mozilla and Chrome, checked for any excessive padding or margin issues, but found none.
Then I checked if it was because of the white spaces in my html, took off the whitespaces and still that wasn't the issue.
I took off all the Bootstrap CDNs too, just to check if it was a Bootstrap issue and no it wasn't, even in the custom CSS I have written, the same issue persists.
I have even tried:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
Even that wouldn't take off the padding
Edit
Js fiddle depicting my problem
I think I have found the solution you had a h2 inside your .section name that took margin-top of 20px,
Here the js fiddle
.section-title {margin-top:0px;}
http://jsfiddle.net/u2ttpkhg/1/
Is better if you could provide a fiddle, but here goes some things that I need to do sometimes:
Try to check above level elements too.
Also, you're using jumbotron? If so, it adds a top/bottom padding of 48px (via media query), take a look in that. Bootstrap has, by default, many classes which add unwanted paddings and margins.
I'm busy with a new website. For the menu bar, I put the width on 100% to be seen here:
font-family: 'Champagne';
font-size:20px;
display: block;
z-index: 1000;
bottom: 0;
width: 100%;
background: #0193CF;
text-align: right;
padding: 0 2em;
margin: 0;
text-transform: capitalize;
But for some strange reason, the width of the menu bar is actually longer then the rest of the page. Take a look at the screenshot at the bottom.
Does anyone have any experience with this?
The problem is a combination of width and padding properties. Padding, in the typical CSS box model, is additive. If your box width is 100%, the padding applied to it will add to the width. The width would therefore calculate at a number greater than the size set in your width property.
I would suggest using the box-sizing properties in your CSS, like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
width: 100% + padding: 0 2em, is equal to something greater than 100%. By using the box-sizing property in your style sheet, you will tell the browser to include padding's as part of the total width.
box-sizing:border-box...
This basically takes into consideration the margin and padding when calculating the size.
A more detailed explaination on the box-model is outlined for you here:
http://css-tricks.com/box-sizing/
Another option to cover most cross-browser problems is to try using a reset to zero out all elements and bring you back to a true "start".
many browsers add their own little tidbits of padding oand spacing on specific elements, so a reset is often used to, well, reset your browser to a true "square one"
Here is one of the more popular ones:
http://meyerweb.com/eric/tools/css/reset/
But this site reviews a lot of them:
http://www.css-reset.com/
If box-sizing doesn't fix this problem for people, check your top levels of your CSS - I found a rogue width:100% for the <body> CSS once.
My technique for debugging these problems is to open Developer Tools and delete blocks of the page (i.e. major <div>s) one at a time: if removing any of them causes the layout to snap back into place that indicates the one you just deleted was causing the problem.
width sets the content width which does not include padding nor margins.
Try removing padding or changing the box sizing.
This question already has answers here:
How can I align two divs horizontally? [duplicate]
(10 answers)
Closed 4 years ago.
I am mainly a backend developer but am trying to get a layout to come out right. Basically I am creating a list view page that will contain a div tag on the left that has a bunch of filters (drop down lists, checkboxes, etc). On the right side of the screen I am going to have a div tag that contains a grid. This seems to be working but looks terrible when I'm on an overhead or when my screen is not maxed. Am I doing this right? Basically here is what I am after:
The CSS I had done for this was as simple as this:
.filterContainer {
width:20%;
float:left;
}
.gridContainer {
width:79%;
float:right;
}
Basically .filterContainer is my left div (dLeft) and .gridContainer is my right div (dRight). Is this valid for what I am trying to achieve? The result is as shown here:
http://i.imgur.com/WFasMF1.png
However, if I resize my window I end up with the following result:
http://i.imgur.com/4u9HRlK.png
Which I guess is normal because I'm resizing, but is my css valid?
First of all when you are dealing with Grid Based layouts, always make sure you use
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Resets */
margin: 0;
padding: 0;
}
Note: * is nothing but a universal selector which will apply the
defined properties to every element. Inorder to target specific
elements, use more specific selectors like div.class_name etc
Now, why you need that?
If you see in the diagram below..
CSS adds margin, padding and border outside the box and not inside, which is default content box behavior, so when you use the snippet I shared, it changes the box model behavior and makes the element count the border and padding inside the element.
Coming to your issue, the CSS you provided is perfect, but position, float, or margin or even uncleared floating elements anything can cause the issue which you are facing, so if you can, consider altering your CSS stylesheet, and would be worth if you use box-sizing: border-box;
How do you achieve this?
Well, obviously, I won't provide you entire thing, but just a general idea of how to achieve this, as I see you are using width: 79%; now that's the very strong reason of why I suggested you to alter the box model.
Now here, I have two elements floated to the left, with the box model altered, so I don't have to use -1% width for any of the element. When you need spacing, nest more blocks inside the grid and then, instead of margin use padding especially on floated parent elements.
Demo
<div class="wrap">
<div class="left_wrap"></div>
<div class="right_wrap"></div>
</div>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Resets */
margin: 0;
padding: 0;
}
.wrap:after {
clear: both;
display: table;
content: "";
}
.wrap > div {
min-height: 300px;
}
.wrap .left_wrap {
width: 30%;
float: left;
border: 3px solid #f00;
}
.wrap .right_wrap {
border: 3px solid #000;
width: 70%;
float: left;
}
if you make the left container fixed width that will help. and you can always wrap both those divs in another div where you set a max-width if you'd like.
Maybe you can use position:absolute?
Or just use table tag for what it was designed? It is not like W3C plans to discard that tag in near future.
That is not a normal behavoir of floated blocks, since they placed before any normal block and not use normal parent container context.
You can use Frameset for dividing your pages into frames and then add css to it for style.