SVG not showing correctly on Firefox - firefox

I know there are similar questions like this, but I can't really make out what to change it the code.
Here the link:
SVG
It's being opened in a Window with 1024px X 768px. At leasts that's what I read out of the code. Follow this link and click onto the picture with the blue heads on the left, to make it open like it usually does for users. Link: Homepage
I read I would have to define width and height 100% to make it work, but I don't know where to write it to.
Here's the code I found:
<div style="position:relative; top:8px;">
<a title="Hier finden Sie eine kurzpräsentation über die Werbeagentur Pluskat GmbH" onclick="javascript: window.open('<?php bloginfo('template_directory')?>/images/mehrwert.svg', 'Mehrwert', 'width=1024px,height=768px,scrollbars=no');" href="#"><img src="<?php bloginfo('template_directory')?>/ images/kurz_praesi.jpg" alt="SVG Präsentation" width="237" height="160" border="0" title="Das können wir für Sie tun - 150 Sekunden Kurzpräsentation" /></a>
<p style="font-family: 'Open Sans', sans-serif; font-size:11px; line-height:17px;color: #000000;">Was wir für Sie tun können, erfahren Sie auch in unserer knapp 3-minütigen Präsentation.<br/> <strong>
<a title="Hier finden Sie eine kurzpräsentation über die Werbeagentur Pluskat GmbH" onclick="javascript: window.open('<?php bloginfo('template_directory')?>/images/mehrwert.svg', 'Mehrwert', 'width=1024,height=768,scrollbars=no');" href="#"><span>Einfach durchklicken.</span></a></strong><br/>
</p></div>
That's the whole code calling up the window with the SVG within. It works fine on every Browser, except Firefox. Firefox somehow covers it with white lines / cuts it.
WOuld be great if anyone had an answer and could somehow highlight it for me in the code.
Thank you very, very much!

I haven't tested it, but I'm guessing that you need to go into the mehrwert.svg file, and change this part of the <svg> element
width="1022" height="766"
to
width="100%" height="100%" viewbox="0 0 1022 766"

Related

HTML Email : Outlook puts down the text after space

I am making HTML Emailer.
The issue i am facing is that , when i see the output of my code in Outlook, then
Register Online text gets down in the outlook.
like Register in one line and Online in new line.
<table cellspacing="0" cellpadding="0" border="0" style=";border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background: transparent;">
<tbody><tr>
<td valign="middle" height="40" align="center" class="main-bg-color" style=" background: #ffee00;color: black;display: block;padding-left: 20px;padding-right: 20px;!important; width:100px; cursor: pointer;">
<div class="modtxt"><span class="wrap_textbox"><a style="color: black;text-align: center; display:block; text-decoration: none;-webkit-text-size-adjust: none;font-size: 10px;line-height: 40px;text-transform:uppercase;font-family: \'proxima_novasemibold\', Arial, sans-serif;" href="http://www.hubilo.com/widget/webpanel/login.php?event=c1d1b1dc8d40c37429a8fd1f627c5c5e"><span style="font-weight:100;">Register Online</span></a></span></div>
</td>
</tr>
</tbody></table>
How can I solve it?
Thank You.
I'm not entirely sure what you want to do, but if it's make sure that "register online" doesn't ever break onto two lines, then the easy solution for Outlook is to use a non-breaking space character ( ) rather than a space.
REGISTER ONLINE
This should solve that particular issue.

Joomla newsletter template - clear:both alternative for outlook?

I have an image that floats and want the text afterwards to be underneath the image.
Here's what I have, it works for everything except the most popular mail client in a business environment (Outlook). I've tried wrapping them in tags and would rather not have to use 's as that could get messy in resizing situations.
Any help would be much appreciated!
Edit: I found a workaround which is to put the image into it's own row in case nobody has anything better
<tr class="acyeditor_delete" title="Deletable">
<td class="w30" width="30"></td>
<td class="acyeditor_text w540" width="540">
<img alt="picture" src="http://example.com/images/showcase/showcase_projekt.jpg" style=" height:300; width:600; float:left; margin:5px; " />
<h1 style="">My Firm - Die Branchenlösung für Handwerk und Handel</h1>
<p>
<h3>XXX ist Ihr professionelles Werkzeug für alle Bereiche der täglichen Büroarbeit. Finden Sie die Daten Ihres Unternehmens an einer zentralen Stelle und gewinnen Sie mehr Zeit fürs Wesentliche, indem Sie sich von xxx unterstützen lassen:</h3>
</p>
</td>
<td class="w30" width="30"></td>
</tr>

Empty images in wordpress

sorry for my English.
I have installed wordpress theme “Dynamix”. Dynamix uses plugin WPBakery Visual Composer. When I insert “Single Image” in post, then image have empty src. Example:
<a class="fancybox galleryimg blackwhite " style="width:200px" data-fancybox-group="gallerygdgrid_1" title="Controller" href="http://localhost/wp-content/uploads/2013/07/circle1.png">
<img class="gallery-img " width="200" height="200" alt="Controller" src="" style="visibility: visible; opacity: 1;">
</a>
When I insert image using wordpress embedded “insert media” window all works fine.
Where is the problem?
Thanks You!

Add text along with image HTML

Hi i have a div like below
<div id="iconArrow"><img src="footer.jpg" width="35" height="27" style="position:fixed;"></div>
i need to add a text "more" on right side of image. please help me check the example image for final output.
after adding codes
It could have something to do with HTML5.
HTML5
<figure>
<img src="footer.jpg" width="35" height="27">
<figcaption>More</figcaption>
</figure>
CSS
figure {
position: fixed;
}
figure > * {
float :left;
}
Here's a jsFiddle
If you want your image to be fixed and you want to add a text beside it I suggest your wrap your image tag in another div with fixed position and do this:
<div id="wrapper" style="position: fixed;width: 35px;height: 27px;">
<img src="footer.jpg" width="35" height="27" /><div style="position: absolute;right: 0">your note</div>
</div>

Image border does not work in Outlook 2010/2007

Here is the issue: I would like a white border on the picture, but when I send it to my outlook 2007 or 2010, it's not showing. Here is the code for the image in question:
<img src="my.jpg" alt="" width="220" height="220" border="3" style="border:3px solid #FFF;" />
Is there a fix out there for this issue? I feel like I've tried everything and nothing's worked.
This did render a border, but it's not an ideal solution because there is a space between the image and border.
<table width="220" height="220" border="0" cellspacing="0" cellpadding="0" style="border:3px solid #FFF;">
<tr>
<td>
<img src="my.jpg" alt="" width="220" height="220" border="0" title="70's Styled House and Pool" />
</td>
</tr>
</table>
I think you will have to wrap it in something. How about Span:
s = "<html><body>" _
& "<span style='display:inline-block;padding:5px;border:5px solid #fff;'>" _
& "<img src='z:\docs\image1.jpg' alt='' width=220 height=220></span>" _
& "</body></html> "
Set oEmail = Application.CreateItem(olMailItem)
oEmail.HTMLBody = s
oEmail.Display
I couldn't get the SPAN solution to work (I suspect because of extra code added by my CMS).
My solution was to wrap the image in a table with cellpadding set to the desired border width, and bgcolor set to the desired border colour. Hardly semantic, but that's Outlook's fault.
One of your issues is that hex color short-hand isn't supported in email. So you should be using all six hex digits.
<img
src="http://example.com/image.jpg"
alt=""
width="220"
height="220"
border="3"
style="border:3px solid #ffffff;" />

Resources