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.
Related
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.
I created a custom header for a pre-made responsive theme. It looks great in chrome, but both firefox and ie aren't showing all of the menu items and are positioning a logo::after shadow in a weird spot.
I already verified that there are no errors in my code and tried implementing normalize.css, but nothing has worked to fix the problem.
This is the code I'm using:
.logo::after {
content: "";
background: transparent url("/wp-content/themes/porto/images/shadow.png") repeat scroll 0% 0%;
width: 247px;
height: 14px;
position: absolute;
top: 64px;
right: 30px;
min-height: 0px;
}
#main-menu {
position: relative;
margin-right: 15%;
margin-bottom: 2%;
}
What am I doing wrong here? Thanks for the help!
I'm having an issue with the pseudo-class :hover in Google Chrome.
Basically I have an element that when in :hover state it's sibling is displayed. This works fine.
Then I add a media query so that when the viewport has a specific min-width the element is no longer displayed but the sibling is.
When going from the min-width to a smaller width the display:none on the sibling no longer fires.
It might be easier to understand by taking a look at this example. Try resizing the viewport.
http://jsfiddle.net/5gPGR/1/
HTML
<div id="container">
<div id="trigger">
</div>
<div id="target">
</div>
</div>
CSS
#container {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 24px;
line-height: 80px;
background: #777;
box-sizing: border-box;
}
#trigger {
position: absolute;
display: block;
width: 50%;
height: 80px;
top: 0;
right: 0;
background: #275;
}
#target {
position: absolute;
display: none;
width: 50%;
height: 80px;
top: 0;
left: 0;
background: #f57;
}
#trigger:hover ~ #target {
display: block;
}
#media screen and (min-width: 400px) {
#trigger {
display: none;
}
#target {
display: block;
}
}
This is only an issue in Chrome/Chrome Canary. I have tested in the latest versions of:
Chrome
Chrome Canary
FF
IE
Safari
Opera
Is there something I can do to resolve this or do I just need to stick with javascript for these kinds of interfaces.
EDIT:
I forgot to mention that if I force the element state to :hover using chrome dev tools it starts working again until the next resize.
Interesting error, I'm not sure why that happens
I was able to fix the issue by adding an empty #target:hover { }
Demo
If you're using a preprocessor that would remove this line, you can add a property that you already have, like #target:hover { display:block; }
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.
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...