I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, it's basically where the four corners have a td and and img (its a rounded corner form) .. if I remove the whitespace from the document it fixes the issue.. What actually happens is that it messes up the tables.. it puts a thin white line between the upper tr that holds the 2 corners and the next tr
I need to remove the the whitespace between the img and the TD, is there a better work around, as I have lots and not only that if I reformat the document the problem returns..
Here is a simple example..
<table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
style="margin: 0px; padding: 0px">
<tr>
<td width="12" align="left" valign="top">
<img src="content/images/corner_left.gif" width="12" height="12" />
</td>
as you can see there is white space between img and td... and I remove it so it looks like this:
<img src="content/images/corner_left.gif" width="12" height="12" /></td>
the problem is gone, (notice the td and image are right next to each other)
Any ideas, I tried setting all sorts of css, padding 0px, margins 0px etc ...
Any ideas really appreciated.
As it turns out, removing the whitespace is NOT the only way to fix it. Everyone else has probably figured this out by now, but I figured I'd add it here for completeness for the next poor soul that stumbles across this annoying problem.
Basically, you don't have to worry about the whitespace in your markup. Instead, add style="display:block;" to the img tag. Since images are inline elements, and you have whitespace in your markup, IE adds the extra whitespace to the bottom of the cell to account for the possibility of text with decenders (e.g. g, y, p, etc.). Setting the img tag to display as a block element takes care of this. No more ugly whitespace!
Credit goes to this guy: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, which is where I found the answer. Guess he got it from a google discussion group or other.
Hope that helps!
The only way to "fix it" (and I use that term loosely) is to remove the whitespace.
More importantly, you should stop making websites like it's 2001. :)
I've fixed adding this before the end of table:
<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>
Hope this help.
This drove me nuts for a while - moving from IE 8.0 to IE 9.0 on intranet sites - all images suddenly had a bit of white space beneath them.
Setting display:block on the images did it for me.
I tried all solutions above:
a) tried the display:block
b) removed white spaces in td tags (ie I used tr and td tags without white space inbetween them. )
c) I tried using:
padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;
Solution a) worked. Solutions b) and c) did not work on IE.
But the BEST SOLUTION I found is this:
Add a hspace=0 attribute to the Image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />
This does the trick.
IE finds that there is text content inside the TD (other than the image), so it gives it its text line-height. Try setting a height and overflow: hidden for the TDs.
It's been this way for as far back as I can remember, all versions.
For myself, I've never found another way than putting the image and td on the same line, but I've never really looked - there may be a way that I've missed. Guess I just got in the habit of streamlining them.
Other (and the best :) ) solution is:
set the td width/height to the image width/height with css
set image to the background for td
Like:
<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>
It works form me :)
(sorry for my english :"> )
Another late response, but you could also use line-height: 0; to remove the whitespace.
To ensure that text will still be readable you could wrap it in another element and use line-height: normal or another value of your choice.
td * { line-height: normal; }
I had this issue too with an intranet site on Internet Explorer, so I turned off the compatibility view mode for intranet sites to fix it:
Related
For the past two days I was trying to figure how CodeTwo software works in order to make a signature for the email.
I got to a point where I have the signature almost ready but with one problem.
I can't figure out how to vertically align an image (which is an icon) with the text. (because the software uses tables to align elements)
Basically, I have a tr with a td where I have this two elements that I want to center.
I attached a screenshot to show you what I mean by this. Any suggestions? Thanks in advance.
CODE Snippet: https://codepen.io/ovidiu1207/pen/xLerjy
You can try attribute valign="top" or css style="vertical-align:top;" or both to your td like given sample.
<td valign="top" style="vertical-align:top;"></td>
CodeTwo seems to add a lot of useless code to the markup. I've tried playing with the elements and adding the property vertical-align: middle; to both the images seems to have worked.
https://codepen.io/anon/pen/WEWExX
SOLVED (forking from your codepen) => https://codepen.io/anon/pen/XawXEG
I was trying to "guess" the HTML based on your screenshot, so hopefully this solution works for you:
.img {
margin-right: 6px;
vertical-align: middle;
}
<table>
<tr>
<td><img src="http://lorempixel.com/30/30" alt="banana" class="img">{Mobile}</td>
</tr>
</table>
Here is my site :
<span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
Arsenal
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150">
</a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
West Brom
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150">
</a></div></span>
You can see 2 logo on top of site (div.field_home_team-wraper and .field_away_team-wraper), i want it stay in one line, so i set it width:50% and inline-block, so here is what i want to display:
But, sometime on PC browser and alway on iPhone browser, it will display like this :
I know there are white-space between two inline-block div, i removed it, you can look at source code to confirm. I don't know what problem here, please help.
I just inspected the code on your site and I can't recreate the issue you're describing above. However, I did notice that there are a few lines of code that chrome isn't agreeing with - maybe try and resolve some of those issues to see if it fixes the problem on your end.
My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.
But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.
Here is my question will more explain : Browser image render break css inline-block layout
This is a known bug.
Display: Inline-Blockcreates spaces between elements.
Here are two ways to fix this:
First way, if you use display: inline-block, always use margin-right: -4px to fix the spaces between elements.
Second way, use font-size: 0 on parent <div> to remove spaces, and on elements inside <div> reset the font again to the size you want. Example: font-size: 16px
And another tip, be sure to use Box-sizing: border-box, so whatever if you put borders or margin or padding, doesn't affect the width in percentage...
I made a site about Star Wars Canon timeline (with movies,tv shows, books and comics) and I have a slight problem.
Chrome/Opera/Vivaldi have different < br> tag heights compared to Firefox and it crushes my OCD.
Is there any way to make the site look the same way on Firefox as it does on Chrome/Opera/Vivaldi?
I am sorry if I am not made understood, here's a screenshot: http://i.imgur.com/XmT2M64.png
Yes, I have OCD as well and am verily frustrated by such imperfections.
You may style your <br> with CSS:
br {
line-height: 2rem;
height: 2rem;
}
or by in-line styling, as provided by #Raj Kumar in a previous answer:
<br style="line-height: 2rem; height: 2rem;" />
Try a snippet here:
<br style="line-height: 10px; height: 10px;">
<!-- I used 10px to emphasise the height. You can use !important, too, if your code is not obedient. See? It works.-->
If this does not work, what I'd advise you to do would be to completely omit the <br> tags and add either margin, padding, or invisible borders (border: 2px groove transparent;) to the elements you're seperating. Another not-so-neat way is to add transparent a div (div.class {background: transparent; width: 100%; height: 2px;}).
You might want to try to add / in your <br /> tag (just in case) (although most modern browsers already support <br>). Make sure you don't have any additional spaces in your code, too (just for neatness). Also try to import normalize.css or vanilla.css and check if it fixes the problem.
Thanks for letting me know about Vivaldi. Looks like a nice browser!
You can try normalize css below is link http://necolas.github.io/normalize.css/
It will solve other problems of cross browser problems
add styles for br It should work perfect check this
<br style="line-height:?px; height:?px" />
you may try with the
reset.css
normalize.css
vanilla.css
that allows to reset all or particular element as per your requirement.
I've got an IE7 issue i need some help with. I'm loading in a table of data via ajax and php. Works fine everywhere except IE7 (doi).
The problem is that there isn't a vertical scrollbar after it loads several hundred records.
I've checked into the position and overflow bugs (like here: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/) but have still had no luck as of yet.
The arrow keys don't work, either. Only way to see what's below the fold of the browser window is to click and drag.
Any help is appreciated.
=================
UPDATE:
Wanted to include some images of what's going on. Can't give access to the page/files, has sensitive information. Hopefully this can help a bit, though.
Before:
After:
The code for the table goes something like this:
<div class="row hide" id="spend-table" style="display: block;"><table border="0" cellpadding="4" cellspacing="0" id="spend">
<thead>
<tr>
<th style="display: none;">Id</th><th>Name</th><th>City</th><th>State</th><th>Vendor</th><th>Catalog#</th><th>Fac#</th><th>Desc</th><th>Quantity</th><th>UOM</th><th>Total</th><th>Highest</th><th>Lowest</th></tr>
</thead>
<tbody>
<tr>
<td style="display: none;">35816</td><td>Boblawblaw</td><td>Law BLog</td><td>KY</td><td>The Avengers</td><td>DE878Z</td><td>12091</td><td>Canned Butterscotch</td><td>1</td><td>YR</td><td>$127.13</td><td>$127.13</td><td>$127.13</td><td style="display: none;">2</td></tr>
</tbody>
</table></div>
The table's parent div is hidden initially, but after the search is performed (via AJAX & Codeigniter) the results are kicked back from CI using the Table class to populate the div with the new info (table).
Just to be clear: all the records show up as they ought. You can click and drag to see everything. It's simply an issue of scroll/overflow/etc. getting overlooked in IE7.
Thanks!
===================
Another update:
The table, the table's containing div, and that div's containing div all have heights of 800+. The body, however, is stuck at 348px. Have zoom, position, and overflow attributes set. Out of ideas :\
#mikedidthis helped out big time in the chat room.
i had added too many overflows throughout. removed it from the body by changing to overflow: auto !important; and removed from the .container
the overflow bug fix ended up becoming the bug itself :p thanks for all the help and commentary.
best,
What is the best and easiest way to vertically center text that's next to an image in html? Needs to be browser version/type agnostic. A pure html/CSS solution.
This might get you started.
I always fall back on this solution. Not too hack-ish and gets the job done.
EDIT: I should point out that you might achieve the effect you want with the following code (forgive the inline styles; they should be in a separate sheet). It seems that the default alignment on an image (baseline) will cause the text to align to the baseline; setting that to middle gets things to render nicely, at least in FireFox 3.
<div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>
<span style="vertical-align: middle;">Here is some text.</span>
</div>
Does "pure HTML/CSS" exclude the use of tables? Because they will easily do what you want:
<table>
<tr>
<td valign="top"><img src="myImage.jpg" alt="" /></td>
<td valign="middle">This is my text!</td>
</tr>
</table>
Flame me all you like, but that works (and works in old, janky browsers).
There are to ways:
Use the attribute of the image tag align="absmiddle"
or locate the image and the text in a container DIV or TD in a table and use
style="vertical-align:middle"
That's a fun one. If you know ahead of time the height of the container of the text, you can use line-height equal to that height, and it should center the text vertically.
I recommend using tables with <td valign="middle"> (as inkedmn mentioned, it works in all browsers), but if you're wrapping with a link, here's how to do it (works in ugly old browsers too, like Opera 9):
<a href="/" style="display: block; vertical-align: middle;">
<img src="/logo.png" style="vertical-align: middle;"/>
<span style="vertical-align: middle;">Sample text</span>
</a>
There are a couple of options:
You can use line-height and make sure it is tall as the containing element
Use display: table-cell and vertical align: middle
My preferred option would be the first one, if it's a short space, or the latter otherwise.
Since most of the answers to this question are between 2009 and 2014 (except for a comment in 2018), there should be an update to this.
I found a solution to the wrap-text problem brought up by Spongman on Jun 11 '14 at 23:20. He has an example here: jsfiddle.net/vPpD4
If you add the following in the CSS under the div tag in the jsfiddle.net/vPpD4 example, you get the desired wrap-text effect that I think Spongman was asking about. I don't know how far back this is applicable, but this works in all of the current (as of Dec 2020/Jan 2021) browsers available for Windows computers. Note: I have not tested this on the Apple Safari browser. I have also not tested this on any mobile devices.
div img {
float: left;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
I also added a border around the image, just so that the reader will understand where the edge of the image is and why the text wraps as it does. The resulting example looks is here: http://jsfiddle.net/tqg7hLzk/
One basic way that comes to mind would be to put the item into a table and have two cells, one with the text, the other with the image, and use
style="valign:center"
with the tags.