firefox vs IE display:block problem

webdorx

newbie

Posts: 5
Joined: 2005-02-08

Posted: Tue, 2005-02-08 06:45

I've been dealing with this problem for a few days now.
I have a xhtml 1.1 site that is using a unordered list as a navigation bar.

I can get this work in firefox, but it dosn't work in IE.. if i get it to work in IE, well you can guess what happens...

Here is the html: http://www.webdorx.com/test/index.html
and the css: http://www.webdorx.com/test/css/nav.css

I actually took a majority of the nav.css straight from w3c's web site, and still ran into problems.

I have the site in a 600px container. 5 list items so it works out to about 120px per link.

they either come out a pixel or 2 too short, and you can see the background on the right side, Or
a pixel or 2 too long, and it wraps to a 2nd row...

im sure theres a better way to do this.

gary.turner

Moderator

Posts: 6417
Joined: 2004-06-25
Location: Dallas

firefox vs IE display:block problem

Posted: Tue, 2005-02-08 17:09

OK, there's no reason to worry about IE. If you use xhtml1.1, IE can't parse it. Since your header says it's text/html instead of application/xhtml+xml, IE treats it as tag soup.

Remove the xml declaration. It is optional and it puts IE into quirks mode, which is, I think, from where your problem comes.

Back off to xhtml1 which may be served as tex/html. For an example of xhtml1.1 delivered as application/xhtml+xml, look at this XHTML Doc in Moz/Firefox and Opera which are modern browsers and in IE which isn't.

In Moz or Ff, see Web Developer ⇒ Information ⇒ View Response Headers. You'll see the actual content type the browser responds to.

cheers,

gary

A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.

There are enough html & css demos and tutorials to be interesting. Please visit.

webdorx

newbie

Posts: 5
Joined: 2005-02-08

firefox vs IE display:block problem

Posted: Sun, 2005-02-13 00:55

hmm.. i tried changing the content type to applic..... but nomatter what i did going to Tools->web developer->info->view response headers kept on showing text/html.

any way. I did what you suggested and droped down to xhtml1.0 but didn't notice the slighest bit of a difference.
removing the xml 1.0 dec at the top didn't do too much.. IE moved some of my text down about 1/4 inch.

The page now successfully vaildates as xhtml 1.0 Strict.

gary.turner

Moderator

Posts: 6417
Joined: 2004-06-25
Location: Dallas

firefox vs IE display:block problem

Posted: Sun, 2005-02-13 08:24

webdorx wrote:

hmm.. i tried changing the content type to applic..... but nomatter what i did going to Tools->web developer->info->view response headers kept on showing text/html.

It requires the server to be configured to deliver MIME type application/xhtml+xml to get the proper header. Did you check out the page I referenced?

Quote:

any way. I did what you suggested and droped down to xhtml1.0 but didn't notice the slighest bit of a difference.
removing the xml 1.0 dec at the top didn't do too much.. IE moved some of my text down about 1/4 inch.

Yeah, that doesn't necessarily fix things, but it does make IE and Moz use the same box model.

Quote:

The page now successfully vaildates as xhtml 1.0 Strict.

If the code is valid and you force IE into standards mode with a proper and complete doctype, you've got the battle more than half won.

Taking another look, you should apply the borders to the anchor elements. Study this. It's not a clone of your page, but it's close enough that you should see some of the basics.

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

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta name="generator" content="
  HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
  <meta name="editor" content="Emacs 21" />
  <meta name="author" content="Gary Turner" />
  <meta http-equiv="content-type" content="
  text/html; charset=us-ascii" />

  <title>Webdorx navbar</title>
<style type="text/css">
/*<![CDATA[*/

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

body {
    font-size: 100%;
    color: white;
    background-color: black;
    text-align: center;
    }

p {
    font-size: 1em;
    }

p#slogan {
    font: bold .75em arial, sans-serif;
    color: black;
    background-color: #ccc;
    font-variant: small-caps;
    text-align: right;
    }

h1 {
    text-align: center;
    color: #00f;
    font: 1.75em courier, serif;
    font-variant: small-caps;
    letter-spacing: .2em;
    margin-top: .75em;
    }

#wrapper {
    width: 600px;
    margin: 5px auto;
    text-align: left;
    background-color: #333;
    border: 1px solid white;
    }

#banner {
    background-color: #ccc;
    height: 184px;
    padding-top: 1px;
    }

#navbar {}

#navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

#navbar li {
    width: 120px;
    float: left;
    text-align: center;
    }

#navbar a {
    color: #ccc;
    text-decoration: none;
    background-color: #00c;
    display: block;
    font: bold 1.1em arial, sans-serif;
    border: 1px solid #ff0;
    border-left: 0 none;
    }

#navbar a.last {
    border-right: 0 none;
    }

#navbar a:hover {
    background-color: #33f;
    }

#footer {
    background-color: #666;
    color: #ccc;
    }

#footer p {
    line-height: 36px;
    margin-bottom: 0;
    }
   
/*** see http://www.positioniseverything.net/easyclearing.html
   for explanation of Tony Aslett's elegant hack ***/

.clearing:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

.clearing {
    display: inline-block;
    }

/* Hides from IE-mac \*/
* html .clearing {
    height: 1%;
    }
.clearing {
    display: block;
    }
/* End hide from IE-mac */
/*** end clearing hack ***/

/*]]>*/

</style>
</head>

<body>
  <div id="wrapper">
    <div id="banner">
      <h1>DannCassey.net</h1>

      <p id="slogan">Slogan for this site</p>
    </div><!-- end banner -->

    <div id="navbar" class="clearing">
      <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>

        <li><a class="last" href="#">link 5</a></li>
      </ul>
    </div><!-- end navbar -->

    <div id="content">
      <p>content</p>

      <p>content</p>

      <p>content</p>

      <p>content</p>

      <p>content</p>

      <p>content</p>

      <p>content</p>

      <p>content</p>
    </div><!-- end content -->

    <div id="footer">
      <p><span style="float: right;"><a href="
      http://validator.w3.org/check?uri=referer"><img src="
      http://www.w3.org/icons/valid-xhtml10" alt="Valid XHTML 1.0!"
      height="31" width="88" /></a></span>&copy; Copyright 2005
      DannCasey.net</p>

    </div><!-- end footer -->
  </div><!-- end wrapper -->
</body>
</html>

cheers,

gary

A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.

There are enough html & css demos and tutorials to be interesting. Please visit.

webdorx

newbie

Posts: 5
Joined: 2005-02-08

firefox vs IE display:block problem

Posted: Sun, 2005-02-13 19:18

Great stuff Gary. I read through what you sent and took some pointers from it.

Quote:

Did you check out the page I referenced?

Well, to be honest i didn't, but i did now. I played around with my webserver and was able to get firefox to recognize it correctly.. IE however wanted to download the file and open it w/ firefox lol IE is getting smart!!!

So thats just no good, I moved back to xhtml 1.0 again.

I made some modifications to the site based on what I saw you doing .

Im still running into some trouble though..
1. I didn't do what you said about wrapping the a's rather then the li's. The reason for this is that you would (in ie) have to click on the text itself rather then the "button" or li box.. well ok, that wasn't really a problem. just a note. Smiling

2. Spacing issues... i cant get rid of the space to the left of my nav bar, and the space at the top of the #banner.. IE shows it w/out a space at the top.

3. I got something odd going on with the footer. the background color you can see dosn't cover the entire background. there is a space at the top and bottom.... However, if i add one line "border: 1px solid #abcdef;" then it fills out properly... I have no problem adding a border to fix it, but do you have any idea why this might be happening??
-- EDIT --
the footer works if i put margin:0 in the #footer p tag.... margin:0 in the #footer itself dosn't do anything?... hummm..
-- Another edit --
Funny thing i just noticed. In firefox im using the web developer plugin. Under CSS there is an option to disable browser default styles. When i turn that on, the page looks exactly the was i want it to.

Thanks !!

gary.turner

Moderator

Posts: 6417
Joined: 2004-06-25
Location: Dallas

firefox vs IE display:block problem

Posted: Sun, 2005-02-13 21:38

webdorx wrote:

Great stuff Gary. I read through what you sent and took some pointers from it.

Quote:
Did you check out the page I referenced?

Well, to be honest i didn't, but i did now. I played around with my webserver and was able to get firefox to recognize it correctly.. IE however wanted to download the file and open it w/ firefox lol IE is getting smart!!!

So thats just no good, I moved back to xhtml 1.0 again.

Yup. As long as we have to cater to IE, xhtml1.1 is not an option.

Quote:

I made some modifications to the site based on what I saw you doing .

Most of the problems you mention below are dealt with in my example.

Quote:

Im still running into some trouble though..
1. I didn't do what you said about wrapping the a's rather then the li's. The reason for this is that you would (in ie) have to click on the text itself rather then the "button" or li box.. well ok, that wasn't really a problem. just a note.

That is an IE flaw. Folks using IE tend to expect that behavior, so it doesn't matter, IMO. There is no point in declaring li {display: block;}. A float element is automagically block level. Any display value except :none is ignored.

Quote:

2. Spacing issues... i cant get rid of the space to the left of my nav bar, and the space at the top of the #banner.. IE shows it w/out a space at the top.

Study my example. There is no extra space anywhere around the navbar. Notice the h1 {margin-top: .75em;}. That's required for IE.

Quote:

3. I got something odd going on with the footer. the background color you can see dosn't cover the entire background. there is a space at the top and bottom.... However, if i add one line "border: 1px solid #abcdef;" then it fills out properly... I have no problem adding a border to fix it, but do you have any idea why this might be happening??
-- EDIT --
the footer works if i put margin:0 in the #footer p tag.... margin:0 in the #footer itself dosn't do anything?... hummm..

That's margin collapse. Eric Meyer has an article, Uncollapsing Margins, which explains the phenomenom. Borders and padding affect how margins are collapsed.

Quote:

-- Another edit --
Funny thing i just noticed. In firefox im using the web developer plugin. Under CSS there is an option to disable browser default styles. When i turn that on, the page looks exactly the was i want it to.

Every browser that uses styles has a default style sheet. The style sheet will set the default values for such things as hn font sizes or how much to indent lists. Different browsers apply things differently. For example, IE uses margin to indent lists while Moz uses padding to affect the same indention. One browser might indent block quotes while another renders them as italics and another browser leaves it totally to the author.

Turning the browser defaults off effectively zeros everything, leaving only your values in place. It's up to you, then, to determine whether to except the defaults or explicitly set values your self. My own approach is to leave the defaults except for those that break something. People that use a particular browser have expectations that generally should not be messed with (it's a usability issue).

Quote:

Thanks !!

You're welcome,

gary

A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.

There are enough html & css demos and tutorials to be interesting. Please visit.

User login

New forum topics

One Laptop Per Child

Chip in a couple of dollars, together we can make a difference.

Donations are to purchase laptops for the One Laptop per child program.

Who's new

Crazykane2004
testing
bike_headlights
npavkovic
puafo

Online users

Ed Seedhouse
Tony