Not sure entirely what is happening, but I get the following errors from Internet Explorer and Google Chrome...yet it displays perfectly in Opera >_>
Google
This XML file does not appear to have any style information associated
with it. The document tree is shown below.
IE
IE renders the page but doesn't apply ANY of the tags and just displays the text >_>
Code
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- This is a redesign of my redesign -->
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/container.css"/>
<link rel="stylesheet" type="text/css" href="css/banner.css" />
</head>
<body>
<div id="Container">
<div id="Banner"></div>
<div id="Content"><p>Hello World</p></div>
</div>
</body>
</html>
CSS Example
#charset “UTF-8?";
/*CSS for the Container and non div items*/
#Container {
width: 80%;
min-height: 600px;
max-height: 1200px;
margin: 0 auto;
margin-top: 1%;
z-index: 0;
}
#Content {
position: relative;
width: 100%;
min-height: 70%;
height: 80%;
max-height: 80%;
background-color: red;
z-index: 2;
border-style: solid;
border-left-width: 1px;
border-right-width: 1px;
border-color: black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
What gives O_o
An XHTML file MUST have the xmlns attribute xmlns="http://www.w3.org/1999/xhtml" in its html start tag or it will not be recognised as XHTML.
Opera's behaviour is non-standard.
The first line in your CSS file looks wrong:
#charset “UTF-8?;
Should probably be:
#charset "UTF-8";
Related
"this is my external css file of name style.css"
body{
background-color: red;
}
h3{
color: #66BFBF;
}
hr{
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 3px;
width: 5%;
}
"And this is my html file of name index.html .in which the style.css linked correctly because hr selector working ,but not others."
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chandan's personal site</title>
<link rel = "stylesheet" href ="CSS\style.css">
</head>
<body>
<h1>This is me!<h1>
<hr>
<h3>Books & Learning</h3>
</body>
</html>
It worked when i delete the line out - <lang 'en'>
I could really use some css help. Is it possible to swap the order of 2 words using css, WITHOUT using :after? (ex "Hello World" should become "World Hello")
The specific reason I cannot use :after which does in fact work, is that the div snapshot utility html2canvas.js does not take :before or :after into account, hence the workaround.
any help is very much appreciated.
Niko
You can stack the sentences with CSS z-index and using keyframes to make an effect of swapping. (see code-snippet).
After that you need to decide how/when to call for the change, through buttonclick or time. For calling you probably need some javascript.
If your are looking for a solution that really replaces the text in the HTML div, then you need solve that through javascript.
.div-1 {
position: absolute;
z-index: 1;
background-color: white;
width: 100px;
height: 20px;
margin: 0px 0px 0px 20px;
}
.div-2 {
position: relative;
z-index: 2;
background-color: white;
width: 100px;
height: 20px;
margin: 0px 0px 0px 20px;
animation-name: swap;
animation-duration: 5s;
animation-delay: 0;
}
#keyframes swap {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="div-1">Hello World</div>
<div class="div-2">World Hello</div>
</div>
</div>
</body>
</html>
I checked a lot of answers in SO and the most common solution was to set display for the div as table-cell or inline-block and put vertical-align: middle
So, accordingly the following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/ad.css" />
<title>Ad</title>
</head>
<body>
<div id="initial-div">
Check out our amazing offer
</div>
</body>
</html>
The CSS code is as follows
body {
overflow:hidden;
height:100%;
min-height: 100%;
width: 100%;
color: #ffffff;
background-color:aliceblue;
}
#initial-div{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
color: #000;
display: inline-block;
vertical-align: middle;
text-align: center;
background-color: #ffd800;
}
But, the text just does not seem to be centered vertically. Where am I going wrong here?
This would work:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/ad.css" />
<title>Ad</title>
</head>
<body>
<div id="initial-div">
<div>Check out our amazing offer</div>
</div>
</body>
</html>
body {
overflow:hidden;
height:100%;
min-height: 100%;
width: 100%;
color: #ffffff;
background-color:aliceblue;
}
#initial-div{
position:fixed;
height: 100%;
color: #000;
background-color: #ffd800;
width: 100%;
}
#initial-div div{
text-align: center;
position: relative;
top: 50%;
margin-top: -5px; /* height/2 */
}
http://jsfiddle.net/zpFym/
I have a certain problem and searched through a lot of questions to find a solution but I just can not seem to fix it. The problem is as following:
There is the main "wrapper" div on the page (for centering reasons), and inside this is some text, images and a number of includes (footer, header etc.). The images are using "position: absolute" and using the CSS "top" and "left" property to offset them. However, Firefox and Internet Explorer 7 seem to start their offset from a different point, meaning the most of the images are just about 10px lower and 10px more to the right in IE7
What I've done to make sure;
- validated my html with the W3C validator (fixed everything)
- tried to replace position:absolute; with some position:relative;
- The position of the wrapper has been set as position:relative;
- would rather not want to work with a a specific stylesheet just for IE7 (so didn't try that)
- PS: used meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" to let my IE8 browser shows my project like it was in IE7
I'm really hoping you could help me out! Thanks in advance and hereby i'm giving the corresponding HTML and CSS
HTML:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>
Document Title
</title>
<link rel='stylesheet' type="text/css" href="includes/mainmenu/Mainmenustyle.css"/>
<link rel='stylesheet' type="text/css" href="includes/header_main/header_mainstyle.css"/>
<link rel='stylesheet' type="text/css" href="includes/footer_main/footer_mainstyle.css"/>
<link rel='stylesheet' type="text/css" href="Homepagestyle.css"/>
</head>
<body>
<div id="bg"></div>
<div id="wrapper">
<div>
<!--#include virtual="includes/mainmenu/mainmenu.html" -->
</div>
<div>
<!--#include virtual="includes/header_main/header_main.html" -->
</div>
<div id="about_us" class="about_us">
<p>Some text.</p></div>
<span class="displace"></span>
<div id="aboutgreyhorsenl_title" class="aboutgreyhorsenl_title">
<img src="images/aboutnl_image.png" alt="About Greyhorse"/></div>
<div>
<!--#include virtual="includes/footer_main/footer_main.html" -->
</div>
</div>
</body>
</html>
CSS:
#wrapper{
position:relative;
z-index: 1;
margin:10px auto;
width:1100px;
}
#bg {
width: 100%;
height: 614px;
position: absolute;
top: 93px;
left: 0;
background-image: url(images/stripe.png);
background-repeat: repeat-x repeat-y;
background-attachment: scroll;
}
body {
background-image:url(images/Background_Homepage.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
.about_us {
display: block;
width: 420px;
height: 12px;
position: absolute;
left:290px;
top:-110px;
}
.aboutgreyhorsenl_title {
position: absolute;
top: 280px;
left: 400px;
}
a.rollover {
display: block;
width: 155px;
height: 115px;
text-decoration: none;
background: url("images/FotoAnne_thumbnail.png");
position: absolute;
left:735px;
top:-100px;
}
a.rollover:hover {
background-position: 775px 0;
}
.displace {
position: absolute;
left:287px;
top:-205px;
}
Thanks in advance again for anyone who could help me out!
the style.css file from the html5boilerplate will make all browsers have the same 'default' settings.. adding this css file to your site (as the first one to be loaded), might fix the issue.
http://html5boilerplate.com/
http://www.xs4all.nl/~peterned/examples/csslayout1.html
The tutorial above is essentially what I want with a white column that extends to the bottom of the browser. In the tutorial it actually begins at the very top, with the header being a different shade of grey covering the white.
My case, the header would have to match the textured background. So, what I want is to have the container begin below the header. I don't know if it is possible because right now my header pushes the container down.
http://andrew.x10.mx/adam/
html -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>for adam</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div id="container">
<br class="push"></br>
<div id="content">
<h1>Hi</h1>
</div>
</div>
</body>
</html>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
width:100%;
height: 49px;
background: #fff url("bg.png") repeat-x top left;
padding: 0;
}
.push {
width: 860px;
height: 49px;
margin: 0;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 860px;
text-align: left;
margin: 0 auto;
min-height:100%;
z-index:1;
}
#content { padding: 10px; }
Only tested it in Firefox, though. :)
Updated: feel free to validate. :)
Updated v2: Had a problem when adding content inside the container. Fixed now, but had to do some more complex-ish stuff.