I'm using basically this method here: https://coderwall.com/p/uer3ow to style my file input section but it doesn't seem to work in IE8; all I see is the corner of a huge button.
HTML:
<div class="upload_btn">
<span>Choose File</span>
<input type="file" name="item_file_upload_1" id="item_file_upload_1">
</div>
CSS:
.forms .upload_btn {
position: relative;
display: inline-block;
text-align: center;
width: 97px;
height: 27px;
font-weight: 300;
font-size: 16px;
line-height: 27px;
color: #393d59;
border: 2px solid #b9c0d6;
overflow: hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.forms .upload_btn > input[type="file"] {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
font-size: 200px;
opacity: 0;
}
Ok, with a modification of this answer: https://stackoverflow.com/a/1948200/472501
I was able to apply the following CSS for IE8 which fixed the problem:
.forms .upload_btn > input[type="file"] {
filter: alpha(opacity=0);
}
There's a much better, cross-browser compliant, semantic, fully accessible and CSS-only way using the label technique. Great post here on how to implement: https://benmarshall.me/styling-file-inputs/
Related
I have a piece of React code:
<div className="Tooltip-Wrapper" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
{children}
{active && <div className="Tooltip-Tip">{text}</div>}
</div>
and have these classes in a scss file:
.Tooltip-Wrapper {
display: inline-block;
position: relative;
}
.Tooltip-Tip {
position: absolute;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
padding: 6px;
color: var(--tooltip-text-color);
background: var(--tooltip-background-color);
font-size: 14px;
font-family: sans-serif;
line-height: 1;
z-index: 100;
white-space: nowrap;
}
but the divs do not have this styling on them. What could be the reason? Thanks!
It's probably to do with one of the properties not being available for divs.
don't write "classname" instead of it just write "class", then it might work.
.mainheading
{
font-weight: 700;
font-style: normal;
position: relative;
padding-bottom: 1.33333rem;
display: table;
line-height: 1.1;
}
.mainheading::after
{
content:'';
display: block;
position: absolute;
border-bottom: 2px solid #72bf44;
min-width: 110px;
width: 70%;
bottom: 0;
left: 0.2rem;
}
I am working on a reporting tool and I tried adding this css to the label
But the line-height is not working.
Suggest me where I went wrong
With your initial code you're basically creating a new HTML tag <Label> with an attribute Class. CSS can read the class and id with the selectors . and #. You can always select an attribute with the CSS attribute selector, in your case:
label[Class="mainheading"] {
/* style */
}
I recommend you stick with class and id instead of Class and ID, like so:
<label caption="Main Report" class="mainheading" id="lblDashboardsummary">Hello</label>
And in the CSS file just do
label.mainheading
.mainheading
{
font-weight: 700;
font-style: normal;
position: relative;
padding-bottom: 1.33333rem;
display: table;
line-height: 0;
}
.mainheading::after
{
content:'';
display: block;
position: absolute;
border-bottom: 2px solid #72bf44;
min-width: 110px;
width: 70%;
bottom: 0;
left: 0.2rem;
}
<label caption="Main Report" class="mainheading"
id="lblDashboardsummary">Your Text</label>
It is good coding practice to write HTML attributes in lowercase.
Hope this helps.
I have the following CSS lines:
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
It should look like this:
http://imgur.com/B9vblUP
But instead looks like this:
http://imgur.com/8RQTkcO
What am i doing wrong here and how to get it exactly like the first pic?
I tried overflow hidden but that only shows Liquid in 25x25 on the block and the rest is not showing.
Any help is much appreciated.
Kind regards,
Majin Buu
I think you should create another element for the orange square instead of editing the class of the h2 element because the background attribute it will be applied on that element, so I would make something like:
<div class="liquid"></div>
<h2>Liquid</h2>
.liquid {
float: left;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
To have the square floating to the left of the element.
Check out CSS position!
.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}
h2 {
position: relative;
margin-left: 30px;
}
<div class="liquid"></div><h2>Liquid</h2>
Use html like this
<div class="bg_white">
<span class="liquid"> </span><h2>Liquid</h2>
</div>
CSS
.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
float:left;
font-size:18px;
}
.bg_white h2{float:left; margin:0px;}
Pseudo element is better for this solution:
h2 {
background: #eee;
padding: 5px;
display:inline-block;
}
.liquid::before {
content:'';
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
You are styling the font part of the wanted result itself. You should either add an element for the orange square or use a pseudo element. This will get you in the right direction.
.liquid {
line-height: 1;
}
.liquid:before {
background: #ff8125;
content: ''; /* important for pseudo elements */
display: inline-block;
height: .9em;
margin-right: .45em;
position: relative;
top: .1em;
width: .9em;
}
<h2 class="liquid">Liquid</h2>
you can use below CSS for this if text is small and always in one line.
.liquid {
display: inline-block;
padding-left: 10px;
border-left: 25px solid #ff8125;
margin-right: 15px;
font: 25px/25px Arial;
font-weight: bold;
}
<h2 class="liquid">Liquid</h2>
I'm having trouble resizing my template to look the same as IE.
I'm trying to make the div called face 3 and face4 scale on both IE and firefox but I just can't . If an div fit perfectly well on Firefox . then it would go over on IE . Can someone please help me .
CSS
.face1 {
text-align: center;
background-color: #AAAAAA;
height: 450px;
width: 390px;
position: absolute;
left: 520px;top:100px;
border-style:solid;
border-color:#1BE968;
border-width:35px;
}
.face3 {
text-align: center;
background-color: #DDDDDD;
width: 300px;
position: relative;
left: 10px;top:0px;
text-align: center;
color: #FFFFFF;
font-family: Arial;
font-size: 33px;
}
.face4 {
text-align: center;
background-color: #DDDDDD;
width: 50px;height:30px;
position: absolute;
left: 290px;top:200px;
text-align: center;
color: #CCCCCC;
font-family: Arial;
font-size: 33px;
}
HTML
<div class="face1">
<div class="face3">24 x 7 customer web supprt</div>
<div class="face4">supprt</div>
</div>
Demo at http://jsfiddle.net/Yg3yq/
Opening http://jsfiddle.net/Yg3yq/show/ in IE8 (and IE9) renders the same as Firefox, which leads me to believe your document might be rendered in Quirks Mode.
To remedy this, make this the first line of your HTML file (no whitespace or characters before it!)
<!document html>
Display="Position: Relative;" is Juggling in IE (Browser Mode: IE7/8/9 - Document Mode: Quirks) But If I changed Document Mode from Quirks to IE7/8 or even 9 it's working fine. How to set through CSS this issue? Please see sample code below:
CSS
.aFlyOut{
padding: 10px;
bottom: 0px;
border: 1px solid #a6adb3;
background-color: #FFFFFF;
position: relative;
z-index: 9999;
}
.aFlyoutCollapse
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutExpand
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutButton{
height: 12px;
float: right;
width: 38px;
cursor: hand;
padding-right: 4px;
}
.aFlyout{
float: right;
background-color: #FFFFFF;
border:1px solid #a5acb2;
right: 6px;
#right: 8px;
padding: 0px;
}
.aFlyoutHeader{
padding: 4px 6px 3px 0;
background: url("/vtpOnline/images/actionFlyoutHeaderIcon.gif") #090999 no-repeat;
color: #FFFFFF;
text-indent: 23px;
font-size: 11px;
font-weight: bold;
}
.aFlyoutLinkWrapper{
padding:5px;
}
.aFlyoutLinkWrapper a{
padding: 5px;
color: #010356;
font-size: 11px;
display: block;
text-decoration: none;
}
.aFlyoutLinkWrapper a:hover{
color: #0060ff;
background-color: #f2f2f2;
}
.aFlyoutRefreshLink{
background: url("/vtpOnline/images/addNote.png") no-repeat 0 50%;
text-indent: 12px;
#text-indent: 10px;
}
HTML
<div class="aFlyoutButton" id="aFlyoutLink">
<!-- Action Flyout Action Button -->
<div class="aFlyoutExpand" title="Actions" id="aFlyoutButton" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()" onClick="aFlyoutExpandCollapse()"> </div>
<div id="aFlyout" class="aFlyout" style="display: block;" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()">
<!-- Action Flyout Action Header -->
<div class="aFlyoutHeader" style="color: #FFFFFF;font-size: 11px !important;"> Actions </div>
<!-- Action Flyout Links Panel -->
<div class="aFlyoutLinkWrapper" style="width: 100px;"> <a class="aFlyoutRefreshLink" href="#" id="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" name="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" onClick="aFlyoutExpandCollapse();;A4J.AJAX.Submit('j_id_jsp_2094016106_0','j_id_jsp_2094016106_1',event,{'oncomplete':function(request,event,data){Richfaces.showModalPanel('AddNoteModalPanel');setValues();return false;},'similarityGroupingId':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION','parameters':{'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION'} ,'actionUrl':'/vtpOnline/faces/order/edit/default.jsf'} );return false;">Notes</a> </div>
</div>
</div>
When i mouse hover it shows:
However, it should be as:
Document mode quirks means that you're essentially running a pre-IE6 rendering engine. A good solution to solve this is to add a doctype to the top of your HTML document. This will put the browser in standards mode by default, and will allow your position:relative; to work as expected.
The simplest doctype is the HTML5 one:
<!DOCTYPE html>
Put that on line 1 of your HTML. There is no way to force standards mode via CSS.
Thanks everyone, it has been resolved; please see following code reference. I've changed position from relative to absolute and set top & height to fix the positioning.
.aFlyOut{
position: absolute;
top: 28px;
height: 70px;
}