CODEWITHSUNDEEP
css
Ryan K
Ryan K

Reputation: 11

IE - Unintended Vertical Space in Between Divs

I am making a layout with divs stacked on top of each other for the top navigation/banner. The layout looks fine in Firefox/Chrome/Opera but in IE there are spaces underneath each div in the top navigation.

I tried using 'clear: left' for each new line in hopes that it would delete the spaces but that did not work. Any help would be appreciated.

URL: Maggio Layout

Upvotes: 1

Views: 723

Answers (5)

Coding With Style
Coding With Style

Reputation: 1692

The lack of a valid DOCTYPE declaration causes IE to render the page in Quirks Mode. As a result, for whatever reason, some version of IE's dreaded three pixel bug is active in full force and padding out your DIVs. The easy solution is to just specify a DOCTYPE and hope nobody will be watching from IE6 or worse. Otherwise, it will take some special hacks. For instance, you can add some conditional CSS to reduce margins by 6 pixels, like this:

<div id="wrapper">
 <div id="top"></div>
 <div id="philleft"><a href="#"><img src="philleft.jpg" alt="" /></a></div>
 <div id="philright"></a></div>
 <div id="philbelowleft"><img src="philbelowleft.jpg" alt="" /></div>
 <div id="philbelowright"></div>
 <div id="techleft" style="margin-top:-6px"><a href="#"><img src="techleft.jpg" alt="" /></a></div>
 <div id="techright" style="margin-top:-6px"></div>
 <div id="techbelowleft"><img src="techbelowleft.jpg" alt="" /></div>
 <div id="techbelowright"></div>
 <div id="testleft" style="margin-top:-6px"><a href="#"><img src="testleft.jpg" alt="" /></a></div>
 <div id="testright" style="margin-top:-6px"></div>
 <div id="testbelowleft"><img src="testbelowleft.jpg" alt="" /></div>
 <div id="testbelowright"></div>
 <div id="locationleft" style="margin-top:-6px"><a href="#"><img src="locationleft.jpg" alt="" /></a></div>
 <div id="locationright" style="margin-top:-6px"></div>
 <div id="locationbelowleft"><img src="locationbelowleft.jpg" alt="" /></div>
 <div id="locationbelowright"></div>
 <div id="rightbanner"></div>
 <div id="content">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
 Lorem ipsum dolor sit amet, consectetur adipisit, incididunaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inlum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
 Lorem ipsum dolor sit amesed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
 <div id="bottom"></div>
</div>

Just remember to make sure your implementation of it would actually be conditional. Or, you can toss the entire book of modern coding practices out of the window and format the page with tables instead of DIVs and CSS. This way you can be comfortably assured everything will line up properly while making any standards adherent reading your code want to bang his or her head against a brick wall (which your lack of doctype, html, head, and body tags is already accomplishing admirably). If you choose to go down this route, I recommend you uppercase all your HTML code.

If I were you, I would just specify a doctype and add the following code to all your pages:

<script>if (document.all && Number(navigator.userAgent.split("MSIE ")[1].split(";")[0])<7) alert("You are using an outdated version of Internet Explorer. Please update to version 7.0 or newer for the page to display properly.")</script>

With any luck, the popups on every single page will get them to either update or give up on visiting your site completely.

Upvotes: 0

Rob
Rob

Reputation: 15160

You will never get IE to attempt to perform like the other far more modern browsers without a proper doctype. Put this on your first line and see where we stand:

Upvotes: 0

malonso
malonso

Reputation: 2295

IE is really weird about having spaces in between tags (e.g. between a closing div and the next opening tag). Also you have an orphan closing A tag in your philright div.

Upvotes: 1

Sonny Boy
Sonny Boy

Reputation: 8016

Try removing those empty divs if they're not needed. If they are needed, set the line-height, font-size, and padding to all be 0.

Upvotes: 0

Sampson
Sampson

Reputation: 268344

You're missing a lot of essential HTML, starting with a valid doctype. Once you have this essential markup into place, many (if not all) of your errors may vanish. You can verify your markup by visiting the w3c validation service online at: http://validator.w3.org/

Use the following as a template:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Website Title Here</title>
  </head>
  <body>

    <!-- Body Content Here -->

  </body>
</html>

Upvotes: 4

Related Questions