I've made some divs and it works as intended in firefox.
But not in internet explorer 8.
Anyone have a tip?
structure is like this:
<div id="imgntxt">
<div id="imgntxtImg">
<div id="imgntxtNav1"></div>
</div>
<div id="imgntxtText">text</div>
</div>
imgContainer gets a image as background by some javascript magic.
css:
#imgntxt
{
padding: 2px;
width: 200px;
}
#imgntxtImg
{
position: relative;
}
#imgntxtText
{
}
#imgntxtNav1, #imgntxtNav2
{
position: absolute;
right: 2px;
bottom: 0;
background: transparent url("next.png") no-repeat top left;
height: 16px;
width: 16px;
}
#imgntxtNav2
{
right: 19px;
background: transparent url("prev.png") no-repeat top left;
}
I can 100% sure since the amount of code your add its not complete, but I think that what its playing you up its the position:absolute in #imgntxtNav1, #imgntxtNav2.
If I am wrong please give more detail.
Did you try locate the images on top instead of bottom?
#imgntxtNav1, #imgntxtNav2
{
position: absolute;
right: 2px;
top: 0;
...
}
Also, why don't you place the images for the navigation in the html directly?
That sounds not only easier but also more correct.
Related
Is it possible to have the CSS cursor property of a div propagate through a transparent div that overlays it?
Let me illustrate with a mock-up: https://jsfiddle.net/azL1ot2d/
With the following HTML code:
<div id="page">
<div id="clickable">Click me!</div>
<div id="glasspane">
<div id="other">Some glass-pane content</div>
</div>
</div>
And the following CSS code (reduced to the important parts):
#page {
position: absolute;
width: 100%;
height: 100%;
}
#clickable {
position: absolute;
top: 100px;
left: 100px;
background-color: orange;
cursor: pointer;
}
#glasspane {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: transparent;
}
#other {
...
}
Notice how I set the cursor property on the clickable div, but the div is entirely covered by the glasspane div (which I use for effects, dialogs, ...). Is it possible to have the mouse-cursor change to the link-pointer if it hovers above the clickable-div even though the div is covered? In other words: Can I make the glasspane transparent to cursor settings? (I'd prefer not to use JavaScript for this)
Yes you can but there is no IE support, there you go : JSFiddle
The trick is to use pointer-events: none; on the top layer :)
#glasspane {
pointer-events: none;
}
I have a few images generated dynamicaly :
<div class="image">
<?php echo "<img class='logo_client' src='img/clients/".$row['logo_name'].".jpg''>"; ?>
</div>
And I would like them to have rounded corner so that in my CSS I put :
.image {
padding: 0;
width: 100px;
height: 100px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
behavior: url(css/PIE.php);
}
I can see the rounded corners in Firefox, Chrome and IE9 but it's not working in IE8. The PIE thing is already working with other elements in IE8.
Does anyone know what it could be ?
Thank you very much
The only way I know of making rounded corners work in IE8 and below is with code like this:
<div class="image">
<span class="tl"></span>
<span class="tr"></span>
<span class="br"></span>
<span class="bl"></span>
</div>
and then with CSS like this:
.image { position: relative; }
.tl, .tr, .br, .bl { position: absolute; }
.tl { left: 0; top: 0; width: 20px; height: 20px; background: url(/images/tl.png) no-repeat top left; }
.tr { right: 0; top: 0; width: 20px; height: 20px; background: url(/images/tr.png) no-repeat top left; }
.br { right: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/br.png) no-repeat top left; }
.bl { left: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/bl.png) no-repeat top left; }
where the background images are all images of rounded corners corresponding to that corner, e.g. the bottom right hand corner background image might look like this:
and so one (hope that makes sense)
There might be nicer ways to do this, as the above method is a bit laborious, and not particularly clean.
Saying that, I doubt any ways of getting rounded corners to work in IE8 and below will be particularly "clean". I usually just leave IE8 and below without rounded corners, not that many people even use 7 and 8 anymore in comparison to other browsers.
EDIT:
If I were you I'd steer well clear of code like this "behavior: url(css/PIE.php);" IE behaviours are not supported in other browsers, I think even Microsoft gave up on them.
Finaly I made it work with CSS3 PIE. Rounded corners appear appear in IE7, IE8 and all other browsers. It was a coding mistake, sorry.
I have a image that I would like to position other images on. For example players on a basket ball court
What is the best way to do this with CSS, I am tempted to do this with tables but fear there maybe a better solution out there
If you use tables I'll castrate you :)
So on with divs and CSS:
HTML:
<div id="bb-court">
<div id="player-1">
</div>
</div>
CSS:
#bb-court {
z-index:1;
}
#player-1 {
z-index:2;
background-image: url();
position: absolute;
margin: top right bottom left; /* All with reference to parent */
}
There are only better solutions than tables for this :).
What you're looking for is called absolute positioning. It means that you can grab an element, take it out of the document flow and define its coordinates (left, top). By default, 0,0 coordinates start at the top left corner of the browser area.
Let me give you an easy example. Here we define everything as divs:
<div id="court">
<div class="player" id="john_smith">
<div class="player" id="gunter_kreitzsch">
</div>
And the CSS that goes with it:
#court {
position: relative; /* makes the top left corner of court 0,0 */
width: 500px; height: 500px; /* define size */
background-image: url(court.jpg);
}
.player { /* definition for player divs */
position: absolute;
width: 20px; height: 100px;
}
#john_smith { /* individual player definition */
top: 30px; left: 50px; /* defining where the player should be */
background-image : url(john_smith.png);
}
You can create multiple divs and use css to style it kind of like this (may not be accurate as I am just going off the top of my head)
<div class="court">
<div class="player"></div>
<div class="ball"></div>
</div>
#css
.court {
float: left;
position: relative;
background: url(../images/court.png) no-repeat;
width: 400px;
height: 200px;
}
.court .player {
position: absolute;
left: 5px;
top: 10px;
}
.court .ball {
position: absolute;
left: 5px
top: 10px;
}
Remember this is a quick mock, I would suggest going down this route and using Firebug for firefox to debug and get the positioning you want.
Im using position absolute to give the top left corner of a DIV a rounded corner.
HTML:
<div id="MyDiv">
Some content
<div class="topLeft"> </div>
</div>
CSS:
#MyDiv {
position: relative;
padding: 12px;
background: #fff url('graident.png') repeat-x top left;
}
.topLeft {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: transparent url('corner.png') no-repeat top right;
}
This works fine in all browsers expcept IE6.
In IE6 the corner.png image seems to be about 1px out at the top corner, essentially not top: 0; and right: 0; but more like top: 1px; right: 1px;
Can anyone explain why this might be happening only in IE6?
The only way I could find the make this work for IE6 is to add
margin-top: -1px;
margin-right: -1px;
to the topLeft class, but unfortunately that will mess up the display in other browsers
I'd like to center an image in a page both vertically and horizontally even when the browser is resized.
Currently, I use this CSS:
.centeredImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}
And this HTML:
<img class="centeredImage" src="images/logo.png">
It centers in FF but not IE (image center is placed at upper left corner). Any ideas?
-Robot
I solved it this way:
img.class-name{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Try using this :
position: absolute
the universal KISS ("keep it simple and stupid") way:
<p style="text-align: center;"> <img src="myImage.png" /></p>
This is a tricky way, but it works:
CSS:
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
HTML:
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="my_cool_image.png" alt="hello world" /></td>
</tr>
</table>
</body>
</html>
text-align:center;
vertical-align:middle;
vertical-align
Should to the trick
If the supplied answers do not work and/or not consistent in each browser you may want to give this a shot:
http://andreaslagerkvist.com/jquery/center/
text-align:center;
Should get it, though.
clear: both;
margin: auto;
Solution:
.centeredImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: image-height/2;
margin-left: image-width/2;
}
since you mentioned:
margin-top: -50px;
margin-left: -150px;
And if its aligning properly to the center then your image height would be 50x2=100px; & width 150x2=300px;
.image {
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
I did it! This method is rock solid and works on all major browsers.
style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"
I have simply used a left of half the width of the image and then shunted it across using margin. Works a treat :)
There is a very simple, cross browser, auto resize method. Taking an image with width of 200px. Take half the width then do the following:
#imgcent1 {
left: calc (100% - 100px / 2 );
/*rest of code*/
}
Make sure there is "white space" to avoid negative and positive numbers (best using this convention for all operands). It will auto resize. Just try it and hopefully, testing on other browsers will ensure that it becomes the standard as intended.
IE has issues with position: fixed (along with a million other things), so I would advise against that if compatibility is important.
Use position: absolute if the container doesn't have to scroll. Otherwise you'll need some js to adjust the top and left of your image as you do scroll.
text-align: center should work if applied to the image's container, but not to the image itself. But of course that only addresses the horizontal, not vertical. vertical-align: middle doesn't work for me, even with a large enough container.
Auto margins don't work in IE, at least when I test it.
A single image on the web & responsive
Background Image:
/image.png
CSS:
html, body { height: 100%; margin: 0px; }
.bg-image {
width: 100%;
height: 100%;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
text-indent: -9999px;
}
HTML:
<body>
<div class="bg-image">Some text not displayed</div>
</body>