I'm trying to AP a div in the header of my blog containing a bg image and a link. I looks correct in Chrome, but incorrect in Safari and Firefox. I suspect it's not the AP div itself but other elements causing the shift, though I can't figure out what, and I'm using a reset.
Here's a link to screenshots show you what I'm talking about:
http://imgur.com/a/hP8dM
Here's a link to the website:
http://www.artyst-tyrant.com/blog
Here's the css I'm using:
#trex-blog {
margin-left: 435px;
position: absolute;
top: 50px;
z-index: 50000;
}
#trex-blog a, #trex-blog a:visited, #trex-blog a:hover {
background: url(../img/blog-trex.png) no-repeat scroll 0 0 transparent;
display: block;
height: 121px;
width: 356px;
font-size: 0;
line-height: 0;
overflow: hidden;
text-indent: -9999px;
}
Here's the html
<div id="trex-blog">Artyst Tyrant - Victor Beazzo Designer for Hire</div>
Designer by trade who's trying his hand at learning to code, but I'm by no means a pro, so please, go easy.
Thank you in advance for your help, it's really appreciated.
Chrome v18 on Win7 renders the image in the same place as my other browsers - perhaps you were browsing a cached version on chrome only?
The only caveat to absolute positioning elements is if they are wrapped in a relatively positioned element - then the absolute position is relative to the parent - http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I looked at your source code and didn't notice any position relative attributes on the parent elements.
I adjusted the css top attribute value to 20px and it aligned for me in all current browsers.
Related
I have my page up at http://www.playcademy.com/nolimits_mockup.php, and I am getting a bunch of whitespace below the slideshow in Chrome, though it isn't appearing in Firefox or IE.
When I inspect elements it seems that the headlineArea div is in the correct spot, but everything inside it is about 70px too low.
I'm sure I am missing something basic, but I have no idea what.
Thanks,
Doug
Your #slidearea div is too wide.
#slidearea {
display: inline-block;
text-align: center;
position: relative;
width: 915px; /*This was 920px. I narrowed it down to 915px.*/
height: 83px;
overflow: visible;
}
You need to apply a clearfix on headlineArea in order for it to display consistently because it only contains floating child elements.
See: What methods of ‘clearfix’ can I use?
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well.
Here is an example with a fixed background-image:
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
This looks like a z-index bug, try adding z-index: 1.
Looking into this, I've found the best way to debug is to:
Create a simple element at the top of the page, e.g.
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
So you need to ensure none of the child elements have a position set,
or if they do, you explicitly set a position on each child.
E.g.
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
Here is a workaround (tested on Windows 8.1):
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
try to turn off smooth scrolling option.
Internet Options - Advenced Tab - Use Smooth Scrolling
it's like rendering bug.... MS IE team is investigating....
just simply define body container to relative.
<style>
body
{
position: relative;
}
</style>
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
Link
The problem is in the jQuery Mega menu. It somehow displays correctly on Google Chrome Linux and Internet Explorer (Windows 8), but incorrectly on Opera (Linux), Google Chrome (Windows), Firefox (windows), etc. If it is displayed incorrectly, last menu when hovered overlays with search input. What could be the issue here? I do not want to change the paddings.
The difference is most likely due to browsers interpreting decimal pixel numbers differently. Each menu item doesn't have explicit width set via CSS so it gets fraction of pixels that are respected in some and gets rounded in some. Now, that only makes 1px difference per element but that eventually add up to 10px, 20px, and more.
So the solution would be to give enough room between menu item and the search bar, maybe make it narrower.
This might help you understand the issue in detail:
Are the decimal places in a CSS width respected?
Dont Know is it right method or not
You have some code in your CSS file on line no 2025
#searchform {
position: absolute;
top: 79px;
left: 744px;
width: auto;
height: auto;
margin: 0px;
display: table-cell;
}
edit the left property value to 764px from 744px;
and on line no 3416
#searchform .text_input {
width:149px;
height: 9px;
padding: 10px;
position: relative;
top: -1px;
vertical-align: middle;
font: 11px Arial,sans-serif;
}
Remove the width property from this chunk of code
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.
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}