[edit 3] - Ok, here's the code, but Chrome and Sea Monkey and Firefox don't display it correctly. How can I change this?
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>Pissing Graffiti - Home</title>
</head>
<body style=" background-color: rgb(102, 102, 102); background-image:
url("http://static.tumblr.com/iorl8zv/Me9ljgnyz/pgbgtumb.gif");">
<p></p>
<div style='color: rgb(255, 176, 46)'><b><center>Download the new 8-track SAXAPHONE EP, by Pissing Graffiti</center></b></font></div></div>
<p></p>
<div style="text-align: center;" onClick="document.location='http://music.pissinggraffiti.com';"><IMG SRC="http://static.tumblr.com/iorl8zv/vIXlngmey/cover2.jpg" ALT="Music"></div>
<p></p>
<div><a style='color: rgb(255, 176, 46);' align-text="center;"
href="www.blog.pissinggraffiti.com"><b><center>Head over to the blog.</center></b></a></div>
<p></p>
<div align="center";<img
style="visibility:hidden;width:0px;height:0px;"
src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.11NXC/bT*xJmx*PTEzMDkwMTE*OTg1MTYmcHQ9MTMwOTAxMTUwMDU2MSZwPTI3MDgxJmQ9ZmFuX2NvbGxlY3Rvcl9maXJzdF9nZW4mZz*x/Jm9mPTA=.gif"
border="0" height="0" width="0"> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
height="100" width="434"><param name="movie"
value="http://cache.reverbnation.com/widgets/swf/11/fancollector.swf?page_object_id=artist_470177&backgroundcolor=666666&font_color=FFB02E&posted_by=artist_470177&hide_street_team=true"><param
name="allowscriptaccess" value="always"><param
name="allowNetworking" value="all"><param
name="allowfullscreen" value="true"><param name="wmode"
value="opaque"> <param name="quality" value="best"><embed
src="http://cache.reverbnation.com/widgets/swf/11/fancollector.swf?page_object_id=artist_470177&backgroundcolor=666666&font_color=FFB02E&posted_by=artist_470177&hide_street_team=true"
type="application/x-shockwave-flash"
allowscriptaccess="always" allownetworking="all"
allowfullscreen="true" wmode="opaque" quality="best"
height="100" width="434"></object><br>
<img style="visibility:hidden;width:0px;height:0px;"
src="http://www.reverbnation.com/widgets/trk/11/artist_470177/artist_470177/t.gif"
border="0" height="0" width="0"> </div>
</body>
</html>
Forgot to mention the problems.
1 - The Reverbnation #ddy collector isn't showing up
2 - the entire horizontal screen is a hyperlink whereas I just wanted it to be the image.
3 - I just found out that when clicking the link below it tries to send me here: "http://pissinggraffiti.com/www.blog.pissinggraffiti.com" which of course doesn't exist. "blog.pissinggraffiti.com" works fine however. I checked my code but can't figure it out. "pissinggraffiti.com goes to my hosted index.html file whereas "blog.pissinggraffiti.com" is a sub-domain that points to my Tumblr page. What's going on there?
Thanks for your time!
In order to get your Bandcamp site to be on the left of the Reverbnation collector you'll want to use the float property with something like this:
<iframe style="all-your-other-stuff-that; float: left;">
Then as for your link, it's still showing up as blue and underlined because that's the default look and you haven't applied a style to it. The style that you're applying to the surrounding div
style="color: rgb(255, 176, 46);"
should actually be applied to the link.
<a style="color: rgb(255, 176, 46);" href="www.blog.pissinggraffiti.com">Head over to the homepage/blog.</a>
Also, if you're going to have that much styling going on, you may want to consider sticking it in a style sheet instead of placing it all inline.
OK - I still haven't figured out problem 2 but:
1 - had something to do with the code they were giving me. So I asked them for the html code and just inserted that, adjusted formatting and voila. All the browsers I have work. If someone on Windows could test it I would be very thankful!
3 - I had to change the links =/ They were still pinting to the http://pissinggraffiti.com roote and I had to just adjust the image maps/links to have http://blog.pissinggraffiti.com
Thanks guys!
Related
**Note all <> tags have been removed to allow code to display
**
i have been playing around with this for hours and am not really getting it to work without using a workaround at the design end of things (ie Corel draw)
*Before i go any further,
First, website URL is AdventistAviation.com.au
Second, can i just say...i know this can be done with style sheets...however, in this case...i am not doing it that way!!! (so please dont bother pestering me with that option unless there is absolutely no way the method below can work)
Third, a workaround to my problem below, is to create the image already centered in its own background (the same size as the logo next to it) then import it (this is a bad idea because if in the future someone changes the main header background to a different color other than white...its gonna look awful!)
First i add the image (this works no problem)
However because the Logo on the left in the avada theme is approx 250×250 square, Tagline text is no longer centered in the header (as you can imagine comparing above with logo below)
I am using the themeforest AVADA Theme. In theme options>Banner Code For Header #4…
I would like to add the following inline css styling in an iframe for example, to vertically centre the Tagline (ie bring it down level with the middle of the logo)
style="vertical-align: middle;"
<iframe src="http://image_URL.png" style=”vertical:align: middle;” width="200" height="200"></iframe>
This doesnt seem to do anything different to the method in 1.
<div style="vertical-align: middle;"><iframe src="http://image_URL.png" width="200" height="200"></iframe></div>
I was hoping that if i place the iframe inside a tag containing the styling i might achieve my goal...alas it still doesnt work.
I have got to the point where my head is so full of nonworking methods i cant progress further.
Can someone help with this one?
p.s i have tried to find some inline css styling tutorials (specifically about vertical alignment styling) for the tag in html 5 without any luck.
damn w3c for depreciating the html vertical alignment method in html5!
# adam:
A simple solution is to change this code:
<div id="header-banner">
<div style="vertical-align: middle;" height="170" width="500">
<img src="https://googledrive.com/host/...etc..." width="400" height="200">
</div>
</div>
To just this:
<div id="header-banner" style="margin-top: 70px;">
<img src="https://googledrive.com/host/...." width="400" height="200">
</div>
There's no good reason to use inline styles for this, but anyhow, I've edited a chunk of your HTML with inline styles that will get what I think you want:
<div class="avada-row" style="margin-top:0px;margin-bottom:0px; display: table; width: 100%">
<div class="logo" style="display: table-cell;margin-right:0px;margin-top:0px;margin-left:0px;margin-bottom:0px; vertical-align: middle;">
<a href="http://adventistaviation.com.au">
<img src="http://adventistaviation.com.au/wp-content/uploads/2014/02/AAA-QLD-LogoType5_outlinedSQC1-e1398740621697.jpg" alt="Adventist Aviation Association" class="normal_logo">
</a>
</div>
<div id="header-banner" style="display: table-cell; vertical-align: middle; float: none; text-align: right;">
<div style="/* vertical-align: middle; */" height="170" width="500">
<img src="https://googledrive.com/host/0B7IkcUtUKfX8SkpLS1NuTlR4cDA/AAA_Tagline.png" width="400" height="200">
</div>
</div>
</div>
I'm having trouble with email formatting for emails received in the GoogleMail web client.
Space is added after the images in the table making gaps in my content, exactly the same as this question - Gmail displaying gaps between images.
Adding the inline style 'display: block;' fixes the issue in the MailChimp preview.
However the inline image styles are being removed at some point between me previewing them in the MailChimp and receiving them in my inbox, re-adding the inline CSS manually fixes it again so that's definitely the issue.
Style in MailChimp Template
<img src="" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" style=" width: 700px; display: block;">
Style when read by GoogleMail
<img src="IMAGE_PATH" alt="" border="0" width="700" height="665">
Is there a reason this is happening? Is it on MailChimps or GoogleMails side?
It looks like Gmail is stripping out the style attribute, because it doesn't like something.
A few things to try:
1) Remove the extra space at the beginning of your style declaration:
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block;">
2) Specify !important:
(reference:http://www.campaignmonitor.com/blog/post/3652/gmail-strips-out-inline-css)
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block !important;">
3) Try adding line-height to the containing td element:
(reference: http://www.webdevdoor.com/html-css/html-email-development-tips/)
<td style="line-height:0px;">
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
style="width:700px; display:block;"></td>
One more to try
4) Add width="700" attribute (maybe toss height in as well) to img tag and only specify display:block; in style attribute:
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""
width="700" height="665" style="display:block;">
Here's another one
5) The HTML5 doctype can cause rendering problems. Try using this instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Last one...
6) Just noticed that you set mc:allowdesigner="" and mc:allowtext="", what happens if you remove the ="" from those two?
<img src="" id="headerImage campaign-icon" mc:label="header_image"
mc:edit="header_image" mc:allowdesigner mc:allowtext
style="width:700px; display:block;">
Hopefully, one of these will work for you.
For me it's help (adding <p style="margin: 0;font-size: 0;line-height: 0;"> in <td>):
<td><p style="margin: 0;font-size: 0;line-height: 0;"><img src="{IMG_PATH}/w_bottom.jpg"
alt="" height="8" width="653"/></p></td>
It's definitely not the case that Gmail will always strip out style="display: block" on images. As #Fletch states, the simplest thing would be to do this:
<img src="" id="headerImage width="700" style="display: block;">
...rather than setting the width using an inline style. Outlook 07/10 won't obey widths set using style anyway in some instances, so its safest to set it that way. Or just leave out width altogether (necessary for a responsive email design).
You'll need to put your complete code somewhere, as it must be something else within the HTML causing problems, as the above code works perfectly.
I was struggling with this for a long while, added this to the section.
table{
border:0px;
border-spacing:0px;
border-collapse:collapse;
}
td{
line-height:0px;
}
tr{
display:block;
}
I hope this solves your issue, as this was quite the frustrating problem for me.
Gmail automatically adds a paragraph tag to the table data tags. Adding a paragraph tag with styles worked for me.
<td><p style="margin: 0;font-size: 0;line-height: 0;"><img /></p><td>
A picture is worth a thousand words and so I'll start off with it
As you can see, there is white background appearing in Chrome while in Firefox, the movie fits perfectly.
Here is the embed code:
<embed id="movie" src="movie.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="250" height="250" scale="aspect" name="movie"
align="middle" allowscriptaccess="always" allowfullscreen="false"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="shutter_enabled=1&shutter_url=shutter.mp3&width=250&
height=250&server_width=250&server_height=250">
For the time being, I've used bgcolor=#e0efe8 to merge it with background. But what I'm curious about is why doesn't the movie fit perfectly as it does in Firefox?
I tried to look at css but right clicking over it brings up the flash settings menu.
The embed tag is withing a td and the table has cellspacing = "4" and cellpadding = "3", but I don't think that would cause a problem. The table, tr, or td doesn't have a height property defined so I guess we can tick that off of 'to check' list too.
Is there anything else from my side that needs to be provided to come up a solution?
UPDATE
Throwing in the HTML too if that helps:
<table width="100%">
<tbody>
<tr>
<td>
<embed id="movie" src="movie.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" scale="aspect" name="movie" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="shutter_enabled=1&shutter_url=shutter.mp3&width=250&height=250&server_width=250&server_height=250" align="middle" height="250" width="250">
</td>
</tr>
</tbody>
</table>
Finally managed to view the CSS through Firebug lite. Here is the SS:
Thanks in advance
We'll need to have a look at your CSS file or inline style code, have you tried setting the td padding property to zero?
CSS code:
td {
padding: 0;
}
Edit1: If that doesn't work, maybe this css property:
border-collapse: collapse
Edit2: Try using these CSS properties:
position: relative;
overflow: auto;
Source (someone else having a similar problem): http://productforums.google.com/forum/#!topic/chrome/2EqmQiwApz4
I have a div with z-index:1-100(changes with javascript) and position:absolute. inside that i have an a href with z-index:101 and position:absolute.
All webbbrowsers renders this as the one with 101 is displayed on top (correctly)
but in ie 7-8-9 it doesnt... why is that?
Could really use some help here!!
CODE:
<div id="bannerad">
<a target="_blank" style="position:absolute;z-index:101;width:680px;height:120px;" class="mcdFade" href="http://www.mcdonalds.se"></a>
<div id="fadea" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/1.jpg" width="800" height="120" alt="Fade"/></div>
<div id="fadeb" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/2.jpg" width="800" height="120" alt="Fade"/></div>
<div id="fadec" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/3.jpg" width="800" height="120" alt="Fade"/></div>
</div>
EDIT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
generated by visual studio
EDIT 2
Added jsfiddle http://jsfiddle.net/Pesmd/18/ but cant get it to work, you only see the image slightly, it works in my browser though
Edit 3
This seems to be a major problem in IE, i have tried the solutions i found without result. Is there no1 here that can help me with this problem?
What i know, the z-index property resets when you have a parent with a position other then default set to them, but i still cant get it to work.
set anchor to display:block see if that works. Then add a big 3px green border on the element when your testing so you can see it better.
Why not just wrap your link around the divs?
<div id="bannerad">
<a target="_blank" style="position:absolute;z-index:101;width:680px;height:120px;" class="mcdFade" href="http://www.mcdonalds.se">
<div id="fadea" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/1.jpg" width="800" height="120" alt="Fade"/></div>
<div id="fadeb" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/2.jpg" width="800" height="120" alt="Fade"/></div>
<div id="fadec" style="position:absolute;visibility:hidden;"><img src="Images/Ads/McDHstad/3.jpg" width="800" height="120" alt="Fade"/></div>
</a>
</div>
Edit: I looked at your fiddle and made it work. It's a different design than you were going for, but it's simple and gets the job done without having to worry about z-index: http://jsfiddle.net/kCsvG/3/
I can't figure out why this happens. The second image is somehow located below the level of the first one, but the next lines of images are OK.
Screenshot: http://i.stack.imgur.com/e1P2t.jpg
The code for each linked image is :
<a style="display: block; float: left; padding: 5px;" target="_blank" href="_link_">
<img src="_link_" width="300" height="200" />
</a>
What should I do to correct this?
Live example can be found here http://chemica.ru/thread/1433
Welcome to stackoverflow...
You have <br/> tags after each linked image. If you get rid of those, that should help.
Get rid of the <br> between the <a> tags when they're on the same line - that is the problem.