473,561 Members | 3,641 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

Death Slaught
1,137 Top Contributor
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 1796
drhowarddrfine
7,435 Recognized Expert Expert
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 Top Contributor
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 Recognized Expert Expert
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 Top Contributor
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 Top Contributor
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 Recognized Expert Expert
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 Top Contributor
(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:

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: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
Nov 27 '07 #8
drhowarddrfine
7,435 Recognized Expert Expert
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 Top Contributor
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

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

Similar topics

5
3314
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 Children aged 4 to 12 4) Number of Children under age 4
1
1524
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 OTT; yes I'm a raving fanatic ... :) Content aside though, there's a few things I still don't like: 1) ... I shouldn't be using literal font...
1
1824
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 in its cell but goes left crashing into content. How do I keep it wrapping but still hugging the right wall of the rightmost cell? Using Mozilla....
354
15561
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 hooked up to interfaces. The Gtk is more than enough gui.
2
7624
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 away to do that with this code: <p>a</p> <ul style="margin-top: -20; padding-top: 0"> <li>1</li>
476
18183
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 population thought Jews are morons by heritage, to the point that Jews should be exterminated from earth. Apparently, the entire German population cannot...
11
2207
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 HTML file. It never needs to be reloaded and JS variables can be updated there as the visible screens progress. But...if I want to be a good...
1
1719
by: jimboBrown | last post by:
Hello All, I'm trying to do a simple c program that will squish together several char arrays to create one large char array. I'd like to be able to take "abc" "defg" "hijk" and create "abcdefghijk". Here's what I have so far: void squishChars(char *final, char *array ){
0
7648
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7573
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
1
7620
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7931
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6213
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5473
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3618
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2069
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1184
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.