I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons
Related
I have the following 3 screenshots of which the first 2 are from Chrome and the last one is from IE10. I've built the interface for a Query Builder. The first image shows the default view and on clicking the + button the view changes as shown in the second image.
Following is the CSS which I got for the border around the section.
.container_border {
border: 2px solid rgb(148, 178, 73);
border-radius: 20px;
border-top: none;
margin: 0 -1px -1px;
padding-bottom: 10px;
padding-top: 20px;
}
When I tried the same thing in IE10, the border did not expand automatically and I'm not sure why.
Note: I'm not so fluent with CSS and I make use of Bootstrap for views. This is the first time I'm testing with IE, any best practices recommendations will be appreciated.
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>
my search which is on the right side has a button named as Go, it is on right place in all modern browsers except IE8 (in IE7 and IE6 it is a nightmare but I don't care for those browsers).
I tried a few things but the button is not coming to its place in IE8 can someone tell me why is it so
here is an image to show what I mean
http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png
Here is the demo page http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
and if you don't want to look for the css
here is the css:
.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
0 0 4px #7F241C;
cursor:pointer;
}
This is easily fixed if you create a conditional statement in your html head to wrap your new stylesheet in such as
<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]-->
and put the following CSS into your stylesheet this should fix the problem.
input.formbutton.buttonbloghuts.buttongradient {
position: relative;
top: 8px;
}
You already have a conditional statement in your head to create your HTML5 elements.
Any problems and I'll be happy to help.
Removing the top and bottom margins from .formbox and .formbutton, and setting them both to vertical-align: top; largely sorted the problem in IE8. If you need that vertical space around them, you could move use padding on the parent form (and make it display: block;).
(Using conditional classes makes it a lot easier to target IE-specific fixes like these)
If you could provide a jsfiddle of the button code that would help. IE dev tools aren't cooperating very will with me. If my memory serves, try adding float left on both input fields and see what happens.
Look at this site and at the search: it's really similar done but there's an extra div to do stretchy stuff : http://www.genesismedicalimaging.com
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
For some reason most modern browsers will stop applying their default input border style to text boxes if you give them a background image. Instead you get that ugly inset style. From what I can tell there's no CSS way to apply the default browser style either.
IE 8 doesn't have this problem. Chrome 2 and Firefox 3.5 do and I assume other browsers as well. From what I've read online IE 7 has the same problem, but that post didn't have a solution.
Here's an example:
<html>
<head>
<style>
.pictureInput {
background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
background-position: 0 1px;
background-repeat: no-repeat;
}
</style>
<body>
<input type="text" class="pictureInput" />
<br />
<br />
<input type="text">
</body>
</html>
In Chrome 2 it looks like this: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
And in Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
Update: JS Solution: I'm still hoping to find a pure CSS-on-the-input solution, but here's the workaround I'll use for now. Please note this is pasted right out of my app so isn't a nice, stand alone example like above. I've just included the relevant parts out of my large web app. You should be able to get the idea. The HTML is the input with the "link" class. The large vertical background position is because it's a sprite. Tested in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. I need to tweak the background position a couple pixels in some browsers still:
JS:
$$('input.link').each(function(el) {
new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
});
CSS:
input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }
Update: CSS Close Enough Solution: Based on the suggestion from kRON here's the CSS to make the inputs match FF and IE in Vista which makes a good choice if you decide to give up on pure defaults and enforce one style. I have modified his slightly and added the "blueish" effects:
CSS:
input[type=text], select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 1px #e3e9ef solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
border-top: 1px #5794bf solid;
border-left: 1px #c5daed solid;
border-right: 1px #b7d5ea solid;
border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
When you change border or background style on text inputs They revert back to the very basic rendering mode. Text inputs that are os-style are usually overlays (like flash is) which are rendered on top of the document.
I do not believe there is a pure CSS fix to your problem. Best thing to do - in my opinion - is to pick a style that you like and emulate it with CSS. So that no matter what browser you're in, the inputs will look the same. You can still have hover effects and the like. OS X style glow effects might be tricky, but I'm sure it is doable.
#Alex Morales: Your solution is redundant. border: 0; is ignored in favor of border: 1px solid #abadb3; and results in unnecessary bytes transferred across the wire.
This is the CSS that I use that can provide the default look back:
input, select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 2px #f1f4f7 solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
You could also apply :active and give the controls that blueish hue once they're selected.
Update!
Ok, here is a workaround that I think is cross-browser compatible. The only issue would be that the default style differs by a few pixels so this might need some tweaking.
<html>
<head>
<style>
.pictureInput {
text-indent: 20px;
}
.input-wrapper {
position:relative;
}
.img-wrapper {
position:absolute;
top:2px;
left:2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
<input type="text" class="pictureInput" />
</div>
<br />
<br />
<input type="text">
</body>
</html>
By using absolute-relative positioning you can make the absolute div (containing the image) act absolute in relation to its parent which all browsers I know about (not counting sub-IE6 versions, IE6+ are fine) can handle. User scaling might be an issue, but this is how it is with workarounds.
On the upside, you don't have to change the styles on your inputs at all (except for text-indent, but you'd do that anyway I hope).
On the downside, it's not the prettiest workaround.
Old!
I know this is not what you want, but you could do something like this to at least make all the input borders consistent.
input {
border-color:#aaa;
border-width:1px;
}
I haven't tried it in all browsers, but since you aren't setting the border-style it might use the native style but with another size (though you can skip that too). I think the key is to just set the border-color to something so that all input fields will use the same border-color and leave the rest up to the browser.
I had a text background image, and this was also annoying me. So I put a relative <div> round the <input> and then added the image absolutely positioned over the <input>.
Then of course I needed a little more Javascript to hide the image if it was clicked, or if the input got the focus by tabbing, or by being clicked around the edges of the image.
With a bit of fiddling this looked pretty good with IE8, Firefox, Chrome, and Opera, but it's a horrible kludge and it would be nice if the browsers fixed it.