How prevent spaces in between Div ID's in IE [Archive]

MontyV

08-28-2006, 09:13 PM

I have my page seperated simply by header, mainbody and footer. The problem though is I get spaces in between my Div ID's when viewing in IE. It looks fine in Firefox but IE places spaces in between. I current have my Div's also to margin:0; padding:0; border:none; Am I missing something that will help with IE?

Did not throw up codes because it didn't seem necessary but I can throw it up if necessary.

Thank You

- Monty

Rossario123

08-28-2006, 09:15 PM

throwing it up would be nice...

:)

MontyV

09-04-2006, 02:21 PM

Sorry it took so long but here it is. Bare with me because I have been learning at the same time and I have cleaned up the code as I find more problems.

<body>

<div id="page">
<div id="header">

<img src="Images/Header.jpg" alt="Dynasty Suites" />

</div>



<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="explore.html">Explore</a></li>
<li><a href="oursuites.html">Our Suites</a></li>
<li><a href="meeting.html">Meeting Room</a></li>
<li><a href="ourvalues.html">Our Values</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
</div>



<img src="Images/HomeImage.jpg" />



<div id="footer">

<h1><a href="contactus.html">Contact Us</a> | 888-348-4828</h1>

</div>



</div>
</body>

/* CSS Document */

body,html {
margin:0;
border:0;
padding:0;
}

body {
/* top-margin:10px; */
font-family:Arial, Helvetica, sans-serif;
background-color:#fff;
}

#page {
margin-top:1em;
margin-bottom:1em;
margin-left:auto;
margin-right:auto;
padding:0;
/* border: solid #5b5600 1px; */
height:auto;
width:800px;
background-color:#fff;
}

#header {
margin: 0;
padding: 0;
border:0;
height:200px;
width:100%;
}

/*Navigation*/

div#navbar {
margin:0;
padding:0;
height: 30px;
width: 100%;
border:none;
background-color: #5b5600;
}
div#navbar ul {
margin: 0px;
padding: 0px;
border:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar li {
list-style-type: none;
display: inline;
}
div#navbar li a {
text-decoration: none;
padding: 7px 36px;
color: #FFF;
}
div#navbar li a:link {
color: #FFF:
}
div#navbar li a:visited {
color: #FFF;
}
div#navbar li a:hover {
font-weight: bold;
color: #FFF;
background-color: #b0720d;
}

/*Home Page*/

#mainbody {
margin:0;
padding:0;
border:none;
width:100%;
font-family:Arial, Helvetica, sans-serif;
}

img#booknow {
margin:10px;
padding:10px;
border: solid 2px #5b5600;
float:right;
}

img#property {
margin:0;
padding:10px;
border:none;
text-align:center;
}

#maintext {
margin:0;
padding:10px 0;
border:none;
}

#maintext img {
margin:0;
padding:10px 0;
text-align:left;
}

#maintext h1 {
margin:0;
padding:10px 0;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:14px;
color:#5b5600;
}

#maintext h2 {
margin:0;
padding:5px 0;
text-align:left;
font-size:14px;
font-style:italic;
text-decoration:underline;
}

#maintext p {
margin:0;
padding:5px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

#maintext a {
color: #A75F15;
}

/*Our Suites */

/*Meeting Room*/

#mcontainer {
margin:0;
padding:0;
border:0;
width:100%;
height:401px;
text-align:left;
}

img.leftbody {
margin: 0 3px 0 0;
padding:0;
border:none;
float:left;
}

.middlebody {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

p.middlebody {
margin:1em;
padding:0;
border:none;
float:left;
display:inline;
width:275px;
}

img.rightbody {
margin: 0 0 0 3px;
padding:0;
float:right;
border:none;
width:auto;
height:auto;
}

/* Contact Us */

#contactbody {
margin:auto;
padding:0;
border:none;
width:75%;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}

#contactus img {
margin:0;
padding:10px;
border:none;
text-align:center;
}

#contactus h1 {
margin:0;
padding:10px;
border:none;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
font-size:16px;
font-weight:bold;
}

#contactus h2 {
margin:0;
padding:5px 10px;
text-align:center;
font-size:14px;
font-style:italic;
text-decoration:underline;
}

#contactus h3 {
margin:0;
padding:5px;
text-align:center;
font-size:13px;
font-weight:100;
}

#contactus p {
margin:0;
padding:5px 10px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

/* Footer */

#footer {
margin:0;
padding:0;
border:none;
background-color:#5b5600;
height:100px;
width:100%;
}

#footer h1 {
margin:0;
padding:5px 10px;
border:none;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-weight:100;
font-size:16px;
float:right;
}

#footer a {
text-decoration:none;
color:#fff;
}

Kravvitz

09-04-2006, 02:42 PM

Which doctype are you using?

These may answer your question:
http://garyblue.port5.com/webdev/object-gap.html
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

MontyV

09-04-2006, 03:18 PM

Which doctype are you using?

These may answer your question:
http://garyblue.port5.com/webdev/object-gap.html
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

I'm not too comfortable in choosing what DOCTYPE but I have always used this one. I know I need to read up on this more but here it is.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Kravvitz

09-04-2006, 10:16 PM

That's better than some, however, it's best to use HTML 4.01 Strict or XHTML 1.0 Strict.

Here's some articles on this subject, if you're interested:
Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/)
Fix Your Site With the Right DOCTYPE! (http://www.alistapart.com/articles/doctype/)
Choosing a DOCTYPE (http://www.juicystudio.com/choosing-doctype/)
Use the Right Doctype (http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html)
Doctype switching (http://www.webdevout.net/doctype_switching.php)
Rendering Mode and Doctype Switching (http://www.communitymx.com/content/article.cfm?cid=85FEE)
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

MontyV

09-05-2006, 02:35 PM

That's better than some, however, it's best to use HTML 4.01 Strict or XHTML 1.0 Strict.

Here's some articles on this subject, if you're interested:
Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/)
Fix Your Site With the Right DOCTYPE! (http://www.alistapart.com/articles/doctype/)
Choosing a DOCTYPE (http://www.juicystudio.com/choosing-doctype/)
Use the Right Doctype (http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html)
Doctype switching (http://www.webdevout.net/doctype_switching.php)
Rendering Mode and Doctype Switching (http://www.communitymx.com/content/article.cfm?cid=85FEE)
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Ok I have used the various DOCTYPE options for 4.01 and 1.0 Strict and I am still having the same issues with IE.

Kravvitz

09-05-2006, 10:21 PM

A doctype is not a magic fix. It is the first step in the process of fixing your page. You should write your code to a doctype, not pick a doctype that fits your code.

Like the two articles on gaps suggest, I suggest you apply display:block to the <img>s.

I suggest you learn how semantics apply to X/HTML. (http://www.dynamicsitesolutions.com/html/semantics/)