?

Log in

No account? Create an account
Poopy Head
Posted on Sunday 2 September 2007 at 12:57 pm

Coding Help Wanted!!


Tags:
I realize the answer to this is probably "No" because I seem to be everyone else's go-to coding person, but does anyone know enough about CSS to help me figure out why the stylesheet I'm trying to write is displaying one way in IE6/7 and another way in FireFox?

EDIT: I'm going to pretend like my hacking has made it work, pretend being the key word.
frustrated
Feeling: frustrated
Exploring: Computer

Comments:

JD
jdbracknell at 7:03 pm on 02 September 2007 (UTC) (Link)
I don't think I'll be able to help - the only thing I can think you might try is comparing the initial override command (I've no idea if that's what it's called) to other people's to see if you've got something specific to IE or Firefox missing?
Rachael
bratty_jedi at 7:23 pm on 02 September 2007 (UTC) (Link)
I'm not sure what you mean. How about I try giving you more info on my problem just in case you have some brilliant idea on it?

The issue is that FireFox is putting in gaps in the header navigation that aren't showing up in IE6 or IE7. So it basically looks like this in FireFox:

Recent Entries

Entry Archives

Members

Community Info.

but then looks like this in IE:
Recent Entries
Entry Archives
Members
Community Info.

I think it is the CSS that is causing it all but as near as I can tell, there are no gaps (no padding, margins, etc.) in the code so I have no idea where FireFox is getting it. The sad thing is I want the spacing, but can't get it to work in IE6/7 and FireFox at the same time. The best idea I've come up with so far is that the browsers might handle the display:block command differently, but then I'm not sure what I can do about it other than try to put in browser specific hacks and that is just a pain in the neck, especially since I have no idea how it looks in Safari, Opera, etc.

The LJ in question is hp_wotm and the CSS I've put in for the header, which is my problem, is:

#header {
  height: 420px;
  width: 800px;
  margin: 0px auto auto auto;
  background-image: url(http://pics.livejournal.com/bratty_jedi/pic/000dk860);
  background-position: center top;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  font-family: "goudy old style", serif;
  }
.title {
  display: none;
  }
.subtitle {
  display: none;
  }
ul.navheader {
  margin: 235px 0px 0px 15px;
  padding: 0px;
  float: left;
  width: 180px;
  font-size: 20px;
  text-align: center;
  }
.navheader li {
  margin: 0px !important;
  padding: 0px;
  }
.navheader a, .navheader a:visited, .navheader a:active {
  padding: 0px;
  margin: 0px 0px 0px 0px;
  background-color: #4a0001;
  display: block;
  }
.navheader a:hover {
  padding: 0px;
  margin: 0px 0px 0px 0px;
  background-color: #a18d5f;
  display: block;
  }
Rachael
bratty_jedi at 10:41 pm on 02 September 2007 (UTC) (Link)
I gave in and just played with hacks. As of now, I know for sure everything is displaying correctly on my FireFox, my IE6, and my roommates IE7. Hopefully in all my hacking I didn't screw it up in some other browser, though I think with the two IEs and FF I've covered the vast majority of browsers people are likely to use when visiting an LJ community.

If you do have any ideas for a better solution than the browser specific coding I did, please do let me know.
JD
jdbracknell at 9:21 am on 03 September 2007 (UTC) (Link)
I just nipped over, and I think it looks great, so your hacks seem to have done the job. I can't see anything wrong with the code in theory, athough I think you're probably right that it's most likely the display command that's causing it. I'm not great at this stuff, but I do look at lots of code, and it occurs to me that I haven't seen that command very often, so there may be a way around using it altogether?


   Leave a New Comment
Previous Entry  Next Entry