It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I recently refactored my web site to use HTML5. It works Ok with most browsers except, obviously, with IE7 and IE8.
It looks like it result from the use of the <header>, <section> and <article> tags which are apparently ignored by IE7. My css defines specific tag formating subclasses for these.
header { color: #fff; background: url("background1.jpg");
padding: 10px 40px 20px 40px; margin-bottom: 20px; }
header a { color: #fff; text-decoration: none; outline: none; }
header a:hover { color: #fff; text-decoration: underline; }
header h1 { color: #FFFFFF; font-weight: bold; font-size: 30px;
padding-bottom: 20px; padding-top: 0px; }
header h2 { color: #FFFFFF; font-weight: bold; font-size: 16px; padding-bottom: 10px; }
header hr { margin: 10px 10px 0px 0px; }
header .copyright { font-style: italic; font-weight: bold;
padding-left: 30px; padding-right: 0px; }
section { padding: 5px 40px 5px 40px; line-height: normal; }
article .main { font-weight: bold; font-size: 20px; line-height: normal; }
I skipped other style definition that don't cause a problem.
How could I get around this problem ? Do I have to drop the HTML5 tags ?
You can use this script in your head section:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Does most of the html5 work in IE for me :-)
The problem is that browsers have special treatment for tags they don't recognize at all; basic things like styles being applied and being able to contain sub-items won't work.
Html shivs, such as that linked by RTB, will inject the basic recognition of those html5 tags in via javascript so the browser recognizes them as valid tags, meaning you can then style them.
Libraries such as Modernizr also include an html5 shiv (though otherwise, Modernizr does not enable html5 functionality)
Note that a shiv does not generally allow anything but basic tag recognition, so you can style the elements. it does not enable functionality.
You could try and create elements in javascript and IE will render it.
document.createElement('header');
document.createElement('section');
document.createElement('article');
Related
So this works, but it looks awfully wrong to me.
I only want to change the H1 CSS attributes for the main page, but it affects all the pages, so I have to revert it back afterwards. I find it hard to believe this is the proper way of doing it.
Can anyone recommend a cleaner approach?
/* Change CSS for H1 on main page hero box */
.helpie-single-page-module .helpie-primary-view .content-area h1 {
margin-top: -65px;
margin-bottom: -5px;
font-weight: 700;
font-family: 'Raleway';
text-shadow: 3px 2px 4px #c69956;
}
/* Undo the above changes for the rest of the site */
.helpie-single-page-module .helpie-primary-view #primary.content-area h1 {
margin-top: initial;
margin-bottom: initial;
font-weight: initial;
font-family: initial;
text-shadow: initial;
}
I've added this code to the Additional CSS box on Wordpress.
It's for content created by the Helpie KB Wiki Plugin, so I can not find the standard "page-id" like I normally would on a normal Wordpress page.
Thanks.
Based on your code, it seems that all the pages have the h1 as a descendant of an element with class "content-area", but only the homepage doesn't have the id "primary" on that element.
If this is the case, you can use the :not CSS pseudo-class to catch only the homepage h1. The :not CSS pseudo-class selects the element only if it doesn't match the given selector.
Link to explains and examples on MDN
Example with your code:
.helpie-single-page-module .helpie-primary-view .content-area:not(#primary) h1 {
margin-top: -65px;
margin-bottom: -5px;
font-weight: 700;
font-family: 'Raleway';
text-shadow: 3px 2px 4px #c69956;
}
if Chrome is look like this:
.text-center {
text-align: -webkit-center;
}
and firefox:
.text-center {
text-align: -moz-center;
}
how about in opera?
.text-center {
text-align: -o-center;
}
is not working.
UPDATE:
HTML:
.container
.text-center.label-margin
%h3
.bubble LEADERSHIP
CSS of my bubble class.
.bubble {
position: relative;
width: 170px;
height: 45px;
padding: 11px 0 0 0 !important;
background-color: #333333 !important;
font-style: normal !important;
font-family: 'Fira Sans', sans-serif;
font-size: 25px;
font-weight: 600;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}
it looks like in OPera
You do not need to prefix the text-align property. You can simply use:
text-align:center;
instead (which should work on all browsers).
Further Reading:
W3.org documentation on the text-align property.
Here's quite a nice CSS-Tricks article that you might find useful.
If we're talking about any property, caniuse... is one of the 'best' browser compatibility websites out there, with info on nearly all css properties.
Please also note: Border-radius does not require prefixing (and hasn't done for quite some time now), whilst using !important is considered bad practise, so I would personally advise to get out of the habit of using it.
Try like this: Demo
.center{
text-align-center;
}
No need to use specifically for all the browsers,as its almost accepted by all browser
I styled some CSS buttons, and they look great, but when I open the page on mobile, they look bad and don't use the defined styles. How does one typically maintain the styling of buttons in CSS across all devices?
Here's my code for the buttons that looked good in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
But this is what it actually looked like on different pages on mobile.
There is no magic bullet. Make sure that your styles have proper platform-specific directives (ie -webkit-) and, most importantly, are supported on the platforms that are acting up.
The issue with the font-size..Try setting px value for the font..it should be Ok..
like
input[type="button"]
{
font-size:14px;
}
I am just starting to use SlickGrid and amazed by its quality. However, when it comes to styling, I did not find any docs or examples recommending an overall styling approach. There are options and APIs scattered in various places, but it's very difficult to extract a strategy out of those. Also the grid leverages jQuery UI themes. Unfortunately those are interfering with what I am trying to achieve. We have picked up jQuery UI only for the calendar widget along with the ui-darkness theme. This theme works perfectly fine for the calendar widget, but the grid needs to override every aspect of it.
Here's a jsFiddle that shows the look I am trying to achieve: http://jsfiddle.net/nareshbhatia/3q6RD/. Just for illustration, it uses a regular HTML table. However I would like to achieve the exact same styling using SlickGrid. The CSS in this jsFiddle is essentially the requirement I have from my visual designer, e.g.
#positions-table th {
background-color: #505050;
color: #eeeeee;
text-shadow: none;
font-size: 13px;
height: 40px;
line-height: 40px;
}
Edit: I also created a jsFiddle with a starter SlickGrid implementation: http://jsfiddle.net/nareshbhatia/vJshY/. As you can see, the ui-darkness theme has completely taken over!
Within your second/last jsFiddle you can modify the CSS to have this code
.slick-header-column.ui-state-default {
background:none ;
background-color: #505050 ;
color: #eeeeee;
border: none;
padding: 0;
text-shadow: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
height: 40px;
line-height: 40px;
}
.slick-row.ui-widget-content, .slick-cell {
background: none;
background-color: #eeeeee;
color: #666666;
border: none;
border-bottom: solid 1px #ffffff;
font-size: 14px;
height: 60px;
line-height: 60px;
padding: 0 5px;
}
I have a problem with css and FF3 / IE7 and Opera 10.
I have one input[type="submit"] and one anchor and I want to style them the same. No matter what I try the only logical browser seems to be Opera 10 (it styles them the same with the same css).
FF seems to have different padding (I would need to have the submit box 1px smaller in padding to fit but that would throw Opera 10 off) and IE7 is just way off.
code for you code lovers:
<form action="/login" method="post" id="loginform">
<fieldset>
<input type="submit" value="Login" />
Register
Lost Password?
</fieldset>
</form>
css:
fieldset a {
color: #ffcc00;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
padding: 2px;
/*vertical-align: text-top;*/
}
fieldset a:hover {
color: #ffcc00;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
text-decoration: none;
padding: 2px;
}
fieldset input[type="submit"] {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
}
fieldset input[type="submit"]:hover {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
}
any help to solve the issue of alignment between browsers is desired as I need to support all three (safari too but I think if I get these 3 aligned it should work there too).
Many thanks in advance (p.s I'm going on lunch now and will check answers right after so sorry for the slow replies in advance)
The Firefox problem is solved like this
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Try this in isolation. I recommend using a reset.css file to force all browsers to treat apples as apples, and then styling your INPUT and A elements accordingly.
It's possible that other CSS rules are coming into the mix.
See http://meyerweb.com/eric/tools/css/reset/ for a reset file.
I've had issues with the past with IE and styling certain elements (specifically disabled elements), and how IE differs in its handling of this styling between versions 6 and 7.
The following DOCTYPE seemed to help in those circumstances, but rendering in IE 6 may no longer work as expected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">