I've tried various fixes but I'm still unable to solve this rather irritating issue in IE8. I have a container Div containing two child Divs, one floated left and the other floated right. There is a background image applied to the container DIV and this renders as it should in ie6 and ie7, however in ie8 it just will not appear. I think the issue is that the top padding applied to both child elements is not being respected/applied by ie8, and since the background image has a height of only 11px, the two child elements are sitting flush up against the parent DIV and therefore the background image is not displaying.
Here's my code and CSS:
<div id="bottom">
<div class="moduletable_footermenu">
<ul class="menu"><li class="item56"><span>Class Schedule</span></li><li class="item57"><span>Testimonials</span></li><li class="item58"><span>Contact</span></li><li id="current" class="active item59"><span>Sitemap</span></li></ul> </div>
<div class="moduletable">
Copyright © -2010 sitename </div>
</div><!--end of bottom -->
CSS:
div#bottom {
clear:both;
width:1014px;
margin:0px auto;
background:url(../images/footer-shadow.gif) top no-repeat;
}
div#bottom div.moduletable {
width:400px;
float:left;
font-size:0.9em;
color:#ccc;
padding:15px 0px 15px 0px;
}
div .moduletable_footermenu{
float:right;
padding:15px 30px 15px 0px;
}
It must be something specific to IE8 and probably something quite small causing the issue here - can anyone please spot the problem ? I just can't seem to solve it no matter what I try.
Grateful for any help.
Thanks in advance.
Have you tried Firefox and Chrome/Safari? Did you use standard DOCTYPE? They should behave the same way as IE8 did.
In standard CSS, container's height will not be adjusted to the height of the floated boxes; I will expect IE8 to not showing the container (height=0px) being the fact it's a more standard-compatible browser.
If you are looking for effects in IE6/7 in a standard-compatible browser, search for 'clearfix' solutions.
Related
I'm trying to make a dashboard frame (in Bootstrap 5, but I don't think it makes any difference) that works like in these two pictures:
This is basically my current situation:
<html>
<body>
<div class="pretoolbar">pretoolbar (non-essential information, to be hidden when scrolling)
</div>
<div class="sticky-toolbar"> sticky toolbar</div>
<div class="container-fluid">
<div class="sidebar col-3">
[tall sidebar content]
</div>
<main class="col-9">
[also tall content]
</main>
</div>
<body>
</html>
CSS:
.pretoolbar{
background-color: #555;
color:white;
height:32px;
}
.sticky-toolbar{
background-color: black;
color:white;
height:56px;
position:sticky;
top:0;
}
.sidebar{
background-color: white;
position: sticky;
top: 56px;
overflow: hidden auto;
max-height: calc(100vh - 56px);
height: 100%;
}
I'm trying several approaches but it doesn't seem working. What I'm trying is of course position: sticky on the main sticky toolbar and on the sidebar. But due to the different available vertical space (scrolled-top vs scrolled-middle), after declaring a height for the sidebar (calc(100vh - 56px), 56px is the height of the toolbar) it results in the bottom part of the sidebar and its scrollbar to fall out of the viewport bottom. I'm considering flexbox, position:fixed, position:absolute... cannot find a way to get it through.
I also discovered a strange behavior (in Chrome at least) when you place a position:sticky inside a position:fixed
My goal would be to avoid JavaScript, I basically need a sidebar that changes its height after the sticky-state of the toolbar and sticky searchbox. (Or, to say it in other words, the top-edge of the sidebar should behave like position:sticky while the bottom-edge should behave like position:fixed;bottom:0).
Can you think of a way of achieving this without using JavaScript?
Please let me know if I am understanding your situation. First I would suggest getting rid off of the *pre-toolbar bar. Otherwise, the desired behavior is impossible without js. And since you mentioned the information there is not essential, you can put it anywhere.
However, if you still want it to be on top, then sticky of position fixed the toolbar and the sidebar. Do not use calc() It is better to use height 100vh and put it behind the toolbar so it seems to be shorter. Then, place a pre-toolbar on top (z-index) of your toolbar and animated it to disappear after some seconds.
Here is a codepen https://codepen.io/oscontrerasn/pen/WNpxJwV
I have a navigation with a padding-top: 148px; in Firefox, Chrome, Safari, IE 9 & 8 its looks perfect, but in IE 7 its gives it too much, you can see an example of this at http://willruppelglass.com/index.php why is it doing this and how do I fix it?
Here is the CSS
.headerNav{
color:#000;
margin:0 auto;
width: 1280px;
padding-top: 148px;
}
Any help would appreciated, thanks in advanced.
Try to use below structure and adjust the padding of the <div class="headerNav"></div> because the upper elements have float:left property and you are using padding-top:148px; in IE7 the padding is applying inside the headerNav itself in comparison of other browsers.
In other browsers the padding is applying from the top of view port.
<div class="headerText"></div>
<div style="clear:both"></div> <!--this will clear the floating property for below elements and make the space and adjust all the elements below this div -->
<div class="headerNav"></div>
In below image (IE7) you can see the padding-top:148; is applying with in the div not from the top of the body.
See the padding-top:148px applying from the top of the body/viewport. in below image (Firefox)
again a problem with IE browsers version 6 and 7
Take a look at an example right away, try resizing the window and such.
a preview (easier to open in IE this way)
code
HTML:
<div class="container">
<div class="left-menu">
<ul>
<li>El1</li>
<li>Element 2</li>
<li>3</li>
</ul>
</div>
<div style="margin-right: 60px;">Тест Тест</div>
</div>
CSS:
.container{
position:absolute;
top:100px;
left:100px;
outline: 1px solid red;
background-color:pink;
}
.left-menu{
outline: 1px solid green;
background-color:#AAA;
width: 50px;
float: right;
}
Now I don't understand 2 things
What happens to the float element? the box is never too small, infact the margin of the adjacent div is bigger than the width of ul div. But when the window is small enough the float element appears to be floating to the window edge not its container edge, but if you scroll a little to the right when the window is small you will see the container is wide enough.
Less important issue why is it this wide? Shouldn't it be as wide as it's contents?
The only fix I've come up with is to give my absolute div a width, but there is the problem. It should resize with the contents say if there is a picture near the float div.
And there will be a picture =) This width workaround of course allows to use tons of javascript, to resize every element in the more complex structure than shown in the example, but i wonder may css be used instead?
Internet Explorer has issues with divs and floats, especially older versions of IE. Whenever I have problems with floats and divs not clearing each other properly, I rely on the Clearfix method.
Add the clearfix css to your main css file, then append the class .clearfix to .container so it looks like <div class="container clearfix">.
For the 2 divs inside, take the margins and widths off of them, if you want those 2 divs width to change based on the content inside them. Float one div left, and float the other div right.
You'll see that the Clearfix forces the parent div (.container) to wrap all the way around the floated elements inside.
Hope this helps!
I have the page with the structure:
<div id="container">
<div id="header">top menu</div>
<div id="content">content</div>
<div id ="footer" align="center">
<div class="left">left part of footer menu</div>
<div class="right">right part of footer menu</div>
</div>
</div>
Css style:
#container {
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#content {
padding:0em 0em 12em;
}
#footer {
position:absolute;
width:100%;
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
That works fine in all browsers. But when I add
<script type="text/javascript"></script>
inside
<div class="left">
in FireFox(only) the part of footer after the script come up to the top - between header and content divs.
What's wrong with it?
UPD
This all was about wrong mark-up inside #content. And only FireFox didn't understand when I missed one of closed table tag:) Thank you guys, you helped me to sort it out.
The #footer has absolute position and is inside the relatively positioned #container div so I would expect this. Maybe try making container absolutley positioned.
Also I think your markup is not what you intended. There are one too many opening div tags.
change the #container height from auto to 100% and remove the extra lines for height.
The auto is messing up the calculations as it overrides the 100% lines due to the !important value
Since #footer's position is absolute, with bottom 0, it will be positioned relative to its first (non statically positioned) parent, which is #container. Essentially what's happening here is that #container is becoming mush less high, and dragging #footer with it.
That's happening because you have two height: settings in the css for #container (somehow the script tag triggers it to refresh) so the behaviour would be undefined.
If you're trying to make the footer stick to the bottom of the window, including as it's resized, I'd advise having a javascript function handle it, triggered by the window's resize event (it's fairly simple, see this question on javascript window resize event
You could try the CSS a different way with absolute positioning. I try and avoid float as it can lead to unexpected rendering issues. See this jsFiddle for an alternate approach. Working in IE6, Chrome12 and FF3.6 and FF4 for me.
So here is my CSS problem with IE 8.
I have a parent div and 2 child div. I want the parent divs width to be increased based on the width of the inner -child div's. It works well in Firefox, but in IE8, the first child div's width going to the entire page width when I have a float:right for the inner element of that div.
My HTML markup
<div class="divPageContainer">
<div id="pnlOrderOptions" class="pnlOrderOptions">
<div class="divOrderOptions">
some content
</div>
</div>
<div class="divOrderDetails" id="pnlOrderDetails">
<div style="height:20px;width:800px;border:3px solid red;padding:2px;">this width of this red box can be vary from 100 to 1000</div>
</div>
</div>
and the CSS
.divPageContainer
{ width:auto;
float:left;
margin-left:8px;
height:auto;
border:1px solid black;
}
.pnlOrderOptions
{
min-height:10px;
height:auto;
overflow:auto;
margin-top:30px;
border:1px solid orange;
width:auto;
}
.divOrderOptions
{
margin-left:7px;
font-family:Verdana;
font-size:12px;
width:400px; min-height:10px;height:auto;
border:1px solid #858A8D;
float:right; padding:5px;
background-color:#F0F6F8;
}
.divOrderDetails
{
float:left;
margin-top:4px;padding:3px;
border:2px solid blue;
min-height:10px;height:auto;
}
It works well in Firefox; here it is:
And in IE I am getting (I reduced the red bordered divs width to 400 from 800 to get a good snapshot because my monitor is a wide one )
One thing I noticed is that this problem came when I deploy this as a intranet web application. It works well in local development machine. I remember some IE7 compatibility problem used to appear when we deploy sites to intranet.
The ultimate result I am looking for is the div with content "somecontent" here should be the right most side (not to the page but based on the width of the second div, which will change dynamically) ie it should behave like my Firefox screenshot.
The float right thing is a known bug in IE and FX 2.
Can you use display:inline-block; instead? There is a way to get it to work on non-inline elements for IE.
EDIT: You'd have to set text-align:right on the parent of the inline-block.
EDIT #2: Here is an example of the fix I was talking about: http://work.arounds.org/sandbox/64/run
Please let me know if this isn't what you need or if it doesn't work for you.