I'm working on my company site, mainly on impoving CSS. I would like to eliminate a lot of little images that create rounded corners, shadows and so on. CSS3 is a perfect choice, but still lot of our users use IE7 and IE8 so I need to prepare this site for them too.
I found a lot of good opinions about CSS3PIE, do I downloaded it and tried to use, but my IE8 doesn't want to cooperate :). It says: Access is denied to: PIE.htc Line: 0 Char: 0 Code: 0. I tried to put files to one folder and to differents folders, check this on the server and local... I have always the same information.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<title>title</title>
<link rel="stylesheet" rev="template" type="text/css" href="styles.css">
</head>
<body id="home" class="cols_One">
<div id="wrapper" class="fauxBlock">
<div id="header">
<div id="cap">
<div id="welcome"></div>
<div id="quicklinks">abc</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#cap {
padding: 0 6px;
font-size: 12px;
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
margin-bottom: 2px;
text-align: right;
line-height: 25px;
background: #fcfcfc; /*non-CSS3 browsers will use this*/
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4) to(#fcfcfc)); /*old webkit*/
background: -webkit-linear-gradient(left top, left bottom, #f4f4f4, #fcfcfc); /*new webkit*/
background: -moz-linear-gradient(#f4f4f4, #fcfcfc); /*gecko*/
background: -ms-linear-gradient(#f4f4f4, #fcfcfc); /*IE10 preview*/
background: -o-linear-gradient(#f4f4f4, #fcfcfc); /*opera 11.10+*/
background: linear-gradient(#f4f4f4, #fcfcfc); /*future CSS3 browsers*/
-pie-background: ulinear-gradient(#f4f4f4, #fcfcfc); /*PIE*/
-moz-box-shadow: 0 2px 2px #d8d8d8;
-webkit-box-shadow: 0 2px 2px #d8d8d8;
box-shadow: 0 2px 2px #d8d8d8;
behavior:url(PIE.htc);
}
Edit: I've added code samples
I've solved this issue changing line endings of PIE.htc to Unix (not Windows).
Tested on Windows7 + IE7 and IE8.
Hope this help you!
If css3pie is running as a local file rather than on a web server, you need to give the full path in the behavior: property, such as:
behavior:url(C:/foo/PIE.htc);
I tried placing PIE.htc file at the root file or next to (ex: html file). And in css file used exactly same attribute like this .yourClass{behavior: url(PIE.htc);}.
Actually relate your htc file to html page rather than css file. And it worked for me. :)
Related
My website is http://picofdel.org/services/educators-professionals/professional-development.html
I have added a custom HTML module at position content-top-b for skip navigation link.
The code is
<div id="main" style="width: 0px; height: 0px; border: none;"> </div>
But, a thin border is appearing on the page around the module. Please tell me how to remove the border.
Add these stylesheet to your head or body. Otherwise you can add this simple line to your css-file (without script tag).
<style type="text/css">
.module-outline-2 { border: none !important; }
</style>
the border will be defined on following file:
http://picofdel.org/templates/ca_cloudbase2_j25/css/template.css on Line 316:
#rt-top .module-outline-2,
#rt-content-top .module-outline-2,
#rt-content-bottom .module-outline-2,
#rt-bottom .module-outline-2{
border: 1px solid #e6e6e6;
}
I have a strange situation with an image and a section. You can download html, css and img1 from my github
The situation: I have a section tag which has padding:15px from all sides. In the section I have an img, floated left, then a p and a span with two buttons. The section has also a border and margin:35px
My problem: The image doesn't respect the section's bottom padding and goes through the sections bottom border.
I tried to put the img in a div inside the section, and also tried to give a height value for the section and 100% for the image's height but it didn't change anything
What is the best solution for this problem, so that the picture takes all the height of the section respecting the section's top, left and bottom paddings?
In the github, one step back, is a ppt-file TASKS.ppt. The third slide is what I try to achieve.
EDIT: Since code is requested, here it is:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music categories</title>
<link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Music Categories</h1>
</header>
<section>
<img src="img1.png" />
<div>
<p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
<span>
<input type="button" value="Listen" />
<input type="button" value="Add" />
</span>
</div>
</section>
</body>
</html>
CSS:
body {
background-color: #EEE;
padding-top: 14px;
padding-left: 12px;
padding-right: 8px;
padding-bottom: 25px;
}
body header h1 {
font-weight: lighter;
font-size: 1.5em;
font-family: Arial;
letter-spacing: -2px;
}
section {
border-style: solid;
border-color: #989898;
border-width: 2px;
padding: 15px;
margin: 35px 0px;
}
section img {
float: left;
}
section img:after {
clear: both;
}
image img1.png
This is a classic, search for clearfix. One possible solution is
section {
overflow: hidden;
}
See JSFiddle
Update:
There's an article about CSS float and clear at CSS-Tricks - All About Floats.
Essentially, you need clear, when
an element should stay below a floated element
and some clearfix, when
the parent of a floated element collapses and you want the parent wrap around/include the floated children
You can also look at Stackoverflow css-float tag wiki (an alias of css-clear) or clearfix
i'm using css3pie (for internet explorer 8) to apply effects like border radius to divs on my page it works but not on input text
.header input[type="text"]{
border: 2px solid #696;
text-align: center;
width: 150px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #fff;
box-shadow:5px 5px 5px #000;
-webkit-box-shadow:5px 5px 5px #000;
-moz-box-shadow:5px 5px 5px #000;
behavior: url(PIE.htc);
}
and here's the head code
<link rel="stylesheet" type="text/css" href="main.css">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=8" />
any advice please ?
There shouldn't be a problem with input elements in CSS3Pie, provided you're using px measurements, which you are; the docs mention problems with proportional sized elements in the known issues page, but that isn't your issue.
Given that you've got other elements in the same page working, there are only other likely issues:
First is the hasLayout issue. The resolution to that is generally to add something like zoom:1 to the styles.
Second is the disappearing borders issues, for which the solution is to work with the position and z-index styles.
Both these issues are discussed on the CSS3Pie known issues page, along with details of how to resolve them.
I have just implemented VS 2010's basic horizontal menu that comes when you start a new website. Pages look fine in my root.
When I instituted a /blog/ application (blogengine.net), I made some changes ... put my own logo there, favicon, etc., and attempted to put my menu in there. It doesn't appear to be conflicting with any other menu classes in any other stylesheet. I even renamed the class to topmenu in the code and in the stylesheet to make sure. And strangely, it looks fine in VS in design mode.
So I triple checked to see that no .css conflicts, so the code still look like this:
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="http://rtn.org/Default.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="http://rtn.org/About.aspx" Text="About RTN" />
<asp:MenuItem NavigateUrl="http://rtn.org/resources.aspx" Text="RTN Resources" />
<asp:MenuItem NavigateUrl="http://rtn.org/advertise.aspx" Text="Advertise with RTN" />
<asp:MenuItem NavigateUrl="http://rtn.org/donate.aspx" Text="Donate to RTN" />
</Items>
</asp:Menu>
</div>
And the CSS looks like this:
div.hideSkiplink
{
background-color: #3a4f63;
width: 100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
But as you'll see by this picture, for some reason, the display:block just isn't working for whatever reason in my /blog/ subdirectory master page as it is in my root master page:
Does anybody have an idea why this is the case? Again, it looks good in VS in design mode. It's just when I upload it, display:block doesn't work properly. I've fiddled with it for hours, but can't reproduce the menu, as it should be, in my /blog/ subdirectory. Any suggestions would be truly appreciated!
Almost always this happens because you have relative links to your CSS that aren't linking to the correct places. On your other pages, the stylesheets are displaying correctly because the relative link is to your correct site root. However, on your subdomain, the root is most likely to that subdomain and not to the actual root of your site.
So for instance, if your link is normally:
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
the link is pointing to http://yoursite.com/foo/css/style.css.
However, when you're linking from your blog, even though the relative link is the same, it is now linking to http://yoursite.com/blog/foo/css/style.css.
To fix it, try putting in absolute links to make sure that this is the problem:
<link rel="stylesheet" type="text/css" href="http://yoursite.com/blog/foo/css/style.css">
If it works after trying that, go back and make sure those relative links go to the right place and that you're being specific enough.
After my Browser was today updated to Firefox 7.0 on some of my pages elements are replaced with ... (elipses) and the z-index of items is all messed up.
I tried the same site in 3.6.2 and 6.0 and it is working fine. As soon so the machine updates to 7.0 or 8.0 beta it now longer renders so the problem is related to firefox.
I made a sample html page that shows the problem.
In the upper div i would expect the image to display in the button us it does in the lower div but it is replaced with .... It seems to be the text-overflow: ellipsis; css but why would this change on updating?
Does anyone have a suggestion?
<!DOCTYPE html>
<html>
<head>
<title>Infor DataGrid Sample </title>
<style>
.slick-headerrow-column {
background: #d5d5d5;
border-bottom: 0 none;
height: 100%;
margin-left: 2px;
padding-top: 2px;
}
.slick-headerrow-column, .slick-cell {
cursor: default;
float: left;
overflow: hidden;
padding: 3px;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
z-index: 1;
}
.inforFilterButton {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAB0ElEQVQ4T62USWoCQRiF+wQeQZKt4MKVG68RSFAkS/EG3sBlFCdUslNxIYgLiVEQZwWHheKwMA444EIFPcCLr0gbDWgrpOFRXV1VX/31/r9Lkv770Wg0OofDMXa73fB6vfD7/QgEAkLBYPAm/cyf6A6PdICNfD4f4vE4stksCoUCyuUyKpXKzcpkMohGowiFQiPJ5XIhFoshn8+j0Wig0+mg1+thMBjcpVqthkQiAcnj8YA71Ot19Pt9jMdjLBYLoeVyeZM4dzqdCo7E4+ZyObTbbQFbrVbYbDZCFotFjMl9pZZ2SUxCsVhEt9vFfD7Her3GbrfDfr/HoQBgt9vFu5K4hr4LYKlUEr4xdEbBxZFIBFarFVqtVhEmb1atVn+B9O8UaDQakUwmoVarMZvNboJeBRLEnQmmz0pH5vhFIC0g0GazwWAwCOg14JvTJcYvAgmifzwypVKpLgIJe3oxnQOZTXrIlklhIhilHBWjJFjOvNzKMAKZ5WOErJ+/WVbyzB98F5FRzyazKLcjMJVK3QX8SH2ewUzmV/GnyMBhOBwWHX48LWylKDm+3W4xmUzQbDbRarWGkl6vfzzcEl+8bdLptLhtWPHc4B4R5nQ6H74BwAUeSLCHS8oAAAAASUVORK5CYII=");
border: medium none;
height: 16px;
left: -3px;
position: relative;
top: 4px;
width: 20px;
z-index: 10;
}
</style>
</head>
<body style="margin:10px;padding:10px">
<div class="ui-state-default slick-headerrow-column c2">
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"> </button>
</div>
<br>
<br>
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"></button>
</body></html>
Firefox 7 is the first Firefox release to implement text-overflow: ellipsis. It also implements what the spec said when Firefox 7 shipped, which was that if only one value is provided then it applies to both start and end sides of the overflowing container. In your case your buttons are positioned so they overflow the left edge of the container, so they're overflowing and get converted to ellipses.
Based on feedback from the experience with Firefox 7, the spec has since been changed to a behavior that's more compatible with the way IE originally implemented text-overflow: ellipsis, but there may be more changes happening there. The wonders of unstable specs that are written to not match deployed browser behavior...