I made a table on the html page using div tags. The content of the table hides and shows with onClick event on the corresponding Enabled/Disabled section. Everything style related about div sections is made with CSS in a separate stylesheet.
All of the files (html, css, js) are located locally on my disk and they will be mostly accessed locally within the software made in VB.net.
The pages I made look perfect in both Chrome and IE (v11), but when I open them with WebBrowser control it seems as the control is not handling the div elements with float property (see image bellow).
Can someone please tell me what the problem is here, as I don't think it's webpage style related, but more of a WebBrowser control related problem?
(open image in new tab for better resolution)
Answering my own question in case if someone comes looking for answers on this topic:
turns out a lot of CSS3 functionality is not supported within VS WebBrowser control. The main issue weren't divs with float property, but the use of calc within width property (width: calc(...);). After setting all the CSS width properties to a pre-calculated percentage, the table began to regain it's shape.
There are some other CSS properties not working properly, for instance display: table; (cell, row, etc.) and box-shadow.
EDIT: I discovered the beauty of Microsoft's idea of emulation behind WebBrowser control. Turns out, even if you have IE11 installed, WebBrowser is dumbed down to IE8 and you have to change/add a registry key in order to enable the IE11 HTML5 and CSS3 functionalities to it.
See: http://www.codeproject.com/Articles/793687/Configuring-the-emulation-mode-of-an-Internet-Expl
Related
when you use the Css attribute position and move things around the page does that mess with the rendering of other websites using it? Ex. say you move a box left on Mozilla FireFox then view it on IE with a zoom of 50% does that box stay in the same position or does it move?
If you just change the CSS attributes within your browser (e. g. using the delevoper console), the changes are only local and not transmitted back to the server. So other visitors of that website would not notice any difference.
If you have write access to the CSS stylesheet stored on the server however and you change the attribute declaration therein (and you do not use any vendor-prefixes and the attribute in question is supported by all browsers) then yes, all visitors will notice the change made to that attribute.
I've got a tough one. I work for a company that uses a sharepoint that is 100% text based due to varying network performace issues accross the world. It provides the option to input HTML for styling but scrubs any javascript. I do not have access to code CSS and I'm assuming jquery is not available.
I would like to embed images into the sharepoint as a proof of concept by taking advantage of a floating div (or iframe) that displays with an href to display a png file stored on a server. I don't want the div (or the image) to load unless the user clicks a link or a button.
I'm pretty amature at anything other than basic HTML formating. I'm not even sure it's possible to do something like this with only html.
Thank you in advance to anyone willing to take a stab at this.
You could do it with this HTML, which is ugly and unmaintainable.
Use an iframe with scrolling="none". Use width and height attributes to give it dimensions.
Inside the iframe have your img elements with an id attribute. Ensure they're spaced with enough vertical space so they can't be seen by default, and appear isolated when viewed later.
Link your links to those id attributes, e.g. link
I recently made a new WordPress theme for a local travel company and they are now getting reports that two elements in my design are not in the correct positions in Firefox (seems specific to version 3.6) and Chrome for Mac.
A page where both issues are visible: http://www.totemtravel.com/blog
Issues:
The white flag with the logo on it at the top of every page jumps
several inches to the right to cover the area code of the first
phone number.
The search button at the bottom of the blog categories widget in the sidebar jumps to the right, out of the widget, and off the page content wrapper.
I think the issue has to do with where those browser assume the item should be before the relative positioning, but I need a way to make these all look the same across all modern-ish browsers.
I wont paste the pages of source code behind the theme since it can be easily viewed with Firebug or the Chrome inspector, but please let me know if any additional info would help.
1: The img for the white flag must have left:0. Not all browsers default to left 0. Firefox for example, is defaulted to left:50%. Another problem is your trying to relatively position a td element for the title "Totem Travel", this is invalid and I would recommend using divs here instead of tables.
2: This is due to the native CSS styling differences of the browsers. That is why people use CSS Reset style sheets, to zero everything out so you know for sure the "default" css is the same. Here's an example: http://meyerweb.com/eric/tools/css/reset/. The effect this is having on your css now is that, the submit button is falling down to under the input as it doesn't have enough space - so when you are relatively positioning it it is off in the browsers.
3: Relatively/absolutely positioning everything isn't quite the best way to go about styling a website. You will find many inconsistencies like you are experiencing and there are better ways. I would recommend visiting some example themes on sites such as themeforest.com or elegantthemes.com and seeing how they do their CSS and HTML
In my application, I render one or more iframe elements in the main page, each of which displays the summary of a data record. What I want to do is to allow the user to click somewhere in that display and pop up a p:dialog box that displays more data and input controls.
The problem is that the dialog only shows in the confines of the iframe. Is there a way to allow it to plot outside the border of the iframe rectangle or the browser window?
If not, is there some other JSF component that can do this?
I already posted this question on the primefaces forum, but I think they are too busy to respond.
No, this is not possible. All modern browsers prevent any visual elements from leaving the confines of the browser's rendering area. This is to prevent a web page spoofing bona-fide operating system windows, among other things. An iframe is also considered a separate "browser" for the purposes of this limitation.
Additionally, this is a pure html/css/browser limitation. The tools (jsf/asp.net/php/etc) used do not come into it.
Some more info (from IE6/sp2+):
About Window Restrictions
http://msdn.microsoft.com/en-us/library/ms537638(v=vs.85).aspx
These constraints are equally applicable to all modern browsers (not that IE6 is modern, but that's kind of my point.)
This is FF plugin
http://www.pixelperfectplugin.com/
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
Read more: http://pixelperfectplugin.com/how-to-use/walkthrough/#ixzz0eOfezx1N
How to get mockup image behind all div like this plugin does.? this tool only shows design behind layout only on firefox and i want to see on all browser.
I found the way here
http://aloestudios.com/2008/08/pixel-precision-with-diagnostic-css/
Well if you want it behind then simply setting it to the background image of body or html would work. If they need to be styled with bgimages or colors as part of the design then i suppose you could throw another div in the dom with position absolute and set the z-index to 0 or -1 depending. IF you want it to overlay the dom then you could do same thing only using an insanely high z-index and then setting the opacity. That would interfere with direct point and click inspection on the layout i think but you could still get to the elements form the html pane.
Obvoiously no method short of developing in pure js somehow is going to give you the features of a browser plugin.