How do I get border radius to work in IE?
I have an <input type=image> element in my html. In my css I have border-top-right-radius:12px; and border-bottom-right-radius:12px.
Everything works in Chrome and Firefox, but in IE11, the image shows up with square corners instead of rounded corners.
I also have this meta tag in my html:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
The code is below.
CSS:
body .overlay {
background-color: rgba(0, 114, 198,.7);
height:100%;
position:relative;
}
body .layer {
background: url('photo-homebanner.jpg') 55%;
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}
body .goldenDiv {
width:665px;
height:326px;
position:fixed;
z-index:100;
margin-top:-38px;
margin-left:-8px;
}
body h1 {
color:white;
text-align:center;
font-family:sans-serif;
padding-top:22px;
padding-bottom:5px;
font-size:45px;
}
body h3 {
color:white;
text-align:center;
font-family:sans-serif;
font-weight:100;
padding-bottom:14px;
}
body h3.hidden {
visibility:hidden;
padding-bottom:0px;
position:absolute;
top:220px;
left:190px;
}
body input:focus {
outline:none;
}
body .prettyInput {
align-content: center;
padding-left: 20px;
padding-right: 70px;
margin-left: 106px;
width: 350px;
height: 61px;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
border: hidden;
margin-bottom: 40px;
}
body .inputOverlap {
position:absolute;
top:167px;
top:166px\9;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
body hr {
color:white;
position:absolute;
top: 77px;
left:120px;
align-content:center;
}
#-moz-document url-prefix() {
body .inputOverlap {
position:absolute;
top:168px;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
}
HTML:
<body>
<div class="goldenDiv">
<div class="layer">
<div class="overlay">
<h1>Stay ahead of industry news!</h1>
<hr width="450px"/>
<h3>Let us send you the latest from our Marketing Department.</h3>
<input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" />
<input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" />
<h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3>
<h3>100% privacy, no spam, just news.</h3>
</div>
</div>
</div>
</body>
The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property.
Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;.
Stylistic notes (unrelated to the problem):
border-radius: 0 12px 12px 0; means the same thing as
border-top-right-radius:12px;
border-bottom-right-radius:12px;
but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved.
The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.
Related
My window is split into 3 parts, the header, Section and footer. the section part is not being fully sized in the browser, instead it's cut off half way down the page.
I have tried changing the height attribute to 100% or 'Auto' but it doesn't seem to help. I've included the entire code as I am not sure what affects the sizing.
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-image: url("53.12-Day-1600x1200.jpg");
color:white;
text-align:left;
padding:5px;
width:100%;
height:20%;
}
nav {
line-height:20px;
background-color:#B0D4DB;
height:auto;
max-height:initial;
width:10%;
float:left;
color:;
}
**
*section {
width:90%;
background-color:#E9E9E9;
float:left;
text-align:center;
color: black;
height:auto;
max-height:initial;
font-family:courier;***
}
footer {
background-color:#CDCDCD;
color:black;
clear:both;
text-align:left;
width:100%;
height:10%;
}
</style>
</head>
<header>
<h1> Find Break </h1>
</header>
<body>
<nav>
<p>About</p><br>
<p>Search Break</p><br>
<p>Contact us</p>
</nav>
<section>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<style type="text/css">
#tfnewsearch{
float:center;
padding:20px;
}
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid #0076a3;
border-right:0px;
border-top-left: 5px 5px;
border-bottom-left: 5px 5px;
}
.tfbutton {
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
</style>
<br>
<p1> Search for your favourite surf spots below </p1>
<br>
<div id="tfheader">
<form id="tfnewsearch" method="get" action="http://www.google.com">
<input type="text" class="tftextinput" name="q" size="21" maxlength="20"><input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<!-- Google Map -->
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:200x;width:500px;'>
<div id='gmap_canvas' style='height:200px;width:500px;'></div>
<div><small>embed google maps</small></div>
<div><small>auto huren</small></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<script type='text/javascript'>function init_map(){var myOptions = {zoom:11,center:new google.maps.LatLng(-33.598169871799726,151.3341166752075),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-33.598169871799726,151.3341166752075)});infowindow = new google.maps.InfoWindow({content:'<strong>Title</strong><br>Palm Beach, NSW<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
</section>
</body>
<footer> <small>© Copyright 2101, PSX </small> </footer>
</html>
To make the section 100% in height, you'll need the parent to be 100% height too. In other words, your body has to be set at height:100% with the section set as the same.
You could also use vh (vertical height) units like so, which wouldn't require the 100% height on the body
section{
height:100vh;
}
Any time you have a float:_____, the floated element loses its height. It is visible, but it is as if it has zero height. Stuff will overwrite it -- sizing does not work.
So what to do?
There is a simple fix. Ensure the floated element is inside another container (a div, usually) and style that container overflow:hidden or overflow:auto. There are other solutions that involve creating pseudo-elements, and those work great and are a bit "more elegant", but this method works just fine.
References:
Customising Insightly HTML contact form (aligned, spaced fields)
CSS container div not getting height
Align <ul> center with others
For a percentage-based height setting to work for an element, its parent element needs to have a height definition. In your case, that's <body>, so you need to add
body {
height: 100%;
}
...and don't float it - it will loose its height setting if you do
I'm trying to reproduce some pieces of CSS from the http://flink.to website, especially the tiles which contains for each article the picture, the title, the author, the link to the author page and the link to the article.
Here is the HTML for one tile :
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about">
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
Here is the CSS for one tile :
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
Everything's OK except that we can't access the article and the "view story" link which is supposed to show up only when we hover the picture, in the middle/center of it.
Edit : Here is a demo : http://jsfiddle.net/5qwejk20/
As the website's CSS sheet of Flink.to is really very complicated, I didn't find how to resolve this. Could you please help me ?
There is a lot of CSS, and obviously it's hard to tell what does what and it will need to be trimmed. But from what I can tell these are the styles making it happen. The button opacity is initially 0 (hidden), so needed to change to 1.
JSFiddle
I added this style to make it show with the cursor
.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
opacity: 1;
}
By looking at the css the elements are hiding and showing by using the z-index property and CSS Positioning. Try the following code, I use different values of z-index to overlap elements. Remember that the z-index property only is valid for elements with position:absolute,position:relative or position:fixed so you have to scaffold your website having this on mind. I also added an id to the img to select it on the css. http://jsfiddle.net/cfahhmkj/
HTML
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img class="albumImage" src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about" >
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
CSS
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
.article-link {
position:absolute;
left:110px;
top: 120px;
z-index:-1;
}
.albumImage{
position:absolute;
z-index:0;
}
.albumImage:hover{
z-index:-2;
}
I have been working with several solutions on the web and have not found anything that works.
I am trying to do something that should be simple. I am trying to have an image of a "button" underneath an actual button. When I do this, the image always overlaps the button itself.
HTML:
<div id="button"> <!-- Container for my image and button -->
<img src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>
CSS:
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
Instead of using an actual image (which you won't be able to put behind anything), just make it a background image.
CSS:
#button {
height:30px;
padding:3px;
position:relative;
background: url('file:///C:/Users/Hansen/Desktop/Websigte/Images/buttonUnclicked.png');
background-repeat: no-repeat;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
jsBin demo
Use a background image for #button if you want
<div id="button">
<input type="button" value="Roofing"/>
</div>
CSS:
#button {
width:90px;
height:30px;
padding:3px;
position:relative;
background: url(Images\buttonUnclicked.png);
}
#button > input {
position:absolute;
left:5px;
top:6px;
width: 86px;
}
If you adjust the number for the left and the top in the CSS, you can move your picture around. I called the picture #myImage in the HTML. Hope that helps.
CSS
#myImage{
position:absolute;
left:10px;
top:50px;
}
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
html
<div id="button"> <!-- Container for my image and button -->
<img id="myImage" src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>
I am making a CSS design for a SIM game I play, and a customer asked for 4 boxes, two large and in between them, two horizontally aligned boxes. They work fine, unless I try and add headers. The entire website is set up in a ridiculous amount of tables, basically coding from the 90s. All boxes I have made are div and aligned to meet up with the existing boxes on the page.
The main boxes are how I want the headers on all four boxes, separate and do not scroll. However, as you can see from this fiddle, nothing is aligning. When I try to put headers on the horizontal boxes, it really messes up the align. I am a fairly new coder, and would greatly appreciate some help.
div {
display: block;
color: #fff;
}
.topcontain{
width:500px;
height:300px;
}
.topleftbox {
width:240px;
height:300px;
overflow:auto;
float:left;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.toprightbox {
width:240px;
height:300px;
overflow:auto;
float:right;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.bottomcontain {
width:500px;
height:300px;
}
.header {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 14px;
border: 1px solid #030711;
opacity: 1.0;
}
.bottombox {
width:500px;
height:300px;
overflow:auto;
float:center;
background:#505665;
font-size: 12px;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
opacity: .75;
}
.credit {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 12px;
border: 1px solid #030711;
opacity: .85;
}
.top {
font-family: 'Snippet', sans-serif;
background : #060e23;
color : #fff;
font-size : 15px;
padding : 5px 15px;
font-weight : normal;
text-align : center;
border: 1px solid #030711;
opacity: .90;
}
Here is how it looks on the page I am coding:
example
Thank you again!
http://jsfiddle.net/6bEsE/6/
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[TOP]
</div>
</div>
<div class="topcontain">
<div class="topleftbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE LEFT]
</div>
</div>
<div class="toprightbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE RIGHT]
</div>
</div>
</div>
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[BOTTOM]
</div>
</div>
<div class="credit">Layout and CSS by Echo [#15480]</div>
I did a fast clean of your code (5 minutes)
But it is far from finishing it
First of all, you have bad closing of divs.
Second, you have fixed height for divs. A div with fixed width and height and more text than can fit in it will create scrolls.
before inserting all that text, try to fix the containers starting from the simple example i provided above. Also you may need to change a bit the html structure, to group those floating middle divs.
Demo Fiddle
In CSS
.clear{
clear:both;
}
In HTML
<div class="clear"> </div>
Everything is working fine on my default resolution; however, when I run my website on another resolution everything goes to the right instead of center. Why is this? I have tried setting the overflow to 0%.
Here is the HTML file:
<html>
<head>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
<body>
<div id="banner">
<h2 id="bannertext"> Websites4u </h2>
</div>
<div id="buttonbar">
<a id="homeb" href="webpageone.html">Home</a>
<a id="aboutb" href="fake.html">About</a>
<a id="contactb" href="webpage2.html">Contact Us!</a>
</div>
<div id="mainbody">
<p id="radio">
3gb: <input type="radio" name="age" value ="<3gb"> <br> <br>
4gb: <input type="radio" name="age" value ="4gb"> <br> <br>
8gb: <input type="radio" name="age" value ="8gb"> <br> <br>
16gb: <input type="radio" name="age" value ="16gb"> <br>
</p>
<h4 id="bodytext"> Please Select Your Hardware </h4>
<h3 id="Ram"> Ram </h3>
</div>
</body>
</html>
Here is the CSS:
*{
margin:0;
padding:0;
}
h1 {
color:blue;
}
body{
width:1280px;
height:720px;
background-image:url("background colour.jpg");
overflow:hidden;
}
#banner{
position: relative;
height: 50px;
width: 148%;
border: medium solid BFBDBA;
background-color:F1C43E;
margin:0 auto;
}
#bannertext{
color:white;
text-align:center;
font-family:Comic Sans MS, cursive, sans-serif;
margin:0 auto;
}
#buttonbar {
position: relative;
height: 30px;
width: 148% ;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
#homeb {
position: relative;
left: 450px;
}
#aboutb{
position: relative;
left: 500px;
}
#contactb{
position: relative;
left: 550px;
}
a {
color: white;
font-weight:bold;
}
a:hover {
COLOR: orange;
font-weight:bold;
}
#bodytext{
position: relative;
top:50px;
left:50px;
color:red;
font-size:35px;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
}
#mainbody{
position: relative;
background-color: white;
height: 1000px;
width: 80%;
left: 30%;
top: 5px;
border:medium solid F1C43E;
}
#radio{
position: absolute;
top: 240px;
left:100px;
font-size: 18px;
margin:0 auto;
}
#Ram{
position: absolute;
top: 176px;
left: 100px;
font-size: 30px;
color: Green;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
}
Hard to fix all your issues quickly. Your basic mistake is that you have absolute values for every item.
For instance:
body{
width:1280px;
height:720px;
background-image:url("background colour.jpg");
overflow:hidden;
}
Because of width specified there, your content will always have width of 1280px when you open it on a screen with smaller width it will be still rendered with width of 1280px and because of overflow:hidden you will see it simply like it is shifted to the right side. When you do something with computer it will do not what you WANT, but what you ask it to do. And overflow:hidden simply hide everything outside of visible area, not center content like you want.
For #buttonbar:
#buttonbar {
position: relative;
height: 30px;
width: 148% ;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
- even have no idea why do you need width:148% here. Buttons inside it are centered with absolute positions:
#homeb {
position: relative;
left: 450px;
}
left:450px strictly says to browser: hey, put this #homeb on the 450th px inside its parent block. And browser will do it like that and will not shift it to little more left because you want it to be centered.
You may tell him to place all buttons in center:
#buttonbar {
height: 30px;
text-align:center;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
text-align:center; - this will tell browser to center content inside of #buttonbar not depending on its width, and no need to define classes for #homeb, #aboutb and #contactb.
And so on. There are to many places to fix. I gave you a starting point. Here is demo with some changes already done for you: http://jsfiddle.net/2rM6K/7/
You just need to understand what each line of your code means for browser if you want to get something working correctly. If you do not understand how something works - there is a lot of info in web and people are ready to help you. Just do not expect that some magic happens while you writing a code - you must learn how things work. Read, try, experiment, read again, try again, experiment again until you start understanding why and how something works.
page
{
Margin-right:auto;
margin-left:auto;
width:800px;
}
u can change width according to your requirement.