I'm confused! I have made a simple webpage to just show an image and some text. It's responsive and it works fine in Firefox, Chrome, Safari and Internet Explorer 10, but not in Internet Explorer 11.
The problem is that it's not responsive, it take a long time to load and it doesn't show the Font Awesome icons in Internet Explorer 11. What could be the reason for this and how could this be fixed? Really preciate some help since I can't find any solution for this when I google around. Thanks!
#import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
a {
text-decoration: none;
color: #2952a1;
}
html
{
overflow-y: scroll;
}
body {
margin:0;
padding:0;
height:100%;
color: #7F7F7F;
height: 100%;
}
#wrapper {
margin-top: 2%;
width: 100%;
height: 100%;
}
#card {
height: 100%;
margin: 0 auto;
width: 80%;
}
#mobileH1 {
display: none;
}
#desktopH1 {
display: block;
}
#leftSide {
height: auto;
float: left;
width: 50%;
}
#rightSide {
padding-top: 5%;
float: right;
width: 49%;
height: auto;
}
#leftSide img {
display: block;
height: auto;
width: 100%;
padding-top: 1%;
margin: 0 auto;
}
h1 {
text-align: left;
font-family: 'Shadows Into Light', cursive;
font-weight: 400;
font-size: 55px;
margin: 0;
}
p {
font-family: 'Dancing Script', cursive;
font-family: 'Shadows Into Light', cursive;
font-size: 28px;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 150px) and (max-width: 768px)
{
#mobileH1 {
display: block;
}
#desktopH1 {
display: none;
}
#card {
width: 90%;
}
#leftSide {
width: 100%;
}
#rightSide {
float: left;
padding-top: 0;
width: 100%;
}
#leftSide img {
width: 80%;
padding-top: 1%;
}
h1 {
font-size: 36px;
text-align: center;
}
p {
font-size: 24px;
}
}
#media only screen and (min-width: 150px) and (max-width: 320px)
{
h1 {
font-size: 28px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Konstkort & affischer</title>
<meta name="description" content="Description text" />
<meta name="viewport" content="width=width-device, initial-scale=1" />
<meta charset="utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="card">
<div id="leftSide">
<h1 id="mobileH1">Headline!</h1>
<img src="bilder/blomma.jpg"/>
</div>
<div id="rightSide">
<h1 id="desktopH1">Headline</h1>
<p>
Text
</p>
<p>
<i class="fa fa-phone fa-lg"></i> Phone number<br>
<i class="fa fa-envelope fa-lg"></i> Mail
</p>
</div>
</div>
</div>
</body>
</html>
It Seems that you have coded proper div tags from your css file and we believe it is not the problem in the code and it might be the reason it get loaded in other browser as well as in Internet Explorer 10. Please try following suggestions to get rid of common issue in "Internet Explorer 11" while it unable to load the webpage.
You might want to turn off Tracking Protection and ActiveX Filtering
in your "Internet Explorer 11" browser (TOOLS option). Tracking Protection and
ActiveX Filtering help protect your privacy by blocking images or
other content that might put your security or privacy at risk.
If the issue persists please try resetting Internet Explorer's security settings
Open the desktop, and then tap or click the Internet Explorer icon on
the taskbar.Tap or click the Tools button Tools button, and then tap
or click Internet options.
On the Security tab, tap or click Default level, and then tap or click
OK.
If none of these suggestions work, you can try resetting Internet Explorer to its default settings.
Hope this helps!
Related
I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.
I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’
The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.
Is there any way that the position of the posted message works for all the inches of the screens?
How could I solve this? Can someone tell me if this has a solution? Thank you.
Here is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg,duration)
{
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style","" );
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
</script>
<style>
#welcomeMessage{
font-family: Arial, Helvetica, sans-serif;
color:#4d4d4d;
background: rgba(0, 0, 255,0.6);
position:fixed;
padding:10px;
text-align:center;
left: 75%;
top:0;
margin-left:-5px;
width:500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
}
#div2 { /* Style the header */
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333; /*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script> customAlert("Hello!", 2000)</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab 2</a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>
We say that 'responsive'. You can google it and find many examples about that.
If you want a quick tutorial:
Add this inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
And you can define your styles in css with media
#media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
This code will only work if window size is larger then 768px
I'm looking for some CSS help. I am working on my church's website, and I am trying to get the mobile version of my supposedly responsive theme to resize header images. Right now the header image doesn't seem to resize, or at least not completely.
Website: http://www.rochestertrinity.com/kids.html
What I'm hoping to get is to have the header image scale to the exact width of whatever the display size is. So things would look essentially the same on desktop, but on mobile the user would see the entire header image. I've attached a mock up image of what I see now and what I'd like to see.
image of what I see vs what I'd like
I'm not a CSS expert, but I suspect the code that manages this is in one of the following snippets:
/* Tall Header Page */
.tall-header-page .banner-wrap {
display: table;
width: 100%;
min-height: 450px;
padding-top: 50px;
text-align: center;
}
.tall-header-page .banner-wrap .container {
height: 450px;
}
.tall-header-page .banner-wrap .banner h2 {
font-size: 70px;
padding-top: 65px;
}
OR
/* Banner */
.banner-wrap {
position: relative;
max-width: 100%;
height: auto;
padding: 55px 0;
box-sizing: border-box;
background: #ffffff url('default-bg.jpg') center center no-repeat;
background-size: cover;
}
.banner-wrap:before {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
background: rgba(0, 0, 0, 0);
content: ' ';
}
.banner-wrap .container {
display: table;
overflow-y: hidden;
height: 100%;
}
.banner-wrap .banner {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
font-size: 100px;
font-weight: normal;
line-height: 1.1em;
}
.banner-wrap .banner p {
padding-bottom: 40px;
color: #ffffff;
letter-spacing: .03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
}
.banner-wrap .banner .button-wrap {
display: inline-block;
}
.banner-wrap .banner .wsite-button {
text-align: center !important;
}
.banner-wrap .banner .wsite-button .wsite-button-inner {
background: #ff8345;
color: #ffffff !important;
}
.banner-wrap .banner .wsite-button:hover .wsite-button-inner {
background: #e56525;
}
I hope someone can help.
Thanks!
UPDATE 2016-04-22
tall-header.html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class='tall-header-page wsite-theme-light'>
<div class="wrapper">
<div class="paris-header">
<div class="container">
<label class="hamburger"><span></span></label>
<div class="logo">{logo}</div>
<div class="nav desktop-nav">{menu}</div>
</div><!-- end .container -->
</div><!-- end .header -->
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
</div>
</div>
</div>
<div class="main-wrap">
<div class="container">
<div class="content-wrap">{content}</div>
</div><!-- end container -->
</div>
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div>
<div class="nav mobile-nav">
<label class="hamburger"><span></span></label>
{menu}
</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
In your kids.html you have this, it overwrites your CSS-Code:
<style>
.wsite-background {background-image: url("//cdn1.editmysite.com/uploads/6/5/4/8/65485229/background-images/2036811843.jpg") !important;background-repeat: no-repeat !important;background-position: 50.00% 37.71% !important;background-size: 100% !important;background-color: transparent !important;}
body.wsite-background {background-attachment: fixed !important;}.wsite-background.wsite-custom-background{ background-size: cover !important}
</style>
Delete or Change this part of the code and it works:
.wsite-background.wsite-custom-background {
background-size: cover !important;
}
In your CSS-File you have this media query:
Explanation to media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media screen and (max-width: 992px) {
write this line of code in your media query:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% 100% !important; }
Its not perfect, an other solution whould be this, then you have to change the height of the element:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% auto !important; }
or this:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: contain !important; }
Explanation to background-size: http://www.w3schools.com/css/css3_backgrounds.asp
This jsp home page is working fine with Mozilla and IE 7 but not in chrome. None of the images are being picked. Please advice.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- Libraries to include jstl tags -->
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!-- Libraries to include jstl tags -->
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- Libraries to include jstl tags -->
<!DOCTYPE HTML>
<html>
<head>
<%
String ua=request.getHeader("User-Agent").toLowerCase();
// condition used for mobile compatibility
if(ua.matches("(?i).*((android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hipt)) //Many such conditions are checked but I removed them to make it simple
{
response.sendRedirect("index?source=mobile");
return;
}
%>
<title>Arizona Health Sciences Library EBM Search Engine</title>
<link rel="stylesheet" type="text/css" href="css/style_index.css" > -- included css
</head>
<body>
<!-- Images that are not getting loaded -->
<img src="images/ua_logo_white.png" height="80" />
<div class="floatright">
<!-- Images that are not getting loaded -->
<img src="images/AHSL.png" height="80" width="100" />
</div>
<!-- Links to different search engines -->
<h2>General Medicine</h2>
<h2>Emergency Medicine</h2>
<h2>Medical Imaging</h2>
<h2>Pediatrics</h2>
<h2>Surgery / Critical Care</h2>
<!-- Static texts hard coded - Need to be replaced -->
<footer>
All content ©2012 Arizona Board of Regents. All rights reserved.
</footer>
</body>
</html>
style_index.css - This is the CSS used for this page. I am not sure if changes has to be made for this style sheet.
body {
font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
}
body {
background: url('../images/bg_top_repeat_dark_blue.jpg') repeat-x #f3f3f3;
}
image
{
border-width: 0;
}
#wrapper {
width: 800px;
margin: 100px auto;
}
#logo {
height: 397px;
text-indent: -10000px;
margin-bottom: -135px;
}
#logo.blank {
text-indent: 0;
}
h1 {
padding-top: 80px;
color: #202080;
font-size: 36px;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
h2 {
color: #202080;
font-size: 30px;
font-weight: bold;
text-align: left;
}
.floatright
{
float: right;
margin-right: 18px;
}
form {
background: url('../images/search_box.png') no-repeat;
height: 47px;
}
input {
background: none;
border: none;
outline: 0;
}
input.text {
width: 670px;
padding: 13px 0 13px 24px;
color: #505050;
font-size: 20px;
float: left;
}
input.submit {
width: 104px;
padding: 13px 0 13px 10px;
float: right;
cursor: pointer;
}
.ui-grid-a .ui-block-a {
width: 30%;
}
footer {
height: 50px;
padding: 5px 0 20px 0;
text-align: center;
}
when you are in chrome with your webpage opened juat press f12. a window will open. now in the right it there will be your css code displaying. check the code with red or yellow warning signs. these signs tell that the code is wrong or not required by chrome.
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
I am trying to create a simple search bar with a background, and an 'Advanced' href on the side. It is rendered correctly in Chrome, Mozilla, however in IE 8 the href appears as a separate block on the line below?
My HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>FireFox HomePage</title>
<!--[if lt IE 9]>
<script src="../HTML5Shiv/dist/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="MainPage1.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="../../IMG/FireFox.png" alt="FireFox Logo" title="FireFox Home" />
<span id="usernav">Logout<a href="#">My Profile</span>
</div>
<form action="" method="Search">
<p>
<input type="search" />
<input type="submit" value="Search"/>
Advanced
</p>
</form>
</header>
</body>
</html>
My CSS code:
/* CSS Reset */
* { margin: 0; padding: 0; }
html { height: 101%; font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif; background: #fff; }
body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; line-height: 10%; }
img { border: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Main CSS */
header { width: 1000px; margin: 0 auto; clear: both;}
.wrapper { width: 1000px; margin: 0 auto; margin-top: 10px;}
#usernav { position: relative; margin-top: 20 px; font-size: 12px;}
#usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; text-decoration: none; float: right; padding: 8px;}
#usernav a:hover { text-decoration: underline; }
form{background-color: #eee; border-bottom: 1px solid #dadada; height: 50px;}
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Ok I've solved the problem after playing around with the code a little. It seems that removing the
<span id="usernav">Logout<a href="#">My Profile</span>
from within the div and placing it directly within the header solved the IE bug. Not sure why though, suggestions are welcome. I can't post the image as I don't have more than 10 reputations points :(