Here is a link to the BUG, only shown in firefox( chrome is ok).
The problem is with the stars (active, inactive), and try to click on one-two radio.
I have this css, but it is not working right
/* STARS */
.star-icon {
color: #ddd;
font-size: 1.4em;
position: relative;
}
.star-icon.full:before {
color: #fdb229;
content: '\2605'; /* Full star in UTF-8 */
position: absolute;
left: 0;
}
.star-icon.half:before {
color: #fdb229;
content: '\2605'; /* Full star in UTF-8 */
position: absolute;
left: 0;
width: 50%;
overflow: hidden;
}
#-moz-document url-prefix() { /* Firefox Hack :( */
.star-icon {
font-size: 20px;
line-height: 10px;
}
}
/* STARS */
Change line-height: 10px; to line-height: 17px;
#-moz-document url-prefix("") {
.star-icon {
font-size: 20px;
line-height: 17px;
}
}
Why are you doing this in this way? Font line-height's could be interpreted different in different browsers. Maybe this could help: http://yuilibrary.com/yui/docs/cssreset/
but I recommend you to do it with images (if you want to use half-stars and be sure that everything is ok in any browser).
As previously mentioned by Patryk you shouldn't be using line-height to position elements. If I were you, I'd have floated block elements with fixed height and width and then positioned the pseudo-element centrally using absolute positioning.
Another solution in this case is to scrap the whole #-moz-document override and just add:
width: 1.4em;
I've checked it in both Chrome and Firefox. I suspect the issue is because span's are naturally inline element and don't have set width's.
Related
The titles in my webpage are also a link that anchor to themselves, for accessibility reasons, I cannot really change that.
However, most people would like something in the likeness of 🔗 Title with only the 🔗 being a clickable link.
So my html looks like
<h2 id="myid">Title</h2>
And my CSS (so far):
h2 a::before { content: "🔗 "; }
However, I am far from having the wizardry to know what to do next, I tried looking at this question but I don't really know how to "save" the ::before part from being affected.
It's a bit tricky but you could set a fixed width for the 🔗 character and overlap the h2::after pseudoelement for the entire length of the element minus the width of the a::before pseudoelement so the text can't be clicked.
It's worth noting that this will reduce the usability of the page so be careful on using this approach
h2 {
position: relative;
display: inline-block;
}
h2::after {
position: absolute;
z-index: 1;
content: "";
right: 0;
height: 100%;
width: calc(100% - 1.25em);
}
h2 a::before {
content: "🔗";
display: inline-block;
border-bottom: 1px dashed yellowgreen;
width: 1.25em;
}
h2 a {
text-decoration: none;
color: inherit;
}
<h2 id="myid">Title</h2>
I have the next CSS code:
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
Now I want to execute the first just in Google Chrome and Safari, and the second in other browsers.
I tried this, but second code seems to be executing always:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
How can I fix that?
The problem is that you're overriding your webkit styling with the non-webkit styling.
Reversing the order should fix this:
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
You may also want to check that your -webkit-min-device-pixel-ratio fires on all webkit-using devices, but it probably does.
For reference, Cascading Style Sheets are read from top to bottom. The key word is Cascading. If one CSS rule is given before an identical CSS rule, the latter one will take precedence. In your example you were styling specifically to webkit browsers but then overriding it with the general styling rules. Reversing the order means that the webkit styling here will override the general styling (without affecting non-webkit browsers).
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
I have a website that I've tested in all other major browsers that works fine. My problem is on WebKit browsers (Safari 5.1.4 and Chrome 21) where my asolutely positioned text works some of the time. If I refresh 10 times, it gets positioned correctly probably twice. The funny thing is, if I zoom in on the browser, the formatting gets fixed.
Website is: http://survey-snap.com/ssContact/
The elements are bulletpoints in the blue section.
CSS:
.bulletpoints {
padding-top: 30px;
font-size: 1.11em;
}
.bulletpoints li {
height: 56px;
position: relative;
padding-bottom: 17px;
}
.bulletpoints img {
float: left;
padding-right: 5px;
}
.bulletpoints span {
position: absolute;
top: 5px;
width: 250px;
}
.bulletpoints p {
margin-top: 10px;
padding-left: 61px;
}
After reading Absolutely positioned images in Chrome/Safari, I just re-wrote that section to remove the positioning and just floated it instead.
I am a bit pressed for time so I am sorry that this is brief.
I am trying to align these six li tags that act as drop downs, IE7, IE8 and all the good browsers work fine but IE6 continues to be stubborn and put them all over the place, you can find the page here.
I am using this CSS to place them inline.
/* I beleive this is the important bit? FROM HERE */
li.rathdown {
position: relative;
float: left;
margin: 0;
padding: 0;
display: block;
}
/* TO HERE */
li.rathdown * {
margin: 0;
padding: 0;
float: left;
}
li.rathdown ul {
width: inherit;
display: none;
position: absolute;
z-index: 100;
}
li.rathdown-sub {
position: relative;
}
li.rathdown-sub ul {
z-index: 99;
}
li.rathdown img.arrow {
float: right;
margin-right: 3px;
padding: 3px;
}
I also have another problem, in IE7 and IE8 the bottom of the page curls up slightly, any ideas?
Thanks for any suggestions you can give.
I have fixed them both now. The gap at the bottom was due to the height of the page, I think it was being shortend in IE by somethings padding (???) and the menu was fixed by applying the styles to all of the li's.
Sorry for the bad answer. It's a bit of an edge case really.