My site is in VB using VS 2010, and my z-index property I have set to 20, and it's working fine over pictures and other things. But I have two youtube videos, and the z-index property isn't working; the menu I want to display is covered up by the youtube video -- but only in IE; other browsers work fine!
Am I doing something wrong? Or is there something I should do differently when it's a youtube video?
My embedded video looks like this and it's covering my menu:
<table class="tablestyle0">
<tr>
<td>
<iframe id="ShowFrameID" width="640" height="480"
src="http://www.youtube.com/embed/IxiZ0sdh6hw?wmode=opaque?
modestbranding=1&rel=0">
</iframe>
</td>
</tr>
Any help or guidance in this regard would be truly appreciated!
If you change wmode=opaque to wmode=transparent, then the YouTube player should respect your z-index ordering.
EDIT: The problem is you have two ? characters in your YouTube URL. The wmode=opaque part is not getting through to the server.
It worked for me after I made that change. You probably don't have to set it to transparent (opaque should work, too).
<table class="tablestyle0">
<tr>
<td>
<iframe id="ShowFrameID" width="640" height="480"
src="http://www.youtube.com/embed/IxiZ0sdh6hw?wmode=opaque&modestbranding=1&rel=0">
</iframe>
</td>
</tr>
Add position:relative to your table class' CSS and it should honor the z-index after that.
Related
Being a customer service staff with limited access to basic html, I've been assigned a task that beyond my skill about making a decent page of highlight items, after series of search around, I somehow get things working, well, in firefox, when I load up the the same content in Chrome & IE, I found different problem and to my best effort, I have no idea what cause the problem...
You might first wish to look at the firefox version as it display perfectly as I wanted it to:http://jsfiddle.net/kitchellw/TR6v5
(and I don't know why the first line doesn't apply the CSS...)
In IE, the round corner gone, which I won't worry too much... but
padding is gone...
the lower table looks like a mess
I found a way to tackle the image border, just border=0
In chrome,
while the upper section looks ok, the content in lower table seems 'shifted' to right by a few pixels and no longer stay center
Here is the exact code for the problem table at the lower section:
<table class=highlightitem>
<tr>
<td height="200" valign="top" >
<center>
<a href="http://www.digitalbuydirect.com/index.php?route=product/category&keyword=DSC-TX30" target="blank">
<img width=234 src="http://www.digitalbuydirect.com/edm/eDM20130516/TX30.png" /></a>
</center>
</td>
</tr>
<tr>
<td height="200" valign="top" >
<font class=product><B>some text</b></font><br><br>
<font class=content>some text</font><br>
<br>
<font class=pricehighlight><B>price</font><BR>
<font class=content><s>other price</s></font>
</td>
</tr>
<tr>
<td align="right" height="50" valign="bottom" >
<img src="http://www.digitalbuydirect.com/edm/achieve/shopnow_35.png" /> </td>
</tr>
</table>
and finally, I know my code is complex by using multi-table to control the vertical position, and CSS is my friend here, but i were unable to get the 'shop now' icon station at the lower right corner with clickable url attach with it, I found a CSS background image with a display block for the url might work, but the display block still request at least 1 character, which I cannot afford on my image. Any hint or direction would be appreciated.
First of all, you should really clean up your deprecated code.
So far the things I've seen that are deprecated or not supported anymore are as follows:
<center> - Use CSS text-align:center; reference
<font> - Use another element like <p> coupled with CSS text styling
<td align="right"> - Use CSS float:right; reference
<td valign="top"> - Use CSS vertical-align:top; reference
As for your IE padding problem, take a look at this question. I'm not sure if that's applicable though, since you didn't include your CSS in the question, so I don't know how you implemented the padding you already have.
As for centering, using margin:0 auto; will work for statically positioned elements. For absolutely or fixed position elements I do this: #elementID{width:800px[specify width]; left:-400px[negative half of the width]; margin-left:50%;}
We have an asp.net master page that defines our web application layout using Tables. The goal is to have the content page take up the entire available screen real estate after having displayed the header and footer. This works for us fine in IE but does not work as intended in Chrome or FireFox.
What happens with Chrome and FireFox is that the content section expands only to wrap the content, which, in instances like a welcome screen ends up taking only a small portion of the screen leaving a big blank section at the bottom of the screen.
Here is a basic example of how our layout is structured:
<table style=height:80%;width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<!--Header Banner goes here This displays fine-->
</td>
</tr>
<tr style="height:100%" valign="top">
<!--Content Goes Here. Problem is that page only expands
as much as its content section vs filling up the whole page. -->
</tr>
<tr>
<!--Footer Goes here. This works fine!!-->
</tr>
</tbody>
</table>
Your problem is that you're using tables for layout. This would be easily achieved with proper HTML using something like a sticky footer (http://ryanfait.com/sticky-footer).
I'd recommend grabbing the HTML5 boilerplate or similar (http://html5boilerplate.com) and working from there.
If this is an existing web app that you can't change the HTML of then Javascript might be a solution...
There is no good way to specify in CSS that a element should be at least as high as the screen. You have to resort to JavaScript.
Since determining the height of the client are of the screen is again something that every browser version might do slightly differently, it is safest to use jQuery:
// tableID is the ID of your element that you want to take up the space
$("#tableID").height($(window).height());
You are missing some <td></td> and " in your code.
Also add
html,body {
height:100%;
min-height:100%;
}
to the StyleSheet. And HTML is
<table style="height:80%;width:100%;background-color:yellow" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" style="background-color:red">
Header Banner goes here This displays fine
</td>
</tr>
<tr valign="top">
<td style="background-color:green;height:100%">Content Goes Here. Problem is that page only expands as much as its content section vs filling up the whole page.</td>
</tr>
<tr>
<td style="background-color:blue">Footer Goes here. This works fine!!</td>
</tr>
</tbody>
</table>
Live preview >> jsfiddle
Set margin-top:0px in your content tr tag
I am trying to make a plugin for WordPress.
It works great, except when i load the default WordPress themes. e.g. "twentyeleven."
This theme has a DOCTYPE as shown below. And hence, no matter what I do, it always inserts this annoying GAP when i put an image in a table.
Please Help!
How do I get rid of this gap?
Below is some code. Anytime a table is placed in a situation in which the DOCTYPE is defined as it is here, then I get this gap.
The WordPress default themes seem to use this DOCTYPE declaration. So they BREAK my pretty plugins...
<!DOCTYPE html>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td width="100%">
<img border="0" src="http://goo.gl/PJdRU">
</td>
</tr>
</table>
</body>
</html>
All browsers render the above code as shown below. I just want to REMOVE the Gap! Thanks!
There are several solutions, but neither is perfect. I guess the easiest will be just change your img's style - in CSS (with td img { display: block } rule) or just an inline style, like this:
<img style="display:block" border="0" src="http://goo.gl/PJdRU">
Here's an article with explanations why you see what you see - and several possible ways of fixing it. ) And here's a working JSFiddle to play with.
I am using Div in my website to display some links. It works fine in IE, but when i expand that div in firefox and google chrome it goes weird.
Can anybody help me to figure it out. I have googled it but i did not fine any useful solutions.
<td vAlign="top" align="center"><font>-</font></td>
<td align="left" >
<div align="left" style="margin:0 auto; padding:0; display:block;clear:both; position:relative;">
<A class="inkblue" href="javascript:expand(4);">Faculty & Staff</A
</div>
</td>
<td></td>
</tr>
<tr id="e4" style="DISPLAY: none">
<td></td>
This is the code for that section. Please let me know if anything required.
This is the link to site. open it in firefox or chrome and click the link
"Faculty & Staff" under "Campuses" .
I have gone through your site:
I saw that you are using below line double time. Insert this line only one time.
If your are trying to Override some classes then specify different css file name.
<link rel="stylesheet" type="text/css" href="css/nuonline.css">
To overcome your issue:
Currently on click of "Faculty, Events & Campus", you are doing style="display:inline". Rather than doing this way you can remove style attribute itself.
Example:
On click: Remove style attribute style="display:none" for id="e4" or id="e5" or id="e7"
To Reset (that is on next click): Add style attribute as style="display:none" for id="e4" or id="e5" or id="e7"
There is one blank <td></td> remove it and give colspan="2" to next td element
If I use styling in my outlook, it won't work.
how can I fix it? I am talking about this style code:
<div id="BodyID" Style=" word-spacing:2px; min-width:0px; min-height:0px;max-width:693px; max-height:490px; height:485px; background-color:#f4f4f4; border:1px solid #e4e4e4; font-family:Arial;">
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
Maybe this can help http://www.campaignmonitor.com/css/ It's a table, what is supported in E-Mails
edit
min|max-width|height not supported
http://htmlemailboilerplate.com/
I've been using that as a base for my HTML email campaigns.
And the link yunzen posted to campaign monitor is a great resource.
The MSDN article superlime linked to tells the sad story: for whatever incomprehensible reasons, Microsoft reverted nearly 10 years in their handling of HTML email w/Outlook2007, and did not see fit to fix it in 2010.
Having taken the trouble to design a well-formatted HTML layout for rest of the universe of mail user agents, I do see one saving workaround, which is what I'm going to direct my users to, rather than spend my time trying to reconstruct ancient HTML:
Use the VIEW IN BROWSER option Outlook offers for reading an email message. That re-assembles the HTML as intended.
Try adding 3 columns table, click on the example link below.
Example: Link
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="400">
<table border="1" cellspacing="0" width="100%">
<tr>
<td>
Content here...
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>