I'm trying to add overflow to an HTML element, and of course it works in every browser but IE.
Here is my code:
<div class = "twitter">
<div class="twitter_image">
<div class="user"></div>
</div>
<div class="label">
<div class="boarder_control">
<div class= "tweet_container">
</div>
</div>
<div class ="smfooter"></div>
</div>
</div>
css:
.twitter {
padding-bottom: 2px;
background-color: green;
}
.smfooter {
padding: 2px;
height: 10px;
}
.label {
height: 15px;
}
.tweet_container {
overflow-y:auto;
}
.boarder_control{
padding:5px;
}
.tweet {
margin-top: 7px;
margin-bottom: 7px;
}
What are the best practices for using overflow with IE 8?
IE:
All other browsers on earth:
Thanks
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp
Note: The overflow-y property does not work properly in IE8 and earlier.
You can resolve this by using overflow: scroll;
If there is a horizontal scroll bar then you may have to hide it with another div.
Try this thread...
Hide html horizontal but not vertical scrollbar
try to also assign an height to .tweet_container e.g.
.tweet_container { height: 300px; overflow-y: auto; }
Related
I have four elements in a div. Out of them, I want the last element to be pushed to the extreme right. I am using float: right for the last element. This results in the last element to be pushed to the right end of the next line in Firefox. For other browsers, rendering is absolutely fine. I cannot make any modification in the HTML.
How can this be fixed?
IF you Share your Code ,I can Help you Better.But I have a few suggestions:
1)Use of width Property to all Elements.(Width's Element1 + Width's Element2 + Width's Element3 + Width's Element4 <= 100%)
2)Use of box-sizing:border-box Property to all Elements.
3)Use of float:left' For the first three elements and float:right` for last Element.
This is example :
.el1, .el2, .el3, .el4 {
width: 20%;
box-sizing: border-box;
border: 1px solid orange;
background-color: #000;
color: orange;
float: left;
}
.el4 {
float: right;
}
<div class="wrapper">
<div class="el1">Element1</div>
<div class="el2">Element2</div>
<div class="el3">Element3</div>
<div class="el4">Element4</div>
</div>
This Work For Me well,I Hope Work For You!
Check this fiddle here. This works fine in Firefox. Maybe you can adjust the CSS.
.container {
width: 100%;
height: 60px;
background-color: green;
}
.el {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
border: thin solid black;
}
.element4 {
float: right;
}
<div class="container">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el element4"></div>
</div>
This is a bug in Firefox itself.
https://bugzilla.mozilla.org/show_bug.cgi?id=488725
I have fixed it using firefox specific styles:
#-moz-document url-prefix() {
//your styles here
}
I was struggling with weird rendering of my web site header for hour or so and it looks like there is the bug in WebKit (e.g. latest Chrome). It is bug? Or am I missing something?
Here is the http://jsfiddle.net/y415st6s/
I expect a separator to appear between Site Title and Page Title, but get only its border overflowing over the site title. I'm using min-width to set width of block with "Site title" and I noticed it works fine at least in FireFox and IE. In WebKit it looks like inner padding is not accounted in external dimensions of the block with min-width. The problem seems to disappear when 'width' is also set to the same value (see line #28 in jsfiddle CSS).
According to https://developer.mozilla.org/en-US/docs/Web/CSS/min-width setting just min-width should override 'width' too, so it seems I'm doing it the right way.
Staff for copy/pasting ...
HTML
<header class="siteHeader hstackpanel">
<div>
<div class="siteHeader__logoArea hstackpanel">
<div class="siteHeader__logoIcon">
<img src="http://static.flaticon.com/png/16/1394.png">
</div>
<div class="siteHeader__logoText hstackpanel-autofit">Site Title</div>
<div class="siteHeader__logoButtons">
<img src="http://static.flaticon.com/png/16/9916.png">
<img src="http://static.flaticon.com/png/16/57164.png">
</div>
</div>
</div>
<div>
<!-- box with blue border -->
<div class="siteHeader__splitter"></div>
</div>
<div class="hstackpanel-autofit">
<div class="siteHeader__titleArea hstackpanel">
<div class="hstackpanel-autofit">
<div class="siteHeader__titleAreaText hstackpanel hstackpanel-autofit">
<span class="siteHeader__pageTitleText">Current Page Title</span>
</div>
</div>
<div>
<div class="siteHeader__titleAreaButtons hstackpanel"></div>
</div>
</div>
</div>
</header>
CSS
* {
box-sizing: border-box;
}
.hstackpanel {
display: table;
width: 100%;
}
.hstackpanel > div {
display: table-cell;
position: relative;
vertical-align: middle;
padding: 2px;
}
.hstackpanel > div:not(.hstackpanel-autofit) {
white-space: nowrap;
width: 0.01px;
}
img {
width: 16px;
height: 16px;
}
.siteHeader {
background: yellow;
n_height: 24px;
}
.siteHeader__logoArea {
min-width: 270px;
/* width: 270px; */
padding: 4px 8px;
background: green;
}
.siteHeader__splitter {
border: 1px solid blue;
width: 8px;
height: 24px;
}
.siteHeader__titleArea {
padding: 4px 8px;
background: green;
}
Chrome and Safari do not support the min-width property on table elements. They will, however, respect min-width when applied to table cells. You're applying display: table to the .htstackpanel div.
I have a very simple design where I have 4 small boxes lined up on top of one another each with the same dimensions. However, when I try to apply "float: left" to the boxes, the background color of it's parent div goes away. Why is this? What does it have to do with the background color? I would just like my background color to remain the same.
See jsfiddle: http://jsfiddle.net/mush5ecc/
My html code:
<div id="careers">
<div class="container">
<h2 id="careers_title">Careers</h2>
<div id="four_grids">
<div id="top_left" class="grid"></div>
<div id="top_right" class="grid"></div>
<div id="bottom_left" class="grid"></div>
<div id="bottom_right" class="grid"></div>
</div>
</div>
</div>
My CSS code:
#careers {
background-color: orange;
}
.container {
width: 1026px;
margin: auto;
}
#careers_title {
text-align: center;
padding-top: 67px;
padding-bottom: 60px;
}
.grid {
width: 50px;
height: 50px;
float: left; /* COMMENT FLOAT TO SEE WHAT HAPPENS */
}
#top_left {
background-color: blue;
}
#top_right {
background-color: green;
}
#bottom_left {
background-color: red;
}
#bottom_right {
background-color: yellow;
}
Apply overflow: hidden to <div id="four_grids">.
See here for further details on this behaviour.
I'm a bit unsure of what your goal is, but I added the following css and I think this may be what you are looking for.
#four_grids {
position: absolute;
}
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Why does Internet Explorer make content inside a div with overflow:hidden disappear?
The contents inside <div class="item"> disappear in Internet Explorer, but are visible in all other browsers. Why? This question is a modified version of a previous question that never received an answer. Maybe my modifications have led me closer to a possible solution?
HTML:
<td class="table_class">
<div class="relative">
<div class="relative">
<div class="absolute">
<div class="item_container">
<div class="item">
// there may be several of these divs
</div>
</div>
</div>
</div>
</div>
</td>
CSS:
.table_class {
vertical-align: top;
position: relative;
z-index: 2;
padding: 0;
}
.relative {
height:100%;
width:100%;
position:relative;
}
.absolute {
position: absolute;
top: 25px;
right: 5px;
bottom: 5px;
left: 5px;
overflow: hidden;
}
.item_container {
height: 16px;
font-size: 12px;
clear: both;
white-space: nowrap;
margin-bottom: 1px;
}
.item {
position: relative;
z-index: 999999;
background-color: transparent;
float: left;
text-align: left;
clear: both;
}
What am I missing? (yes, the two divs with class="relative" are needed).
You should try adding width and height to the .absolute CSS class.
Also why does your .item class have both float: left; and clear: both;?
I would suggest removing the clear: both attribute and instead add a sibling div to to your item div and add the style clear: both to it as follows:
<div class="item_container">
<div class="item">
// there may be several of these divs
</div>
<div style="clear: both;"></div>
</div>
If this doesn't work try adding width and height to the .item class as well.
I have the following html/css code: http://jsfiddle.net/J3YZ8/4/
HTML:
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
html {
height: 100%;
}
body {
direction: rtl;
height: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
#headerDiv {
height: 20%;
margin-bottom: 1%;
}
#footerDiv {
height: 10%;
margin-top: 1%;
}
#headerDiv,
#footerDiv {
clear: both;
background-color: #FF5500;
}
#bodyDiv {
height: 68%;
margin: 0% 2%;
}
#loginContainer {
background: green;
margin-bottom: 1%;
}
#menuContainer {
background: blue;
margin-top: 1%;
}
#loginContainer,
#menuContainer {
display: inline-block;
width: 29%;
margin-left: 1%;
height: 49%;
}
#contentContainer {
width: 69%;
height: 100%;
background: yellow;
float: left;
margin-right: 1%;
}
If you use this code on your browser (without jsfiddle) you will see there is no margin between the blue div (menuContainer) and the footer. In jsfiddle the margin is not equal to the margin between the yellow div (contentContainer) and the footer although it should be the same. How can I fix it?
More details:
this is image from jsfiddle result:
this is image from full screen result:
Does anyone knows how to fix it??
I do see a margin below the blue panel.
A height of 100% the html element does not mean "not higher than the window". If you don't want to scroll the page you could set overflow:hidden on the html. But then you won't see the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
</div>
<div id="footerDiv">FooterPanel</div>
One of the main problems is that you have a second closing div with no opening - this can through IE in quirks mode and also cause other issues when working with floats and clears in CSS.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
Above is corrected code that should fix it - at least a start.
Are you looking to build a fluid height and width layout?
Also you need to clear the floats before you start the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div style="clear:both;"></div>
<div id="footerDiv">FooterPanel</div>
There is a working sample of the code maintaining your margin.