hello everyone I am getting one problem related to designing issue. This is my website :
www.spin69.com
Now problem is this that my desgin is working well in firefox. But in chrome its design is not working properly. When I check its css from firebug. It cannot show me my css but its show me reset css please check it on chrome and firefox and tell me what is wrong in this website
I am a developer and I have only basic knowledge of css so please tell me where I am going wrong.
In the css of header>nav>ul class="menu">li
Change the menu li element padding from 2px to 1px.
#menu > li {
background: url("../images/menu_line.png") no-repeat scroll right 0 rgba(0, 0, 0, 0);
float: left;
padding-right: 1px;
}
That should work in both the browsers.
Related
Junior developer here. I am currently having issues with rounded corners in Safari. I have seen that other people have been having this issue as well. Rounded corners is working in Firefox & Chrome but not Safari. It is currently affecting more than one section of the page. The current code for one of them is:
#portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 35px auto;
list-style: none;
text-align: center;
border-radius: 1rem;
padding: 2px 15px;
outline-style: solid;
outline-color: #F10086;
}
I have tried using "px" as well as "em" to no avail. I have tried using -webkit-appearance: none;, overflow:hidden, and I can't seem to find anything on google to help fix this problem. I will attach photos for reference. The first photo is how it appears in Google Chrome & Firefox (the correct way).
Rounded Corners
Here is how the corners appear in Safari. It also appears this way on mobile devices regardless of browser.
No Rounded Corners
Any help would be great. I hope I have described this well enough.
Thanks
This is currently a bug in Safari, which will hopefully be fixed soon, where border-radius does not affect outline. There is a workaround posted here, but it is quite hacky and should only be used if you really need to use an outline instead of a border.
Im having some issues with how the content on a website im designing is appearing.
The content was originally designed and working normally in chrome but when I open the site in firefox or chrome on android i get the following issue.
Screenshot in Chrome
Screenshot in Firefox
The site is being rendered exactly the same through the inputs have a black background and the main div appears to have a shadow over it.
If anyone has had a similar issue that they have been able to solve Id greatly appreciate it.
Looks like Firefox adds automatically a red border for :required fields.
If you want to override this behavior you can do:
input:required {
box-shadow: inherit;
}
I ended up doing
input:required {
box-shadow: inherit;
}
input:focus {
box-shadow: 0px 0px 2px 2px #7AA6ff;
}
to have a normalized behavior cross-browser.
Could anyone tell me why desktop browsers (Chrome, Safari, Firefox) are showing a CSS background sprite image and the iPhone browser is not?
I have the issue with the social sharing buttons. The first 4 sharing buttons come from the WordPress theme, and the email button was added by me.
The email button is shown on desktop, but not on mobile and I'm not getting why?
I appreciate your help.
Was a problem with selecting classes correctly. Selecting the parent and than the child solved the problem
.parentclass .child {background-size:...;}
.td-sp-share-email is being called for your special email and WhatsApp icons:
ln33:
.td-sp-share-email {
width: 31px;
height: 31px;
background: url("/wp-content/uploads/social-sprites.png") 0px 0px !important;
}
However, you have a rule in style.css?b9d887 that is still setting the background-size property, to 91px 2230px !important:
ln10516:
.td-sp {
background-size: 91px 2230px !important;
}
Your image, social-sprites.png, is only 38px by 76px. Your background-size is the problem.
Update your background-size to what's appropriate and it will work.
My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}
OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->
I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.
Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!
Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}