I realize this question has been asked a bunch of times, but none of the suggested solutions have worked for me. Basically my tag will not center in IE9+. Its using margin: 0 auto.
I have added text-align:center to the body and html styles. I have a valid doctype. The only thing is I have some PHP that is before the doctype. If that is the problem how do I get around that?
Here is my code:
CSS
html{
height: 100%;
width: 100%;
font-family: GothamBook;
text-align: center;
}
body{
width: 100%;
height: 100%;
text-align: center;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
background-image: url(../Images/bg-pattern-gray.png);
}
main{
box-sizing: border-box;
text-align: left;
width: 940px;
margin: 0 auto;
padding: 10px 40px;
padding-bottom: 40px;
background-color: #FFFFFF;
position: relative;
overflow: auto;
}
>
index.php
<?php
include_once "../PHP/HeaderFooter.php";
include_once "../PHP/Event.php";
$headerFooter = new HeaderFooter();
$eventID = "";
if(isset($_GET['eventID']) && !empty($_GET['eventID'])){
$eventID = $_GET['eventID'];
$event = new Event($eventID);
}
?>
<!DOCTYPE html>
<html>
<head>
<?php
echo "<title>" . $event->eventTitle . "</title>";
?>
<link rel='stylesheet' href='../CSS/reset.css' />
<link rel='stylesheet' href='../CSS/global.css' />
<link rel='stylesheet' href='../CSS/event.css' />
</head>
<body>
<main>content</main><script src='../JS/jquery-2.1.0.min.js'></script>
<script src='../JS/jquery.expander.min.js'></script>
<script src='../JS/expanderScript.js'></script>
</body>
</html>
EDIT
Thanks for the replies. Didn't even think to see if the main tag was supported. I decided to just change the main tag to a div with the id of main. Its an easy fix that way.
Internet Explorer does NOT support <main>. None of them. See CanIUse (at notes) and MDN.
And because of that, IE does NOT style elements it does not support. You can use html5shiv/html5shim which is the polyfill or modernizr that has the polyfill and much more.
From now on, IE will style it. But then you need to set main's default CSS, which specifically is missing on your CSS, as #bboysupaman noted:
main { display: block; }
Or just use a normalize.css which covers all default styles for everything before any other css you use.
Proof:
Just an update proving my point to user C-link Nepal and his magic IE that renders main:
I tested on a real IE10, not emulated stuff. Here is the Fiddle.
Open the iframe url on the IE: http://fiddle.jshell.net/h9rq8e6r/2/show/ If was REALLY block, the below wouldn't happen!
(Paint skills ftw)
Add the following to your css:
main {
display: block;
}
That should take care of it.
Related
I am trying to give the date a margin of 15px between the bottom of the header and the text itself, but it doesn't move no matter what I tried.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="myscripts.js"></script>
<title>The Impertus ยท Understand the News</title>
</head>
<body>
<div id="Preheader">
<img src="images/masthead.png">
<div class ="ph" id="hd"></div>
<p class="ph">May 14, 2016</p>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
background-color: #E1D4C0;
margin: 0 0 0 0;
}
.ph {
display: inline-block;
margin-bottom: 15px;
}
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
}
Created Fiddle here: https://jsfiddle.net/fhkh6ae0/
Add .ph { vertical-align:15px; }
See https://jsfiddle.net/fhkh6ae0/2/
Try
.ph {
padding-bottom: 15px;
}
I think your issue lies in your html elements display property.
I see you are using this for the .ph class:
display: inline-block;
In order for your elements to align next to each other, but I think what you are trying to achieve here is possible by applying a float to your #hd and .ph elements:
float: left;
Here is some detailed information on CSS Floats by CSS-Tricks. The method you are using can be a good thing to do in a lot of specific situations, but for your specific case, I think this is the right path to take.
Here is a Fiddle for you.
You can see I changed some things and I added new things. One is the float property I am referencing above, and I have added an overflow: hidden property to the main container #Preheader , this is a fix for floating elements that try to escape their position or break your layout in bits. Remember the last one.
Just add a padding in #Preheader and it will be okay. take a look https://jsfiddle.net/fhkh6ae0/3/
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
padding-bottom:15px; /*added*/
}
I have a problem where any text in the content div wont style.
I have tried(not all at the same time)
#content p{ margin-left: 5px; }
p{ margin-left: 5px; }
but when I style it directly it will work e.g.
<p style="margin-left: 5px;">Test</p>
HTML/PHP code
<!DOCTYPE html>
<html>
<head>
<?php require('headers.php'); ?>
<title>Title</title>
</head>
<body>
<?php include('nav.php'); ?>
<div id="content">
<p>This is some sample text</p>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
html{
font-family: 'Open Sans', sans-serif;
}
body{
}
--snip nav styling--
#content{
margin: 0 auto;
width: 900px;
background-color: lightgrey;
}
#content p{
margin-left: 5px;
}
FIX
I found that when I transfer the files to the server styles.css wasn't being changed. Delete and re upload solved the problem.
Are you using the double dashes as quotes in your actual code? That'll be why it isn't recognising the rule for #content p.
Comments in CSS are done with using forward-slash and an asterisk, like so:
/* This is a valid CSS comment */
You can also comment out lines using double-slashes, but it isn't advised.
// This is also technically a valid comment, but shouldn't be used.
Interestingly enough with your code is that is has only ignored the rule that is immediately after the "comment", so the margin-left: 5px on the p element is still applied - as seen here.
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I have a link in html and i am using :after pseudo element to insert some content and style that content.
It is working fine in FF & IE9. but not working in IE8.
when i click on "Click" link, container div's background color changes.
but content inserted by :after not takes that color as background in IE8.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(function(){
$(".clickMe").click(function(){
$(".yellow").addClass("red").removeClass("yellow");
});
});
</script>
<style>
.testLink {
display: block;
width: 109px;
background: inherit;
max-height: 32px;
overflow: hidden;
}
.testLink:after {
content: "...";
background: inherit;
position: relative;
width: 45px;
margin-left: -20px;
padding: 0 5px;
background-image:none;
background-color:inherit;
font-size: 14px;
}
.yellow{ background:yellow;}
.red{ background:red ;}
</style>
</head>
<body>
<div class="yellow">
linkTextHere
</div>
click
</body>
</html>
Any expert advice would be appreciated.
thanks in advance..
Take a look at the browser support of inherit for IE8
http://www.w3schools.com/cssref/pr_background-color.asp
Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
So they seem to have a general problem with it considering the Doctype. Maybe try a different one than html5 just to make sure?
I have this simple web page, that I thought I had tested in every browser. Then I tried it in Internet Explorer, and it just showed a blank white page. I went through my CSS, looking for lines that IE didn't support, and found background = rgba(some stuff), but this is in a div not shown by IE. Does anybody have any ideas on what might be causing this? The webpage is at http://heather.sh/qr
Below is my HTML.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function ifUIWebView() {
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var isChrome = navigator.userAgent.match('CriOS');
if (isChrome) {
var mobile_safari_div = document.getElementById('mobile_safari_div');
mobile_safari_div.innerHTML = mobile_safari_div.innerHTML + '<font size="3" color="black"><b>Chrome does not support contact card download. Please open this page (http://heather.sh/qr) in Mobile Safari.</b></font>';
}
else if (is_uiwebview) {
var mobile_safari_div = document.getElementById('mobile_safari_div');
mobile_safari_div.innerHTML = mobile_safari_div.innerHTML + '<font size="3" color="black"><b>This browser may not support contact card download. If it doesn\'t work, open this page (http://heather.sh/qr) in Mobile Safari.</b></font>';
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id='topContainer'><img src="photo.jpg" style="visibility:hidden" width="100%"/>
<div id='container'>
<div id='download_button_div'>
<img src="Download Contact.png" id='download_button'></img>
<div id='mobile_safari_div'></div>
</div>
<script>
ifUIWebView()
</script>
</div>
</div>
</body>
And here is my CSS:
html, body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#topContainer{
position: relative;
max-width:400px;
margin: auto;
}
#container{
width: 100%;
max-width: 400px;
height: 100%;
margin: auto;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("photo.jpg");
position:absolute;
top:0px;
}
#download_button {
width: 100%;
}
#download_button_div {
width: 100%;
}
#mobile_safari_div {
background: rgba(255, 255, 255, 0.5);
font-family: 'helvetica';
text-align: center;
}
Any ideas on what part is incompatible with IE? As I say, I have tried going through and could only find the rgba thing, so any help appreciated.
Thanks!
You should try to use
style = "display: block " instead of style="visibility:hidden"
I am not sure this will help or not.
But try it
I found out what the problem was - I had forgotten to put <!DOCTYPE html> at the top of the html. Not sure what it does, but it fixed everything.
Thanks!
Sam