I'm creating a chat program for the web designed primarily for mobile devices. My issue is that in trying to be as appropriate for mobile devices as possible I dropped pixel font sizes for em, however on my desktop pc with firefox the li text shows as very small and does on the iPad too. On my Nokia Lumia 800 windows phone it shows as much larger.
My CSS:
* { margin:0; padding:0; font-family:arial; }
body > div { width:auto; margin:10px; }
h1 { font-size:1.5em; }
h2 { font-size:4em; text-align:center; }
h2#signIn > a { color:#aaaaaa; }
h2#signIn > a:hover { color:#000000; }
h3 { text-align:left; font-weight:normal; margin:10px; }
ul { list-style:none; }
ul > li { font-size:0.8em; font-weight:normal; padding:5px; text-align:center; }
a { color:#000000; text-decoration:none; font-variant:small-caps; }
a:hover { color:#aaaaaa; }
div.fieldContainer { display:block; border:1px solid #000000; padding:5px; }
span.yell, span.wire { font-variant:small-caps; }
span.wire { color:#aaaaaa; }
input[type="text"], input[type="password"]
{
width:100%; margin:0;
font-size:2em; border:0;
}
input[type="button"]
{
width:100%; padding:10px; font-size:2em;
font-variant:small-caps; letter-spacing:2px;
border:1px solid #000000; background-color:#dddddd;
}
#messages
{
width:100%; height:200px;
border:0; padding:0; margin:0;
overflow:auto; font-size:0.9em;
}
span.msgTime { font-size:0.7em; }
.fromMe { color:#aaaaaa; }
.fromYou { color:#000000; }
.clear { clear:both; }
As you can see the list element uses 0.8em. I realise there are browser inconsistencies but is this really unavoidable?
I also use this to make sure the scale of the web pages show properly:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
update 1
I think it's worth mentioning that all other relative font sizes look fine, it appears to only be the list element that differs across the mobile browsers.
em is a measurement relative to the current font size. If the browsers all have a different default base font size, then they'll look differently. Try using pt instead which is still appropriate for different size screens and is not fixed like px would be.
http://www.w3schools.com/cssref/css_units.asp
Each browser has its own default stylesheet which sets the base text size. Ems are relative units that change size based on that default text size. Try giving your body a font-size:16px, just as an example, and see if that doesn't make the text show at the same size.
To be more clear here is a link to help explain why I suggest using a pixel size on the body element, and only that element. http://www.alistapart.com/articles/fluidgrids/
In css file line no 1 shows
* { margin:0; padding:0; font-family:arial; }
replace it with
* { margin:0; padding:0; font-family:arial; font-size: 1em; }
it will work!
If you wish to let each browser use its default font size, presumably suitable for the device, simply do not set body font size at all and do not use a meta tag to prevent scaling, as you are now.
If you think that “one size fits all” is your way, then set font sizes in pixels or points (different approaches), instead of trying to achieve that using the em unit.
Related
[gulp-minify-css says quite cleary, that is has been deprecated in favor of gulp-cssnano.]
I am quite happy with thi css minification of cssnano, except for two things..
identical selectors with no interference otherwise do not get merged, i.e. body, html or h1, h2, h3 in the sample below
identical media query-‘brackets’ are not joined into one big query bracket, i.e. #media only screen and (max-width:500px)
even certain overrulings even on the very same selectors and precedence are not pruned (i.e. color:orange over green for h1,h2,h3)
Any advice, how to achieve this optimisation with cssnano.co ? (or another minification gulp task to chain into)
body,html{
margin:0;
padding:0;
}
h1,h2,h3{
color:green;
background-color:#caa;
}
#media only screen and (max-width:500px){
p{
background-color:orange;
}
}
#media only screen and (max-width:500px){
div,p{
background-color:purple;}
}
body,html{
margin:0;
padding:0;
background-color:#aac;
}
h1,h2,h3{
font-weight:700;
color:orange;
text-decoration:underline;
}
html{
background:orange;
}
h1,h2,h3{
font-weight:700;
}
p{
text-decoration:none;
color:#eee;
}
(This example is coming from three rather trivial files, merged together. core:false to keep whitespace. Turning it on removes whitespace, but does not fix the mentioned issues. )
In my current job I manage a Mailchimp account and utilize templates created before I was hired -- by an outside firm. Currently, my email template prevents me from italicizing without changing the color of text. I'd like to be able to make the text italic, and keep the same text color. When looking at the code for the various fonts, nothing appears abnormal.
#section body text
#tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
#theme main
*/
.bodyContent div{
/*#editable*/color:#505050;
/*#editable*/font-family:'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
/*#editable*/font-size:14px;
/*#editable*/line-height:150%;
/*#editable*/text-align:left;
font-weight:normal !important;
}
/*
#tab Body
#section body link
#tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link,.bodyContent div a:visited{
/*#editable*/color:#336699;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
.bodyContent img{
display:inline;
margin-bottom:10px;
}
hr{
color:orange;
width:1px;
}
div.button{
margin-left:-1px;
margin-top:0px;
}
div.button a,div.button a:hover,div.button a:active,div.button a:visited{
display:block;
clear:both;
background-color:#FE7702;
height:25px;
width:100px;
font-weight:900 !important;
font-size:19px;
color:white !important;
text-decoration:none !important;
padding:10px;
text-align:center;
vertical-align:middle;
margin:10px 0 10px 0;
border:2px solid;
border-radius:25px;
}
I think it may have to do with the '!important' directive, but I don't know where to find what it initially referenced. Any other ideas on where this quirk might be coded or how I can fix it?
I'm not seeing anything in the given code referencing em, i or text-style either. It could be someplace else, but you can fix it by adding a little styling in the em tag inline:
<em style="color: inherit !important;">italics text!</em>
That should get you taken care of - if testing reveals "inherit" isn't working everywhere, just replace it with the proper color hex code.
I'm definitely not a CSS nor HTML expert, but I think my code is correct. When I run it in Internet Explorer it works fine and shows some white space between the headers, as it should be. But when I sent it to MS Outlook 2010 the headers are mixing. And I can't seem to find a way to fix this in a clean way...
MS Outlook 2010 (Not OK):
Internet Explorer (OK):
HTML/CSS-Code:
<!DOCTYPE html>
<html><head><style type="text/css">
body {
font-family:verdana;
background-color:white;
}
h1 {
background-color:black;
color:white;
margin-bottom:0px;
text-indent:10px;
}
h2 {
background-color:lightGrey;
margin-bottom:10px;
text-indent:10px;
}
p {
font-size: 14px;
margin-left:10px;
}
</style></head><body>
<h1>My Big Title</h1>
<h2>My Smaller title:</h2>
<p>Hello world :)</p>
</body></html>
Thank you for your help on solving this little nasty issue.
Changing h1 to margin-bottom:10px; doesn't fix it either:
Fixed it by adding page-break-before: always; as found in this post.
Man I'm glad I solved this one! Has been bugging me a long time now.
Fix:
h1 {
background-color:black;
color:white;
margin-bottom:10px;
text-indent:10px;
page-break-before: always;
}
h2 {
background-color:lightGrey;
margin-bottom:10px;
text-indent:10px;
page-break-before: always;
}
Internet explorer probably applies default browser margins to the header elements which explains why the top and bottom text are pushed under each other.
If your first line of text is the Big Title, try updating
h1 {
background-color:black;
color:white;
margin-bottom:0px;
text-indent:10px;
}
with
h1 {
background-color:black;
color:white;
margin-bottom:10px;
text-indent:10px;
}
This will apply a 10 pixel margin at the bottom of your first h1 text. You can change value to your needs.
I'm having trouble with a search box. There are two main issues that I'm having. Firstly, I have tried to create a search bar within a navigation bar and the search bar doesnt match the other elements within the navigation bar.
As you can see, the padding does not match the other elements and the size of the box is off by a couple of pixels.
Secondly, the search box looks fine when the page is maximised (besides the problems mentioned above). However, when the page is not maximised, it does this:
I know these are probably rookie errors and the code is probably sloppy but I'm a university student and this is my first HTML project. I am using XHTML 1.0 Transitional and CSS 2.0 as we arent allowed to use CSS3 or HTML 5 or any scripting languages. If someone could help me out, I'd greatly appreciate it!
This is the HTML code:
<div id="nav_bar">
<div id="inner_nav_bar">
<ul>
<li>home</li>
<li>phones</li>
<li>order</li>
<li>faq's</li>
<li>contact us</li>
<li id="search">Search: <input type="text" /> <input type="submit" value="Go!"></li>
</ul>
</div>
</div>
This is my CSS code:
#inner_nav_bar
{
text-align:center;
}
#nav_bar ul
{
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li
{
display: inline;
}
#nav_bar a:link,a:visited
{
display:inline-block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:4px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#search
{
display:inline-block;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:5px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#nav_bar a:hover,a:active
{
background-color:#7A991A;
}
In your CSS, you're treating the #search list item very different from the other list items.
I changed many of the lines in the CSS around, so that most of the properties are now in li and don't have to be repeated in the other elements.
One problem was the a elements in the other list items, that had vertical padding. I replaced that with line-height.
#inner_nav_bar {
text-align:center;
}
#nav_bar ul {
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li {
text-transform:uppercase;
display: inline-block;
white-space:nowrap;
color:#FFFFFF;
background-color:#27c645;
border:3px solid #0d6e1f;
text-align:center;
font-weight:bold;
line-height:1.66;
}
#nav_bar a {
display:inline-block;
width:120px;
color:#FFFFFF;
text-decoration:none;
padding:0 4px;
}
#search {
padding:0 4px;
}
#search input {margin:0;}
#nav_bar a:hover, #nav_bar a:focus, #nav_bar a:active {
background-color:#7A991A;
}
Another problem was the size of the input element. The only way I could get that right with any kind of browser consistency was to increase the line height. If that is not acceptable, you may have to set the height on the list items explicitly, and add overflow:hidden.
See result in jsFiddle.
PS you also had other errors: One input didn't end with />, which is mandatory for XHTML. And you had #nav_bar a:link,a:visited, which did not do what you wanted; you should hae written #nav_bar a:link, #nav_bar a:visited otherwise the style would have applied to all visited links, not just the ones in #nav_bar.
I have a list of thumbnails with links and images, so when the user hover an li element, it's height becomes 100%, but the problem it works wrong in Chrome for some odd reason. I don't understand why in Chrome the hovered li width doesn't adjust to its "new" size.
(Note: this is a simplified version of my problem)
Also, this problem occurs only on :hover. but not, lets say, with :nth-child
Playground link
Update: problem continues... See my solution in the answers, BUT the problem continues..I've zoom in with the mouse and you will see it happening..note that number of images can be huge.
Update 2:
Force a redraw every mousehweel event fires...
thumbs.hide().show(0);
My solution: Solution playground
The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
li:hover{ height:100%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
li:hover a img{ min-height:96%; }
I am new here and I am not sure if this is a good practice but I will post my observation and not a precise solution:
The same problem appears on Opera.
This seemed strange to me - when li:hover a img{ border:1px solid black; } or any similar css code that is not supposed to make any change to the current situation is added it all starts to behave very strange. ex - http://jsbin.com/operib/43/edit
And here it is the solution I do not find elegant, just a quick fix:
http://jsbin.com/operib/39/edit
EDIT: After testing #Carol McKay's result I realized that the transition is making the whole mess. The next link (node 58) is node 43 linked above (which is basically node 1 just added border to the image on hover) with removed transition and it works just fine http://jsbin.com/operib/58/edit.
It seems that any css rule should be added on hover so the <img/> dimensions are recalculated.
Apply transition to the image instead.
css
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%;
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; - webkit-transition:0.15s; }
li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }
http://jsbin.com/operib/83/edit