Here's the idea: I have a div element, #content_wrapper, which encompasses three floated divs, #left_column, #nav, and #content. Here's the styles on the #content_wrapper:
#content_wrapper {
float:left;
background: url("images/bg-tan.jpg") repeat-y left center;
position:relative;
}
However, in Internet Explorer 7 the #content_wrapper seems to steal the cursor from the child elements. Whenever I hover over the #content_wrapper, the cursor always switches to a beam and I'm unable to click on any of the links or text inside the div. Thoughts?
Update: I've tried the following fixes, none of which have worked.
Applying fixed width to all elements, including parent and top level children
Apply position: relative to all elements and then z-index
Using !important on all the above properties in case
Adding the "zoom" property to parent and child divs
Adding the "overflow" property to the parent div
#content_wrapper { position: relative; z-index: -1; width: 1010px; }
EDIT: You are setting the z-index of #content_wrapper to -1. This is why it's happening. Get rid of it or set it to a positive value.
Try
#content_wrapper {
zoom: 1
}
Related
I have a div and an image inside it
<div>
<img src="logo.png">
</div>
img {
float: left;
}
I can see the div have collapsed, the height have become to 0,
my first question is, but the image is inside the, cuz the div's height is 0,why the image still can be see?
I know the solution like give the div a overflow property, even to auto. But why it can solve the problem?
By default, a parent element will not wrap around floated content. (It would be annoying in many situations if it did.) So if you want it to do so, you need to force the container to enclose the floated element. overflow: hidden; is one way of doing it, though it's not always a viable solution. There are quite a few other ways of doing it, too, such as the "clearfix" method.
The overflow property works to contain floats because, to obey the rule, the containing element has to 'look and see' what's inside it. Normally, floated content is taken outside the document flow and mostly ignored by other elements.
Here are some other containment options for that div:
The "clearfix" method:
div:after {
content:"";
display:table;
clear:both;
}
Floating the container:
div.contain {
float: left;
width: 100%;
}
Using display: table:
div {
display: table;
width: 100%;
}
Using display: inline-block:
div {
display: inline-block;
width: 100%;
}
Using position: absolute;:
div {
position: absolute;
width: 100%;
}
Some of these are more useful than others, and context will determine which is and isn't appropriate in any particular layout. Generally, I stick with overflow: hidden unless some content needs to hang out of the containing element (such as in a drop down menu), in which case I'll normally use the "clearfix" option.
Floating elements doesn't affect the size of the parent element. As the div only contains floating elements, there is nothing that gives it height.
By setting the overflow style on the parent element (to anything but visible), you force it to contain its elements, so that they can be scrolled.
By not setting a specific size on the parent element, it will get the size from its children, and you don't get scrollbars. As the children are now contained, the floating elements will affect the size of the parent.
An alternative to using overflow on the parent element, is to add a non-floating child after the other, and use clear: both; on it so that it's below the floating children. That way the parent will contain the children because of that last non-floating child.
Please consider the following CSS. Note that there are no other CSS rules defined or in effect in this situation:
* {
position: absolute;
color: red;
}
div {
position: static;
color: blue;
}
When I add a div with a bit of text, which is live here, the text in the div no longer traverses the entire screen. It is as though the width property of the div is set to 10%. If I remove the position:absolute declaration from the wildcard, the div returns to normal (the text goes the whole way across the screen). This is puzzling to me, since I have all divs defined with the position:static declaration. I tried this with and without the famous "reset.css" stylesheet included, and I am getting the same results.
At first i thought that perhaps the wildcard rule takes presidence over the div rule in CSS. That would have been simple enough. However, I have the color property of the wildcard rule set to red and the color property of the div rule set to blue, and the text is showing up blue. So the answer cannot simply be that the wildcard rule takes precedence over the div rule.
One thing I think might be relevant: an absolutely positioned element is positioned relative to its first positioned (not static) ancestor element. In this case, the body has no such ancestor, and therefore this is probably just some kind of silent error caused be the body being set to absolute positioning but with no positioned ancestor element.
Does anyone know what the cause of this odd behavior is?
The position: absolute applies to the <div>'s parents.
It makes them shrinkwrap to fit their contents – the text of the <div>.
Since the <div>'s layout area no longer encompasses the full page width, it doesn't stretch.
You can fix this by adding width: 100% and getting rid of margins and padding.
Make html and/or body position static as well:
Demo with html { position: static; }
Demo with body { position: static; }
Or, change your selector to body *:
body * {
position: absolute;
color: red;
}
div {
position: static;
color: blue;
}
I have a div and it has a background image. But I finally understood that I forgot another background for the div that goes at the bottom. so I used the :after pseudo and inserted one.
The background that goes in the :after was supposed to be a transparent image that fades well with the background of the body. But now the background of the parent div is getting behind what is in the :after pseudo element.
Could there be any way I would make the background of the parent div not to show in my :after pseudo element?
Edit
here is my code
.foo{
height: 30px;
padding-bottom: 20px;
background: url(i/myimage.png) no-repeat;
}
.foo:after{
display: block;
position: absolute;
right: 0;
background: url(i/pseudo-elem-bg.png) no-repeat;
content: ' ';
height: 20px; /*takes the bottom padding
}
The ::after pseudo element adds an element which is the last child of the parent selector, not a sibling (hence, an element after the selected one), so it is just natural that the background of the parent shows up if the child background is transparent.
You might need to use another solution than the pseudo-element, such as a real element perhaps. Seeing the current code you have might help finding the best solution for your case.
If you're creating a pseudoelement just to add another background, you could set multiple backgrounds instead, and they will shown in the order you have set it.
Something like:
div {
background: url(bg.png),
url(otherbg.png);
background-position: center top,
center bottom;
}
You could use other background properties and sort them in the same way.
I have this problem that is driving me mad... I've been struggling with it for hours but can't figure out how to over come it.
I am using jqDock and want to place a toolbar in a "box" in a column. There is quite a lot of code included but you can see a sample here: http://ag.wasen.net/index.php?option=com_content&view=section&id=2&Itemid=17
Look at "Simple File Lister v2.0 #2" in the right hand side column where the toolbar is perfectly place. Then look at the left hand side where the toolbar goes vertical and is completely off track.
These two modules (as they are called in Joomla) is using the exact same code!
The difference between these two modules, the left one and the right is that the left one inherits a lot of CSS from the "div" statements in the left column.
The problem seems to be with the inherited "width" from a previously loaded CSS file. If I look at it in FireBug and remove the declaration for #leftcolumn div {width: 191px;} in FireBug the toolbar on the left is working fine.
I have tried to insert my own "width" on all different DIV's and using "!important" but even if FireBug shows the "#leftcolumn div" as stiked-out it still affects my toolbar DIV.
Regardless of how I have tried to "nullify" the inherited "#leftcolumn div" width it still affects my DIV.
Any clues on how I would be rid of it?
Regards,
Anders
Try the below css - Paste this in you template.css file and try to set the width if required on different selectors.
#main_bg #leftcolumn div.module_menu div div div, #main_bg #leftcolumn div.module div div .jqDocked div {
width: 20px;
}
see below image for output: Open the image in new window so you can see clearly.
Problem 1. You are trying to fit a horizontal Dock that has a maximum expanded width of 263px (7 48x48 icons) into a column that is only 191px wide: the Dock is going to overflow!
Problem 2. The template you are using is setting a specific width of 191px on any div more than 1 level below the div.module child of div#leftcolumn. Additionally, your template is specifiying both width and padding on some elements, which is going to cause cross-browser inconsistency and also makes some of the elements extend beyond the bounds of the column.
Since jqDock does not provide many ids on elements, the rules needed in order to override your template are going to have to be at least as 'specific' as the template's, if not more so.
For example, replace your page's rules for...
.sflpage {...}
.sflmenu {...}
#main_bg #leftcolumn div.module_menu div div div,
#main_bg #leftcolumn div.module div div {...}
with...
/*position the Dock's container, ensuring it's visible, and killing
the padding imposed by the template...*/
#leftcolumn div.module div div div div.sflpage {
padding: 0pt;
position: relative;
top: -20px;
width: auto;
z-index: 9999;
}
/*put the Dock in the center of its container, and give it plenty
of width for a fully-expanded Dock...*/
#leftcolumn div.module div div div div.jqDocked {
left: 50%;
margin-left: -150px;
padding: 0px 0pt;
position: absolute;
top: 0pt;
width: 300px;
}
/*kill the width and padding imposed by the template...*/
#leftcolumn div.module div div div div.jqDocked div {
width: auto;
padding: 0;
}
/*center the dock...*/
#leftcolumn div.module div div div div.jqDocked .jqDockWrap {
margin: 0pt auto;
}
/*use this to set/tweak the label's styling...*/
#leftcolumn div.module div div div div.jqDocked .jqDockLabelText {
}
I would also suggest that you need more horizontal space for the Dock (ie. between the module header and the file list), that your labels need better styling so that are visible and readable.
I am having a problem with some div's
The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absolute positioned, they do not affect the outer divs height. Is there a way to make these inner divs affect the height of the outer div?
The reason I am styling these divs with position:absolute is so that they all start at the top of the container div.
As far as I know, there's no way for absolutely positioned child elements to affect the height of their statically, or relatively positioned parent elements using only CSS. Either:
Reorganize so that the child elements remain in the document flow
Use JavaScript on load of the page to set the height of the parent to the height of the largest child
This issue is common in fade-in/fade-out JavaScript slideshows, and from what I've seen either 1) the height of the parent container needs to be defined or 2) the parent container's height is set dynamically for each slide.
I recently had this problem with a fade in/out CSS transition slideshow, and ended up solving it by giving the first child element position: relative; and the others position: absolute; top:0; left: 0; which ensures that the containers height is the same as the height of first element. Since my CSS transition slideshow uses the opacity property the container dimensions never changes during the course of the slideshow.
Alas, since I also needed to supply a javascript fallback for older browsers I had to set the container height for these browsers anyway (because of jQuerys fadeIn/fadeOut actually setting display: none; I would guess).
Here is a long overdue cross-browser solution to your problem. No more static width, no more em hack.
<style>
/* clearfix */
.container:after {
content: '';
display: table;
clear: left;
}
.page {
float: left; /* display side-by-side */
width: 100%; /* be as wide as parent */
margin-right: -100%; /* take up no width */
}
</style>
<div class="container">
<div class="page"></div>
<div class="page"></div>
</div>
After searching for a solution to this problem for so long, I am baffled to see how simple it is. Granted, the .page elements are not absolutely positioned. However, all the same goals can be achieved through this method, with almost no pain or sacrifice.
Here's a demo: https://jsfiddle.net/eqe2muhv/
This also works for inline-blocks, of course. Though you might need to set the font-size or letter-spacing of the container to 0. I would also recommend using vertical-align: top on the .page, to simulate a regular block element.
Here's a demo: https://jsfiddle.net/dzouxurs/8/
Try to use display: inline-table, height: auto; .. it works for me
I think you should position them relatively and just change "vertical-align" to "top" in the interior divs. Then you won't have the issue of messing with abs divs.
You can simply float the divs if you want them to be on the same horizontal plane.
i've done this task without any JS. Only, by CSS:
.frame {
max-height: calc(100vh - 283px); // 283px gives me some space at the botoom of the frame
}
Maybe u can try max-height: calc(100% - 50%); it will work if the content that should be in the middle of the screen/div is super short/small.
position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...
Test display: inline-block on the element that need auto height.