I have a website and i need to implement border radius for text box and Selet box.
Text-boxes are working fine on IE6 with the Support of HTC File.
But Unfortunately Select box not working. its taking the default value.
Check out this link:
http://i40.tinypic.com/qyzs0p.jpg
Please Help me to fix this issues.
Thanks in Advance.
I think it is not possible to achive what you are looking for. The level of customization allowed using CSS styles applied to dropdown elements is very basic as far as I know, even more in old-IEs.
If you really need that border, check for dropdown replacement plugins such as :
http://v2.easy-designs.net/articles/replaceSelect/
However Im not fully sure about its compatibility with IE6.
If I were you, I wouldnt bother too much with IE6 styles... it is really and old browser, the web must go on. As far as you app is working fine, a border is not a big deal.
Good luck! :-)
Related
I am working on a website simkt.com and just moved over to joomla 2.5 after rebuilding the base theme to match the desired look.
Unfortunately, being a novice web developer that I am, I forgot to check out how things looked in browsers other than Chrome. The site is now live, and I quickly discovered that in Firefox/IE that the website is not quite right, and after some adjustments, that when I make adjustments to try and fix the issues, there is around a 5 pixel difference in spacing between Chrome and Firefox/IE (and I tested now in IE 7 and it was.. quite bad).
So, my question is, what am I doing wrong, and how can I go about fixing this?
Using Chrome dev, I reduced the top-padding in rt-body-bg to 0, and in the logo itself, decreased the top-margin to -30 and bottom-margin to -25 and it looks close to what I want, but has a 5 pixel gap between the logo and the menu on Firefox, and in IE the login button starts to move off in some odd direction.
I know some css/php/html but am I am still learning, any help would be greatly appreciated!
Thanks!
Note that different browsers have different default values for the css for the different elements. A good practice when you program design with CSS is to use a reset values in the beginning of the css file. This reset is going to make sure that the unset values will be the same for every browser.
See this link for a css reset code
http://meyerweb.com/eric/tools/css/reset/
Hope it helps
As #Stoyan said, you should be using a CSS reset at the beginning of your CSS file.
You specifically mention margins. I've just had to resolve an issue whereby in our site margin-top was used to position items (not a great idea - blame the previous developers). In IE and Chrome it was fine but in FireFox, because it has a different top margin, it looked bad (items were 30px too low).
I didn't want to use an entire CSS reset because it might have had a knock-on effect for the entire site (fonts were all changed for example).
I used just one item to resolve it, curiously not margin-top but line-height:
body {
line-height: 1;
}
I'm trying to add text-shadows to elements in IE - I know it doesn't support the property but using the filter: property I can get it pretty close.
BUT when the text I use is not black there is a black outline around the text.
How can I remove this outline?
Here's an example... (Please open using Internet Explorer)
http://jsfiddle.net/mossman/mLRYG/
Appreciate any help guys, thanks
/* UPDATE */
Think i'll just have to live with it. Thanks for the direction guys
I went through and started testing all the combinations or your color choices and then I realized. It might not be you color as the issue. I looked up the correct call for the filter: and found this on the Microsoft site.
Shadow Filter
which gave me this:
filter:progid:DXImageTransform.Microsoft.Shadow
I used that in your example and altered a fiew of the values (because with the correct call you have to use the correct values) and guess what... something looks pretty good.
filter:progid:DXImageTransform.Microsoft.Shadow(color='#CC0000', Direction=225, Strength=8)
I tested this in IE8. Worked great. I added on to your jsFiddle example. Here is the new link with a working view.
You will also notice that with the official call it doesn't clip the left most shadow on the first letter of the word.
UPDATE:
You can try and use the following in conjunction with the .Shadow
progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
Your call would look like this...
filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
progid:DXImageTransform.Microsoft.Shadow(color='#CC0000', Direction=225, Strength=8)
You might have to play around with the Chroma Color, but it should work. I can't test it on this machine (I don't have IE9 on it).
I referenced this post.
It seems to be an issue with the rendering engine.
With a large enough font-size, I get no black outline.
Since there are no extra parameters for this filter (except one to disabled it), I guess you gotta live with it.
I've been wrecking myself trying to figure out what is going on with this big of html. It renders correctly in latest Firefox, Safari and on chrome canary, but normal chrome renders these weird lines and I have no idea why.
I've create a JS fiddle with an excerpt of my code, it's part of a much larger project, but I'm seeing the rendering issue in the fiddle as well as in my app. I've attached a screen shot of what I'm seeing in the fiddle for reference.
Fiddle
Bug screenshot:
The red middle line shouldn't be there as well as the line to the left of "close". This is just one example, as I mouse over the modal I get lines appearing all over the place.
It makes for a less than stellar question as it's difficult to replicate. Resizing the browser helps to show the error. My fiddle has quite a bit of html and css. I don't expect anyone to actually comb through it and fix the issue. I just want to be thorough in presenting the problem.
I've tried looking online but I haven't been able to find anyone reporting the same issue as far as I can tell.
If anyone has any ideas on what may be causing this, how to fix it or point me to a relevant link/SO question I'd be very grateful.
Things I've ruled out/investigated:
- not caused by something else on the page, as I extracted it into jsfiddle and it's still hapenneing. I also removed the body content using the console in my app and it didn't make a difference.
- I dont think the gradients or transitions are causing it, as removing them didn't seem to have an effect
- possibly/probably related to absolute positioning? When I removed the position absolute on the main wrapper element I didn't see this occuring.
- I read that applying a z-index to these elements might help, but it did nothing for these issues.
TL,DR: Why does google chrome, but not canary or safari, show rendering errors on absolutely positioned elements with liberal use of css3 gradients, shadows and transitions?
When I remove the '-webkit-transform: scale(0.95)' on #vfs_uploader and the '-webkit-transform: scale(1)' on #vfs_uploader.visible, it displays fine: http://jsfiddle.net/cjc343/fzqPT/2/
I don't know how this affects Safari or if it has other implications in Chrome, but it does not appear to otherwise affect the layout in the example.
I'll start by saying this is not my work, but I am trying to figure out how to fix it nonetheless... Here is the page in question:
http://www.getredwood.com/pro/
The three content areas at the bottom are the part in question. It looks fine when I look at it in Firefox or Chrome, but in IE 9, everything collapses left to right and the boxes actually overlap each other a bit. The CSS that's in there now looks a bit of a mess and I'm not sure where to begin. Would be most grateful for any ideas. Thanks!
I'm not sure whether I need to post the CSS code here or not...it should be visible through "Inspect Element" in FF, but if anyone can't see it, please let me know...
This lies within the compatibly that browsers have, what you will need to do is use javascript to determine which browser is in use then create a custom style for each, thus allowing you to make it work on any and all browsers
Here are some links that should help you out
http://www.quirksmode.org/js/detect.html
http://www.w3schools.com/js/js_browser.asp
Best of luck to you
it is very bad CSS and HTML coding...
try to reduce width of each 3 divs, should be solve your problem.
I have a fairly far-out box model for my portfolio website. It's actually really not but it required a little CSS magic to get the chamfer corners to work (I really wonder why chamfer corners do not exist in CSS). See it here.
Now, if you're on Firefox, and you navigate to my resume, you'll see a very mysterious margin going on at the top that I just can't seem to figure out. I was wondering if anyone could poke around with the Firefox dev tools and possibly figure out where this is coming from because I can't seem to figure it out. You may also notice a few other little graphical glitches on Firefox that are not present in any other browser, but hey, what can I say, I like that box look and I ain't gonna compromise.
Image depiction (from FF7.0.1, win7):
Add display: inline-block; to .box_content.
Not sure whats causing it but that should fix it. At least it did on my computer.
Validate your html for that list of errors that needs fixing. Then validate your CSS. I didn't run through that.
I rebuilt the "resume" section from the ground up. During this process I noticed a lot of margins being added to titles and such before I would edit the CSS classes that weren't added in other browsers. Margins seem to affect the "height=100%" rule as anyone whose tried to get a footer to stick to the bottom of their webpages might have figured out. So I chalk this one up to one of the titles getting a margin from one of Firefox's standard CSS stylesheets, I just couldn't find it.
Lesson of the day: ALWAYS set padding and margin to 0 for any custom class or id!