I have a site which uses the Bootstrap framework.
Unfortunately some of the classes of divs do not display in Chrome (only) & I can't figure out why.
Bootstrap sits on another PHP framework - I did not create this original code; but I can modify it easily enough.
The hidden divs are being rendered in the DOM (I can inspect them).
I've searched all references to the hidden div class (col-ad) & they all come up as nice & mundane CSS with no obvious things that could make the div hidden. No javascript references either.
If I rename the class (eg. Xcol-ad) in the DOM the div displays.
When I inspect the div I get the following:
Which is the only thing I can find which could be the culprit. Unfortunately I can't find a reference to this within any of my code.
Have tried modifying the DOM (display:block!important) without success.
When I click on the <style> tags it (I think) points to something called #shadow-root(open) at which point I'm lost. I've searched for info about this but haven't been successful (I'm not 100% sure this is even the problem) - have changed a setting within Chrome (Show user agent shadow DOM) without success.
It feels like my styling has been taken over somewhere & I don't know where.
EDIT: link to demo site where I got script - just tried looking at site with browsershots tool & ads appear even with Chrome, so may be my version(?)
That is clearly some kind of ad blocker extension, that inserts its own style rules to block/hide elements – look at the identifiers used in that selector, should be pretty obvious.
Edit: [further explanation, from comment]
The selector contains “ad” in all imaginable combinations, plus “advertisement”, “banner”, “sponsor” showing up as well. That is a typical kind of “kill ’em all (at least the most obvious ones)” attempt by an ad blocker – and that often leads to collateral damage.
You can also see .ads_320_100 there, which is targeting a specific, typical banner size; some blockers even remove all images that have that kind of “dimensions” specified in their name, for certain “ad-typical” image sizes. (Even though it makes server-side management of different image sizes easier, I’d recommend to stay away from such naming schemes – for this exact reason.)
Related
I have started learning coding on freecodecamp and got confused with the containers, inline vs block vs inline-block and the bootstrap 12 column system.
What is the difference between a container and a block?
Do I absolutely need both and why?
If I use bootstrap, why do I need to know about inline vs block elements? I can just use Bootstrap "col-xs-12" for example and it won't matter whether my elements are inline or block because they will take the formatting of the parent element.
I have searched for the difference between containers and block (inline-block) but it only explains what each of them does and as far as I understood, they do the same thing, divide the website into blocks that can be styled and resized. Blocks would be placed in containers but here again, what's the purpose of containers if we have blocks.
(Among other results, found that: https://teamtreehouse.com/community/div-containers-div-wrappers which does not answer my question and got me to ask myself what a wrapper was and that: https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block but this article got me even more confused)
I'm a total beginner and am sorry if my question comes as very basic for most but I really need to understand the concept. Thank you whoever helps out!
It is of uttermost importance to understand the meaning of the technical terms correctly and adapt them to the context. inline, block and inline-block are well defined words in the HTML specification. I am not sure which container you exactly refer to, as it is not clear from the context. Do you mean css-containers?
bootstrap is a framework, which is itself not part of the HTML specification.
freecodecamp uses many frameworks and seems to be very popular, but they do not have a dedicated stackoverflow policy, in contrary, they host their own forum.
In this regard, your question is off-topic here and should be posted here:
https://forum.freecodecamp.org/
They even say
Our forum is like Stack Overflow for campers
Hope I could help and when you learned more about HTML, CSS and JavaScript and encounter your first real "bug", come back here and we will figure it out :-)
BTW, I like w3schools: https://www.w3schools.com/html/html_blocks.asp
A little more concrete: There are elements, that will have "their own" line, these are the usual block elements. Then there are inline elements, that are embedded in the current line flow. The important fact to be aware of here is: All these HTML elements come with a default css configuration, which you can change! So it is totally possible to make a div (by default a 'block' element) become an inline element by specifying different css. Also vice versa, you can make a span behave like a block element by overwriting it's default css. The CSS pane in the firefox console can show you all the css rules involved for each element. That means it can show you not only the styles you defined, but also the default styles, that every element comes with.
Nevertheless, it is important to understand what is meant with block as the "new line" apporach is only a simplification of what's going on. It also seems like a good idea, to use the HTML element, that't the closest to what I want and change it's behaviour. If it is an ad on the right side for example, you would use a div and go from there, instead of, let's say a span and trying to bend that to your will (which is totally possible, but leads to problematic and unintuitive code).
When I started with HMTL and CSS, it was very helpful to have to HTML code and the rendered web page side by side. It helped my learning process significantly. I used Dreamweaver (not sure if that still exists) and nowadays all you might need is jsfiddle and a development firefox (just a regular firefox with a bunch of extensions, that make development easier). I used Firebug in the old days, but now every major browser comes with a console, debugging features and live code editing. Just hit F12 in firefox and habe fun :-)
I'm helping a company build a website in Wix and some basic functionality just aren't supported, such as tables and tabbed containers. So I had to write it in a module, and then I had to write an editor to make it easily changeable.
I'm sort of done with it but now I'm having the issue that the Table just won't stretch.
Here's the module, pretty much hardcoded and working perfectly fine:
https://alexandersopov.github.io/wix-table
And here's the editor:
https://alexandersopov.github.io/wix-table-module-editor
The CSS is pretty much identical and except for a few wrappers, the html is pretty identical (in fact, the only difference is that for some reason, a tbody tag gets added in the table in the editor, but I've tried giving that width:100% as well but with no luck).
So in the editor, there's a preview window where you can see the table under "specifikationer" and it's barely half of the width, even though inspecting it tells you it's suppose to be 100% (and indeed the inspector identifies it as such) and when I copy/paste the raw code into an empty .html document and check that out I get the same result.
I've been stuck at this for hours and can't for the life of me understand where this problem stems from.
Your table has the .active-content class applied, which changes its display type to inline-block. Try changing the class to something which sets it to table or inline-table.
I have made a small popup window that shows up at the bottom of the page (like a recommendation system). But whenever I embed my script to any of the client's website, it disturbs my CSS. Like the CSS which is on the client's website overshadows my CSS and this causes me to fix my CSS for each client. Is there a fix that I will have to install on my code?
Please help
Thanks
This is due to overlapping CSS properties of client's and your newly developed. I recommend you to inspect element of google chrome's very nice feature. You can individually identify your overlapping properties. If this is too much complex. Like James commented give a new id to your pop-up menu, which will separate your pop-up CSS from all other components on your web page
On of the ways I heard about is Shadow Dom, and in this article it describe it and at the beginning of the article he listed the problem in brief: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
But there is a fundamental problem that makes widgets built out of
HTML and JavaScript hard to use: The DOM tree inside a widget isn’t
encapsulated from the rest of the page. This lack of encapsulation
means your document stylesheet might accidentally apply to parts
inside the widget; your JavaScript might accidentally modify parts
inside the widget; your IDs might overlap with IDs inside the widget;
and so on.
Else which I did my self long time ago is: to name all your ids, classes with a special names for example 'mywebsite.myclass' this may minimize the issue. and I saw this way is used by many bookmarklets which import html,css and javascript to user opened page.
"All browsers" is a lot of browsers :P
CSS is going to get interesting soon thanks to shadow DOM. You are going to be able to create a web component that is completely isolated, DOM and CSS, from the rest of the document, which is exactly what you want.
Obviously, it's not in place in al browsers (only in Chrome at the time of me writing this). Meanwhile, this is what I would do:
Use shadow DOM components if available
Anyway, manually name-space everything you use (CSS classes, JavaScript, etc)
Try to use custom elements for everything. (that way, there's less risk of your e.g. <h2>s being styled by outer CSSs)
As a last resource, use very specific selectors (look up CSS specificity), and use !important. Just to be clear: never do this routinely!
Most of that stuff will fail for some value of "All browsers". You'll have to compromise somewhere, I guess.
Yes you can reset your div styles.
Something like this:
div.your-popup * {
/* your reset */
}
And try to set !important to styles or put them inline.
In addition create unique class names that no one can override it.
P.S. http://www.cssreset.com/
I'm putting together a page, and am really struggling with backgrounds across browsers.
The page uses a number of alpha-blended backgrounds, box shadows and border-radii and it is composited almost entirely using inline styles (essentially there are few/no CSS classes used).
IE9 is my primary browser, and in it, the page looks great. However, on Chrome (and I'm told Firefox), most of my alpha-blended backgrounds render either not-at-all (transparent), or as solid colors! I'm using Standards Mode with an HTML5 !DOCTYPE declaration, so it's not as though I'm leveraging IE quirks or anything!
Clearly on IE versions before 9, the backgrounds (and other things are problematic). But I'm not concerned with supporting ancient software, and those users get a browsing experience that they deserve.
The common refrain for years has been that "transparency on IE sucks!", so I was comfortable in expecting that if I got it to work adequately on IE (typically the worst platform), then the others would just fall in line, but here I am struggling in the opposite direction! I'm using the standard "rgba(r,g,b,a);" directive on the "background-Color" attribute so I'm not using any radical DirectX filters or other magic, nevertheless, on (NOT Internet Explorer 9+) browsers, I'm getting some non-alpha-blended results (sometimes it works, sometimes it doesn't).
The site can be previewed at: https://net-xpert.com/ -- All of the pull-down menus are supposed to have translucent backgrounds, and so too the hovering link-bar at the bottom of the page. Also if you go to the "Ask us a Question" page, the dialog there should have tinted backgrounds on all of the input fields...
Oh, lastly, I am ENTIRELY LOATHE to implement ANY b/s, browser/platform-specific, 'experimental' style-codes! Anything in CSS2/3 is fine, but I simply REFUSE to use any kind of "-browser-some-quirky-CSSAttribute" styles! (I wish more developers would do this too! -- then browser manufacturers would be under greater pressure to adopt these STANDARDS and our lives would be SO MUCH EASIER, but I digress...)
Anyway, any insight on a standards-compliant solution would be greatly appreciated (even if it's just a communal acknowledgement that "ya, Chrome et al is currently not implementing this correctly...", at least then I'll know there's nothing to be done about it...)
Thanks!
Well, this is a very late answer, but maybe this'll still be of use to you (your site still seems to be up and running).
I have a should-work-for-you solution, assuming that you can modify one of your stylesheets. As to WHY you've encountered this problem ..? I can only speculate, because I don't know how to recreate your exact configuration.
The fix;
div[id^=mainMenuOverDiv] {
background-color: rgba(128,128,128,0.9) !important;
}
I'm not a fan of using !important unecessarily, and you may be able to remove that by using greater specificity. I've tested this in Firefox, though and it seems to work - obviously, you'll want to substitute the actual rgba(x,x,x,x) values with your own.
You seem to be using some JavaScript (I'm assuming) which randomizes the DIV ID every time you hover over the menu - but the beginning remains consistent (i.e. one time it will be #mainMenuOverDivjkhasdfsd89f9f9sdfl3l4l34lfdbvbc, then the next, it'll be #mainMenuOverDivLSDklsdkmlzxncbzmxnc90234xcvassf). Using the 'starts with' CSS selector (as provided in the example), you can still isolate the menu despite this potential spanner in the works.
It's interesting (and probably insightful) that this even works, given that inline CSS usually can't be overridden.
As for why this is happening, one possibility is that some JavaScript generated code is not correctly porting over to the non-IE browsers. Alternatively, if you're using it anywhere, code minification may also break some functionality (and vary between browsers) - many minification plugins need to be tweaked for individual setups to ensure that everything continues to work fine as one size does not necessarily fit all. For example, you might find that on one site you can minify everything except the JavaScript, while on another site, JavaScript is fine, but you can't minify inline CSS, etc. Google Analytics code sometimes falls victim to this.
So to my eye, the issue possibly isn't to do with IE/Chrome/Firefox or Safari - transparency is working fine on all of them - I think it's most likely the way your code is being manipulated or delivered to the browser.
Hope that helps in some way. Let me know if you can't use an external stylesheet and I'll try to find an alternative.
Of course we can use tools like Firebug to highlight portions of HTML and see what all CSS is being applied.
But what about the reverse? Is there some kind of tool which would allow you to highlight a particular CSS rule and show you all the pages on a site (either static HTML pages or their dynamic templates) that it applies to?
Example: I've come to work on a new site, very large and I need to edit CSS on a particular page but in doing so, I have no idea how many other pages on the site might also have these class names and hence be affected. Of course I can try to search the whole site for the class name(s) but this can be time consuming or tricky. This site has a class named "ba" for example. Guess how many irrelevant pages will turn up if I just search for "ba"? So how about including a double quote ("ba)? Well, it could be in the middle of a few other classes (class="hz ba top"), at the end (class="hz ba"), etc. More so, it could be dynamically plugged in via server side code making it even harder to find. A tool that could somehow spider your site and be able to identify all the places your CSS change will affect would be great.
not exactly that, but there is a firebug plugin that does that for any loaded page:
http://robertnyman.com/firefinder/
You could use regular expressions ..
for example in Dreamweaver on the search dialog box :
select 'Find in: Entire current local site.."
select 'Search: Source code'
check 'Use regular expression'
in the find textarea type class\s*?=\s*?".*?content.*?"
click 'find all'
the same regular expression could be used with other software that can search inside files using regular expressions....
for example : http://www.sowsoft.com/search.htm (not affiliated with them, just found it for here..)
Keep in mind though, that all the suggestions here do not take into account the case where the class is added by script..
If you use a Mac, there's an excellent shareware app called "CSSEdit" by an Indy Mac Shop in Belgium. A single-user license is 30 euros. I've used it for approx. three years and i can recommend it highly. It's a mature, stable App (though continuously updated/improved); widely used among Mac Web Designers, and those of use who are not but need all the help we can get, which CSSEdit certainly seems to provide.
To show elements on the html page styled by a given selector:
(i) open both the style sheet and the markup page (markup page must have a link to the style sheet);
(ii) click the X-Ray button off (must read 'Not Active' below the button);
(iii) in the style editor, click any selector (i click it so that my cursor is at the left margin, e.g., in front of the '#', etc.);
(iv) now click 'inspector' on the mark-up page (next to 'X-ray').
Now, look at your mark-up page--it will have a blue outline around the elements affect by the style you clicked on in step (iii) above.
For this kind of things I just use grep, or - even better, ack.
If you're concerned about false positive when searching for short patterns, you can do a double filter: you grep all lines containing class= and you feed its output in another grep which only narrows the result down to the lines containing both class= and your search pattern (which can also be more precisely specified with a regexp using word boundaries like \bba\b to avoid matching bar or abba)
How about putting an ID on the body of each page, and use that to restrain the use of CSS outside of pages clearly stated in the CSS?
Like this:
#mypage .description,
#myotherpage . description {
}
Cons:
Must put a body ID on each page / template.
Must specify each page the CSS should apply to. More CSS code to manage.
Makes the CSS less easy to scan through with your eyes (since the line starts with the page ID and not the CSS style). This is a bigger problem if some of the CSS styles are used on several pages (since the css spec for each style would be long).
Pros:
Avoids unintentioned CSS change propagations. I.e. changing one page affects other unknown pages.
See what pages a CSS change would affect, when you're editing the CSS style itself. The information is right there; no need to search/grep for it.
Forces developers to specify what pages the CSS would affect. If you'd just included this information as comments in your CSS, some person would inevitably forget to update the comment when the CSS is used on a new page.
I agree with this statement, made by a friend:
"Minimize CSS that is used several places. It's not like programming; it's better with a little duplicate CSS, than unmanageable CSS. (Pages like apple.com, has own stylesheets for
each page, and some global CSS.)"
- Olav Bjørkøy, original creator of the Blueprint CSS framework
I'd love your input on this, or if any of you have found a better way.