Can anyone tell me how to see the HTML/CSS source of DOM objects in Internet Explorer 10?
I want to inspect a button element on a web page debugger.
I used to click the arrow on debugger (left corner of IE debugger) and then click on button. Yet the debugger panel only shows the root tag of the web page and not the HTML/CSS of the button.
This techniques works in IE8 and IE9 on Windows 7 but not in IE10.
Can anyone suggest me any other debugger or any other solution on how to get this working?
I am using the default IE debugger.
Related
The page content in #main area is not showing up only on Chrome browser. But I can see the code is there when I view the page source. And when I click on the "inspect elements" or by clicking on any CSS style on the "inspect elements" popup, the content can just appear suddenly. Here is the page URL you can take a look on Chrome browser,
http://ssf-qa.uchicago.edu/Home.html
The version of the Chrome I'm using is,
Version 33.0.1750.146 m
And we have custom fonts on the page.
Thanks a lot!
I've seen this recently with Modernizr, which I see you have running on there too. If you remove the reference to modernizr it works right away! I think we just have to wait for a bug fix.
The site in question is thegreengoddessboutique.com
On the site in Chrome, text is not displaying on first load (or after ctrl 5).
If I open the console with inspect element, and interact with html tab at all though, the text displays.
The other browsers have no issues and I cannot think of any javascript that would be causing this issue.
Does anybody have a hint as to what the trouble could be?
I'm creating a simple bootstrap 2.3.2 popover on my page and it works perfectly on Chrome and Firefox, but when it comes to IE, the popover style is not showed correctly:
IE screenshot
Here is my code:
(ver detalle)
<div id="popoverContent" class="hide">
<p>110001</p>
</div>
Javascript:
$("#pop").popover({
content: $('#popoverContent').html(),
title: "Detalle"
});
The problem was that internet explorer was running the page in compatibility view mode wich was enabled by default for intranet websites. I solved it by pressing Alt key to show the menu bar and going to Tools>Compatibility View Settings, and unchecking the "Display intranet sites in compatibility view."
You had a pretty simple fix, but if you are using a popover and filling in the title you should be sure that you are not emptying it back out. I know we are using bs tooltips, and I used the popover for some d3.js stuff. Well in Chrome I was getting a popover and tooltip, so I emptied the attribute "title" out. That caused IE to freeze on hover. So I had to check if it was IE and not remove the title. It is a mess, but if someone else is having this issue you are not going to see this one coming.
http://kilgorerodriguez.com/index.html
&
http://kilgorerodriguez.com/CarlosRodriguez.html
On the second page the background spans the entire page but on the first page it cuts off. I'm guessing it's something with CSS, but I can't figure it out.
If you have the Xcode developer tools installed on your Mac, you can attach the Safari Web Inspector to the iPad Simulator, like this:
Open the iOS simulator:open Xcode, then go to menu Xcode > Open Developer Tool > iOS Simulator
Change the hardware mode in the simulator to iPad
Open the Settings app on the simulator, go to Safari > Advanced and set Web Inspector to On
Follow the instructions under the Web Inspector switch: open the desired web page in Safari in the iPad Simulator, and also open the desktop version of Safari on the Mac. Go to the Develop > iPad Simulator menu in Safari and choose the appropriate page
Now you'll have a Web Inspector window that is attached to the web page in the iPad Simulator, with full power to debug the web page.
I used this to find the bad HTML markup I mentioned in the comment. When I used the Web Inspector to fix that markup (find the HTML element in the Resource tab or use the hand icon to select the element in the simulator window, then right click the element and choose Edit as HTML), and then also changed the style attribute for that div I mentioned to have min-width: 1002px;, the page looked OK in the iPad Simulator for me. The change to 1002px is based on one of the parent elements, <div id="wrapper">, having width: 1002px defined in the CSS. The wider min-width of 1124px probably caused the page width problem.
I have some page: http://kaduli.com.br/index_pop.asp and works fine on Chrome, and Firefox. (the form wont work)
PS: The form is incomplete! Its not my problem.
But on IE the page don't load inside the lightbox.
If we open the page out of lightbox, the page load the css, but if you press F12 for the developer tools on IE, you cant find the CSS!
The page inside the lightbox is: http://www.kaduli.com.br/home_box.html
As you can see, the "font" is not the same at Chrome and Firefox.
What is wrong with the page?
Try the iframe mode instead of inline HTML mode if you're showing a complete HTML file with its own CSS styles in the lightbox.
So browsing the Lightbox Evolution examples, that would be ?lightbox[iframe]=true&lightbox[width]=706&lightbox[height]=335.