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

7,435

Expert 4TB

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?

Nov 23 '07 #2

1,137

1GB

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

Nov 26 '07 #3

7,435

Expert 4TB

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.

Nov 26 '07 #4

1,137

1GB

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

Nov 26 '07 #5

1,137

1GB

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

Nov 26 '07 #6

7,435

Expert 4TB

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.

Nov 26 '07 #7

1,137

1GB

(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.....well take this for example:

Expand|Select|Wrap|Line Numbers

 .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:relative;
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

Nov 27 '07 #8

7,435

Expert 4TB

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!

Nov 27 '07 #9

Opinions of my first CSS effort

1,137

1GB

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

Thanks Alot, Death

Nov 27 '07 #10

Similar topics

Help With A Calculation

by: Michael Hagstrom | last post by:

Good Day - I have written a form which collects input for a fare calculation. The form collects the following: 1) Departure or Destination Group (1,2,or 3) 2) Number of Adults 3) Number of...

Javascript

by: [H]omer | last post by:

Sorry for the cross-post, but I'm looking for criticism *and* advice. http://www.genesis-x.nildram.co.uk/index.html and http://www.genesis-x.nildram.co.uk/css/gx.css BTW: The site *is* a bit...

css position element in a link - help

by: leegold | last post by:

I have a "see details" link over in the bottom right of a table cell - exactly were I want it. But when I resize the browser window to make it smaller and squish it together the link does not stay...

c# is a good way to learn c

354

by: Montrose... | last post by:

After working in c# for a year, the only conclusion I can come to is that I wish I knew c. All I need is Linux, the gnu c compiler and I can do anything. Web services are just open sockets...

.NET Framework

CSS for All Elements (Bullets <UL> <LI>) Without <DIV ID="">

by: Shaun | last post by:

Hello! I have a quick question regarding CSS and having it applied to all elements. I am trying to eliminate the gap between a paragraph and a list that usually occurs in html and I've found...

476

Microsoft Hatred FAQ

by: Xah Lee | last post by:

Microsoft Hatred, FAQ Xah Lee, 20020518 Question: U.S. Judges are not morons, and quite a few others are not morons. They find MS guilty, so it must be true. Answer: so did the German...

Python

Javascript and Frames

by: Kent Feiler | last post by:

One thing I like about frames is that they're a good place to stow Javascript. Javascript that I'd like to be around while the visible content of the screen changes goes in the frame declaration...