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.
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 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'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.
I'm having problems with SharePoint and CSS. I'm creating a page with a supposedly simple image tab that has hover effect. It's done entirely in CSS. Here's the CSS snippet (hosted in a separate CSS file):
div.activelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.activelayer:hover {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.inactivelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer:hover {
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
cursor: text;
}
#innertab .alink {
margin-top:18px;
text-align:center;
margin-left:0px;
}
#innertab a.tablink {
color: #ffffff;
text-align: center;
}
#innertab a.tablink:hover {
text-decoration: none;
color: #ffffff;
text-align: center;
}
/* IDs */
#menu1 {
z-index:10;
}
#menu2 {
z-index:9;
}
#menu3 {
z-index:8;
}
#menu4 {
z-index:7;
}
#menu5 {
z-index:6;
}
In the aspx page, I have this:
<div id="innerTab" class="" style="width: 1000px; height: 72px;">
<div id="menu1" class="selectedlayer" style="margin-left:0px">
<div class="alink">
Menu Item 1
</div>
</div>
<div id="menu2" class="activelayer">
<div class="alink">
Menu Item 2
</div>
</div>
<div id="menu3" class="activelayer">
<div class="alink">
Menu Item 3
</div>
</div>
<div id="menu4" class="activelayer">
<div class="alink">
Menu Item 4
</div>
</div>
<div id="menu5" class="inactivelayer">
<div class="alink">
Menu Item 5
</div>
</div>
</div>
The problem I'm experiencing is this: It doesn't work when I placed this in SharePoint when viewed in IE.
I first tested this code in a normal HTML page and it worked like a charm in IE. When I transferred the codes in SharePoint (it's in a page template), it didn't work. So, I viewed the SharePoint test page in Chrome, and it works there, but for some truly bizarre reason, it's not working for IE. I haven't tested in in other browsers, and I don't really plan to because the page I'm working on is an intranet site, and our company uses IE (officially, though some of us insist on using either Chrome or FireFox) so IE compatibility is my only priority.
Is there something that I missed in the code? Please help :(
Oh, BTW, I'm coding in MOSS2007 and the HTML codes are being used in a Page Template. My IE version is IE8. Not sure if these info are relevant to the problem I'm having, though :(
thanks,
Poch
Sharepoint's stylesheets are overriding yours, so you have to make your selectors stronger. Open up the developer tools (hit f12), select "Trace Styles" above the right pane. Select your element that isn't getting it's styles applied and examine who's styles are. Then just copy that selector and make yours a little bit stronger. For example you may see:
margin-top: 0px;
#innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px
You'd just change your selector to this:
.someClass .someOtherClass #someId #innertab a.alink
Your selector is now stronger and will be applied.
Try adding !important, like so:
div.activelayer {
margin-left:-30px!important;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
text-align:center!important;
height:55px!important;
width:200px!important;
display:inline-block!important;
position:relative!important;
float:left!important;
}
I had a similar issue with this a few weeks back. I couldn't find an exact resource that said it, but through trial and error I was able to find that I could only apply CSS Psuedo classes (Like :hover and :active) to <a> tags within SharePoint when browsing in IE. The code you posted above has :hover / :active on <div> tags.
I was able to get a working solution by using image sprites, styling the anchor tags, and nesting the image sprite within the <a> tags with the following HTML and CSS:
HTML
<ul id="wheel" class="wheel"><li>
<img src="images1/design.png"></li>
</ul>
CSS
.wheel li a, .wheel li a:visited{
width: 50px;
height: 50px;
overflow: hidden;
}
.wheel li img
{
position: relative;
display: block;
}
.wheel a:hover img{
left: -51px;
}
.wheel a:active img{
left: -102px;
}
On the off chance you haven't solved this issue, hope this helps!