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/
Related
I am trying to align a picture to the right of my googlemaps on a webpage, Ive tried align="right", style = "text-align: right;" but it either puts the picture to the left of the googlemaps or puts it below it. i have tried putting them both inside and tried creating separate Any ideas? my code below
<div>
<h4>Location</h4>
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d3286.997240714081!2d-84.00061768469592!3d34.52829788047906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885f6619cc5057df%3A0xb04a3ff6aa138ebf!2sUniversity+Heights+Apartments!5e0!3m2!1sen!2sus!4v1497451987538" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-sm-3">
<img src="layout.jpg" style = "text-align: right;">
</div>
You can use the style float:left on your div tags.
<div style="float:left">
<h4>Location</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3286.997240714081!2d-84.00061768469592!3d34.52829788047906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885f6619cc5057df%3A0xb04a3ff6aa138ebf!2sUniversity+Heights+Apartments!5e0!3m2!1sen!2sus!4v1497451987538" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-sm-3">
<img src="layout.jpg">
</div>
There are a lot of ways to do this, I have created a fiddle using floats. However, contrary to what you might think... I am using float: left;. I have created a <div> to contain the <iframe> and a <div> to contain the <img>. I set both the <iframe> and <img> to width: 100%; so they fill their respective containers. This way, whatever width you set for the outer containers, they will fill them responsively. Check out the fiddle:
https://jsfiddle.net/fushniki/9cn3ptok/
try using span , instead of div for 2nd div
<span class="col-sm-3" style="float:left">
<img src="layout.jpg" style = "text-align: right;">
</span>
Please check: http://test.internet.az.pl/panel/lost_password2.php
Link: "Powrót do strony logowania Powrót do strony logowania" is properly visible on Firefox, Chrome etc. while it's not visible on IE8 (it's way higher).
How to correct this ?
<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
<a class="a" href="index.php">
<span>Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" />
</a>
The issue came because of the floating element.
Instead of this
<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
Use like this.
<div class="lost_password" style="margin-top:-27px; margin-left:135px">
**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>
[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!