How can I add a Conditional Comment to my .cshtml MasterPage? - html

I have two css IDs on different files, and I have to change the file with another only when the Program executes in Internet Explorer.
I have this file called "custom.css":
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: initial;
}
I need (I must not modify custom.css) to set "height" to "auto". But only if the page is rendered on IE. So I created a second css file called "customie.css":
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: auto;
}
After that I wrote this Conditional Comment in the <head> of my MasterPage .cshtml.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="customie.css" />
<![endif]-->
Problem is this: Conditional Comment doesn't work and the customie.css file overwrites the custom.css(which annuls itself) .
How can I apply height: auto only for IE pages?
Thank you,
Angelo

No idea why the conditional isn't working, but you can achieve the desired effect using the CSS below. IE doesn't support initial, so it will fall back to auto instead.
#employee-list {
border-bottom: 1px solid #c1c1c1;
border-top: 1px solid #c1c1c1;
height: auto;
height: initial;
}

Related

Fullcalendar how to add bottom border to calendar view except grid axis?

Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)?
This appears if using this css.
.fc-scrollgrid-section-body > td {
border-bottom: 1px solid gray;
}
What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView.
I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px )
1)I know what (investigated in inspector) what days have fc-day style(see image 3)
I added this styles to CSS but it also not working it completely not showing red border
.fc .fc-timegrid-col{
.fc-day{
border-bottom: 1px solid red;
}
}
//and
.fc-day{
border-bottom: 1px solid red;
}
another try
.fc .fc-timegrid-cols{
.fc-day,
.fc-timegrid-col{
border-bottom: 1px solid red;
}
}
using role tag to achieve same result
[role=gridcell] {
.fc-timegrid-col
.fc-day {
border-bottom: 1px solid red;
}
}
What I want is to have day columns bottom line and grid axe do not have one.
I found solution for dayGrid and WeekGrid not for month yet.
.fc-day .fc-timegrid-col-frame {
border-bottom: 1px solid $pitch-black-100;
}
UPDATE after 3+ hours of investigating
to add line for gridView month need to add this thing to styles
.fc-daygrid-body {
border-bottom: 1px solid $pitch-black-100;
}

Blank screen when trying to draw a triangle with HTML and CSS

I am trying to draw a triangle with HTML and CSS. But I am unable to do it succesfully.
I looked up the most common solution for drawing triangle in CSS.
This the HTML code:
<html>
<head>
<link rel="stylesheet" href="tiangle.css" type="text/css">
</head>
<body>
<div id = 'triangle-up'></div>
</body>
</html>
This is the CSS code:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
The code should draw a red colored upward-facing triangle, but it displays a blank white page.
Please help.
Is it possible that your CSS links to the misspelled tiangle.css but your actual file name is spelled correctly (triangle.css)?
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id='triangle-up'></div>
Your code is valid. Are you sure you're actually looking at the correct file? Check your console logs. Are they saying any 404 errors (eg you are not linking your stylesheet correctly)?
There is a typo in your href. It should say triangle instead of tiangle.

Reducing height of "footer-widget-container" (currently 182px)

I'd like to reduce the current height of 182px of my 'footer-widget-container' (I'm using Wordpress theme Press Coders).
However, I can't find the relevant file to edit
(have tried footer.php, black.css and style.css, anyone know which file I need to edit?
Please see the site at:
http://www.oxfordlifestylecentre.co.uk/
add this to your style.css file
.footer-widget-container {
height: 125px;
}
what height you want to just change it.
Your css code for Footer is in Style.ccs.
Open it and find
.footer-widget-container {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
And then just adjust height
.footer-widget-container {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
height:200px; /***Your Desired Height**/
}

Is there a way to thicken a form legend underline?

I want bootstrap legend's underline to be more thick.
I would like to override twitter bootstrap css.
Is it possible?
Yes you can.
legend {
border-bottom:10px solid #000000;
}
To further increase/decrease the thickness, you can increase/decrease the pixels in the border-bottom. Hope this helps.
Yes. With CSS:
Bootstrap currently uses:
legend {
border-bottom: 1px solid #E5E5E5
}
In order to increase the thickness, simply increase the 1px value to something greater:
legend {
border-bottom: 5px solid #E5E5E5
}
JSFiddle example.
In order to get your own CSS to override the Bootstrap CSS, ensure your CSS is included on your page after Bootstrap, otherwise your style will be ignored:
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="yourStylesheet.css">
</head>
Have you tried actually looking on the css code? It's border-bottom on legend.
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: 40px;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5; /* that's the one */
}

Custom password field in not visible in browser

I want to make custom password in HTML But when i am running it with browser like chrome , Mozilla its not visible there.Please find my HTML & CSS.What wrong i am doing?
<link href="mypwd.css" rel="stylesheet" type="text/css" />
<input type="password" class="pwd">
CSS File:
.pwd{
border: 3px;
border-color: red;
}
It's there, you just haven't defined a proper border.
Try this:
.pwd {
border: 3px solid red;
}
Or if you'd rather not use shorthand:
.pwd {
border-color: red;
border-style: solid;
border-width: 3px;
}
<link> will have to be in the <head> as far as I know.
Also border should be:
border: 3px solid red;
Change your class to
.pwd{
border : 3px solid red;
}
For more infor check this fiddle