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.
Related
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
I have a huge issue caused by the default style in google chrome.
The default dispay for area tag is none. But the area/map is still rendered.
http://jsfiddle.net/hm826/1/
Everything works fine when I apply a css display inline or block.
I am interested to know why the default is none in chrome? Is there any reason? Can I apply the display inline without any implications? How is the element rendered if it is not displayed?
I use the newest Google chrome on windows 7.
The area element isn't displayed because it's an kind of abstraction to add multiple links/anchors onto one image instead of multiple images with a lot of anchors.
If something is shown e.g. a background color in that area tag you can't see the image anymore where the map was overlayed.
There are a lot of things where elements have a kind of initial style given by the browser and I guess it's just to give developers the information that this element is not shown.
Example:
Added a new fiddle based on given example which shows this property is not set in real when I try to get the property with javascript/jquery.
In Chrome I get an undefined
So it's fact it's just a helper in DEV tools.
http://jsfiddle.net/ExNGj/
Why do images defined in CSS (like backgrounds, lists marker, ...etc.) not behave in the same way in the browser as HTML images? For example, they can't be selected by the mouse, and you can't right click on them.
Images are generally used in CSS for one thing, backgrounds. Which means they aren't used for the same things HTML images are being used for (displaying the actual image as part of the content).
When an image is part of the content, it can be saved and copied etc, because it
is likely to be considered interesting by the reader. Backgrounds (or list-markers etc) however, are less likely (unless the reader is a developer) to interest the reader enough to want to copy them. Instead, the focus is on the actual content of the element (which the background was applied to).
I guess it is a question for browser vendors why they allow certain behavior only when dealing with <img> tag.
However, you can use dev tools/Firebug/whatever and you can download the image file.
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
I use a screenshot tool like SnagIt and this tool is able to make a screenshot of a specific element inside a website. I tried this feature with firefox, safari and ie, all runs fine. When I use the mouse pointer to aim an element, SnagIt shows a red box around the hovered element in the browser. For example, this tool knows the exact coordinates of a div or img element.
What is the technique behind this feature? Is there a common way for every browser? I've already used Spy++ to get the window handles, unfortunately this isn't the resolution.
I'm in a project in which I need this feature for different browsers.
Thank you very much,
Mark
If you want to know the x,y coordinates of any element in javascript, Then I suggest you use jquery [http://jquery.com] on your page and use its offset function.