I may not have enough information to generate a complete question here but I am going to give it a shot if anyone has ideas or needs more info ask in comments and i will try to get as much information as I can.
I am dealing with an issue in some code that I did not write. The page uses a javascript date picker and puts that date into an input box. Tracing through the code and hitting f12 I changed the property from
style="color:transparent"
to
style="color:black"
and i am able to see the date that is entered into the input field.
The transparent text only occurs in IE9 though, and show correctly in IE7 and IE8.
So I have a solution to the problem but my question is if anyone has run across this issue before what is causing this. If the differences between IE version are to blame is there a way with a stylesheet to make it work correctly across all versions, because changing the source code is dangerous at best I am trying to find a way to make changes to this wihout changing the page.
Thank You for any comments or suggestions.
The cause is that IE7 and IE8 apparently don't support color: transparent and IE9 does. As far as I can tell, IE9 is the one that is acting correctly and IE7 and IE8 are wrong, not the other way around.
To me the "best" fix is to change the source. I'm not really sure how you want to fix anything "without changing the page", you have to change something.
If you really won't change the source of the datepicker you could use !important as a last resort.
<some selector>{
color: black !important;
}
Related
While creating a site I've noticed that IE places things slightly differently from Chrome or Firefox.
I mean I have one thing below another and in Firefox and chrome there is a 15px space between them. But in Ie its more like 25px. I keep reading about designing for all browsers. But how do I do that because If I make it look right in one browser it will always be different in another.
Do I move it to suit IE? Because then it will look wrong in Chrome.
You can keep tweaking your code untill it looks good for all browsers
Another option would be to have a seperate style sheet for IE. this would allow you to design for IE as well but you would need to keep in mind that you have 2 style sheets and would need to work on both when you make changes to your site
First of all welcome to web development!
What you can do is load a "Conditional stylesheet" which will only load in IE,
Chris Coyier from CSS-Tricks does a great job of explaining this so take a look here
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
That should help you out, but it is a tricky task getting everything cross browser compliant but not impossible, just keep at it and you'll get there.
Good luck man!
Try using a css reset first in your style sheet. The reset will customize all the attributes which you can define as per your needs. The main purpose of the css reset is acheiving complete control of all the attributes and defining a generic behaviour for the browsers. Tweaks will help, but in long run, a balanced solution has to be implemented for major things to work out well.
Below are some popular CSS Resets that you can use.
Eric Mayer Reset
Yahoo Reset
Hope this helps.
I've been doing a lot of testing in IE10 lately, and have recently ran into a very strange error.
Right after closing a jQuery UI dialog, IE10 opens up a cursor and allows the user type directly into the page. However, there are no inputs for them to be allowed to put things in, and from using Microsoft's F12 Developer tools, it seems that it is writing directly into the DOM -- an area that was a 'Text - Empty Text Node'. I have no idea where these nodes are coming from, or why the user can put text into one of them. I really have no code to show because it seems to be tied to nothing, and as I keep cutting away layers it still seems to be there.
Has anyone else ran into this? It seems to happen in IE9 as well. I'm at a loss here.
EDIT: In addition, I thought it may be helpful to say that I'm using jQuery datatables here.
Okay, so I have made some progress on this.
It turns out IE10 isn't writing data directly into the DOM -- instead, it dynamically created a text input, didn't recognize it, and then deletes it. You can type directly into it, but if you click off or focus on anything else, then it disappears and leaves completely.
I've still not diagnosed the source of the issue -- I know it only happens in IE, and may include datatables or jQuery UI. I tend to believe it's IE specific, because it's such a rare action and there's no trace of it anywhere else.
Hope this dialog helps someone else down the line. If you find a better answer, please post it!
I've found that we can use DIV as a TEXTAREA by setting contenteditable='true' and overflow='auto' (or 'scroll') (I don't care about the appearance, just the functionality), but I really can't find the solution with Google search to make it really like a TEXTAREA, the problem is related to line-spacing, when pressing enter key, the next line is too distant from the one before in DIV. When designing with DreamWeaver, if I try editing the DIV's content and pressing enter key and switch to the code window, I can see there are P tags automatically inserted. That's why the lines in DIV are too distant from each other and it can't look fine like in a TEXTAREA. I want to say that it is so ugly and awkward.
Could you please let me know how to suppress that nasty automatic insertion of P tag into DIV's content whenever pressing Enter key? Or could you give me any other solution to make the lines in DIV normal as in TEXTAREA?
Thank you very much!
Your help would be highly appreciated! (I'm just a newbie in Web programming, so please be patient!!! Thankssss!! :))
UPDATE!!!
You may all misunderstood me, when I say I press the Enter key, it is not in code editor like DreamWeaver, It is when I load the page in the browser and try typing as a normal user. That's when I test the page.
Something like this?
#myDiv p{
margin: 0px;
}
I'm not 100% sure that the margin is what is causing the line height issues, you may want to try changing height, padding, etc. until you figure it out.
I tried making a fiddle and I'm not having the same problem, line spacing looks normal to me: http://jsfiddle.net/dFzjT/
Upon closer inspection, Chrome is adding extra divs upon each newline.
Switch to edit in the code view instead of the WYSIWYG HTML editor. Then you will want to type in between the opening and closing div tags:
<div>your text here.</div>
I've found that the strange problem (which might make some of you think I'm noob?, vote down me?) was not the fault of mine, it was the fault of the browser I was using, it was Opera browser. I didn't think it renders the DIV's content that way.
After try using a different browser like Google Chrome, FireFox and it is normal now, like a TEXTAREA as I want.
Thanks!
Here's the thing.
A lot of the answers on here answer the question, but they all miss an important point.
We were all new to this at some point.
So let me give you some advice that I wish I got when I started down this road.
Learn to read the code, and your life will be easier.
It might seem daunting now, but trust in your own ability to learn, and just struggle for a few days. You'll come out on the other end with a headache and a smile.
Write the code, save, and refresh the page in your browser.
This way, you look at it in a browser.
You should also get yourself all the important browsers: Chrome, Firefox, Internet Explorer, Opera & Safari.
Learn to use a localhost server like MAMP / XAMPP / Visual Studio.
This way you can write server-side code; that way you can test, check and tweak - all without having to upload anything.
Most of all, though..
Stay away from the WYSIWYG.
They're all just bad news.
Just write your own code.
:{D
Am I the only one wondering why the new update in Opera 11.60 made all standard dropdown menu's look small like on the image beneath?
Is there an "easy" way of fixing this? I guess a fast defined height could solve it, but how would it look in other browsers then.. Is there a universal height of all standard select/dropdowns which could be set?
Don't think I've noticed any such problem. Make sure you don't have extensions, user style sheets or user JS that restyles select elements.
I would recommend that you don't try to change anything in your site's CSS to handle this issue. Adding hacks to handle browser quirks will only make the CSS more brittle in the long run, and this issue is merely cosmetic and may not even be seen by all users.
The following page looks good in Firefox, Safari, Chrome, IE6 and IE8... but it looks bad in IE7. I don't have IE7 but I need to fix this issue because someone seen it in IE7 and it looks bad. Does anyone has any idea why this page renders different in IE7?...and what is the solution to make it display correctly?
http://www.aetna.com/2009annualreport/mainBoard.html
Problem:
When you click on the "Board of Directors" or "Management Team" link and the listing table panel opens up, the far right third of the panel is getting cut off. Also some information appears to be missing in the cells.
Thanks,
Attila
Yes.. use a css-reset
But also... use the validator.
http://validator.w3.org/
I used the validator and found this:
Polo Ralph Lauren Corporation</p></li>
Notice the misplaced li ?
Also add this to #boardPanel
{ width: 990px; }
This problem disappears when I remove overflow: hidden; from the .boardSlider class.
Look like another hasLayout bug.
All browsers render web pages differently. There is no one solution that will always make everything look exactly the same across all browsers. The best option is to start with a browser such as firefox or safari when you are testing and then tweak your css for internet explorer as you go along. One common technique is to use a CSS reset to try to abstract differences between browsers.
If you don't have IE7 on your machine you can test in it using http://spoon.net/browsers to see what your page will look like or see this question for more suggestions.
Check out Adobe Browser Lab. Very cool and very efficient and the best part is it's free (not anymore thanks for the headsup). It not only has various browser options but also OS options.
HTH
Just a thought - why not use DIVS and floats - you should never really use tables for layout purposes (particularly as it's 2010). Especially dynamically changing layouts. Tables are cross-browser hell, particularly when expanding / contracting using JavaScript and, from a purist's point of view, you are not displaying tabular data, so why use a table?