There is a a single element of a web page that I absolutely MUST have sit in a precise location on the page, and there seems to be a 14px height differential between Chrome and FF which won't allow me to situate the graphic uniformly between the two. I used a conditional statement for IE9 and IE8, but now the problem exists with Chrome and FF.
I don't have access to the main head section or main global CSS for this site, unfortunately, and there is not a global reset of 0 on the margins. Even if it were possible for me to do so, there have been so many hacks and fixes, that it would be counter-productive to do a global reset.
So after messing around with musical chairs of this object, I think my final solution (although not very elegant to do for just ONE graphic) is to write a style sheet for the margin-top of this image (actually a div with an image background), and have javascript detect the browser and feed the style-sheet accordingly (i.e. - if it is FF then render this CSS, or if it is Chrome then render this CSS).
Unfortunately I cannot show the page, but my CSS for the element is:
#telescope {
background: url("my-image.png") no-repeat scroll 0 0 transparent;
height: 102px;
position: absolute;
right: -48px;
margin-top: 748px;
width: 98px;
z-index: 1;
}
Try putting this at the top of your css:
* {
margin: 0;
padding: 0;
font-family: "Open Sans", 'Consolas', sans-serif;
}
html, body {height: 100%;}
Related
I just ran across an issue with a element (the header), fixed positioned to the top of the page, disappearing. This was found in a mobile site I was creating.
What was causing this was a click to a menu button, which would open the sidebar navigation. When I clicked this button, the sidebar would open as expected, but then the header would disappear. What would be left of it was the remnants of an image replacement technique I was using the Phark Method; the text "menu" was left behind. (I'm fairly sure that this is not important to the issue at hand, but I could be wrong.)
The header element had styling like so:
header{
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
This would only happen in Android 4.0 stock browsers (Galaxy Tabs/Galaxy Nexus were some I tested).
What would cause this to happen in just Android 4.0 browsers?
What seemed to be the issue was the fact that the header element did not have a left property value. To fix this, I just added a left:0; property to the header element, giving me the following CSS:
header{
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
After figuring this out, I recall having a similar issue on a desktop site that used fixed positioning. The fact that I didn't have a left property set caused the fixed element to not even appear when the page loaded.
Hope this fixes/sparks ideas to a fix for users in the future! I know I'll be setting both a x and y axis position property to all my fixed elements from now on ;)
i have i little problem my portfolio has a picture of me on it that keep 100% height and i want to center it with margin: 0 auto; in javascript. This works in IE (for once) but dosn't work in webkit browser.
my portfolio can be found on www.koenvrij.nl
1) Your image needs to be display: block; for margin: 0 auto; to work.
2) You have an inline style with margin-left: 0px;. That's gonna cause problems
3) You have a bunch of other crap in the image's parent container, so it's going to center it in the remaining, unfilled area (not the entire area).
I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.
Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>
My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.
Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.
There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.
This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast
I'm developing a chrome extension, without going too much into it I need to inject some code into webpages and put an overlay over the full page. Thus far I have nearly achieved this butI just cannot seem to get the overlay over certain parts of some websites. These include videos from youtube, the searchbar on top of google search results, random parts of kongregate (the stars and monthly comp info).
Below is the css I'm currently using to achieve this, I have played around and looked for solutions at various places but no solutions seems to work.
.cssX9482Overlay
{
position: fixed;
width: 100%;
Height: 100%;
vertical-align: middle;
background: #000000;
opacity: 0.97;
filter: alpha(opacity=97);
text-align: center;
top: 0;
left: 0;
}
The strange css name is just so it doesn't clash with pages formatting. As you probably guessed this is being used to format a div
Remember this is a Chrome extension, therefore HTML5 and CSS3 solutions are valid.
<style type="text/css">
iframe, div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:25px
}
iframe { z-index:1 }
div {
z-index:2;
background:#000;
border:solid 1px red;
color:#fff;
}
</style>
<applet code="myApp.class" width="700" height="700"></applet>
<iframe></iframe>
<div>EXAMPLE TEXT</div>
TAKEN FROM: http://www.bluestudios.co.uk/blog/?p=6
Also you had height capitalized
You might need a z-index in there; on a Google search results page for me, adding a z-index: 999; covers everything except the top navigation (Web, Images, Videos). This is because Google's CSS looks like:
#gbz, #gbg {
...
z-index: 1000;
}
Elements with a larger z-index are placed on top of others. Even while using this property, I've had problems in the placing content on top of Adobe Flash elements and Java applets.
I wrote a small script to let a label move out of the way everytime the corresponding input field is needed.
Please check it out here: http://jsfiddle.net/5nZWJ/68/
The problem is: it works just as expected in Firefox, but all other browsers I tried (Chromium, Internet Explorer and others) don't keep the bottom-border justified (hard to explain but you will see it if you try it out).
What do I have to change to make this thing in all browsers look like in Firefox?
Thank you in advance!
I have solved your problem. It is now smooth in all browsers: http://jsfiddle.net/5nZWJ/70/
The key is having #formWrapper positioned absolutely from the bottom. This means when the height is increased it expands from the bottom up and doesn't need to recalculate the position from the top.
CSS:
#wrapper {
background-color: lightblue;
height: 110px;
width: 500px;
position:relative; /* Allows absolute figures to be predictable */
}
#formWrapper {
background-color: yellow;
border-bottom: 4px solid red;
bottom: 29px; /* Changed from top and new measurement added */
left: 120px;
height: 57px;
position: absolute;
z-index: 1;
width: 108px;
}
JavaScript:
I removed all lines of code referring to the position, as it no longer needs to be changed or recalculated.
I think this might be related how different browsers count border pixels
http://ejohn.org/blog/sub-pixel-problems-in-css/
(not actually the same problem, but you get some idea)
Instead of using border, I recommend you add a div wrapper around the element, with the background color set to border color and padding set to the border width.