Nav getting pushed over, and Wierd "Squish" effect when DOC type is added.

**drhowarddrfine** · Nov 23 '07, 11:48 PM

when I add a DOC type

When you add one? The doctype is the very first thing to go on every web page before anything else is started. It's never an afterthought.

Also, there is no need for the transitional doctype on new web pages.

when I added the navagation bar......for some reason it pushes my navagation bar away from the border

Which border? The edge of the screen or some other border?

**Death Slaught** · Nov 26 '07, 12:46 PM

Originally posted by drhowarddrfine

When you add one? The doctype is the very first thing to go on every web page before anything else is started. It's never an afterthought.

Also, there is no need for the transitional doctype on new web pages.
Which border? The edge of the screen or some other border?

I'm doing this for some extra credit at school, therefor, the DOC isn't needed, i was just curious if it would work with it. Also if it were a real web site I was making I would have added a DOC type first.

Sorry for not specifieing which border I ment, it was the right border in my "left" div. I solved the problem though, I'de forgotten to add "margin:0;" to my "ul".

Does IE add margins by default? If not why did it push my nav over?

Thanks, Death

**drhowarddrfine** · Nov 26 '07, 01:41 PM

A doctype is REQUIRED. It is never an option. This isn't 1996. Tell your school that.

Without a doctype, IE is in quirks mode and uses the wrong box model so margins are in the wrong place. This is why you will never get IE to act like a modern browser without one.

**Death Slaught** · Nov 26 '07, 05:41 PM

Originally posted by drhowarddrfine

A doctype is REQUIRED. It is never an option. This isn't 1996. Tell your school that.

Without a doctype, IE is in quirks mode and uses the wrong box model so margins are in the wrong place. This is why you will never get IE to act like a modern browser without one.

I know that I'm not stupid.

I'm doing this site for extra credit in art, because web design is considered art.
Also it's hard for me to tell my school anything because:

1.It's a high school with 0 computer programming classes.
2.I know more than the webmaster for the schools site does.

This site will go up long enough for the teacher to see it then I'm taking it off.

In 1996 I was 4, and IE wil never act like a "modern" browser, doctype or not (atleast not if Microsoft continues there way of thinking).

Thanks, Death

**Death Slaught** · Nov 26 '07, 09:58 PM

I have a few question regarding IE (I know your very busy, and that you only have a short amount of time to answer someones question, but could you take a little time to explain instead of just spitting out what your saying, that way it becomes a learning experience).

1. Why does Microsoft continue to allow IE to be behind the other browsers?

2. Why is it that when a DOC type is added the height property no longer works?

3. Also why is it when a DOC type is added that the bottom border is pushed down below everything else.

4. When I add text to the code above, put in the "middle" div, and give it a "margin-left:45px;" (it's in it's own div), another scroll bar apears next to the right border in the "main" div, and nothing goes below the bottom border, it scrolls through it. However, when I add a DOC type it gets rid of this and increases the length/height of the page. Is there any way to get back to the way it was, with the 2nd scrollbar?

5. Why does it seem like every time I do something with a DOC type it makes everything worse?

Thanks, Death

**drhowarddrfine** · Nov 26 '07, 10:41 PM

Originally posted by Death Slaught

I have a few question regarding IE (I know your very busy, and that you only have a short amount of time to answer someones question, but could you take a little time to explain instead of just spitting out what your saying, that way it becomes a learning experience).

You already answered your own question. When I have time, I do. Right now, and the next few months, I'm under a lot of pressure.

1) To become standards compliant means you don't need their browser/software to do what you want to do. So they can't sell you something. That's why they create things like JScript, which is their proprietary, non-standard version of javascript, and XAML, which is their version of XML (sort of) but not standard. And C# and on and on.

In addition, IE is tied into the Windows operating system. It gets the name Internet "Explorer" because it originally was closely tied into OS components of Windows "Explorer". In addition, it is tightly integrated into their Office apps, Outlook, etc. and pretty much document-centric. But that also conflicts with web standards, which are based on publishing standards (SGML and such).

So they can say, "You have to use our browser if you want to work with our OS, and other software because, look, Opera can't do ActiveX. Neither can Safari or Firefox (not true anymore). So how are your applications going to work if you don't use IE? (Fear, Uncertainty, Doubt) And, of course, you'll have to buy Word and Visual Studio to make that all work together, too, at $400 to $2000 a pop.

Or, they could buy Opera and make it their flagship browser.

2.Height works just fine. I don't know why you say this is a problem. Height does not work correctly in IE. IE treats height as 'min-height'. And, as you might expect, min-height doesn't work at all in IE.

3. I never work without a doctype but I don't know why you would have this problem either, except that without a doctype, IE puts margin in the wrong place. So instead of being inside the width of your element, it's on the outside.

4. Same answer. Anytime you try and compare markup with and without a doctype, you are talking apples and oranges. Always use a doctype. Not using a doctype and trying to figure out what's wrong is like showing me an invalid page and asking what's wrong. In fact, without a doctype a web page is invalid.

5. Impossible. It can't be worse because html and css are based on your using a doctype. Few things work as they should if you don't use one.

**Death Slaught** · Nov 27 '07, 03:36 PM

(I know your very busy, and that you only have a short amount of time to answer someones question, but could you take a little time to explain instead of just spitting out what your saying, that way it becomes a learning experience).

I ment this as a statement not a question, that's why I put it in parenthesis, and the actuall questions numbered.

I say height is a problem because.....wel l take this for example:

Code:

.main {
  width:100%;
  height:100%;
  border:1px solid #0000;
}

I guess I ment it doesn't work with percentages (it does with pixels), but using this will not stretch it across the page.

3. I never work without a doctype but I don't know why you would have this problem either, except that without a doctype, IE puts margin in the wrong place. So instead of being inside the width of your element, it's on the outside.

It's funny because I only have the problem when I do have a DOC type. Try this out, and you'll see what I meen.

[HTML]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">

body {
background-color:#000000;
}

.main {
border:1px solid #e00000;
width:100%;
height:100%;
position:relati ve;
overflow:auto;
}

.left {
float:left;
width:25%;
height:100%;
}

.middle {
float:left;
width:50%;
height:100%;
border-left:1px solid #e00000;
border-right:1px solid #e00000;
}

.right {
float:right;
width:25%;
height:100%;
}

ul {
float:left;
margin:0;
list-style-type:none;
}

a {
float:left;
text-decoration:none ;
color:#e00000;
background-color:#000000;
padding:0.2em 0.6em;
border:1px solid #e00000;
font-size:17px;
}

a:hover {
float:left;
color:#000000;
background-color:#e00000;
border:1px solid #000000;
}

li {
display:inline;
}

.heading {
margin-top:80px;
margin-left:200px;
color:#e00000;
}

.contents {
color:#e00000;
margin-left:45px;
}

</style>
</head>

<body>
<div class="main">
<div class="left">
</div>
<div class="middle">

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

<div class="heading" >
<h1>Title</h1>
</div>
<div class="contents ">

<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>

<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>

<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>

</div>
</diV>

<div class="right">
</div>
</div>
</body>

</html>[/HTML]

Take off the DOC type and add about 10 more of the paragraphs, and you'll see what I ment on #4.

without a doctype a web page is invalid.

I know that, but is there a way to get the same effect as without a DOC type?

5. Impossible. It can't be worse because html and css are based on your using a doctype. Few things work as they should if you don't use one.

Well then some things should work the way they do without a DOC type.

Thanks, Death

**drhowarddrfine** · Nov 27 '07, 04:50 PM

You still aren't getting it. The doctype is the set of rules you are following. Without a doctype, you are following one set of rules. With one, you are following a different set of rules and the "type definitions" are changed.

It's like playing a baseball game and one person doesn't know you are playing baseball and follows softball rules. It works pretty much the same but there are differences that mess you up. Once you tell the other person that it's softball and not baseball, then you are all on the same set of rules and everything acts the same.

No doctype is quirks which is a Microsoft bugnot any standard! Never use quirks!

**Death Slaught** · Nov 27 '07, 05:36 PM

Ok I get it now, but my main consern was wether or not it was possible to get the same output.

Thanks Alot, Death

Nav getting pushed over, and Wierd "Squish" effect when DOC type is added.

Nav getting pushed over, and Wierd "Squish" effect when DOC type is added.

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment