I found a full CSS tooltip to use in a new site. It works perfectly in Safari and Chrome. But only in Firefox, the tooltip keeps hovering to the far left of the DIV no matter where the link is on the page.
I found this question on this site that was extremely close, but did not give me the answer I needed.
CSS Tooltip hovering position issue
Could it bug in Firefox, or is there additional code i need to add for Firefox specifically?
I did make sure relative and absolute positioning were correct according to rules on setting that up. I am still very new to all of this. So any help would be appreciated.
Thank you.
Here is my code:
a.tip2 {
position: relative;
text-decoration: none;
}
a.tip2 span {display: none;}
a.tip2:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: 120px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
background: rgba(0,0,0,.8);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
color: #fff;
font-size: .86em;
}
a.tip2:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom: -20px;
left:1em;
}
I have had a similar problem with Firefox positioning the hover image in a different location than IE, Chrome, and Safari.
I changed the css specifically for Firefox:
/*Firefox*/
#-moz-document url-prefix()
{
a.enlarge:hover span{top: 250px; left: 20px;}
}
whereas for the other browsers I am using top: -200px
Related
I have a problem with a border in Chrome. The green border has some grey lines.
Firefox: not visible -> ok!
Chrome: not visible but visible in the dev tools, mobile phone.
Chrome on my phone: visible
Here is a screenshot that shows my problems!
https://abload.de/img/cssiee7s.jpg
1) When you go to http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php
there are two small grey lines
2) When you go to http://www.seelenpuls.at/hpneu/m_neues_de.php there are even more problems.
3) The menu button has an orange border (mobile only) ... and I don't know why as there is no such color in my CSS.
Please help!
Here's the code. The bold part is the border that causes the problems.
* { padding: 0; margin: 0; }
body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}
#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}
#logo {
position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}
#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}
#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}
#content
{
position: absolute;
top: 218px;
width: 350px;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
**border-bottom: 5px solid #556B2F**;
}
Ok so there is a couple of things that are going on in your css.
White lines
For your content div, I would use a width of 100% for mobile devices now, as you scale to tablets and desktops you can change to a more fixed or fluid width. I would also remove the border bottom property. This is not fully extending to the width of the content box and I am unsure if it has to do with the border-sizing property you are using. I would also apply the border-sizing this way so it is applied to every element in your html
* {
box-sizing: border-box;
}
Orange border - this is caused by the :focus pseudo css property of the button you are using, you can remove it this way
button:focus {
outline: none;
}
CSS Normalize or CSS Reset - consider using one of these stylesheets in your website. They help you rendering all elements more consistently through all browsers. This will save you the time of remove the :focus property, like I mentioned above in any project moving forward. Most popular CSS frameworks utilize this to normalize basic styles.
Link to Normalize.css
Having an issue I don't understand. The only way I've been able to center a button on my page perfectly across all devices is if I apply a width: 100% to it.
Issue with this however, is it then makes a sprawling button, way too wide. I'd like to cut it down. The problem is, anytime I get rid of the width: 100% in any way, it makes the perfect button position go haywire.
Any thoughts on how I can have my button centered, but also not super wide and sprawled out. Thank you. -Wilson
link to site: http://www.wilsonschlamme.com/test3.html?
CSS:
img {
width:100%;
max-width:500px;
max-height:340px;
box-shadow: 5px 5px 5px grey;
border-style: groove;
border-width: 1px;
position: absolute;
top: 107px;
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
width: 100%;
position: relative;
top: 600px;
}
#ShowText{
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
position: absolute;
margin-top: 500px;
text-align: center;
margin-left: -140px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
h1{
position: absolute;
top: 5px;
font-size: 250%;
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
#wrapper {
width: 500px;
margin: 0 auto;
}
take a look at this site there's a complete guide to centering a div.
http://www.tipue.com/blog/center-a-div/
I don't know what's your base using absolute positioning for mostly of your element, but to answer your issue, give text-align:center; to #wrapper, then give text-align:left for each of #wrapper children, except the button.
I'll apologize in advance... i'm not a css expert. I'm having a problem where I'm drawing a circle beside a button. The circle appears correctly in IE, but in Firefox, its too high.
I have the following css classes defined:
.circle {
width:1.2em;
height:1.2em;
border-radius:50%;
font-size:2em;
color:#fff;
line-height:1.2em; /* must match the height */
text-align:center;
background:#2b5f77;
font-family: "Times New Roman";
text-align: center;
vertical-align: middle;
font-style: italic;
font-weight: bold;
position: absolute;
top:239px;
left: 340px;
border-style: solid;
border-width: 1px;
}
.circle:hover {
border-top-color: #28597a;
background: #28597a;
color:#ec9226;
}
.circle:active {
border-top-color: #1b435e;
background: #4d8eAE;
}
And then the code to render the circle:
<div class="circle" value="i">i</div>
How change I change this code so that the circle appears in the same spot in all browsers?
EDIT 1
I'm testing with IE 9 standards mode.
and if it matters, the opening html tags look like this:
<!DOCTYPE HTML>
<html lang="en">
Thanks.
From my testing, it seems if you remove these rules for your .circle css,
.circle {
position: absolute;
top:239px;
left: 340px;
}
and replace them with
.circle {
position: relative;
margin: 239px 0px 0px 340px;
}
, you get the desired results. Tested and compared in Internet Explorer (9&10), Google Chrome & FF.
I'm not sure as to what is the exact cause for this, but the browser-specific body & html padding/ margin does play a small part.
I've decided to add a div around both the button and the cirle. and then force the positions like so:
.shared
{
position: absolute;
width: 200px;
}
.buttonalign {
position: absolute;
display: block;
top:255px;
}
.circlealign {
position: absolute;
top:255px;
}
Here's the code that creates / modifies the html:
$(document).ready(function() {
$(".submit").addClass("buttonalign");
$('<div class="shared">').insertBefore($('.submit'));
$('.submit').after($('<div class="circle circlealign" value="i">i</div></div>'));
});
Thanks.
I am having issues viewing my site in Internet Explorer. In the following CSS/HTML the image is supposed to be outlined, curved radius, and scaled to fit. However IE 8 does not scale the image, curve the corners, nor does the outline appear. Here is the jsfiddle: http://jsfiddle.net/pave4/ This page is fine in the newest IE (IE8), however I need to make sure it also works on older versions of IE.
HTML:
<ul>
<li>
<a href="/aboutme/">
<span class="img-outline"><span class="page-img" id="aboutme"></span></span>
<span class="page-title">About Me</span>
</a>
</li>
</ul>
CSS:
.page-title {
text-align: center;
display:block;
text-decoration: none;
}
.img-outline {
height: 100%;
background: rgba(0, 0, 0, .3);
padding: 5px;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 18%;
-moz-border-radius: 18%;
border-radius: 18%;
}
.page-img {
height: 100%;
background: rgba(50, 50, 50, 1);
background-size:115px 115px;
background-repeat:no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 15%;
-moz-border-radius: 15%;
border-radius: 15%;
}
li,
li.current,
li.current:visited {
margin-left: 1px;
margin-right: 1px;
width: 118px;
height: 112px;
display: block;
float: left;
position: relative;
opacity: .6;
}
li:hover { opacity: 1; }
li .img-outline {
width: 70px;
height: 70px;
}
li .page-img {
background-size:70px 70px;
}
li #aboutme {
background-color: rgb(36, 112, 245);
background-image: url('http://www.rasnickjewelry.com/images/uploads/900_Animals_300/901_Elephant_Head_Ring_side_R300.jpg');
}
You're using lots of CSS3 attributes that IE8 doesn't support I'm afraid.
As I said in my comment to your original Question, IE up to 8 didn't support rgba colors. Since you don't use the alpha channel, use background-color: #323232; instead.
IE8 also doesn't support the standard opacity property, you need filter: alpha(opacity=60); instead (percantage value sans the %). Related could be that elements in IE require layout to render correctly: There is a bunch of articles covering this topic. A good one is On Having Layout.
To get a feel for what css properties and features are supported use resources such as When Can I Use or Quirksmode
Do not resize images with styles upload them in the exact size, that will save you loading time.
About the other syles like the border radius try to use this tool http://css3pie.com/
My horizontal nav bar is populated with images for the links that are coming from one image that includes all the sub-images; each nav item image is identified by the pixel location within the larger image. This works perfectly fine in Firefox and Safari, but in IE, all of the images are misplaced too low within the nav bar (can only barely see the tops of the words). Two questions:
How do I fix this in the css so it is back-compatible with the more recent versions (and current versions) of IE
Do I need a separate IE stylesheet?
Here's the css (truncated for just a few of the links):
ul#navbar {
width: 750px;
height: 22px;
margin: 0px;
padding: 0px;
text-indent: -9999px;
border: none;
}
ul#navbar li {
float: left;
height: 22px;
margin: 0px;
padding: 0px;
list-style-type: none;
border: none;
/*position:absolute;*/
}
ul#navbar li a {
display: block;
height: 22px;
border: none;
}
.home {
left: 0px;
width: 78px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.classes {
/*left: 78px; */
width: 92px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: -100px 0px;
}
.training {
left: 170px;
width: 89px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: -200px 0px;
}
I've used *.html for IE 6
/** For IE6 /
*html #related-products
{
width: 300px;
overflow:visible;
}
*html #related-products ul
{
position:relative;
left: -65px;
}
*html #related-products li
{
border: none;
}
/ End of IE6 hack **/
Otherwise there's the IE conditional comments.
http://www.quirksmode.org/css/condcom.html
As far as separate style sheet you can create one have your Server Side language detect the browser and if Internet Explorer make sure your IE one gets added, otherwise you can add these into an existing CSS file. I've done both.
Well ... I think you don't want to hear this, but: Never, ever rely on exact pixel positions in HTML/CSS (imagemaps superimposed on one image are the only exception).
HTML is simply not made for pixel-exact design. From your description, there's not even a possibility for graceful fallback on browsers that don't support one of the technologies you seem to rely on. And what about screens that are too narrow to show your complete navbar (e.g. mobile devices)? In the best case, you'll get a multi-line navbar, but from your description, it would be broken since the position would be wrong...