So I have multiple <img> tags in a page. When I set their source to something random, they show up correctly, but when I feed them some specific URLs, for example:
http://img1.prosperent.com/images/250x250/www.modernbathroom.com/images-cache/5E/2E/952F/5E2E952F79551F7CAB26E129CBEB28BBD7176DF0.jpg
images just disappear (they have fixed width and height from CSS file) and some mysterious attributes automatically are added:
<img src="http://img1.prosperent.com/images/250x250/www.modernbathroom.com/images-cache/5E/2E/952F/5E2E952F79551F7CAB26E129CBEB28BBD7176DF0.jpg" width="0" height="0" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 0px 0px;">
Original img doesn't have any inline stylings and there is no any JS script running in the page. The question is why that is happening, whether remote image can force image tag to have some attributes and how to prevent that.
Perhaps you are using a browser extension that is re-writing certain image tags?
Try completely disabling all browser extensions and javascript and see if it still happens.
Related
I've tried several times and several ways, but can't figure this out. The below set of images load perfectly in non-firefox browsers, but ALL of them are invisible in firefox. If I bring up the document inspector and hover the mouse over the url, the images pop up for only google and email (which are the only two that don't have that weird class on them).
So I guess the question is: why is firefox adding a weird class to my images (just these, all others on the page work fine) and why don't any of them show up in this area?
<div id="share_icons">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/facebook.png" id="share_facebook">
<img src="http://localhost:80/graphics/share/google.png" id="share_google">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/pinterest.png" id="share_pinterest">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/tumblr.png" id="share_tumblr">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/twitter.png" id="share_twitter">
<img src="http://localhost:80/graphics/share/email.png" id="share_email" pop="Send a link to this list to friends via e-mail. <b>Note:</b> recipients must already be users of the site or your view settings must allow public views for them to see it!">
</div>
Here is the calculated CSS of the #share_icons area:
#share_icons {
width: 150px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
* {
border: 0px none;
margin: 0px;
padding: 0px;
font: inherit;
vertical-align: baseline;
-moz-box-sizing: border-box;
}
Another thing I noticed, when I click on any of the images in this area, the pop up box for the inspector which usually hovers over the element where it is on the page is at the top left of the screen as if the images are all off screen somewhere.
Already tried clearing the cache completely. Also tried manually loading the image urls in Firefox and the images load and display fine if I do this. I've also moved the image tags to other places on the page to make sure this isn't a nested CSS thing.
Sorry to jump in so quickly, but I noticed something odd and FINALLY discovered the reason. Adblock was blocking the images most likely because I had accidentally clicked it and filtered it out.
I'll leave this question because it may be helpful to others.
Disable AdBlock for that current page you load. Image gets displayed after refresh. I just tried it and it is working.
There's about 3 or 4px white space under all images when viewing a page in wordpress. When viewing the same page without wordpress there's no white space under the same images, despite the same code.
Have tried display block, margin and padding set to 0, and removing empty spaces in the html file, but still for some reason there's this image space. Is this something known with wordpress, such as php code messing something up? I'm using <?php bloginfo('template_url');?> + image path for all the images, whereas the original file uses no php and has no image gaps.
Edit: Here are two snapshots from original file and wordpress showing wp's gap.
Using developer tools I could see that it's the div that holds the images and list items that's responsible for the gap. Yet the other divs holding images and lists in the same way don't have gaps, hm..
A quick checklist.. (apologies for it ignoring some of which you stated you've already tried)
Does the problem appear in both firefox and chrome? If only chrome it's probably a display: block; missing somewhere.
Inspect the element with firefox or chrome to see if wordpress or your theme is inserting any html/css. It may be inserting pre-styled ul li or p tags which you will need to style.
Make use of !important to override any css that may be set by wordpress core styles. Gallery styling, for example, is still set in core.
!important example usage (with some ideas as to how your theme or wordpress styling could be affecting it from somewhere)
display: block !important;
margin: 0px !important;
padding: 0px !important;
height: 100% !important;
max-height: 100% !important;
vertical-align: top !important;
font-size: 0 !important;
You can also try adding this filter to your functions.php file and then play with the gallery css.
add_filter( 'use_default_gallery_style', '__return_false' );
Here's a tutorial on styling galleries - http://theme.fm/2011/06/how-to-style-your-wordpress-gallery-43/
There are other filters to remove the auto style inserts by wordpress if you find those are the problem (as it sounds to be)
I use zurb-foundation to maintain the layout of my website. The home page of that website is rendreded perfectly in Opera 12.14 beside some other pages. However, some pages such as this page has extra blank space on the right on Opera only. I tried to inspect element in the blank extra space, it mentioned to the html tag?!! I copied the html source into my editor (netbeans) to see if there some missing ending tags, but I did not find any of them. My website is rtl. What should cause this issue?
I got the cause of this layout problem in Opera. It is due to soundmanager2. In Opera only it generates a div tag just before the closing body tag as follows:
<div id="sm2-container" class="movieContainer sm2_debug" style="position: absolute; width: 6px; height: 6px; top: -9999px; left: 9999px;">
<embed name="sm2movie" id="sm2movie" src="/quran/themed/slate/js/swf/soundmanager2_flash9_debug.swf" quality="high" allowscriptaccess="always" bgcolor="#ffffff" pluginspage="www.macromedia.com/go/getflashplayer" title="JS/Flash audio component (SoundManager 2)" type="application/x-shockwave-flash" haspriority="true">
</div>
Since I don't know how to make Soundmanager2 to stop generating this div, I decided to solve it using CSS as the following:
#sm2-container .movieContainer .sm2_debug{
display: none;
}
However, the above CSS solution fixed the layout issue, but it causes the Soundmanager stop working on Opera! Till this point, I regard this is an answer for my question about the layout.
The Final Solurtion:
from this answer on the official SM2 forum. I have to make a div with an id sm2_container and style it as follows then place it anywhere I want in the source:
<div id="sm2-container" style="width:1px; height:1px; visibility: hidden" class="movieContainer sm2_debug" >
</div>
The real useful style is visibilty hidden because it is just an swf square with white background and I want to hide it.
I'm making a user stylesheet for the add-on 'stylish.'
It applies a semi-transparent dark box over the entire page for night-browsing.
I'm using:
html:before {
content:url()!important;
position:fixed!important;
width:100%!important;
height:100%!important;
top:0!important;
left:0!important;
background:rgba(2,3,3,.35)!important;
z-index:99999999999999999!important;
pointer-events:none!important;
}
to create the fixed, overlying div.
This works just fine, however, if there are any iframes in the site, it will apply this code into the iframes' HTML as well as you can see here:
because these social networking widgets rely on an IFRAME, its repeating the code into those pages, creating a double-overlaying of the semi transparent dark box i've made.
the desired look would be:
I've tried hack-ish things, like applying a much-higher z-index to iframes and specifying the background-color and background of * of anything in the iframes to 'white' and 'opaque' so that it 'floats' on top of the parent html page, but this doesn't work perfectly. i've also tried something like:
html:not(iframe):before{}
but this also doesn't work. I'm wondering if there is a way to do what I'm trying to do in a way that doesn't rely on 'html:before' to create the same effect, or if there's a way to do that but not have it repeat inside the html of iframes on a page.
I've exhausted my efforts trying to get this to work, so any help would be really appreciated. Thank you.
Unfortunately, there is no way using CSS to target only the contents of an iframe from within the source of the iframe, i.e. the page that contains the iframe element.
I'm assuming, since you're using Stylish, that your CSS is in a Firefox user stylesheet. If so, you may have to look at the source URLs of those iframes, create a #-moz-document rule targeting those URLs at their domains, and remove the html:before pseudo-element accordingly.
Something like this, which should go beneath what you already have:
#-moz-document domain(/* Facebook Like */),
domain(/* Tweet Button */),
domain(/* Google +1 */)
{
html:before
{
content: none !important;
}
}
The content: none declaration disables the pseudo-element, preventing it from being rendered.
Having to exclude specific domains in this manner means this method is extremely limited and not very versatile at all, but it's the best I can think of.
You may want to try a different route:
html {
box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important;
}
Demo
This way the webpage is still useable when the user's browser doesn't support pointer-events.
You may also want to checkout this question: CSS - max z-index value
To apply these styles to only the parent document's <html> element, and not to iframes, simply apply the box-shadow to document.documentElement with JS:
document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";
Edit:
I don't know about the addon thing but you could give your HTML tag an ID and target it that way, although if you want this to apply to all pages then that's an issue
or maybe use html:first-child ? I honestly don't know what will happen, you can give it a try though
CSS doesn't allow you to style HTML inside an iframe. Since you're using an add-on, this is a non-standard implementation of CSS. Styles are not inherited by iframes, because an iframe is basically a new browser window. The add-on is adding the style to every HTML page in the browser window. There's no way for the browser to know that a page is inside an iframe (at least not in a way that's accessible via CSS).
I am trying to remove the iframes scrollbars and frameborder. I cannot use frameborder=0 and scrolling=no since they are no longer supported in HTML5. The seamless attribute throws a warning stating it isn't yet implemented according to the W3C Validator. I found a page online that said to use overflow:hidden to remove the scrolling, however it is not removing the scrollbars, at least in my google chrome. I haven't checked other browsers. Also the frameborder is still there, even though I used border:none. I also was trying to set the width and height of the iframe using css, however it didnt want to listen. Here is my current code:
#vidframe
{
width: 577px;
height: 358px;
overflow: hidden;
border: none;
}
<iframe name="videoframe" id="vidframe" src="video1.html"></iframe>
Yeah, I easily could add width=xxx height=xxx into the iframe tag, but my understanding that with HTML5 the goal is to get AS MUCH of the coding into CSS as possible... So shouldn't I be able to set the iframes width and height in the stylesheet? Again, overflow hidded didnt remove the scrollbars... and border: none didnt remove the borders...
The solution was to add overflow:hidden in the css of the file that was being loaded into the iframe. If the document is not something you can control the source code of, then use javascript to appent the overflow hidden attribute to it's body.
Remove iframe border and scroll bar using javascript,see the following link...
How to remove border from iframe in IE using javascript