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

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

 
<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%;

  border-right:1px solid #e00000;

}
 
.middle {

  float:left;

  width:50%;

  height:100%;

}
 
.right {

  float:right;

  width:25%;

  height:100%;

  border-left:1px solid #e00000;

}
 
ul {

  float:left;

  margin:0 auto;

  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;

}
 
</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>

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

  </div>

</body>
 
</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

 <!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Thanks, Death

Nov 23 '07 #1

Subscribe Reply

1807

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

 .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

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

Similar topics

3322

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 Children aged 4 to 12 4) Number of Children under age 4

Javascript

1533

Opinions of my first CSS effort

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 sizes, but I just can't seem to

HTML / CSS

1835

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 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. I have the code below - you'll see. Thanks

HTML / CSS

354

15927

c# is a good way to learn c

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.

.NET Framework

7632

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 away to do that with this code: <p>a</p> <ul style="margin-top: -20; padding-top: 0"> <li>1</li>

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 be morons, they must be

Python

2219

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 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 internet samaritan and not use frames, what's the best way to replace that function?

HTML / CSS

1729

fun with casting

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 ){

C / C++

9645

What is ONU?

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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9480

Changing the language in Windows 10

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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10147

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10090

The easy way to turn off automatic updates for Windows 10/11

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 most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9949

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8971

AI Job Threat for Devs

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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5380

Trying to create a lan-to-lan vpn between two differents networks

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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3645

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2879

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General