471,570 Members | 926 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,570 software developers and data experts.

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

Death Slaught
1,137 1GB
I'm working on a web site, and every thing is fine except when I added the navagation bar......for some reason it pushes my navagation bar away from the border, which is odd because there's no reason it should be doing this. Here's the code:

[HTML]
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <style type="text/css">
  5.  
  6. body {
  7.   background-color:#000000;
  8. }
  9.  
  10. .main {
  11.   border:1px solid #e00000;
  12.   width:100%;
  13.   height:100%;
  14.   position:relative;
  15.   overflow:auto;
  16. }
  17.  
  18. .left {
  19.   float:left;
  20.   width:25%;
  21.   height:100%;
  22.   border-right:1px solid #e00000;
  23. }
  24.  
  25. .middle {
  26.   float:left;
  27.   width:50%;
  28.   height:100%;
  29. }
  30.  
  31. .right {
  32.   float:right;
  33.   width:25%;
  34.   height:100%;
  35.   border-left:1px solid #e00000;
  36. }
  37.  
  38. ul {
  39.   float:left;
  40.   margin:0 auto;
  41.   list-style-type:none;
  42. }
  43.  
  44. a {
  45.   float:left;
  46.   text-decoration:none;
  47.   color:#e00000;
  48.   background-color:#000000;
  49.   padding:0.2em 0.6em;
  50.   border:1px solid #e00000;
  51.   font-size:17px;
  52. }
  53.  
  54. a:hover {
  55.   float:left;
  56.   color:#000000;
  57.   background-color:#e00000;
  58.   border:1px solid #000000;
  59. }
  60.  
  61. li {
  62.   display:inline;
  63. }
  64.  
  65. </style>
  66. </head>
  67.  
  68. <body>
  69.   <div class="main">
  70.     <div class="left">
  71.  
  72.     </div>
  73.     <div class="middle">
  74.  
  75.       <ul>
  76.         <li><a href="#">Link 1</a></li>
  77.         <li><a href="#">Link 2</a></li>
  78.         <li><a href="#">Link 3</a></li>
  79.         <li><a href="#">Link 4</a></li>
  80.       </ul>
  81.  
  82.     </diV>
  83.     <div class="right">
  84.  
  85.     </div>
  86.   </div>
  87. </body>
  88.  
  89. </html>
Also when I add a DOC type to this it litteraly SQUISHES every thing together and then I don't have the navagation problem any more XD!

Here's the DOC type I'm using:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Thanks, Death
Nov 23 '07 #1
9 1642
drhowarddrfine
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
Death Slaught
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
drhowarddrfine
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
Death Slaught
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
Death Slaught
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
drhowarddrfine
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
Death Slaught
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
  1. .main {
  2.   width:100%;
  3.   height:100%;
  4.   border:1px solid #0000;
  5. }
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
drhowarddrfine
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
Death Slaught
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

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Michael Hagstrom | last post: by
1 post views Thread by [H]omer | last post: by
1 post views Thread by leegold | last post: by
354 posts views Thread by Montrose... | last post: by
476 posts views Thread by Xah Lee | last post: by
11 posts views Thread by Kent Feiler | last post: by
1 post views Thread by jimboBrown | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.