Have a problem with relative positioned span and img not being correctly positioned in IE7.
You can see the problem at:
http://bookgroupaustralia.obiweb.com.au/
The 'NEW' and 'SALE' spans should be top right of the title, and the cart image in the bottom right. They are correctly positioned in IE8,FF,Safari,Chrome. In IE7 they are appearing lowers than expected.
IE7 doesn't appear to be picking up the margin correctly.
Try setting a position: relative; declaration on your productItem class. Then instead of setting margin values for your .listing span.badge classes, try setting the following values:
top: 0;
left: 0;
You'll also need to do the shopping cart icon (your img.cart class). Again, you want this image to be absolutely positioned at the bottom right corner of each list item:
.listing ul li.productItem img.cart, .listing ul li.productItemLast img.cart {
bottom: 5px;
cursor: pointer;
position: absolute;
right: 5px;
}
You may want to adjust the bottom and right positions a bit.
That should take care of it.
Related
I have a question about CSS positioning of :before element to a parent element.
Let's say I have a parent element div like a block of text with background and padding properties and I want to add a small image or icon to this div (e.g. in the right-top corner) and I want this small element to stay there even when resizing the window.
How can I achieve that? Here is a code for :before I tried:
.blure:before {
content: URL(/image.svg);
position: absolute;
margin-left: 73%;
margin-top: -14%;
}
After setting the absolute you can give the left, right, top, bottom properties to element
.blure:before{
content: URL(/image.svg);
display: absolute;
top: 15px;
right: 15px;
}
Here's an example of a CSS tooltip. The author positions the toolip relatively.
.tooltip{
display: inline;
position: relative;
}
However, the tutorial says,
Relative. This type of positioning is probably the most confusing and
misused. What it really means is "relative to itself". If you set
position: relative; on an element but no other positioning attributes
(top, left, bottom or right), it will no effect on it's positioning at
all, it will be exactly as it would be if you left it as position:
static; But if you DO give it some other positioning attribute, say,
top: 10px;, it will shift it's position 10 pixels DOWN from where it
would NORMALLY be. I'm sure you can imagine, the ability to shift an
element around based on it's regular position is pretty useful. I find
myself using this to line up form elements many times that have a
tendency to not want to line up how I want them to.
There are two
other things that happen when you set position: relative; on an
element that you should be aware of. One is that it introduces the
ability to use z-index on that element, which doesn't really work with
statically positioned elements. Even if you don't set a z-index value,
this element will now appear on top of any other statically positioned
element. You can't fight it by setting a higher z-index value on a
statically positioned element. The other thing that happens is it
limits the scope of absolutely positioned child elements. Any element
that is a child of the relatively positioned element can be absolutely
positioned within that block. This brings up some powerful
opportunities which I talk about here.
What I understand is that, without modifiers like top, left etc. relative is equivalent to static and goes with the flow of the page. Then how's the tooltip being displayed at the correct position, i.e. above the hyperlink? Shouldn't it appear at the end of the page instead?
The CSS you provided for tooltip is not complete. I think you saw it in w3schools. But note that there are two elements for it: a parent element with .tooltip class and a child element (actual tooltip text) inside it with .tooltiptext class.
the parent element has position: relative without any top, left ... positions which acts as you said as a static element in its original (normal) place. But the child tooltiptext inside it has a position: absolute which is why it is seperated from normal text flow and put over them.
Here is a sample:
.tooltip {
/* this is just to add meaning for position:absolute of .tooltiptext */
position: relative;
color: navy;
}
.tooltip .tooltiptext {
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 10%;
/* style the tooltip */
min-width: 50px;
background-color: #ff9;
color: black;
font-size: 10pt;
border-radius: 3px;
padding: 3px 10px 6px;
white-space: nowrap;
visibility: hidden;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<span>Sample: </span>
<span class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</span>
i have this jsfiddle which as you can see when you hover of the Link the Hidden link should display but because of the position absolute it doesnt. Any idea how to make the link display without changing the position: absolute
I tried z-index to no go
The hidden link has position: absolute; and top: 100%;, so it displays 100% from top (thats why scrollbar appears after hover). Change the top property to something different and you will see the result.
The link are displayed, but in the bottom of the page, if you change the CSS you must see the link:
.wrapper .nav ul {
display: none;
position: absolute;
width: 200px;
top: 10px;
left: 0;
}
It's actually appearing; however, it's relative to the previous element in the hierarchy that has a relative position.
.wrapper {
height: 33px;
position:relative;
}
I'm not sure which element you want it relative to. In my example, I made it relative to your wrapper.
In your css .wrapper .nav ul {}, you have the top: 100%;. If you change that to say, 100px, it shows. Of course position it where you want by adjusting the pixels.
I cannot get the orange background behind DONATE at the bottom of my page right to stay put in larger browser windows. I have tried every css trick I can find. Please help!
Thanks,
Janet
http://dev30.ncld.org/
You missed this trick then:
#footer .footer-col-orange {
margin-left: 790px; // adjust accordingly
left: initial;
}
This will keep your donate box relative to the footer element, and not to the left page border and will work on all displays.
The other option is to set the position of #footer .padding element to relative.
There you go :
#footer .padding {
/* padding: 15px 20px 0px 100px; */
width: 1010px;
/* position: absolute; */
margin-left: auto;
margin-right: auto;
background-color: #0A6DA1;
padding-top: 15px;
position: relative; /* First part */
}
#footer .footer-col-orange {
position: absolute;
/* background-position: right; */
right: -2em; /* second part, feel free to put what you want */
}
When you set a position: absolute; to an element, it will pull it out of the HTML flow, and you can give it coordinates (top, left, right; bottom). This coordinates are relative to the first parent with a relative position. As you didn't set any parent element to be the relative, you positioned your element relative to the document.
Your orange box is current positioned absolutely, as you know. This means that is is relative to the browser window. The left edge of that window, because you have `left:900px'. What we want is for it to be relative to the footer, which is centered.
To do this, we need to set the parent container of the orange box to position:relative. This will cause the orange box's position to depend on it's parent instead of the window.
#footer .padding {
position:relative;
}
Then, it's just a matter of setting the yellow box to the right position. Given that it's on the right side, I'd delete the left value entirely and set right:-45px instead.
#footer .footer-col-orange {
left:auto;
right:-45px
}
With these, it'll line up perfectly with the edge of the white box above:
You are going to run into an issue with inline styling. You not only have your styles applied by CSS, they are duplicated inline. You're going to either need to set !important in the new CSS that I've provided (not best practice), or better, remove the inline styling. If you provide some more information about how your side is built (WordPress, HTML template, etc) I can help with removing the inline styling.
Links to examples removed
Problem: Webkit browsers (Chrome and Safari) are having an issue with the rotation class I created on the page. If I remove the rotation class on the content div, the large images that appear on hover appear in the correct position.
Firefox has no issue with the rotated content div. I am on a Mac so I cannot test IE.
You've given the .thumbnail class position:relative so it's creating it's own position context. The fixed position you've given .thumbnail:hover span will work with it's 0 top position as the top of the .thumbnail parent.
Just take away position: relative from .thumbnail and set the top position for .thumbnail:hover span to the value you want it placed (relative now, to the top of the window, because it has position: fixed.
Hope my explanation was clear enough!
First of all, it's enaugh to set only in .thumbnail:hover span{visibility:visible}
The rest code should be such
.thumbnail span {
position: absolute;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
height:530px;
overflow: hidden;
top: 0;
left: 460px;
}
The position should be the same. In your code you wrote absolute but in hover mode set fixed. And if you want the image to appear in the same place you should position it relative to #portfolio but not .thumbnail. So add these:
#portfolio {position:relative}
Remove
.thumbnail {position:relative}