[RESOLVED] Div tag issues between IE and FF

[lockedge]

Hello, all.
Recently I've decided to brush up on my CSS skills, seeing as over the past year or so all I've been asked to make were flash sites(which were quite annoying to say the least).

I used to be able to code fairly decently in notepad, but since it's been a while and i've been lax on keeping up with my skillset, I figured jumping in DW and doing my handcoding in there would be a better way to actively see what the heck I was doing right and wrong.

I had a bunch of imaged cut up from photoshop and I was having initial difficulty keeping the div tags(with the images in them) placed correctly in Firefox. It really really didn't like them. So I jumped in PS and assembled a bunch of those images into one larger one(10k which is still quite small in size, but I'm not worrying about that much at the moment). Anyways, I try moving it around in Firefox, and it's still extra wonky.
It works in IE, though, and it's passed all validation from W3, which was pointed out in that "Read me First" thread in here(Thanks for the useful links, I had no idea validation tools were online at all!).

It's strange. Whenever I used to type up sites, IE would be the first to buckle, but I'm pretty rusty and I'm probably messing up my CSS properties.

In the end, I even tried tossing the troublesome div into an AP Div in DW(which looks a lot like a forsaken Layer from the older dreamweavers) to see if I could do something about it. Still no luck.

Can anyone give me some clues? I'm all out of ideas.

links here: http://neuphonics.net/miscellaneous/...ry2/index.html
http://neuphonics.net/miscellaneous/...mainstyles.css

[ray326]

You've got valid code but I don't know what it's supposed to look like. What it DOES look like is strange.

[Centauri]

Problems here involve unnecessary absolute positioning and illogical nesting - let things flow and stack naturally. I had a play around with this, and came up with this html (even put a few links in boxes - bored) :

<div id="wrapper">
  <div id="title">
    <a href="#">home</a>
  </div>
  <ul id="nav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
  <div id="mainblock">
    <p>content here</p>
  </div>
</div>

and this css:

* {
	margin: 0;
	padding: 0;
}
body {
	background-image: url(darkgreenPatterm.gif);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#wrapper {
	width: 800px;
	padding: 0 37px;
	margin: 0 auto;
	background-image: url(main.gif);
	background-repeat: no-repeat;
	background-position: left 258px;
}
#title {
	margin-left: -37px;
	background-image: url(titleB.gif);
	height: 250px;
	padding-top: 8px;
}
#title a {
	float: right;
	margin: 202px 20px 0 0;
	width: 180px;
	height: 27px;
	line-height: 27px;
	text-decoration: none;
	text-align: center;
	color: #000;
	display: inline;
}
#nav {
	padding: 20px 0 0 20px;
	height: 50px
}
#nav li {
	list-style: none;
	float: left;
	padding-left: 70px
}
#nav a {
	float: left;
	width: 180px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
	text-align: center;
	color: #000;
}
#nav a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #F00;
}
#mainblock {
	height: 766px;
	padding: 15px;
}

Basically, a wrapper contains every thing and centres the site. The main site background image is applied to the wrapper and positioned down from the top to clear the header. The header, navbar, and content area just stack one under the other, the positions being determined by set sizes and paddings.

Enjoy!

[lockedge]

Wow, that makes perfect sense. Works perfectly!
That's just some awesome structure. I guess I still have a ways to go before I'm proficient again, but you just clicked a few light bulbs on in my head with this.

Thanks for everything, I was really starting to go loopy! XD


Also, I realized this was my first post I made about this. I was wondering if my initial post got lost in translation before, and re-posted it in here again and that one hasn't shown up yet, but this one did. I guess this board works differently than others I've been on (checking each post maybe?). Anyways, sorry in advance if there's another post about this. I'll try to catch it if/when it hits.