I have Div Container with css class:
.content4
{
height: 1400px;
width: 920px;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
padding-bottom: 25px;
padding-top: 25px;
background-image: url(../images2/bg.gif);
}
and i need to make it auto height for its content
its working properly in IE but doesn't work in firefox.
any help please?
Use something like that:
.test
{
min-height: 300px;
height: auto !important; /* for other browsers */
height: 300px; /* for IE */
}
If I understood the case correctly, your style is working like it should (in FF, of course :)) If you specify the particular height, the div should not change its height when its content wants more. What you observe in IE is that it's actually treating a "height" as a "min-height".
The solution here is to specify min-height for browsers, and height for IE :)
Related
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?
Heres my CSS that I have for my img syntax. However, it should responsively resize while the browser resize. This works in Chrome, but IE & FIREFOX for some reason aren't working - is there a reason why? I am using the latest of all.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
The img max-width: 100% is a good technique for responsive images, but it needs to work together with the image container - element that holds the image / wraps it - for you to see the responsiveness of it in action.
Try this and you should get it working cross browsers:
<div class="imgHolder">
<img src="http://www.thoughtfeast.co.uk/wp-content/uploads/Big-Data-2-1024x522.jpg" >
</div>
So your image is wrapped with a div. And the CSS would be:
.imgHolder{
width: 100%;
max-width: 1000px;
padding: 10px;
border: 3px dashed red;
margin: 10px auto;
}
.imgHolder img {
max-width: 100%
}
You can check the codepen here
I am building an web application .
I have added a footer to the page .
The footer become larger in Firefox ( horizontally ). Any possible reasons ?
The footer is a sticky div as mentioned here - http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Container CSS -
.container{
background: #ffffff;
width: 90%;
min-height: 100%;
height: auto !important;
height: 100%;
background: #FFF;
margin: 0 auto -60px;
max-width: 1200px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 768px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
}
Footer CSS -
#footer {
height: 60px;
background-color: #F0F0F0 ;
width: 90%;
margin: 0 auto 0;
-moz-border-radius: 2px;
border-radius: 2px;
}
Just add these two property of footer element as of container element
#footer
{
max-width: 1200px;
min-width: 768px;
}
remove -60px in margin in css to solve this issue of fixed footer UI design
I have the following markup and it's all done for modern browsers. How can I modify this for getting the same for old browsers (IE7, etc.)? Is it only position absolute can?
<style>
html,
body {
height: 100%;
margin: 0;
}
.container {
box-sizing: border-box;
height: 100%;
padding: 15px;
background: darkgreen;
}
.sidebar {
height: 100%;
width: 200px;
background: #bada55;
}
</style>
<div class="container">
<div class="sidebar"></div>
</div>
Edit: I expect to get .container 100% of the window height and padding: 15px without scroll.
if you dont show or say, what you expect as a result its really dificult to help but you could use css hacks for ie7 like using the same property with a " * " that property will only work with ie7
Have you tried adding overflow:hidden to the container?
I am sure that this question is already answered, but I find it hard to search for it.
I have the following html:
<div id='outerBox'>
<div id='leftBox'><div id='secondLevelBox'></div></div>
<div id='rightBox'></div>
</div>
and the following css:
#outerBox {
width: 300px;
height: 200px;
border: 1px solid black;
}
#leftBox {
height: 100%;
width: 55%;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 45%;
background-color: yellow;
float: left;
}
#secondLevelBox {
height: 100%;
width: 100%;
}
(See http://jsfiddle.net/dsMdb/1/)
this displays ok. But if I now add a border: 1px solid red to one of the inner divs, they will grow 2 pixels and the layout will break: http://jsfiddle.net/dsMdb/5/
How can I wrokaround this? (solutions for IE >=8 and current FF are ok)
You can change the way the browser is supposed to calculate the offset for the border & layout.
Take a look at the Box Model properties in CSS3, this way you can define the offset etc.
The command you're looking for in CSS is box-sizing. By default this set to content-box, which adds the width, padding etc as different values on top of each other.
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Should apply to your border as well normally.
Problem is that it adds a border on the outside of that inner div. Since your red border is 1px, then it adds total of 2px.
Quick way to fix this is to remove `2px` from the outer `div`s width.
#outerBox {
width: 298px;
height: 200px;
border: 1px solid black;
}
Also, I would like to add, that this fix is very browser compatible ;)
I would suggest to have pixel graduation in the width and accordingly give room for border, like
Since total width is 300 px,
#leftBox {
height: 100%;
width: 165px;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 145px;
background-color: yellow;
float: left;
}
now reduce the width accordingly and this would work across browsers.