This is my markup:
<div class="contentSubBox">
<h5>Please choose a report</h5>
<div class="arrowNavigation">
<div class="arrowNavigationLeft">
<<
<
</div>
<div class="arrowNavigationCenter">Page 1 of 8</div>
<div class="arrowNavigationRight">
>
>>
</div>
</div>
</div>
And this is the CSS that goes with it (the relevant part):
div.arrowNavigation { position: relative; text-align: center; width: 200px;}
div.arrowNavigation div.arrowNavigationLeft, div.arrowNavigation div.arrowNavigationRight { position: absolute; text-align: left; }
div.arrowNavigation div.arrowNavigationLeft { bottom: 0; left: 0; }
div.arrowNavigation div.arrowNavigationRight { bottom: 0; right: 0; }
.button { background: url("http://www.pimco.com/_layouts/PIMCOdotCOM/images/backgrounds/client-access.png") top left repeat-x #EBF2EB; border: 1px solid #B3C3B7; padding: 3px 8px; }
The problem I'm having is that IE 7 cuts off the top and bottom part of the buttons.
In Mozilla Firefox, it looks like this, which is exactly like I want it:
Internet Explorer does this:
The relative positioning isn't responsible. I tried floating and it didn't work. Manually setting height or min-height or font-size of the links or the container didn't help either.
If I change one link to <input type="button" class="button"/>
it will look like this:
So changing the height by adding another element somehow works. I really want to avoid that, though.
Any ideas?
Thank you!
Try giving hasLayout to .button, by adding the common zoom: 1 fix.
I've not tried it, but that does look exactly like a problem you can fix by providing the afflicted elements with "layout".
Try giving div.arrowNavigation some height. Try 26px;
Related
Okay, so I'm building a WordPress site and the page in question can be seen here: http://test.pr-tech.com/power-line-markers/
The issue I am having is that I am using mix-blend-mode for one of my div containers to make use a 'lighten' blend on the background.
It works perfectly, but the issue I am having is that unfortunately the child elements inside the container (i.e. the text) are also inheriting the blend mode, and therefore it's making my text 'blend' as well, which isn't what I want (I want the text to have NO blend mode).
Anyways, you can see the code I am using below:
#category-intro-text {
padding: 0.625em 0.938em;
mix-blend-mode: lighten;
background-color: rgba(220, 235, 255, 0.8); repeat;
}
I tried applying something like 'mix-blend-mode: none;' to the text, but that doesn't work.
I've searched Google for an answer to this pretty extensively, but alas, there isn't much on this topic (if anything at all).
I realise you asked this a while ago but I've been playing with the same issue today and managed to fix it like this.
Wrap the content inside the #category-intro-text div with another div that is positioned relatively. Ultimately, you'll want to add the style to your css and not inline as I've done here.
<div id="category-intro-text">
<div style="position: relative;">
<h1>Power Line Markers</h1>
Etc. Etc.
</div>
</div>
Then remove the background colour and blending information you've got in the stylesheet for the #category-intro-text div. You should end up with...
#category-intro-text {
padding: 0.625em 0.938em;
position: relative;
}
Finally, use a ::before pseudo element to add the blended layer.
#category-intro-text::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(220, 235, 255,0.8);
mix-blend-mode: lighten;
}
Hopefully that will do it. It is working perfectly for me with a multiply layer.
EDIT: Here is a Fiddle forked from the previous answer.
I thought I had it worked out with the isolation property, but no. I didn't have much luck researching a solution for this issue either.
I suppose you could use this old trick: http://jsfiddle.net/cwdtqma7/
HTML:
<div class="intro-wrap">
<div class="intro-background"></div>
<div class="intro-content">
<h1>Hello</h1>
<p>Welcome to the thing.</p>
</div>
</div>
CSS:
body {
background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/power-line-markers-bg.jpg') top left no-repeat;
background-size: 800px;
font-family: sans-serif;
}
.intro-wrap {
position: relative;
}
.intro-background {
background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/category-intro-bg.png');
mix-blend-mode: lighten;
padding: 32px;
width: 300px;
height: 300px;
}
.intro-content {
position: absolute;
top: 0;
left: 32px;
}
Why use mix-blend-mode when there's background-blend-mode(maybe you have already tried that!) for that purpose. Actually mix-blend-modes blends the element it is applied on with everything beneath it. On the other hand background-blend-mode applied on a background blends only with the the background that is beneath it.
You can do this-
.outer-wrapper {
background: url(<url>), #fb3;
background-blend-mode: exclusion;
padding: 2em 4em;
}
.inner-text {
/**styling of you text***/
}
How to use mix-blend-mode, but not have it affect child elements?
Building upon #shanem's answer I found this solution
function change(id){
document.querySelector(id).style.backgroundColor="violet";
}
.group{
height:10rem;
width:10rem;
position:absolute;
visibility: hidden;
}
.group::before{
content:"";
visibility: visible;
position:absolute;
height:100%;
width:100%;
background-color:inherit;
mix-blend-mode:multiply;
z-index:-1;
}
.btn{
background-color:red;
color:white;
visibility: visible;
padding:0.5rem;
}
<div id="g1" class="group" style="background-color:cyan;">
<input type="button" class="btn" value="change" onclick="change('#g1')"/>
</div>
<div id="g2" class="group" style="margin:1.5rem;background-color:yellow">
<input type="button" class="btn" value="change" onclick="change('#g2')"/>
</div>
The best part is that you can directly change the background-color using javascript.
The only caveat (if you'd want to call it that) is that every child element must set visibility: visible;
Here is my code.
The HTML:
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px" id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>
The CSS:
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
}
.column1of4 {
margin: 50px;
float: left;
}
The Javascript:
$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
//in
$('#Bottleinthemirror').show();
},function(){
//out
$('#Bottleinthemirror').hide();
});
Basically, I have three pictures, two of them beside each other and the third one is below the first one. Which I hover over the first picture, I want the #bottleinthemirror span to appear, which it does. The problem is, even when the span is hidden, it still rearranges the layout of the website and moves the picture below it to another place even though it's position is set to absolute. Any idea why? When I remove the span, the website layout is normal. It changes when I put in the span even though the spans position is absolute.
Probably the problem is that span can not contain p, and in your code there are technically 2 p elements in the span (both p tags are opening). When browsers fix this incorrect markup, part of the last p may appear outside the span. If there is a need to have p inside .spanlink, it's better to use div instead of span. But is the p really necessary here?
Add
display: block;
to
#Bottleinthemirror
I set this up in a jsfiddle: http://jsfiddle.net/r2XG2/1/ and it appears to be working for me in Chrome. What browser are you in? I would try the following if it's still not working for you:
Set z-index: 100 to see if that will force it to appear over the other elements. You could also try setting the top or left values in css, that may also force it to appear in the correct place. Adding display: block; couldn't hurt either.
Edit: Updated fiddle with latest update from asker it also appears that IE won't load jsfiddle. I added position: relative to the parent div to see if that helps.
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
z-index: 100;
display: block;
}
.column1of4 {
margin: 50px;
float: left;
position: relative;
}
I'm not a CSS expert. I'm trying to place an <input type="button"> in the center of an <img> and I'm having some trouble doing so. Here's a fiddle and here is my HTML:
<div id="avatar">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
<p>Text</p>
</div>
I want the input to be displayed over the image, also, the text need to be at the right. I tried using:
img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}
But it only works on chrome / safari, on other browsers, the button is placed after the image and not in front of it.
What is the best way to do this?
Obs.: The space where the button is, needs to be empty, or else, the text will move up.
This is how it's displayed on chrome:
This is how it's displayed on firefox:
You need to specify the x and y positions on an absolute position. Change the css for input to this:
input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}
There is a simple and clean method for doing this code. The trick is to use the DIV tag to contain and position everything in place.
Use a main DIV to contain everything and give it the position:relative property.
Place the img and input tags in a single DIV and assign this DIV the float:left property.
Using CSS to select the P tag and float it to the left. This will position the text beside the DIV containing the img and input.
Now assign the input tag the position:absolute property while using the properties TOP & LEFT to postion it into place.
Here's an example:
<div id="avatar-container">
<div id="avatar-image-btn">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
</div>
<p>Text</p>
</div>
<style>
#avatar-container { position: relative; }
#avatar-container p { float: left; }
#avatar-image-btn { float: left; }
#avatar-image-btn img { }
#avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>
See, clean and simple, works every time and is multi-browser compatible.
*The margin property can cause a mess when used without caution. Best practice is to use it for stacking tags in divs and not for positioning with large gapping margins.
use z-index
input { position: absolute; margin:140px 0px 0px 130px; z-index:2}
this is pushing your button one layer up
after understanding the question correctly here is a solution
img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}
as mentioned bellow in comments the problem was in positioning
You may add position:relative for #avatar and give #btnAvatar top:0; left:0;
This should do it: http://jsfiddle.net/a6tA7/9/
I would recommend you use top: and left: to position the input element rather than margin:
I have a problem using a small div that should "hover" over pics that switches using the JQuery cycle plugin. The pictures are 950px wide and to the right on top of the pictures a small box should be with latest news.
Problem is in compability mode in IE the box seems to loose it's z-index and ends up behind the picture. It works in IE8, Opera, Chrome and Firefox.
I've tried to remove 2 pictures so only 1 picture shows, and then for some reason it works in compabilitymode aswell. I've tried to remove whitespaces between the img-tags but no luck, margin: 0; padding: 0 all over but no luck
anyone got any ideas what might be wrong?
CSS CODE
#Content {
width: 950px;
}
#NewsWrapper {
position: relative;
padding: 0;
margin: 0;
top: 0;
}
#NewsListning {
float: right;
height: 200px;
margin: 0;
padding: 10px;
background: yellow;
top: 0;
right: 0;
position: absolute;
z-index: 12;
width: 300px;
}
#SlideImages {
width: 100%;
margin: 0;
padding: 0;
float: left;
z-index: 11;
}
.SlideImage {
display: inline;
float: left;
padding: 0;
margin: 0;
z-index: 11;
}
JavaScript Code
$(function () {
$('#SlideImages').cycle({
fx: 'fade',
speed: 5000
});
});
HTML Code
<div id="Content">
<div id="SlideImages">
<img src="/Images/Slide1.jpg" class="SlideImage" />
<img src="/Images/Slide2.jpg" class="SlideImage" />
<img src="/Images/Slide3.jpg" class="SlideImage" />
</div>
<div id="NewsWrapper">
<div id="NewsListning">
<div>
<strong>Test 2</strong>
Lorem ipsum
</div>
</div>
</div>
SOLVED - ADDITIONAL NOTES*
In all browsers but IE7 you need to specify, for example, top: 0; left:0 if you are gonna use position: absolute. Else it usually ends up right of site. Another thing that doesnt make sense when it comes to IE7.
Put your #NewsWrapper as a higher index than #NewsListing
That should work
Also, I haven't looked at the code for Cycle but I'm assuming it uses higher z-index than 12. You'll probably want to use z-index > 1000 for something you want to be the most forward on the screen.
I just had a really hard time with a similar issue. (CSS Drop Down going underneath a banner) I used CSS to eventually fix it, changed the parent div holing the whole nav to position:absolute and a really high z-index but I tested this and it worked really well.
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
You can achieve this with a faux sidebar:
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
(Okay, I lied: I clearly have tried it now...)
Here is the way I have found to solve this issue:
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
Then, simply set up your web page like this:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)