This document have some unexpected layout in IE6 (tests in IE tester.):
double margin between .receptacle's left edge and .albuminfo box left edge
table not adaptive width(in .albumvocal box)
Who can help solve problems? If you have another method that sets table have 100% width in .albumvocal box please tell me.
--------------------------------------original html---------------------------------------
<body>
<div id="receptacle">
<div class="albuminfo">
<img alt="title" src="middle_special_329225.jpg" />
<p>album info</p>
<p>album info</p>
<p>album info</p>
<p>album info</p>
</div>
<div class="albumvocal">
<div style="width:100%">
<h2>album name</h2>
<table width="100%">
<thead>
<tr>
<th>vocal</th>
<th>artist</th>
<th>zone</th>
<th>style</th>
</tr>
</thead>
<tr>
<td>vocal1</td>
<td>artist1</td>
<td>zone1</td>
<td>style1</td>
</tr>
<tr>
<td>vocal2</td>
<td>artist2</td>
<td>zone2</td>
<td>style2</td>
</tr>
</table>
</div>
</div>
<div class="albumeaddinfo">
</div>
</div>
</body>
----------------------------------------style---------------------------------------------
#receptacle{
width:958px;
margin:0 auto;
border:1px solid #F00;}
.albuminfo img{
width:190px;
height:190px;}
.albuminfo{
text-align:center;
float:left;
padding:1.5em;
margin:2em 0 0 1%;
border:1px solid #00F;}
.albumvocal{
margin:2em 0 1em 30%;
padding:1em;
border:1px solid #F0F;}
.albumeaddinfo{
clear:both;}
table {
height:1%;
zoom:1;
width:100%;
border: solid 1px #e8eef4;
border-collapse: collapse;
}
The double margin problem is almost certainly IE6's well known "Double Margin on floats" bug.
See here for a detailed discussion of the bug: http://www.positioniseverything.net/explorer/doubled-margin.html
This is a well known bug, you can work around it by maybe using padding instead of margin, or additional markup, but the page linked above also details a "fix" which should solve the problem:
Add display:inline to the styles for .albuminfo.
This is an IE6 hack, and is actually poor code in general because a floated element should not have a display property. But it will solve the bug in IE6, and shouldn't break your code in other browsers (but do test it to make sure!), because floated elements are always displayed as blocks so the inline style will be ignored.
The second problem with the table width I can't help with immediately (I don't have IE6 to hand on this machine, and I'm not going to install it just for this), but I note you have both CSS width:100% and the width="100%" attribute on the table. You shouldn't need both, even for IE6 and certainly not for any other browser; drop the attribute.
Finally, do you have a specific requirement to fully support IE6? If you do, then I feel very sorry for you. But if not, or if you can get away with a site that works but doesn't quite look perfect, then I would suggest ignoring these problems. Very few people are still using IE6, and those that are using it are well used to sites looking rubbish.
Related
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I am using the skroller on a page. The page on mobile devices is showing a large space which is not scrollable after first time you scroll it. Visited so many websites offering solution, including StackOverflow and #Prinzhorn's own comments on the same, but some how I am unable to fix the problem on mobile devices (Android, iPhone).
Here is HTML:
<div id="skrollr-body">
<div id="eidwish1" class="centered" data-300="width:100%; background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-2000="width:0%; background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));"><h1 class="text-center heading2 wow fadeInDown" data-0="display:block;" data-1500="display:none;">This Eid send your loved ones...</h1></div>
<div id="eidwish2" class="centered" data-2000="width:100%;" data-2500="width:0%;"><h1 class="text-center heading2 wow fadeInUp" data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-2500="background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));">a personalized Greeting Card!</h1>
<div id="crescent" class="centered" data-1500="top:-100px;" data-2000="top:-200px;"></div>
</div>
<div id="ribbon-left" class="ribbon" data-2500="width:0%;" data-3500="width:50%;"></div>
<div id="ribbon-right" class="ribbon" data-2500="width:0%;" data-3500="width:50%;"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px">
</svg>
<div id="pattern1" class="centered" data-2500=" height:100%; "data-3500="height:0%;"></div>
<div id="pattern2" class="centered"></div>
<div id="eidwish3" class="centered" data-4000="width:0px;height:0px; "data-5000="width:700px;height:700px;"></div>
<h1 class="text-center headerUp wow lightSpeedIn" data-0="display:none;" data-4000="display:block;"><img src="logo.png" alt="logo"/><span clss="toggle-green">THINK GREEN </span><span class="toggle-blue">PRINT GREEN</span></br><small><i>use "EID-2015" promo code when you checkout</i></small></h1>
<h1 class="text-center discount wow rollIn" data-0="display:none;" data-4000="display:block;">We are Giving Away 25% discount</h1>
<a class="button btn-success buy-now text-center wow jello" data-wow-iteration="10" data-wow-duration="3000ms" data-0="display:none;" data-4000="display:block;" href="Greeting Cards">See All Card Designs</a>
<a class="copyright" href="http://example.com">
<img src="http://example.com/logo.png" alt="logo"/>
<br>Copyright © example.com 2015-16</a>
</div>
This is JS:
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init({
forceHeight: false
});
and CSS:
html, body {padding:0;margin:0;
k}
body {overflow:auto; height:7600px;
}
#skrollr-body {min-height: 1px; float: left; width:100%; height:100%;
}
#skrollrk-body div {overflow:hidden; position:absolute;
}
.centered { top:0; bottom:0; left:0; right:0; margin:auto;
}
#eidwish1 {background: #000 center center no-repeat ; z-index:5;
}
#eidwish2 {background: #000 url('wish2.png') center bottom no-repeat ; z-index:4; box-shadow: 0 0 0 20px #FF0000; background-size: cover;
}
#crescent {width:100%; background:url('crescent2.png') no-repeat; margin-top:0px;
}
#pattern1 { background:url('wish3.jpg') ; z-index:2; background-attachment:fixed; background-size: cover;
}
.ribbon {background:#FF0000; height:40px; top:50%; margin-top:-20px; z-index:3;}
#ribbon-left {left:0
}
#ribbon-right {right:0
}
small { color: #fff;
}
svg {position:absolute; z-index:5; left:50%; top:50%; margin-left:-170px; margin-top:-180px
}
#pattern2 { background:url('wish4.jpg'); z-index:1; background-size: cover
}
#eidwish3 {background:#FF0000 url('wish5.jpg') no-repeat center center; z-index:10; border-radius:50%; background-size: cover
}
I am stuck on this for many days. I have read almost every thread about this and tried to do the same, but it doesn't solve my problem. Pleas help!
I'm exactly with you on this topic. Oh how I wish I could talk to somebody about skrollr. Here's a few things I've learned about Skrollr and Mobile:
You need to really understand the differences between mobile browser and desktop.
Of special note is Mobile Layout Viewport vs Visual Viewport. I'd start here http://www.quirksmode.org/mobile/viewports.html, and here http://www.quirksmode.org/mobile/viewports2.html
However, the CSS layout, especially percentual widths, are calculated
relative to the layout viewport, which is considerably wider than the
visual viewport.Thus the element takes the width of the layout
viewport initially, and your CSS is interpreted as if the screen were
significantly wider than the phone screen. This makes sure that your
site’s layout behaves as it does on a desktop browser.
How wide is the layout viewport? That differs per browser. Safari
iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
This is a pretty big deal. If for you both desktop and mobile Layout / Visual Viewports are same size, then you can make your website essentially functional in mobile using the touch system. It will look and function pretty much just like desktop scrolling.
If those viewports are hugely different widths, its a no go. I had a website controlled fully by heights, so I was out of luck. I ended up adding a few 'static' screens to the bottom of my page. I added two classes (.my_website_mobile and .my_website_desktop) I would display: block; or display: none; as appropriate. I wasn't happy doing that but it worked.
In mobile, a div with a background-image can not have background-position: fixed That will work great on a desktop browser mobile emulator tool but will fail terribly on a real mobile device. (hard lesson learned...)
Other functions likely to have odd performance on mobile: overflow, and visual viewport I used a lot of vw (Viewport Width) and vh (Viewport Height) heights instead of % for locations and sizes. Those make sense on desktop, not so on mobile.
Reminder, skrollr-body gets style="-webkit-transform: translate(0px, 0px) translateZ(0px); transform: translate(0px, 0px) translateZ(0px);" upon skrollr initialization.
If you are on a mobile device, then: <html class="skrollr skrollr-mobile" style="overflow: hidden;" > and <body style="overflow: hidden;"> after skrollr initialization.
If you are on a desktop device, then: <html class="skrollr skrollr-desktop"> and <body style="height: 12345px;"> after skrollr initialization.
I haven't dug into your specific code, but if you want to talk more, contact me via email (check my profile...) I'm totally up for it. I need to change machines and my location before I am able to troubleshoot your code...
Is there a way to control the form input size based on the screen size with t he default css or is this something I will have to create custom css to do? I would like the inputs to be larger on smaller screen size and then there default size on larger displays.
Well you are already using twitter bootstrap.
I could elaborate on this issue more but Bootstrap does this the best.
So before I start please view : Bootstrap CSS
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Second:
If you want some pieces Larger on smaller device use : max-width css property.
You can also use the .img-responsive Class made by Bootstrap. But basically all of that is written in the link I provided. If you have something more specific I'd love to help!
Good Luck on all.
So this may not be the correct answer but the answer above doesn't explain too much with regards to actual code...
So, here's what I have:
<div class="row">
<div class="col-xs-3 col-sm-8" style="vertical-align: middle;align-self: center;">
<input type="text" name="search" placeholder="Search lots..." style="padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc;
border-radius: 4px; box-sizing: border-box; width:100%;" bind="#searchValue" />
</div>
<div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
onclick="#searchColumn(searchValue)">
SEARCH
</button>
</div>
<div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
onclick=#(async () => await Reload()) id="btnReset">
RESET
</button>
</div>
</div>
Using bootstraps "row" and "col" classes, we can make a row, with columns inside it...
The class="col-sm-8" means, column, on a small device, with a column size of 8...
The column sizes range from 1 - 12
So if you had two columns with col-md-6 you would have two equal columns in a row...
By including two declarations you're telling bootstrap to use a certain column size on a certain screen size, defined by xs (extra small), sm (small), md (medium), lg (large)
You can have a look at this article I found which explains the different options in detail: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
extra: https://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp
Hope this helps :)
The table has two rows and one column. Each field has a background image (50px height) and another image for the hover effect, which is the first field 100px and in secound 50px.
My question has to do with this effect. When you hover on the first field to show an image of 100ps, which covers the second field without moving the table?
I tried this but it only expands height of the first field without cover second field.
<html>
<head>
<style>
table {border: none;}
.one:hover {background-image: url('1.jpg'); height: 100px; }
.two:hover { background-image: url('2.jpg');}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr style="background: url(td-one.jpg);" width="200" height="50" >
<td class = "one">Firstname</td>
</tr>
<tr style="background: url(td-two.jpg);" width="200" height="50">
<td class = "two" >Lastname</td>
</tr>
</table>
</body>
</html>
The <td> will never break out of the <tr> structure (row height), so it will never cover the cell below it. You will need to add a <div> inside your cells for each, .one and .two.
Then changing the height of the <div> and playing around with float:left on this <div> might render what you want.
I've spent two weeks to find any solution for this, but can't came across. If you float tables after each, there will be a one pixel gap in Microsoft Outlook 2007/2010, which uses the Microsoft Word 2007 HTML render engine:
I'd thank you any working solution – which is not to put the tables in separated <td>'s.
Here is the HTML code for reproduce it:
<html>
<head>
<title>Outlook 2007/2010 horizontal gap</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
</style>
</head>
<body bgcolor="#000000">
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
</body>
</html>
What I've tried so far:
display: inline-table; instead of align="left"
searched for other relevant mso- CSS attributes with no luck
removed whitespaces between <table> elements
border-collapse: collapse and border-spacing: 0
adding border: 1px solid red; will remove gap but increase the width of the tables
other display's, padding and margin
non related or deprecated html attributes (rules, frame, border, etc.) on <td> and/or <table>
Fun factor:
If you put these two tables into a table, the extra gap's width will increase to 2 pixels.
Here is an example of how to float tables. You need a combination of border="1" and mso-table css in there to get rid of the 1px gap. See example:
<table bgcolor="#454545" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="5%"></td><td align="center" width="95%">
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace: -1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 1
</td>
</tr>
</table>
</div>
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace:-1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 2
</td>
</tr>
</table>
</div>
</td></tr></table>
Try with table border="0" cellspacing="0" cellpadding="0" on each of the two table's. If i understand your issue correct this should solve it :)
We might be SOL here. I am also working on email formats compatible with Outlook 2007/10. If my readings are correct, Outlook 2007/10/13 do not support border-spacing for tables, which is probably what's giving you that spacing issue.
Refs:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Guide to CSS support in email | Campaign Monitor