I know this is a common problem with IE6 from my Google search but everything I have tried has failed. Here is my HTML:
<table width="750" border="0" cellspacing="5" cellpadding="5" class="largetable" >
<tr>
<td width="65px"><b>SELECT</b></td>
<td class="plus" width="300px">
<select id="op" name="">
<option selected="selected"></option>
<option>SUM</option>
<option>AVG</option>
<option>MIN</option>
<option>MAX</option>
</select>
<!-- problem here, background image not showing -->
And my CSS:
.plus a {
background-image:url("../images/plus.png");
background-repeat:no-repeat;
border:medium none;
margin-left:3px;
padding:6px 4px 6px 30px;
background-position:2% 100%;
}
The problem is that the background image does not appear. It appears on my Firefox browser but not on IE6.
I have tried using height: 1% and also position:relative and neither worked. I tried tons of other stuff but the damn thing won't appear.
IE6 won't render empty inline elements. Adding display: inline-block should fix it. You may prefer to serve that rule in a * html .plus a CSS hack to target only IE; I think it should generally be fine elsewhere though.
Related
I am building emails using a Drag & Drop editor in a CRM (Dynamics 365 w/ ClickDimensions). For the logo, I am using HTML to insert an image. The logo shows up fine for every email client except Outlook desktop. Here it shows up full-sized and ignores the inline styling. If I add "width= ... " inline with the img, it shows up smaller, but it's oriented in the top left of the email instead of where it's supposed to be.
I found the following conditional and tried to make it work, but it's not doing anything.
<div style="box-sizing: border-box; white-space: normal;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.42857143; word-wrap: break-word !important; white-space: normal; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<!--[if (gte mso 9)|(IE)]>
<style>
#logo {
max-width: 130px !important;
padding-left: 40px !important;
}
</style>
<![endif]-->
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
</div>
I cannot write any code outside of the that is given in the box, this is not a full-fledged html editor. Anything outside gets erased. Any ideas on what I can write to make the logo appear properly in Outlook? Thank you!!
If you can't write code beyond that box, you're going to have to live with the logo being the incorrect size in Outlook.
Outlook is problematic when it comes to images. It will display images at the size they were created and ignore your inline style width declaration. The fix is to add width="130" to the <img>.
An example:
<img id="logo" src="https://s3.amazonaws.com/dceh-marketing/SU/Logos/Systemwide/PNGs/South_Estab1899_CMYK.png" width="130" alt="South University Logo" style="max-width:130px; display:block; margin:auto;">
The image size is actually 344x161 and I am guessing Outlook is displaying it at that size. Either resize the image or add width="160" to the <img> or live with the issue.
Good luck.
Being a professional C++ programmer, I'm a very new to HTML :)
The problem is reproducible under Internet Explorer 11 Windows 10.
Other browsers (Edge, Firefox, Chrome) - works fine.
Code:
<table>
<tr>
<td width=500><h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
<br><br>
</td>
<td width=20></td>
<td><img style="vertical-align:top;" src="main_window.png" /></td>
</tr>
</table>
Problem is shown on this screenshot:
Here is how it should be and how it is in non-IE browsers:
Addition:
Here is how it looks using DIV code below :( Image is above the text:
Here's a more simple version. And yes, please avoid use table tags for general layout:
.prod-img {
margin-left: 20px;
float: right;
}
/* this is optional if you want to set an overall width */
.outer-container {
width: 700px;
}
<div class="outer-container">
<img src="http://placehold.it/350x150" class="prod-img">
<h1>Free Monitor Manager</h1>
<p>It's a simple utility.</p>
</div>
Fiddle here:
http://jsfiddle.net/mark47/5mt66fpL/
The CSS "floats" the image to the right side of the parent container. We're adding a margin-left: 20px to it so there's always some space between it and the text.
Setting an overall width is optional. Could also use max-width
Trust me, you still want to do this sort of thing with DIVs rather than a table.
Like this:
<div style="width:350px;float:left">
<h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
</div>
<div style="position:relative">
<img style="vertical-align:top;" src="http://maps.wunderground.com/data/images/ne_rd.gif" />
</div>
In short, this builds two divs, one with your text that is set to the left, and one with the right that is set relative to it.
You can put whatever you want in either side.
But more importantly, this sort of thing is much more cross-browser friendly.
I have a table inside which lot of td's. Inside one of the td i have "input type=file". I need to decrease the size of this input type, but the problem is it is not minimizing lower than 70px (i guess the minimum is 70px). because of this it is overlapping with the other td.
<td class="AttachOnMouseOutText"
id="fileid"
nowrap="nowrap"
style="padding-right:15px;
padding-left: 10px;"
valign="top"
onClick="fad_open();"
onMouseOver="highlightBG('fileid',0,'add','add_over.gif');
this.style.cursor='hand';
return true;"
onMouseOut="highlightBG('fileid',1,'add','add.gif');
return true;">
<p class="Margin"
style="position:relative;">
<input type="file"
name="AttachLink"
style="position: absolute;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0);
opacity:0;
width:70px;
height:50px;
cursor: hand;
left:-25px;"
title="Add File Attachment"
onChange="getWeblink();">
<img src="#ContactsImagePath#add.gif"
alt="Add File Attachment"
border="0"
align="middle"
name="add"
id="add"
onClick="fad_open();">
</p>
<span>Add File</span>
create a class and close the input. try this one
.myfile::-webkit-file-upload-button {
visibility: hidden;
}
.myfile {
position: absolute;
width:70px; background:(255,255,255,0); height:50px; cursor: hand; left:-25px; display: inline-block;
}
http://jsfiddle.net/nY8L9/1/
First option
You can resize the input lower than 70px, the sizing issue looks like its something to do with the image underneath or the td.
If you look on the input you will see that it has an inline style of opacity that is set to 0, so your not going to see the input no matter how much you resize it in your stylesheet.
Check the dimensions of the image underneath and resize that.
Second option
Add a width attribute on the td itself, for example
<td width="20">20px td</td>
This is a little hard because we don't know what's your .margin class, nor the size of your image You can try this fix. But it might not wor if other css declarations cause conflit.
<p class="Margin" style="position:relative; width:YOUR_WIDTH;">
<input style="etc.etc.etc. width:100%;etc.>
...
<img style="max-width:100%;">
Note: not sure why your input has left:-25px. If you add a background color and set it to full opacity, you'll see the negative left position creates a weird clicking zone. Personally, I'd change it to left:0
First, what I am trying to do:
Gmail is wrapping plain text emails (RFC stuff I prefer not to comment) and I want to know where the wrap is going to occur.
So I plan to add some custom CSS rules to change the color of the background to light grey at the 78 characters limit and to switch to a monospace font.
The bad news is that I know nearly nothing about HTML or CSS, but I succeeded however in doing some basic stuff with Opera (and the outstanding DragonFly tool I have just discovered) by creating a gmail.css like this:
.editable {
background: #DDDDDD !important;
font-family:monospace !important;
}
and activating it with Edit site preference.... So 66% of the job is done (but 2% from a difficulty point of view).
Then, I searched how to setup this width but could not find any working solution. Usually, answers propose to create a new element, but that is not what I want to do: the textarea should be as wide as the window, and this is just the color behind which should give an indication of the limit.
Note also that I cannot edit anything else than the CSS (or I need to know how to do it!).
Here is a snippet taken with DragonFly of the elements I am trying to modify:
<table cellpadding="0" class="cf An" id=":il">
<tbody>
<tr>
<td class="Aq"> </td>
<td class="Ap">ev
<div id=":in" class="Ar As aoE" style="display: none;">
<div class="At">
<textarea id=":ik" class="Ak aXjCH" style="" aria-label="Compose reply" spellcheck="true" itacorner="6,7:1,1,0,0" tabindex="1" form="nosend"/>ev
</div>
</div>
<div id=":im" class="Ar Au Ao" style="display: block;">
<div id=":ir" class="Am Al editable LW-avf" hidefocus="true" aria-label="Compose reply" g_editable="true" role="textbox" contenteditable="true" style="direction: ltr; min-height: 85px;" tabindex="1">ev
<br/>
This is the editable content!
</div>
</div>
</td>
<td class="Aq"></td>
</tr>
</tbody>
</table>
Because I am nice with me, I will answer my own question... The easiest solution I found is to use linear-gradient. I used below constant size, so if you try on your side, you might need to tune the size a little bit. Gmail is wrapping after the 76th character.
In addition, a little trick to make the new compose window bigger, though it is not related with the question.
/* Works for Opera Linux 12.15 and Gmail July 2013 */
/* Left side, non-wrapped, stays white, right side is light grey. */
.editable {
/* Size is in px because the textarea can contains different fonts */
background-image: linear-gradient(to right, #ffffff 612px, #eeeeee 1px) !important;
font-family:monospace !important;
}
/* Increase the size of new compose windows */
div[role=dialog] {
float: right !important;
width: 1000px !important;
}
Im going mad trying to figure out why the title link (in the left) and the other links in the nav bar (right) are not the same height.
The difference is subtle in Safari, but bigger in IE6.
Im missing something in the css reset of H1?
SAFARI
alt text http://img218.imageshack.us/img218/702/safari.png
IE6
alt text http://img64.imageshack.us/img64/870/ie6.png
The HTML
<div id="navbar">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<h1>title</h1>
</td>
<td align="right">
about
answers
contact
<input type="text" name="search" value="" id="searchbox"> <a class="color4" href="sss">search</a>
</td>
</tr>
</table>
</div>
and the css
#navbar a, h1 a { padding: 3px 5px; vertical-align: middle;}
h1 has been reset
h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}
h1 a { padding: 3px 5px; vertical-align: middle;}
sets a style for a link within an h1, not the h1 itself.
h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}
sets the style for an h1. So the styles for the link still stand, they have not been overwritten.
I think it's because the text input in the right table cell is causing that table cell to "stretch" a little taller than the left table cell (and it will be slightly different on different browsers depending how large they draw the text input box) and thus throwing off the alignment a bit. Try vertical-align:bottom; on the left table cell.
There are some very subtle differences in the way different browsers render styling. This is just another example of it.
To see a REALLY good example of this, try looking at the Acid 2 test in each browser to see some of the differences.
First, if this happens cross-browser, use Firebug in Firefox to tell you where an element's style rules are coming from.
Second, I'd check the line height on the <a> and <h1> as well as the margins on the <a>.