fallback border for image with shadow in ie - html

so i have a nice box-shadow that seems to work in all browsers except ie 8 and below. I need my site to be compatible for IE 8.
here is the effect that i'm referring to:
http://unifiedforuganda.com/ugandanprograms.html
here is the relevant css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
i don't care about the shadow showing up in IE but is it possible to have a black border be there for the image only when the shadow is not rendered? i want to avoid IE conditional sheets if possible
EDIT: seems i even have to use conditional comments or use a hack which i don't want to. now just have to figure out to use the conditional comments for IE....

As you can see here, box-shadow is not supported until IE9. But here is a SO post expalining the usability of box-shadow in IE8 and below.

so i ended up using conditional comments in the of the html document...simplier than i thought....here the code i ended up using:
<!--[if lte IE 8]>
<style type="text/css">
.program-image { border: 1px solid black; }
</style>
<![endif]-->
this will target the .program-image class that normally has the box shadow working in most other browsers but when that fails, the above code will kick in and apply a small black border...this is the css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}

Related

Windows phone internet explorer enlarge text in one td

The problem is, that I have table for content with 3 td's, side td is 200px wide and the middle one width isn't defined, everything seems great on computer browsers (even internet explorer), but when it comes to testing on windows phone browser, in middle td text is much bigger, I'd would say twice as big as it should be and nothing seems to fix that, yes I tried writing font-size value to it in css, but that didn't seem to make any difference.
Sorry that I can't supply a screenshot from my windows phone because of broken power button, I'm using standard windows phone 8.1 internet explorer.
CSS of the table
#content_table {
width: 1024px;
border-spacing: 0;
margin-bottom: 30px;
border-collapse: collapse;
table-layout: fixed;
}
#content_table td:not(:last-child) {
padding: 0 15px 0 0;
}
#content_table #side_content {
width: 200px;
vertical-align:top;
}
#content_table #main_content {
width: 100%;
vertical-align:top;
font-size: 16px;
}
.side_content_title {
background: #c9cbce;
border-top: solid 2px #535f7c;
border-bottom: solid 2px #535f7c;
text-align:center;
width: 200px;
color: #353c4c;
padding: 2px 0;
}
.side_content {
background: rgba(243,243,243,1);
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
width: 190px;
padding: 5px;
border-bottom: solid 2px #535f7c;
color: #535f7c;
}
.main_content_title {
background: #c9cbce;
border-top: solid 2px #535f7c;
border-bottom: solid 2px #535f7c;
padding: 2px 0 2px 30px;
color: #353c4c;
}
.main_content {
background: rgba(243,243,243,1);
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
padding: 5px;
border-bottom: solid 2px #535f7c;
color: #535f7c;
}
HTML part
<table id="content_table">
<tbody>
<tr>
<td id="side_content">
<div class="side_content_title">title</div>
<div class="side_content"><br/><br/></div>
</td>
<td id="main_content">
<div class="main_content_title">title</div>
<div class="main_content">
Lorem ipsum<br/><br/>
</div>
</td>
<td id="side_content">
<div class="side_content_title">title</div>
<div class="side_content"><br/><br/></div>
</td>
</tr>
</tbody>
</table>
Thanks Mousey for helping, and pointing out to previously answered question. Setting view-port for device width could help if I wouldn't used few fixed position objects, but adding
-ms-text-size-adjust: none;
to body fixed text-size problem without messing up with anything else.
Use belo code in the body tag or to the main table
-ms-text-size-adjust: none;
Removing the line font-size: 16px; from this code should render will all <td> using the same font size
#content_table #main_content {
width: 100%;
vertical-align:top;
}
I think you are finding the phone automatically shrinks the font on smaller devices - except when it is manually specified in the code. 16px will look large on a mobile.
Setting the view-port may also help - see HTML CSS - Font size oversized when shown on windows phone for font-size issues on windows phone
Edit from the link above, using this fixed the problem as EDWcode stated.
-ms-text-size-adjust: none;

glow effect on all buttons, but only want it on 4

I'm making a web page (lots of them that are connected)
I have added the glow function/attribute to my buttons in CSS. The thing is I've used this;
button:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
The thing is, my CSS file is linked and being used by 5 different HTML files and more are coming. So instead of just getting the glow effect on just 4-5 buttons that I have on one HTML page, the glow function now is on all buttons on all other HTML pages.
How do I avoid this, I cant add the glow function inside the #id's can I?
My buttons like like this in css
#TrafficJam1 {
position: absolute;
top: 1120px;
left: 20px;
height:107px;
width: 278px;
}
That's just one of them
Here's the HTML part of that particular one,
<input type="image" src="TrafficJam.jpg" id="TrafficJam1">
I have to use this code because my buttons are images.
Give the buttons you want to apply this CSS to a class like this:
<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">
A class is another identifier for html elements. But it's different from id in the sense that you may use them to target multiple elements at a time. So you can just give the buttons you want this effect on the same class and target that class in your CSS like this:
.glow:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
Then a little bit off topic. The thing you're asking is pretty basic stuff. So I get it that you're beginner at HTML and CSS, right? In case you are it would be wise to learn some more HTML and CSS with an online learning tool like codecademy.com.
Create a new stylesheet and link this in the page where you want the buttons to glow.
This is easily done by using the <link> tag, but I guess you are familiar with that.
In that file you could just add the code you were using:
.classname:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}

Inset box shadow doesn't work

I am trying to get an inside shadow working on an input field in Chrome. Unfortunately, this doesn't really work out so far. You can view a jsfiddle over here: http://jsfiddle.net/XgsPT/2/
My CSS:
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
And this simple HTML:
<input type="text" width="30">
But no shadow appears... (Chrome 24)
Give border to input field and the box-shadow will finally work.
http://jsfiddle.net/Jx8xF/
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
border: 1px solid #aaa;
}
The background color of the input is messing things up. Check out this updated fiddle, with this change to the CSS:
input {
/* ... rest as before ...*/
background-color: transparent;
}
Basically, WebKit doesn't allow us to add box-shadow to form controls with native appearance. We need to remove the nativa appearance.
input {
-webkit-appearance: none;
box-shadow: inset 0 0 10px #000000;
}
Also, some CSS properties such as border and background imply -webkit-appearance:none.
Rather than setting the background to transparent set it to white, or whatever colour you like, you just need to declare it and then it will work as it should

HTML CSS Box Styling

I am trying to do some CSS to complement my HTML code. I am effectively trying to make a little box which changes size based on the amount of text there is. Currently, this is what it looks like in action.
Essentially, I'd like it to form a little box around the text. Notice the last 'box' in the image, if the string is too long, it cuts it off and continues on the next line.
Included is the CSS code and an example of usage.
<style type="text/css">
boxytest
{
padding: 10px;
text-align: center;
line-height: 400%%;
background-color: #fff;
border: 5px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
</style>
<body>
<div align="center">
<boxytest> Hey guys! What's up? </boxytest>
</div>
</body>
Any help is greatly appreciated.
As chipcullen says inventing your own element is probably not the best way to go about this. But to answer your question the key style decleration your missing appears to be display:inline-block;
jsfiddle here
Well, I think first off, in terms of markup, you want to make boxytest a class, and not create a new element. And don't use 'align=center'. It's a pain to maintain.
I would do something like this:
<body>
<p class="boxy">Test sentence</p>
<body>
The in CSS:
.boxy {
padding: 10px;
text-align: center;
line-height: 400%%;
background-color: #fff;
border: 5px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
/* to prevent word wrapping */
white-space: nowrap;
overflow: hidden;
}
The last bit is based on this post.

css inline styles safari on facebook fan page

I want to use CSS to create rounded-corners on facebook fan-page. I have created the fanpage but I can't get the styles to work for safari browser. I have used to Safari Development tools and when I do the in-line styles it actually works but when I go and put it in the fbml code, nothing updates in safari. I have also included the same style in a stylesheet which is hosted somewhere else and it doesn't work. any help would be appreciated.
My CSS for rounded-corners
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-khtml-border-radius: 0px 0px 8px 8px;
-webkit-box-shadow: #666 0px 2px 3px;
border-radius: 0px 0px 8px 8px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
padding-left: 5px;
padding-right: 5px;
background: #DAE1EB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#DAE1EB), to(#DAE1EB));
background: -moz-linear-gradient(#DAE1EB, #DAE1EB);
background: linear-gradient(#DAE1EB, #DAE1EB);
-pie-background: linear-gradient(#DAE1EB, #DAE1EB);
I don't see why it shouldn't work.
Try this:
In the src of your CSS after is says .css try putting .css?2 (any number).
I've had some problems with FB caching and it's CDN, this usually solves it.
Let me know if this helps.