I have this terrible problem with IE 7/8/9.
I wrote an app using Dojo toolkit 1.8.0 and Play! framework. It works fine in all browser except for IE. Its 'developers tools' show no error, so does firebug. The problematic code section is here:
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
<div data-dojo-type="dijit.layout.ContentPane" id="head" region="top">
</div>
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'">
<div data-dojo-type="dijit.layout.ContentPane" id="menu" region="left">
</div>
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'">
<div data-dojo-type="dijit.layout.ContentPane" id="content_1" region="top">
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="content_2" region="bottom">
</div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="foot" region="bottom">
</div>
</div>
The result, in all browsers except for IE is like that:
But in IE it is shown like that:
Can anyone explain why there are such differences? At first I thought that in IE content is hidden, so I set overflow: auto, but no scrollbar appeared after page load.
two possible reasons come to mind:
you don't have a 'center' element for the content container - afaik, the dojo spec requires one BorderContainerChild with region="center" or non region specified, which defaults to center
do you have any non-layout elements in your markup as direct child of BorderContainer? IE for once is more standard requiring and breaks on unclear markup in this cases
The problem was with my custom class added to .menu element:
.menu {
margin-right: auto;
margin-left: auto;
}
This 2 styles broke my whole layout -.- When I removed it, it started to display properly.
Related
I'm trying to design a fullscreen-menu. It works very good but when the page itself contains a bootstrap grid-system, the grid always is in the front. Using Google Chromes developer tools i found, it's due to all col-*s contain
position: relative
If I disable it in developer tools (then position is static), it's in background.
But imho I can't just edit the whole bootstrap-css.
This is my html (removed what's too much):
<div class="header">
<input type="checkbox" id="toggle" style="display:none;" />
<label class="toggle-btn toggle-btn__cross" for="toggle">
<div class="bar"></div>
</label>
<label class="info">
test
</label>
<div class="nav">
<div class="menu">
<!-- here is the menu -->
</div>
</div>
</div>
<div class="container body-content">
<div class="wrap">
<div class="row">
<!-- THIS HERE IS ALWAYS IN FRONT DUE TO POSITION:RELATIVE -->
<div class="col-xs-6">key</div>
<div class="col-xs-6">value</div>
</div>
</div>
<hr/>
<footer>
<p>footer</p>
</footer>
</div>
the header-class is the whole navigation that displays or hide the div with class menu. The div hides the complete content of class body-content (at least it should).
So
is there a cause why all col-classes are set to relative? I don't want to get any bad surprises later.
what are the possibilities (or the correct solution) to get the grid-system in background?
position: relative is necessary in Bootstrap for when you need to rearrange columns. This is accomplished by using col-sm-push-4 or similar classes. I do not recommend overriding it as that could make your project a maintenance nightmare in the future. It's better to use the property that was designed to override painting order: z-index. Try to be careful when using this property because it tends to get abused quite a bit.
First, you only really need two rules for your case
.header {
position: relative;
z-index: 1
}
position: relative is needed because z-index does not affect position: static elements (the default). z-index only needs to be 1. If you find yourself needing to set it to absurdly high levels (like the 1000s) you likely just need to set the z-index of .body-content, in which case, just set it to 1 on .body-content and 2 on .header.
Either way, that should be all you need.
Wordpress has this html structure in the backend...
<!DOCTYPE html>
<html ...>
<head>
...
</head>
<body class="wp-admin ...">
...
<div id="wpwrap">
<div id="adminmenumain" role="navigation" aria-label="Main menu">
...
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
...
</div>
</div>
<div id="wpcontent">
...
<div id="wpbody" role="main">
<div id="wpbody-content">
<div id="screen-meta" class="metabox-prefs">
...
</div>
<div class="myplugin">
...
</div>
</div>
</div>
</div>
<div id="wpfooter" role="contentinfo">
<p id="footer-left" class="alignleft">
...
<div class="clear"></div>
</div>
</div>
</body>
</html>
By the default #wpwrap has 100% of height and my problem is that I need #wpcontent, #wpbody and #wpbody-content with 100% height, because my plugin (.myplugin) has inside a sidebar and an area for content that I need both with 100% of height too...
I've tried several things... with table-cell #adminmenumain breaks and I don't want to touch things outside of #wpcontent... with position absolute... #wpfooter breaks if I have scroll in myplugin
Probably with a few lines of jquery I could resolve the problem, but I really want to do it only with CSS
Maybe someone with a wordpress installed, inspecting a little bit the code could give me some suggestion ... thank you very much!
Use min-height: 100vh;,
all modern browsers support them, except Opera Mini browser.
https://caniuse.com/#search=vh
However you may always provide a fallback for browsers that do not support viewport-relative lengths using the old “height: 100%” option.
But to get it working. Add this little bit:
html, body{
height:100%;
}
I am using Twitter Bootstrap plugin, mainly just the grid system currently.
I am trying to put one row on top of another doing some stuff for responsive design.
In Chrome this works perfectly:
<div class="container">
<div class="row">
<div class="content">
abcd
</div>
</div>
<div class="row" id="moveUpRow">
<div class="content">
efgh
</div>
</div>
</div>
CSS:
.row {
height: 200px;
}
#moveUpRow {
margin-top: -200px;
}
But in Firefox and IE they both ignore the negative margin. I have tried top: -200px, but that just moves up the row and not all of the elements below the row. Leaving big white space.
Any other solutions to this problem? Or any suggestions on how to "pull" up any content below the row?
I was having the same problem. In my case I had two floating elements in my first row, so when I placed a negative margin to the second one it would move the entire row. Weirdly it worked fine in Chrome but not in Firefox.
Try adding overflow:hidden; to the row if that's the case.
The HTML you posted and CSS looks good to me in Firefox and IE, see http://www.bootply.com/72944
Perhaps you could start by double checking the paths to your CSS files and make sure there isn't some other problem with the HTML on your page?
Good luck!
I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.
I have noticed a discrepancy between the heights of my divs in Chrome (which looks good) vs FireFox/IE.
Here's my HTML markup (I removed all the other tabs from this just to keep the code clean):
<div id="RightPane">
<div id="RightPaneContent">
<ul>
<li>Plan View</li>
</ul>
<div id="tabs-6">
<%= Html.Partial("PlanViewTab", Model) %>
</div>
</div>
</div>
#RightPaneContent
{
min-width: 433px;
height: 100%;
}
Here's how it looks under Google Chrome. Note how RightPaneContent expands to fill the entire height of viewport.
Here is how it looks under FireFox. Note how RightPaneContent did not expand to fill the entire viewport:
Does anyone have any advice on what steps I should take to achieve similiar functionality under both environments? Or at least some reading material on what is happening here?
Per CSS spec, height: 100% means the same thing as height: auto if the parent is auto-height. Does your <div id="RightPane"> have a height specified? If not, chances are your page is in quirks mode, and WebKit just violates the standard slightly more in that mode than Gecko does.