I have been working on a tab menu without adding the doctype statement. It works perfectly in my eyes but when I do place the <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> or any other type of Doctype, my layout completely messes up. Below are three pictures which describe
1.) Expanded Window (without doctype)
2.) Contracted Window (without doctype)
3.) Contracted Window (WITH doctype)
I'm using the :after pseudo to place the right side of the "sliding door" with the code snippet:
#nav li:after {
width:10px;
content:"";
background: url('tabRight.png');
position:absolute;
height:100%;
top:0;
right:-10;
}
I'm pretty new to web development so I have no idea what could be causing this. Any help at this point would be appreciated. Thanks!
HTML:
<div id="nav">
<ul>
<li id="dead">
<a href='javascript: toggle()'>
<div script="padding-left:5px;">
<img class="navImg" src="dead32.png" />
<p class="navTxt">Deadlines</p>
</div>
</a>
</li>
<li> About</li>
<li> Address</li>
</ul>
</div>
EDIT:
The right:-10; is causing the problem. If I set right:0; The layout is restored, however then this makes the "sliding doors" not work for me. The transparent edge from the right sliding door shows the grey background when it overlaps the left sliding door, which is not what I want.
No doctype == quirks mode. The layout behavior in the quirks/strict modes at times differs drastically.
IF you have written your code and css without adding DOCTYPE in you header. It means by default your browser is in quirks mode that means browser dont know how to render the elements. It is always necessary to add doctype in header because some browser like IE will messup your entire layout.
My suggestion is to add doctype transitional and start the code/css, this will be suitable for you and it will always helpful to solve browser compatibility issues.
Here is example by default dream weaver is creating when you create new HTML template.
<!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>Untitled Document</title>
</head>
<body>
</body>
</html>
The Document Type Definition defines how certain tags have to be interpreted by the browser. XHTML as a XML-based markup language is very strict and requires you to open and close your tags appropriately (also it is case-sensitive).
Probably your website doesn't follow the strict DTD rules, hence the differences in display.
As per my comment, I would recommend adding a Strict DTD (as you always should anyway) and code against that. Also, using a CSS reset selector is always a good rule of thumb
*{
margin: 0;
padding: 0;
}
Related
The problem is this - in Chrome, this page is saved as PDF correctly on one computer, and have issues on another.
I have this code:
<!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>Untitled Document</title>
<style type="text/css">
body
{
margin:0; padding:0;
}
.fullscreen
{
width:1156px;
height:893px;
float:left;
background:url(2.jpg) no-repeat;
}
.firstpage{background:url(1.jpg) no-repeat;}
.lastpage{background:url(3.jpg) no-repeat;}
#media print {
body {
width:1156;
height:893;
}
}
</style>
</head>
<body>
<div class="fullscreen firstpage"></div>
<div class="fullscreen"></div>
<div class="fullscreen lastpage"></div>
</body>
</html>
It's just 3 div's with 3 different background images (same size - 1156x893). On my home computer, everything is ok. There's no difference if I place #page{size:1156 893;} or size:auto, or (as in this case) I don't place it at all.
The problem is on my office computer, where no matter what I do, the size of the page in printing mode is always 1286x909, and the content is zoomed and goes out of the page. Am I missing something here or the problem is not in the page code at all? And if it's not in the code, where do I have to change something to make it right? If necessary, I can provide the 2 PDF files as well.
I'm using Windows 7 with last version of Chrome on both computers.
You need to implement a full css style for printing.
The code you wrote for printing is just for the body.
#media print {
body {
width:1156;
height:893;
}
}
Due to the absence of that css style, the browser is taking default values for the pdf. So it would be better if you create a whole css style for
You can check at this post to know how to do that.
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
Please, let me know if that worked out for you :)
I've read several posts on this subject and I've tried many of them but I cannot get my website to be centered in IE - specifically IE 8 (my current browser). It does work in FF, Safari and Chrome. www.hscassociates.net is the site.
In my css I'm doing this:
div#section {
width:960px;
margin:0 auto 0 auto;
border: 2px solid #b31b1b;
border-top:none;
}
Also, I have a background image I need in my #section div, but it will not show when I place it in my css file in the div#section block. In order to get it to show, I put it inside the in my includes file where I am displaying the #section div tag:
<div id="section" style="background-image:url('graphics/section-bg.gif');
background-repeat:repeat-y;">
One post I read said the html doctype needed to be using strict. I've never read that before. Any truth to that? I'm using transitional.
Your DOCTYPE should be the first tag on your page. Because it is not IE is rendering your page in what is known as quirks mode. The DOCTYPE itself doesn't need to be strict but what will happen is with a correct DOCTYPE the page will be rendered in strict mode instead.
What is quirks mode?
Because certain old browsers didn't meet W3C standards developers had to write non-standards compliant code to ensure their pages looked correct in these browsers. As browsers came closer to the standard the problem was that pages developed in the old style would no longer render correctly. So they implemented two modes of rendering, quirks and strict.
If the website supplies a DOCTYPE as the first argument this tells the browser that the page is written in standards compliant code and what specification to render against. So the browser can use strict mode to render the page.
However if the page omits a DOCTYPE then the browser does not know what specification to render against and therefore assumes the page is non-standards compliant (Which it automatically is for omitting the DOCTYPE) and renders it in quirks mode which can have unexpected results.
Here's what you need to do:
Change
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> triggers quirks mode.
If you want to use HTML 4 Transitional then use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
If you are not bound to HTML 4 then use <!DOCTYPE html>
Your page displays fine with both.
This page doesn't get the table styles from the style sheet. If I put the same styles in the page itself, they are applied. What could cause this? The css file name is correct and is read by other pages.
<!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>
<title>Pagelinks | Known Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="pagelinks_windows.css" />
<!-- style>
#known_issues th, #known_issues td {
font-size: 13px;
text-align: left;
}
</style -->
</head>
<body>
<h1>Known Issues</h1>
<p>
Known bugs and issues are listed here.</p>
<table id="known_issues">
<tr><th>Tracking No.</th><th>Category</th><th>Description</th><th>Status</th><th>Workaround</th></tr>
<tr><td>plt001</td><td>Site</td><td>Site navigation broken on Internet Explorer 8</td><td>Closed</td><td>None. That browser version has a major bug involving javascript objects. Users must upgrade to Internet Explorer 9.</td></tr>
<tr><td>plt002</td><td>Site</td><td>Saints and feasts do now show description</td><td>Open</td><td>None. The description data for the Saints and the feasts is being compiled.</td></tr>
</table>
<br/>
<br/>
Test if the content of the css file is visible.
Try to open it in the browser.
Common possible error when letters-case (A\a and so on) in file-names differs - this willn't work on *nix hosting servers, ever if it worked localy on windows.
Another common situation: when is error in path to file from current file-directory.
Are your stylesheets in the same root directory as this html file? Common practice is to put stylesheets, js, includes, etc into different directories. Perhaps you follow this convention and simply forgot href="css/pagelinks_windows.css"? Hard to find the answer to your problem without much more information but it's usually something small you're missing. One of those that you end up with a forehead-slap once you find it :)
What does your stylesheet look like?
I think you might have some conflicting css, try adding your table style at the VERY bottom of pagelinks_windows.css
I'm really struggling with a page that looks great in Firefox and Chrome, but looks like absolute crap in IE.
I am clearly missing something, but I am not extremely familiar with the compatibility issues between browsers when it comes to CSS. Can anyone give me a tip?
Page with the issue.
the index page looks fine! which really is throwing me for a loop...
Thanks in advance
Your page has no doctype, so IE is falling back to quirks mode.
Try adding this above the html tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
First of all this is a malformed HTML <head> <body> </head> <body>, make it <html> <head> <scripts .../></head> <body> </body></html>. This will make your second page look like first one.
I added an XHTML DTD to fix the center alignment
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. This will make your first page also look more like chrome and Firefox.
Finally you are using HTML5 tags <header> and <nav>. HTML5 is not fully supported in IE, firefox chrome supports it partially. I would rather be skeptical in using them now or at least test in all browsers. Although I see you have added one js for simulating HTML5 in IE. Put that js before body. But its interesting how it simulates HTML5 :).
Are you using a CSS reset? This is the CSS reset I'm using: http://meyerweb.com/eric/tools/css/reset/ but there are other variations that are useful too.
Will help fix most browser incompatibility issues. ;)
I want to fit my website in IE .I want to know how i give the name of css selector in IE like firefox.Please help me!
i did'nt undersatnd your question "name of css selector in IE",but if you have to assign the css on selector p use like (<p>hello everyone</p>) this
p {
border:1px solid red;
font-size:24px;
}
always call your ie css file AFTER any other css so it overwrites any previous methods.
if you're still having problems, you can force a css definition to take priority with !important.
Without important, the div background would be blue, because that's the last declaration made
#mydiv{
background-color:green;
}
#mydiv{
background-color:blue;
}
now, using !important, you can force priority. the background will be green regardless of the order of declaration:
#mydiv{
background-color:green !important;
}
#mydiv{
background-color:blue;
}
if you're looking for css hacks for IE (not recommended, though sometimes essential), you can get more information from this excellent article.
hope this helps!
There is nothing wrong with the CSS code that you have shown so far, so repeating it in a style sheet specific for IE will not make any difference at all.
Generally you don't need a separate style sheet for IE. There are some rendering bugs in IE that you may have to circumvent, but that can almost always be done by tweaking the current CSS and HTML.
To find out what you need to do to make it work in IE, you should try to find the reasons for the differences. Most CSS is exactly the same, so if you don't see the effect in the page it's usually because the element is not where you think it is or doesn't have the size that you think it has. If for example the height of an element is zero, you will obviously not see it's background color.
First make sure that the page has a proper doctype, so that it doesn't render in quirks mode. This is important to make it work as close to the standards as possible in IE.
Open the error console in Firefox and view the page. It will tell you if you have any errors in the CSS code. There are standards for how to render correct code, but there is no standards for how to handle incorrect code, so if you have any errors you will get widely different results between browsers.
The plugin FireBug in Firefox is useful for seeing exactly which styles affect each element in the page, and you can even edit the CSS and see the result immediately. There is a similar tool built into IE 8 called Developer Tools. For IE 7 you can install Developer Toolbar that gives you some of this functionality. Each tool will allow you to select an element in the code and shows you exactly where it is on the page.
To fix your website in firefox and IE you can use the below methods.
Method 1:
You can use the "if condition" that you have used. You need to mention the version of IE in the if statement. See the code below
<!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>Browser Detection Example</title>
<style type="text/css">
body{ background:blue}
</style>
<!--[if IE 6]> <!-- for ie 6 browser -->
<style type="text/css">
body{ background:red}
</style>
<![endif]-->
<!--[if IE 7]> <!-- for ie 7 browser -->
<style type="text/css">
body{ background:red}
</style>
<![endif]-->
</head>
<body>
</body>
</html>
Method 2:
You can use the css hack inside the css code itself. No need to use a separate css file. You can code in the same css. See the example below
<!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>Untitled Document</title>
<style type="text/css">
body{ background:blue; _background:orange;}
</style>
</head>
<body>
</body>
</html>
Note : prefix "_" before the css code it will get render in ie6...
Check out !!!
regards,
Logesh Paul