• Registered: December 23, 2008
  • Posts: 119

Topic: Extra Vertical Space Question

Attached is a test with a CSS text definition and an hr definition in an HTML file.  In Firefox Chrome and Safari, the behavior is what I expected.  In IE there is a large gap between the two elements.  Does anyone know of a way to change the behavior in IE?  I suspect this line spacing has already been noticed and worked around.

Here are the browser versions that I am using:
Browser  Version:
IE       8.0.60001.18372
FF       3.0.7
Safari   3.2.2
Crome    1.0.154.48

I have not tested this on IE 7, if anyone uses that please test for me although I suspect this behavior is a legacy from earlier code.


Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
<style>
    hr {
    border: 0;
    margin: auto;
    background-color: #CD853F;
    height: 3px;
    width: 80%;
}
.rightContentHeader{
    text-align: center;
    margin: auto;
    width: 518px;
    padding-top: 1em;
    font-family: Constantia, "Lucida Bright",
                 Lucidabright, "Lucida Serif",
                 Lucida, "DejaVu Serif",
                 "Bitstream Vera Serif",
                 "Liberation Serif", Georgia, serif;

    font-size: 20pt;
    color: black;
    font-weight: bold;
    text-decoration: none;
}
</style>        
    </head>
    <body>
        <p class='rightContentHeader'> Web Design and Development  </p>
        <hr>
    </body>
</html>

Thanks for your assistance
WBR

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,329

Re: Extra Vertical Space Question

Edit <style> to <style type="text/css"> (not related to the problem)
and edit
.rightContentHeader{
    text-align: center;
    margin: 0 auto; /*auto;*/.......................

IE 7 was adding a margin to the bottom, 0 auto means that top and bottom wil be 0 and sides auto. You are using IE8 which has not been released for general public use yet, so not many users will be using it, but it is more similar to Firefox than IE7 although there are still plenty of bugs.

HR is surprisingly difficult to get right when only a few px high as browsers display it differently, some give it a border, some don't, some use background-color, others use color. Experts recommend not using hr but to use a div with a class instead with a background-color: #xxxxxx; height: ?px; line-height: ?px; font-size: ?px; border: 0; or a background-image instead of the color which will be displayed the same way in different browsers. See
http://w ww.wickham43.net/generaladvice.php#horizontalrule for some comments and a div alternative.

Vote up Vote down

  • Registered: December 23, 2008
  • Posts: 119

Re: Extra Vertical Space Question

Thanks Wickham!
I was just heading off to sleep, but I will study your notes and implement later.
I am aware that I am using a Release Canditate for IE, but I am much too impatient to work with 7 and was hoping that IE 8 was further along that it actually is.  Ever the dreamer.
WBR

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 526

Re: Extra Vertical Space Question

Isn't there a setting in IE8 to have the Browser work like an IE7 release?

Don't know for sure, I am on Linux and it doesn't play well with IE... tongue

My signature goes here --> X

Vote up Vote down

  • Registered: December 23, 2008
  • Posts: 119

Re: Extra Vertical Space Question

I don’t know if there is a setting, but under certain conditions, if the browser thinks the HTML is old, it throws it’s self in to “Compatibility Mode.”

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,329

Re: Extra Vertical Space Question

The code is
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
which must be put just after the <head> tag, lower down the head section may not work.

However, I understand that this may be just a temporary code for IE8 beta 2 and RC1 and may be withdrawn in the final IE8 version, so it's best to try to get IE8 RC1 to work properly without it.

Vote up Vote down

  • Registered: December 23, 2008
  • Posts: 119

Re: Extra Vertical Space Question

I'll give it a try.

Vote up Vote down