As the enclosed image suggests, Three browsers are rendering the same content very differently.
Chrome Version 24.0.1312.57 (bottom) is collapsing images and computing significantly smaller sizes earlier than 2 counterparts. Amazing how Chrome just re-sizes the images and creates a half-blank screen although a sticky navigation bar fills the entire screen (as does a bottom background image)
Safari 5.1.10 (6534.59.10) (middle) handles a smaller viewport, but in sort order, with a smaller viewport, computes new image sizes even smaller than Chrome.
Firefox 29.0.1 degrades nicely based on viewport size, but does not re-compute the images.
Am using Foundation (the minified file) version 5
Source HTML
<div class="row">
<table cellpadding='0' cellspacing='0' border='0' align='center'>
<tr align='center'>
<td class="modelloframe">
<div id="thumbwrapper">
<img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" />
<div class="text" id="thumbwrapper">3210F</div>
</div>
</td>
How can these values be computed so wildly differently? And why does Chrome really behave oddly
If you're using Foundation, you are going to need to follow their structure. After declaring your row, you need to declare your grid/columns. Let your grid be the parent container and you shouldn't need to mess with the position or width of your table.
<div class="row">
<div class="large-12 columns">
<table cellpadding='0' cellspacing='0' border='0' align='center'>
<tr align='center'>
<td class="modelloframe">
<div id="thumbwrapper">
<img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" />
<div class="text" id="thumbwrapper">3210F</div>
</div>
</td>
</tr>
</table>
</div>
</div>
The .column/.columns classes contain the necessary floats etc. to maintain your horizontal block ( row ).
Block grids are an excellent resource as well, but if you do not declare them within a column, you will not achieve your desired results.
block grid does give better responsive results. If someone stumbles upon this, beware of downloaded version. MIne did not have for each grid type the list-style defined to 'none'...
<div class="row">
<ul class=small-block-grid-6>
<li>... </li>
</ul>
</div>
Related
Coding inline and with tables, I made a simple HTML e-mail signature that contains two images. When I send it from MacOS Mail several different clients, it works well on desktop. On iOS Mail, it shrinks down the size of the table, which is expected behavior, but it makes it significantly smaller than it needs to be, thus making my font-sizes tiny.
The table has a 3 row, 2 column structure, two colored rows and one white one which has a colspan for full table width.
Things I have tested to no effect:
more or less text content
giving the cells a width in pixels
giving the whole table width:100%
marking images display:block or display:inline
Apparently iOS Mail thinks the table is wider than it is, or at least treats it that way.
When I remove the images the two columns become equally wide and the table fills the whole width. So I'm looking for a solution in how the images are styled; does anyone know if I can add some CSS or HTML attribute to the images to fix this?
Here's the code, stripped of some text styling to keep it legible:
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign=top style="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:top;">
<div style="font-size:13px; ">
<div style="font-size:16px;font-weight:600;">Name of the sender </div>
<div>Description of the role of the sender</div>
</div>
</td>
<td valign=top style="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:top;">
<img src='logo.png' width=124 height=41 alt="Org logo" style="width:124px;height:41px;display:inline;" />
</td>
</tr>
<tr>
<td valign=bottom style="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:bottom;">
<div><img src='line.png' alt="divider" width=210 height=24 style="width:210px;height:24px;display:inline;" /></div>
<div style="font-size:13px;">06 1234 5678</div>
</td>
<td valign=bottom style="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:bottom;">
<div style="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
<div style="font-size:13px;">organisation.nl</div>
</td>
</tr>
<tr>
<td colspan=2 style="padding:20px;">
<p style="font-size:13px;margin:0 0 8px 0; ">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
</td>
</tr>
</table>
First, make your table width 100%:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
That will make it fit the full width of its container.
Second, on the text-reduction, this whole table appears to only go down to about 415px. So if your mobile is smaller, it will scale it all as one group. To prevent that, make one or both of your images responsive. Here, I've made the divider responsive:
<div><img src="line.png" alt="divider" width="210" height="24" style="width: 100%;height: auto;display:inline;max-width: 210px!important;"></div>
I've added !important to the max-width because Outlook iOS has a default style that would change it 100% otherwise, potentially bloating your image.
Continue to use the width and height attributes because Outlook Windows desktop uses them.
I have 4 divs in my .html:
<div id="div">
<div class="contenido">1</div>
</div>
<div id="divSupIzq">
<div class="contenidos"><div id="textoDinamico">120 </div><div id="textoEstatico">KM/H</div></div>
</div>
<div id="divSupDer">
<div class="contenidos">zona de</br>avisos</div>
</div>
<div id="divInfIzq">
<div class="contenidos">zona de</br>información</div>
</div>
In .css, I've applied border-radius in order to give these divs circular form.
I've applied text-align:center because I want the content of each div being centered
But how to center the content in the height?? I give some margin-top in .css, but it's wrong, because the interface is adaptable to the size screens (responsible design - css queries) and margin-top isn't sufficient for me...
I don't know if I'm explaining myself well...I try that yes.
Sorry for my bad english. Regards, Daniel
Live example: http://jsfiddle.net/cN2pS/
Another question: what tools do you use in order to test these type of apps for differents resolutions?
Use a table and set the align for each td center
<table>
<tr>
<td align="center">
Your text or elements
</td>
</tr>
</table>
Or set the div display as table-cell
So I have one row with 5 cells. The widths of the inner 3 are static. The first and last (far left and far right) should expand to fill the page so the inner 3 are centered. The outer cells are necessary, because they contain a repeating background image. Using tables, this is easy, because not supplying a width to the outer cells allows them to expand and make up the extra space:
<table width="100%">
<tr height="400">
<td></td>
<td width="200"></td>
<td width="300"></td>
<td width="200"></td>
<td></td>
</tr>
</table>
But I can't seem to get the same effect using DIV's and CSS, except for using the display:table; properties. I'm hoping to find another way around this, since this property isn't supported in IE6 and IE7.
<div id="container">
<div id="stretchLeft"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="stretchRight"></div>
</div>
You could do it with javascript / jQuery on load and on resize.
Get the full page width.
Then (full page width - left width - center width - right width)/2
That will be the width for your stretches.
If the only purpose of #stretchLeft and #stretchRight are to center the remaining three divs, then simply leave them out.
body{
text-align:center;
}
#container{
width:700px;
margin:auto;
}
<body>
<div id="container">
<div id="stretchLeft"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="stretchRight"></div>
</div>
</body>
Would do what you want.
If they have content, something along these lines will work, but it needs tweaked to your own personal situation:
http://jsfiddle.net/YFx2m/
Also, FWIW, unless you have business reasons for supporting them, IE6 is less than 1% market share, and IE7 is under 5%.
I would like to create a vertical splitted site structure using two divs:
<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>
My intention is to have d2 next to d1 in a horizontal align structure (same line).
What i get is not this.
In fact using that code, d2 does not take the remaining space, but collapses to the min width.
if I use
<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>
WRONG because d2 goes down and takes all the space (but both divs are in different lines).
HOW TO REACH MY OBJECTIVE? Is there a design pattern for this problem????
Thanks.
OK THIS SHOULD BE THE RIGHT QUESTION...
Hello everyone. I would like to create a vertical splitted site structure using two divs:
<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>
My intention is to have d2 next to d1 in a horizontal align structure (same line). What i get is not this. In fact using that code, d2 does not take the remaining space, but collapses to the min width.
if I use
<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>
WRONG because d2 goes down and takes all the space (but both divs are in different lines).
HOW TO REACH MY OBJECTIVE? Is there a design pattern for this problem????
Thanks.
U might want to use a table like this:
<table width="100%" style="table-layout:fixed">
<tbody>
<tr>
<td width="100px"> </td>
<td width="100%"> </td>
</tr>
</tbody>
</table>
CSS APPROACH:
<div style="width:100%; position:relative">
<div style="width:100px;float:left"> </div>
<div style="width:100%;position:absolute;padding-left:100px;left:0;top:0"> </div>
</div>
I have a picture on my website which has to much space beneath a picture. I tried to search for extra tags, but I quess it's controlled in a css file. Can someone tell me which part of the css is responsible for the space?
The location is: images/artikelen/123.png
this is a part of the html leading to the css containers which I think would contain the margins. The picture is placed in a table, I know there is no need to have it like this.
The picture is placed in a joomla module in a place called showcase 2
<div id="showcase-surround">
<div id="showcase" class="png"><div id="showcase2" class="png"><div id="showcase3" class="png">
<div class="showcase-inner">
<div id="showmodules" class="spacer">
<div class="block full" style="width: 1004px;">
<div class="module-light">
<div id="row1-block2" class="row"><div class="move-handle"></div><div class="body-surround-top"><div class="body-surround-top2"><div class="body-surround-top3"></div></div></div>
<div class="body-surround"><div class="body-surround2"><div class="body-surround3">
<div class=" showcase2:82">
<div class="moduletable">
<table align="center" border="0">
<tbody>
<tr>
<td> <img style="text-align: center;" src="/images/artikelen/123.png" /> </td>
</tr>
</tbody>
</table>
You can use Firefox browser with its DOM Insector Tool to find out. Is it the piece of code from http://www.friesecomputerservice.nl? (I just googled over 'Friese Computer Service - Computerhulp en PC probleem' :) ) If so, then you've got the following in your http://www.friesecomputerservice.nl/templates/rt_affinity_j15/css/template.css:
.moduletable
{
...
marging-bottom: 15px;
...
}
Remove margin-bottom and you're done.
Without the CSS it's hard to guess what's happening, but try putting this in your CSS:
.moduletable img { display: block; }