I have a question about IE7 and how it ”interprets” title and alt HTML tags.
I’ve this constalation on a site:
<a title="My Name" alt=" My Name " class="profile_image" href="/members/my-ane">
<img rc="/uploads/sfguarduserprofile/229/11066_60x60_3f9ee652879b2e3209698830c9ff1583.jpeg" alt="11066_60x60_3f9ee652879b2e3209698830c9ff1583">
</a>
Now, when hover with my cursor in IE 8+, Firefox, Chrome, Safari, you-name-it it shows “My Name” in the alt-box.
But when heading over to IE7, it shows: 11066_60x60_3f9ee652879b2e3209698830c9ff1583 which would be the image alt tag.
I have the possibility to change the alt text on the image but if there is any solution other than that, I would very much appreciate it so I don’t use too much time on a relatively small problem in a single browser.
And are there any explanation why IE7 can’t figure this out oppose to its bigger brothers, IE8, 9+ ??
Sincere
- Mestika
Technically, the alt attribute should serve as alternative content in case the image doesn't load. In your case, there is no contextual need for an alt tag, as a user that cannot view the profile image does not need to see the image to understand the rest of the content.
The image should have an empty alt attribute per the WHATWG.
Related
I'm using CK editor plugin for strapi. The markdown module is desactivated so ck editor returns html. On the frontend i'm using react (next.js) . Everything seems to be working fine, but the resizing is not working. When I resize an image I get a <figure> tag with a inline size of the width of the resized image and classes image image_resized, however the <img> tag inside <figure> has an attribute of sizes='100vw'. the image is bleeding out of the <figure> tag and is never actually resized even though I can see the correct width is passed to <figure>
I checked the documentation but couldn't find anything , did I miss something ? Am I to do something on my frontend so the images resize correctly ?
You can just do at global styles:
img{width:100%;}
or
figure img{width: 100%;}
I am building a new website, and want to use the srcset to let the browser deside what image is the best for the current viewport.
What happens is that what ever i put in the srcset the browser will just show the alt tag text "test". If i through F12 developer tools removes the srcset attribute completely, the image shows up just fine.
All images in my example exists and shows up in a browser:
Here is my image tag, can any one see what is wrong with that?
<img src="http://localhost/Medium/Alaska-2-1818.jpg" srcset="http://localhost/Large/Alaska-2-1818.jpg 500w, http://localhost/XXLarge/Alaska-2-1818.jpg 1000w" alt="test">
My problem is shown in this codepen i made:
https://codepen.io/AxelAndersen/project/editor/DxKeaV
In your Codepen, some URLs have an error, missing one "i".
I have a Web-App written in Typescript with Angular.
This displays a huge SVG element with d3js and renders many smaller SVGs on it, at least 100. It also has a header, that is a .png image. This image is not rendered in IE11, in fact, after inspecting the DOM IE removes the whole element from it.
This is my code for rendering the .png.
<img ng-controller="Ctrl as ctrl" src="images/logo.png" class="logo"
tooltip="{{'version' | translate:ctrl.version}}" tooltip-placement="bottom"/>
If you refresh the page, it shows for a second, then get's removed.
This only happens in IE, not in Firefox or Chrome.
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.
I am trying to use lightbox2 to display a block of text after clicking a heading element:
something like
<h3>name</h3>
I have used lightbox for images with captions but this time I would like the caption to come up without an associated image after clicking a name on a webpage.
Thanks for any replies.
I don't think that lightbox2 is made for such a thing, why don't you try http://fancybox.net/ this one works 100%.