I have the site
and it renders ok, even in IE. However in Opera 11.62 there is a very weird bug whenever I am hovering over the links from the navbar. Why does this happen? It is very annoying.
There is also a very weird thing that is happening, if I resize the browser window so the last link is out the pages than only the last link it displays ok on hover, but the other 2 are still broken.
Add this line of code to a:hover
height: 100%;
So you get:
a:hover {
background: -o-linear-gradient(top, #93C9ED 0px, #76B4E1 100%) transparent;
border-bottom: medium none currentColor;
border-left: 1px solid #1C5E9C;
border-right: 1px solid #1C5E9C;
border-top: 1px solid #1C5E9C;
color: #275D8B;
height: 100%;
}
Add a height to the anchor tag, same as your line-height:
header nav ul li a { height:2.5em; }
This works for me, in Opera 11.64. I see you've already tried this solution, but I'm guessing the reason you haven't made it work, is because the line-height is 2.5em, not 2.8 (unless you've changed it).
Related
There is a very strange problem in my website. When opening the homepage on Mozilla the borders of the 2 buttons on my header are missing. You can check the website here: http://www.beautiful-burger.com
Just open it on mozilla and refresh it multiple times to see what I am talking about. The buttons are the ones used on the top right BUT they are also used on the lower part of the homepage (without any problems on the borders). Also, if you check another page, like the Food Blog, you will see that they appear just fine there. Is it a problem with the header? I have been trying to figure this out for the past 2 days but I have no clue what's going on..It runs just fine on other browsers. The css I am using atm is this:
#header-button-container .primary-button,
#header-button-container .secondary-button {
color: #ffffff ;
border: 1px solid #ffffff !important;
vertical-align: baseline;}
.secondary-button {
background-color: transparent ;
border: 1px solid #ffffff !important;
color: #fff !important;}
.secondary-button:hover{
background-color: #D0C274 !important ;
color: #fff ;}
.site-header .secondary-button {
color: #fff; }
Thank you for your time and any help. Feel free to ask if you need any more information since I am very new at this and probably missing something out.
I can't replicate the problem in my firefox. What version and what OS?
In your css your only targeting the border attributes using 'border:' rather than specifying individually. Use something like the following.
#header-button-container-inner .button.secondary-button {
border-color: white;
border-style: solid;
border-width: 1px;
}
if that doesn't work
#header-button-container-inner .button.secondary-button {
border-color: white !important;
border-style: solid !important;
border-width: 1px !important;
}
And if that doesn't work
#-moz-document url-prefix() {
#header-button-container-inner .button.secondary-button {
border-color: white !important;
border-style: solid !important;
border-width: 1px !important;
}
}
In Chrome, I can set the background-color of a text input field and all that changes is the background color. In this way I can highlight fields that need to be paid attention to (make the background light red so that the user knows there's a mistake there). In Firefox, and I suspect other browsers, the background color is changed, but the text field also looks more plain. Inset shadows disappear and when focused on the field there's no blue glow around it. It just looks different.
Is there a way to highlight a text field without changing the look and feel of it in Firefox (and other similar browsers)?
UPDATE: Example code:
<ul>
<li><input type="text" style="background-color: red"/></li>
<li><input type="text"/></li>
</ul>
You can see the difference between the 2 text fields. Hovering and focusing on the normal text field feels native to the OS. But the text field with a red background isn't as good anymore.
Here's the jsfiddle link.
I got the same issue back then, seems that if you want to change the background-color, you must change the border style for Firefox, 2px solid and the color of your choice.
No, I do not believe so. Opera has the same behavior as Firefox. The best solution I came up with was to only style the elements if they required the user's attention (the element has focus or contains invalid data).
This is what I use as part of my Sass bootstrap:
#mixin background($image, $bgcolor) { background: $bgcolor url(#{$imagedir}#{$image}) no-repeat scroll right center }
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
// background-color background-image background-repeat background-attachment background-position
&:required:valid, &:required:in-range {
//border: 1px solid #0f0;
&:focus { outline: 1px solid #0f0; #include background("tick.png", transparent); }
}
&:invalid, &:out-of-range {
#include background("asterisk_orange.png", $required-bg);
border: 1px solid $required-color;
&:focus {
background-image: url("#{$imagedir}exclamation.png"); outline: 1px solid $required-color;
}
}
}
This is what the generated CSS looks like:
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:valid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:in-range:focus, textarea:required:valid:focus, textarea:required:in-range:focus, select:required:valid:focus, select:required:in-range:focus {
outline: 1px solid #0f0;
background: transparent url(icons/silk/tick.png) no-repeat scroll right center;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range, textarea:invalid, textarea:out-of-range, select:invalid, select:out-of-range {
background: #fef8b4 url(icons/silk/asterisk_orange.png) no-repeat scroll right center;
border: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range:focus, textarea:invalid:focus, textarea:out-of-range:focus, select:invalid:focus, select:out-of-range:focus {
background-image: url("icons/silk/exclamation.png");
outline: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus + .tip, textarea:focus + .tip, select:focus + .tip {
display: inline;
position: absolute;
border: 1px solid red;
background: #fef8b4;
margin: 0;
padding: 2px .5em;
}
It's worth noting that for Opera, outline does not cause the element to lose its default styling like border/background does.
I'm having some issues with my layout in IE.
#dumpit {
width:99%;
min-height:330px;
background-color: #FFF;
border: 2px solid #74c9e4;
border-radius:20px;
margin-top:18.75%;
padding:3px;
overflow:hidden;
My sign appears fine in Firefox and Chrome, but in IE the dumpit div is being pushed down much farther then I wanted.
Any suggest on how to fix this?
thanks
I found some code for generating CSS3 buttons which I'm using on my site. The buttons look great when viewed in the browser. However, on the mobile web version of my site (which uses the same styles) the buttons render differently. Even stranger, if I use Safari and view my site with User Agent of iPhone the buttons look as they should. However in iOS Simulator they don't. Can someone help me understand why?
Here's the code I'm using:
.button, #button .button, li.button .button {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 1.5em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.orange, #button .orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
Here is how it renders in the browser:
And here is how it renders on an iPhone:
Apply "-webkit-appearance:none;" on your css properties and add this line
"input[type=submit], input[type=Reset]{ -webkit-appearance:none; }".
As Shakti says you should just put the following css for the button.
-webkit-appearance: none;
This is explained further in this question:
'CSS submit button weird rendering on iPad/iPhone'
It seems that on iOS the buttons have the default iOS rounded look if you supply just a simple background color :
background: orange
But if you supply a gradient then this is effectively overriding the appearance css property to use a custom style.
But because you had the wrong syntax it was giving you the iOS look.
I caught my mistake. I had the wrong syntax for -webkit-gradient. Instead of:
-webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20));
It's...
-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
I had a comma between left and top where it shouldn't have been.
Have you tried using an SVG as your background image (generator can be found here)? Using this worked on an iPhone 3G I have lying around (jsFiddle link here):
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZBQTUxQSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y0N0EyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkwNCkiIC8+Cjwvc3ZnPg==);
This is compatible with IE9, Chrome, Safari and Opera. This will not work with IE7/8. What I suggest is using an IE specific stylesheet or adding to the .orange class instructions to apply the style to IE7 or IE8 and below. More info on that here.
I want very simple markup (<a class="next">Next</a>) to show a button with rounded corners, but with an arrow pointing right (like the "back" navigation button at the top of some iPhone apps). This is what I have so far (jsfiddle link here):
a.next {
padding: 6px 12px;
border-width: 1px !important;
border-color: #333 !important;
background: #5BFF2D; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5BFF2D', endColorstr='#20CA00'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#5BFF2D), to(#20CA00)); /* for webkit browsers */
background: -moz-linear-gradient(top, #5BFF2D, #20CA00); /* for firefox 3.6+ */
border-radius: 6px 0 0 6px !important;
border-style: solid none solid solid !important;
}
a.next:after {
content: '';
display: block;
width: 0px;
height: 0px;
border-top: 12px solid transparent;
border-left: 16px solid green;
border-bottom: 12px solid transparent;
background: white;
}
..which looks like this:
As you can see, it doesn't work at all. My thoughts at this point are: even if I do get the arrow correctly positioned, it'll never show the background gradient, much less the 1px border, correctly.
Is there a clean way of doing this?
Original Answer
This gets very close, but without a border. If you want to add a span inside, then the border becomes possible also, as well as some smoothing on the 'faked' gradient.
Updated Answer
This achieves the gradient and overall looks better. The main issue is that it requires you to have a solid background color behind it (white, in this case).
Final Answer
This actually does support the gradient leaving the angles transparent. It only will work in browsers supporting CSS3 transforms. I tested in IE9, FF 11, Chrome 18. IE9 is not showing your filter gradient. Chrome renders on my screen with a snubbed point to the arrow (perhaps with some browser targeting, variations like that could be adjusted for).