Strange div margin issue - html

I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm

This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)

you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.

I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)

How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}

Related

My footer element is too tall

I know what the offending element is, but I have no idea how to adjust the code to make it work. I have tried negative margins which did succeed in bringing the text up and making the box smaller, however past -150px and the text overlaps itself. Also it just isn't good practice for making a responsive website.
It's as if there is padding above the text in the .row class. But there isn't. Any suggestions?
https://jsfiddle.net/7r2wzp2m/
enter code here
For your .page-footer element, delete the top: 340px; attribute and instead put
.page-footer{
position: relative;
margin-top: 550px;
}
Hope it helps!
I would restructure your HTML to have a header, main, and footer sections. More wrappers for more flexibility.
Don't put tags in the middle of the HTML either, keep them in the header or, even better, in a separate CSS file.
The issue is from an element above it, if you add the rule
.container-staff::before, .container-staff::after {
clear: both;
display: table;
content: ' ';
}
That should fix it. I agree with others though that you should restructure your html if possible, it is very hard to maintain as is right now.

div's top-padding is not relative to the div above it

I'm not very good with HTML/CSS. Here is the website that I'm trying to edit. I'm unsure if this should be in WordPress Stack because even though my website is in WordPress, the problem is with the CSS. Also, I'm really sorry for bad English (I know 5 languages so its kinda hard to keep up).
The problem is that the grid (Essential Grid which displays a product catalog) and the container above it are both children of one div. When I try to change the padding of my grid, It changes the padding relative to the top of the parent div rather than instead of its sibling which is on top of it.
I'm not sure what CSS properties might be affecting this(I'm not very good at CSS) but I have posted the ones which I think might be the problem. Please visit the link and inspect element (Sorry..)
.child-on-top{
//acutal id on page is featured-111
width: 99.8936px;
height: 449px;
background-size: 100% 100%;
}
.child-below{
position: relative;
padding-top: 100px;
}
.parent{
//actual id is wrapper.
position: relative;
clear: both;
}
One solution that has worked so far is if I increase the top padding to about 500 px, that would add about 50 pixels of padding above the child element thats below. But that will only work in desktop. In mobile, you will get a lot of empty space. So it isn't really a solution.
Add folowing css and then check. Your div which have id featured-111 which take floating from class grid and because of this problem create. So write this css
#featured-111{
float:none;
}

z-index refuses to work

I am trying to make these black arrows overlap the white div, but they will not budge. I applied position: relative and different sizes of z-index to the div but they just will not work for any reason.
The closest luck I had was adding position: absolute to the <div class="col-8"> element, which caused the arrows to overlap but broke the positioning of that div.
I have already looked at the many, many SO questions and responses about z-index not positioning above the respective, but no other solutions have worked. I have tried:
using position: relative on parent elements
changing the opacity to opacity: .99
None of those have worked.
How can I make these arrows work?
Here is my jsFiddle.
The CSS for the arrows starts at Line 141 and 146.
I went to see your code, and the problem you have is the use of overflow: auto in col-12 class.
.col-12 {
float: left;
overflow: auto;}
If you remove that, you can see the arrows over the div, as you wanted.
The problem you're having is due to the fact that the container you're using has an overflow set. To come over this issue what you can do is to either change it, or give to the #nav li:after a position:fixed and then change the top and left values accordingly.
A second approach would be to do not use the overflow: auto on the #header-content.

IE7 Absolute Position starts at top of line as opposed to other browsers

I created a fiddle that exemplifies the problem:
http://jsfiddle.net/vZtBb/
This is working exactly as I want it, but the problem is that in IE7 the absolutely positioned span (hover-tooltip-container) starts at the top of the line instead of at the bottom like it does in the other browsers. If you add a border to hover-tooltip-container, you can see this.
This is a problem because I want the tooltip to go up, but the anchor to still be exposed. You should be able to mouse over the tooltip as well, but the gap in IE7 makes this impossible.
If there is any way to get the hover-tooltip-container span to start in the same place on the line in IE7, IE8, and FFX, that would be perfect.
Javascript is not a solution.
The most simple thing you could do with the code you already have, is add a star hack to adjust the bottom rule within .hover-tooltip, for IE7.
.hover-tooltip {
display: block;
padding: 15px;
position: absolute;
margin: 0 auto;
bottom: 1em;
*bottom: 0;
width: 100%;
border: 2px outset #c0c0c0;
background-color: #f0f0f0;
text-align: center;
}
However, the double, nested absolute positions of .hover-tooltip-container and .hover-tooltip seem unnecessary.
I did something quite different (also renamed your classes, to much of a hassle to play with those looooooooooong name).
http://jsfiddle.net/vZtBb/16/
I removed the nested absolute positionning : They are the one causing the issue, since element in absolute position are taken out of context. So, 2 solo, nested absolute positionned element means that one element is in nothing (glitchy and really not wanted).
Instead of that, I placed your tooltip box in absolute, but made it start higher than the anchor by use of a negative position (top:-70px). It's sketchy a bit, but you should get my point.
Trying putting this after the .hover-tooltip div:
<div class="clear fix"></div>
and this css:
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block; }
html[xmlns] .clearfix {display: block; }* html .clearfix {height: 1%; }
I was able to solve the problem by having the "container" element float left and have relative position. This achieves the appearance of breaking out of containers but still provides a reference for the tooltip to go up from.

CSS problem - gaps between divs

I have designed a layout and i find some gaps in the stacking of divs over each other.
can some one help me http://uniquedl.com/3closets/about.html
and
You need this in style.css:
img { display: block }
and you need to change the height on .introduction .intro-message to 384px, to match the height of the image on the left.
Doing this solves both problems.
As an alternative to img { display: block }, you could instead do: img { vertical-align:bottom }. This also fixes.
See this answer for a good explanation of what's going on here.
#Alohci explains it very nicely.
You have a <div class="clear"></div> in both instances there. I would say that the page is behaving as expected.
Edit: If you use Google Chrome to view this page, you can right click on an area and choose "inspect element". It will provide a window that will display the code as it's rendered by the browser, and on the right there will be another properties window that displays the css being assigned to the elements you're looking at.
in their div .introduction you have an image larger than the div itself, this must be the problem, including the other divs
First gap: your class .introduction is having height of 384px where else class .intro-message (which is a child of .introduction) is having a height of 390px.
Hi for your website :http://uniquedl.com/3closets/about.html just make the style like
.introduction {
height: 384px;
overflow: hidden;
position: relative;
}
Then it will work