I am using materialize framework and as I add <!DOCTYPE html> it does not recognize my CSS. But it works without <!DOCTYPE html>. How should I solve this error?
Update :
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Material</title>
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$( document ).ready(function(){
$(".button-collapse").sideNav();
});
</script>
<style>
body{background-color:#fcfcfc;}
.logo{
height:70%;
margin-top:10px;
margin-left:10px;
}
#media only screen and (max-width: 992px){
.logo{
margin-left:0px;
}
}
.button-collapse{
margin-left:5px;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="blue lighten-1">
<div class="nav-wrapper">
<img src="images/logo.png" class="logo" />
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>Login</li>
<li>Signup</li>
<li>Contact Us</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Home</li>
<li>Login</li>
<li>Signup</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
<div class="row header-img">
</div>
</body>
</html>
The reason is that browsers switch to a more correct rendering engine mode when they see a doctype in the file.
If adding a doctype is causing problems, then your code has probably something wrong with it, and it is working by chance (or trial and error) if nothing else. There is a slight chance that the culprit might be a bug introduced in the more standards-compliant rendering mode, though. Such bugs do exist.
Without the doctype your page will be renderd in quirks mode. That means that the browser will treat your html AND your css after the rules the older browsers have set.
Valid html MUST have a doctype. If you have a correct and fairly new doctype then your document will be rendered in Standards Compliant mode. Also, your stylesheets must have a media type of text/css.
I think sharing your CSS here might help in identifying what exactly is going wrong.
hi i'm working in visual studio with bootstrap.
i'm trying to design the section at the and of code, but it doesn't work (i don't have the access to id="TikNehesTitle".
i added my HTML and CSS (in comment) code here.
thanks for responding.
my HTML code:
<!DOCTYPE html>
<html lang="he">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body dir="rtl">
<div class="container">
<nav class="navbar navbar-inverse">
<!-- menu list-->
<ul class="nav navbar-nav">
<li>הירשם</li>
<li>התחבר</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>אודות</li>
<li>איזור מגורים</li>
<li>דף הבית</li>
</ul>
</nav>
</div>
<section>
<div class="container" id="TikNehesTitle"><h1>תיק נכס</h1></div>
</section>
</body>
</html>
CSS id is set with # prefix.
Simply set your CSS to:
body {
}
#TikNehesTitle {
height: 100px;
width: 100px;
border: 1px solid red;
}
So the title says it, ill upload screenshots of the issue:
Here are the images.
I have tried to fix this but im not the most experienced coder out there. If any one has run into this problem or knows the solution please answer :) Its proboly something simple that i cant find because im stupid, LOL. Any way thank you for looking :)
This is my index.html:
<!DOCTYPE HTML>
<!--
Aerial by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Oracle RPG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<h1>Oracle RPG</h1>
<p>A BETTER EXPERIENCE • BUILT FOR THE GAMER • BY THE GAMER</p>
<nav>
<ul>
<li><span class="label">Forums</span></li>
<li><span class="label">Donor Area</span></li>
<li><span class="label">Youtube Channel</span></li>
<li><span class="label">Ranks & Apply Area</span></li>
</ul>
</nav>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright"><font size="1">© Untitled. Design: HTML5 UP.</span></font>
</footer>
</div>
</div>
</body>
</html>
In your all your css files you state your div with id #bg as follows:
bg {
background-size: 2250px auto; /*the first value is different in all css files*/
width: 6750px;
}
The first value is the width of you images and the second one the height. The width is different in each of the css files (wide, normal, mobile, etc) so what you have to do is just change the width of the background-size to whatever you want and your problem is gone! :)
I have page here with 2 elements in it and bootstrap on the run, yet I fail to make the first element responsive.
1st element is a SVG with a path animation from Lazy Line Painter, it refuses to become responsive with the written code, doesn't move when the windows is being resized, I need help with it.
2nd Element is a heading which is responsive and looks great.
Question is: How do I get the first element to act like the second, thus being responsive instead of fixed (as it seems fixed when resizing the window)
HTML:
<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Oswald:700'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Code Home</title>
<!--CSS Start-->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--CSS End-->
<!--Scripts Start-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/jquery.lazylinepainter-1.4.1.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/main.js"></script>
<!--Scripts End-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="pencilandbrackets"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="title" class="animated bounceInDown">The Code Home</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
CSS:
/*=======MAIN CSS=======*/
body {
background:#2ecc71;
}
#pencilandbrackets {
position: absolute;
top:-170px;
left:200px;
display: block;
}
#title {
font-family: 'Oswald', sans-serif;
font-size: 4.13em;
position: fixed;
top:40%;
left:50%;
margin: -1.0em 0px 0px -3.2em;
color: #2c3e50;
display: block;
}
.lazy-line svg {
width:300% !important;
}
You could create a new #media query with the max width that you'd like to hide this element at, then use display: none; on the element you wish to hide.
I am using pre-built CSS and HTML to display a drop down menu on my site, but the menu does not work in Internet Explorer. I am not sure if it is the doctype or what, I have it linked to a csshover.htc page, as it came with, but it still won't work. I will list the code below for the first section of the menu that contains the doctype and file link, as well as the csshover.htc code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<title>Mega Drop Down Menu</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->
<body>
<ul id="menu">
<li>Home<!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p></p>
</div>
</div><!-- End 2 columns container -->
And here is the info from the csshover.htc file:
<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)): (hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\- ]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
Change over to <!DOCTYPE HTML>
and add
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
into your head
also add a <html> tag and </head> tag
for example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<!-- Content -->
</body>
</html>
Your missing a lot of tags which are essential add these in and im sure your problem should be fixed
you also aren't closing your <ul> tag and <li> tag