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.
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.
The question is: is this a new Chrome bug or is something about my css causing the problem. I have created a jsfiddle at http://jsfiddle.net/tomba/ayoeebbs/1/ which reproduces the issue rather than include all the drop-down's css here.
The drop down menu worked fine on all current versions of IE, Firefox, Safari and Chrome until recently. Starting with either Chrome 42 or 43 this drop down is broken. When you hover over the anchor div the drop down shows but as soon as you move into it it vanishes - meaning no items can be selected. I have narrowed it to the border-radius line in this css:
#drop-menu:hover {
background: #888;
border-top: 1px solid #666;
border-right: 1px solid #666;
border-left: 1px solid #666;
border-radius: 5px; /* remove this and Chrome is happy again */
}
If the border-radius:5px; is commented out all is good again. This seems very strange and is pretty new in that I haven't changed my code in months. I have seen a few somewhat related questions but none (I've seen) that find the problem to be something so innocuous seeming.
It is not a big deal to me to remove the border-radius though I'd prefer to keep it but obviously won't for now at least as it completely breaks navigation. Mostly I want to know if I'm causing the problem somehow and only Chrome is "doing the right thing."
Please check this fiddle
input {
border: 1px solid blue;
padding: 4px;
border-radius: 5px;
background: transparent;
}
It looks good in any browsers other than IE 11.
If you test it in IE11 you'll see that the border is broken (white pixels) at the beginning (top and bottom) just after rounded corners, like this:
What do I miss in my style declaration?
I am able to replicate this issue in IE 11 inside virtual box. It works correctly in Edge.
This is the only solution I could find to fix this issue:
Go to device manager and disable the default Virtual box display adaptor.
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.
I'm writing some html to be shown in the screen and sent by e-mail too (I'm making it with tables). I want to sepair the sections. I've tried putting some hr tags and it's seen properly in the navigators (Internet Explorer 9 and Firefox 10) and in the email managers (Outlook 2010, Hotmail and GMail). Well, if I print it (in the navigators) I don't see the hr tags. I have the same problem with a label whose background color is seen in the navigators and email managers but when the document is printed is not seen. (The css file is the same for showing in screen and for printing).
Thanks for your answers.
You can make an <hr> that's printable without changing browser settings like this:
hr {
display: block;
height: 1px;
background: transparent;
width: 100%;
border: none;
border-top: solid 1px #aaa;
}
caveat: I only tested in chrome.
The background not printing is a preference setting in your browser. It's off by default to save ink. But if the hr (or any construct) is white and is showing on the coloured background on your screen, you might want to switch this setting on.
Make printable without changing browser settings:
hr {
border-top: solid 1px #000 !important;
}
caveat: Tested in Chrome, Firefox, Microsoft Edge.