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
Related
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>
i want to change style of scroll bar ,for this i used below css ,but i want do use it for specific div on page not for whole page.
how can i customize it using div class or id
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #A8A8A8;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Yes, we can achieve this using element id,
Try this,
#div1::-webkit-scrollbar {
width: 12px;
}
#div1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#div1::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #A8A8A8;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#div1::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Hope it will work...
Live Demo
Note: i think, it's working fine in chrome. but ff & ie it's not working..
If you really want some custom scrollbars then there are some hacks you can use in Javascript and CSS - Nice article on CSS-tricks.
There are plenty of jQuery plugins out there too. One I have used is called Lazybars - really simple to implement.
Hope this helps
CSS customization currently is supported by webkit browsers only (Safari, Google Chrome and Opera now). IE and Firefox do not support CSS styles for scrollbars. To make crossbrowser CSS customizable scrollbar you have to use javascript solution that emulates scroll behavior or replaces native scrollbars with custom elements (native scrollbars are under these custom scrollbar or hidden by wrapper with overflow:hidden).
There are lots of free jQuery plugins. Scrollbar emulators (such as jScrollPane, Malihu Custom Scrollbar, perfect-scrollbar, etc...) provide full control over scrolling content, but have more js (to emulate and handle all events) and scrolling behaior differs from native scrolling behavior. Also, lots of scrollbars on the same page may slow it down.
Scrollbars that uses native scrolling (such as jQuery Scrollbar, Scroller, Baron, etc...) are less in code and guarantee that scrolling will always work (even if plugin does not work because of any bug) + less code (as there is no need to emulate scrolling) + automatically supports all scrolling features like scrolling to focused element, scrolling on text selection, scroll to anchor element, touch scrolling, etc...
You can compare custom scrollbars plugins here
I have a registration form where this CSS rules apply. when user submits with incorrect or empty data in some required fields, we highlight the error field by a RED BORDER around the error field. This is not working in IE. The RED Border appears in FF and safari.
I have a code like this:
#errorMsg {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background:#FEE !important;
border:1px solid #C33;
color:#C33 !important;
font-size:110%;
font-weight:bold;
margin: 20px 0;
padding:15px;
text-align:left;
}
.parentError {
background: #FEE;
border: 1px solid #C33;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
left: -10px;
margin-bottom: 10px;
padding: 10px;
position: relative;
top: 0px;
width: 635px;
}
[type=text].elementError,
[type=password].elementError,
select.elementError {
border: 2px solid #C33;
}
It works in Firefox 8 and Safari, but not in IE 8.
I am novice in CSS. Any help is appreciated.
In IE you can decide which css you want to present. You can also decide to present different css in different versions of IE.
You can Create an IE-Only Stylesheet
Example:
Target IE 8 and HIGHER:
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
This code will operate only in IE 8 and higher. means that you can create css file for 8 and higher. and a different file for lower version then 8.
This is just an example. This method give you a lot of power.
You can see this link.
IE8 don't have support for CSS3 elements like -moz-border-radius, -webkit-border-radius. But FF8 and Safari both support CSS3 elements. that's why CSS3 works in FF8 and safari.
You can also check the current implementation of CSS3 Modules statuses at http://www.css3.info/modules/
Also you can view the browser compatibility chart here .
Add the following line at the very start of your HTML document:
<!doctype html>
Without it, or some other doctype declaration of a specific kind, IE works in Quirks Mode. This means, among other things, that it does not recognize many CSS features such as attribute selectors (like [type=text]).
For robustness, to work even on IE 6 (which does not recognize attribute selectors in any mode), consider using simpler selectors like input.elementError and assign the class elementError to such input elements only for which you want that styling.
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
I have my site working perfectly in IE 6+ but it looks weird in IE 6 or IE 5.5, as I can't ignore the users with IE6 because still around 6% of traffic occur from this version. I am looking forward to have the alternate.
With my some research I came to know that by setting haslayout property, I can solve out formatting issue, but I consider myself extremely poor in CSS and hence I need a help of yours to rectify this issue.
You can find the URL below& you can see it's behavior in IE6, just in case if you are unable to test you can check it by viewing the source, please share your suggestions.
URL: http://anujtripathi.net/BlogListing.aspx?Id=2
Your code (default.css):
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
Try shrinking down 95% to like around 92%.
You can use a IE6 hack like so:
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
* html .bg1 {
width: 92%; /* Star Html Hack IE6 only */
}
*+html .bg1 {
width: 93%; /* Star Html Hack IE7 only */
}
But I highly recommend learning the right way and looking at the link below for organizing CSS for cross browser compatibility:
What is the best way to deal with IE compatibility issue?
I would look at your border widths, margins and paddings. It looks like your content is being pushed down because there isn't enough horizontal space. For a quick check, make your main container a little longer and see if the content shifts up.