Neverside

Internet Explorer vs. Firefox error 1

Hey guys,

I'm developing a website for my company and so far it's going great, but I've been beating my head against a problem for quite a few hours now.

Source:
http://www.lexmedia.ca

CSS:
http://www.lexmedia.ca/_css/master.css

Specifically, these portions here:

Code:

#blog_updates {
  width: 335px;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #e1e1ca;
}
  #blog_updates a, #blog_updates a:link, #blog_updates a:visited {
    color: #d47c15;
text-decoration: none;
  }
    #blog_updates a:active, #blog_updates a:hover {
  text-decoration: underline;
}
  #blog_updates h1, #blog_updates ul, #blog_updates li {
    margin: 0;
padding: 0;
  }
    #blog_updates h1 {
  margin-bottom: 3px;
}
  #blog_updates ul {
    margin-bottom: 0.5em;
  }
    #blog_updates li {
  list-style: none;
  font-size: 11px;
}
  #blog_updates li ul {
    display: inline;
  }
  #blog_updates li ul li {
    display: inline;
  }
    #blog_updates a {
  background: #ebebdb;
  border-bottom: 1px solid #fff;
}
    .blog_date {
  display: block;
  width: 79px;
  float: left;
}
.blog_link {
  display: block;
  width: 187px;
  float: left;
}
.blog_author {
  display: block;
  width: 69px;
  margin-left: 266px;
}

Which pertains to this section here:

Code:

      <div id="blog_updates">
        <h1>Latest Updates</h1>
        <ul>
          <li>
            <ul>
              <li><a class="blog_date" href="#">03/05/2008</a></li>
              <li><a class="blog_link" href="#">www.lexmedia.ca Grand Opening</a></li>
              <li><a class="blog_author" href="#">by Alex Ford</a></li>
            </ul>
          </li>
          <li>
            <ul>
              <li><a class="blog_date" href="#">21/04/2008</a></li>
              <li><a class="blog_link" href="#">Lenovo launches new ThinkPad...</a></li>
              <li><a class="blog_author" href="#">by Alex Ford</a></li>
            </ul>
          </li>
          <li>
            <ul>
              <li><a class="blog_date" href="#">07/04/2008</a></li>
              <li><a class="blog_link" href="#">Some other update here</a></li>
              <li><a class="blog_author" href="#">by Alex Ford</a></li>
            </ul>
          </li>
        </ul>
      </div>

In Firefox, everything lines up great. In IE, the blog_author portion ends up exactly one line below the blog_date and blog_link, however it is in the correct horizontal position. I've already tried floating it left and it fixes it in IE, but in firefox everything jumps into one line like the attached image.

___________________

Alex Ford
Neversidian General Editor and Columnist
http://www.lexmediaconsulting.com/

Last edited by alexford, May 3rd, 2008 09:08 AM (Edited 1 times)

You know I could be talked into using a table here. Hell I probably would.

If your purist standardista ways won't allow such you might try some of CSS's more elusive display values. I have no experience with some of them (table-cell, table-row, etc) but they might be the magic bullet you're looking for.

___________________

Jon Culver Chia Pets

I'm going to have to agree with you on this one. I don't think I'm going to be able to find a way to make both work, and I do love my standards. Honestly I don't think any big CSS critics would find fault holding this data as it is tabular in structure anyway. Trying to make CSS work for something that is table data is hypocritical in itself.

Thanks for the suggestion .

___________________

Alex Ford
Neversidian General Editor and Columnist
http://www.lexmediaconsulting.com/