PROBLEM SOLVED. I'm not asking for any more help here.

Okay so I'm working on a new layout for my website, and the code works wonderfully in both FF and Safari. But when I view it in IE there's one problem (thank god just one!). The top border of my main content div is made with images, so I can have a fun overlap. But in IE the repeated background is at a different height than the top image, while in FF and Safari it's fine.

This is what it's supposed to look like:


This is what happens in IE 7: (not worrying about IE 6 right now)


And here's my css:

div.content{
	  width:87%;
	  text-align:center;
	  margin-right:auto;
	  margin-left:auto
	  }
.header{
	  background:url(repagebg.png) repeat-x center top;
	  width:100%;
	  position:relative;
	  text-align:center;
	  z-index:0;
	  min-height:600px;
	  }
.top{
	  text-align:left;
	  background:url(toprepeat.png) repeat-x bottom;
	  width:100%;
	  overflow:hidden;
	  height:139px;
	  margin:0;
	  padding:0;
	  }
.main{
	  text-align:left;
	  z-index:10; 
	  width:100%; 
	  min-height:400px;
	  background:url(side.png); 
	  padding-bottom:5px;
	  }
.nav{
	  width:100%;
	  height:25px; 
	  background:url(nav.png) repeat-x; 
	  text-align:left;
	  z-index:1
	  }
.topfloat{
	  float:right; 
	  height:100%; 
	  width:5px; 
	  background:url(sideline.png) no-repeat; 
	  z-index:10;
	  }

And HTML just for reference (top image is top.png):

<div class="header">
			 <div class="content">
					<div class="top">
						  <div class="topfloat"></div>
					<img src="top.png" alt="" />
					</div>
...then naviation stuff which works fine

Yes, this is making things complicated. Since I've put so much work into it, I'd love to find some sort of solution so it at least looks right in IE 7. I just don't know what's causing that! Any help would be appreciated =)

Ok, for 1 thing, z-index and properties of top and left wll only work with absolute or relative positioning. Using it on anything else is just a waste of time.

Make sure you CLEAR your floats.

Have you got this on-line somewhere so we can see the whole thing, images and all ?



IE6 and below does NOT support min/max width/height. You will have to use conditional comments and a separate CSS file just for IE to feed IE a fixed height.

I said I wasn't worrying about IE6 right now. I'm planning on creating a separate css file and images for that because I use transparent .png's. I need to get this right first before I start mucking about in the terror that is IE6. Please read the first post xD

And clearing doesn't solve the problem. For some reason the background repeat starts about 4-5 pixels below the actual end of the div. There's a live version here that's just using dummy text for now. But I can't seem to find the problem.

Well, you have an issue, first off, it doesn't validate. I fixed the list item and now it validates.

Your list items...

                    <div class="nav">
                                      <ul class="navigation">
                                 <li class="link">
                                 <a>Link</a></li>
                                 <li class="link">
                                 <a>Link</a></li>
                                 <li class="link">
                                 <a>Link</a></li>
                                 <li class="link">
                                 <a>Link</a></li>
                                 <li class="link">
                                 <a>Link</a></li>
                      </ul>

You have your list items self closing and that's not right. Hope this all helped you.

I see you already know that it is the bottom border of your png - I think it may just be a positioning issue....

I don't care about validation right now, so sorry but that doesn't change anything. I don't know why there's a positioning issue but there is. I need someone to help me figure out what the issue is!

part of trouble shooting a web site is validating your code, if only to rule out the effects of any errors there. to say it doesn´t change anything is naive

validate your css and html then ask for help.

two things: 1. The css is already valid. 2. the ONLY error in my html was in the list for the main links. How that relates to the positioning issue I can't see, as it's in a separate div.

Now that I made the one change to validate the html (which didn't affect anything relating to the problem) will you try to help?

Have you tried repositioning the image?

It's a repeating background image, there's no other way to position it xD And the regular image is just there, plain and simple. If I move that at all the div will have to change height and then more things will get messed up. This is an exact science. I just need to know how to get the background repeat to start at the bottom of the div, not 4-5 pixels under it.

Nevermind. For some reason overflow:hidden created that problem in IE 7 xD Now to fix everything else...

Hello,

You should simplify your structure. You can play with a border instead of background-images. The only trick is to make the image on the top coming over the border which can be done by playing with negative-margin and relative position.

Candygirl - I can't do that here because of the image, and I'd rather not deal with relative positioning which can get mucky. Thanks.

If someone could lock this that would be great. It's been solved.

Originally Posted by PeachyJuice

I can't do that here because of the image, and I'd rather not deal with relative positioning which can get mucky.

Yes, you can. If you don't want to, this is an other point

Please read the first post

OH.. I did, believe me
The original problem is that it's nearly impossible to troubleshoot with snippets of code and not the whole. The snippets you provided didn't also include the IMAGES you were using.. and it's a lot easier to figure out what's going on having ALL of the pieces to play with.

I'd rather not deal with relative positioning which can get mucky

Not if you understand positioning properly.

For some reason overflow:hidden created that problem in IE 7

What was the intended purpose of the overflow:hidden to begin with ?

This is an exact science.

If only that really were true !

You DO realize that in Firefox your left column is overrunning your footer and;
Your entire structure is currently being 'wrapped' in the header div.

I said I would deal with all the other problems and that I didn't want any more help. I 'd really like this thread locked because I know about other problems and am working on them, and don't need any other help at this time.

Everything except the overflow:hidden (which was an attempt to solve another problem that I fixed some other way) is done on purpose. And I don't like positioning. Personal preference xD

Please just lock this.

We don't generally lock threads unless there's a problem.

Well then I'm just going to ignore any other posts on here. I don't know why people continue to post after the problem's been solved and I've made it clear that I don't need any more help xD

Thanks.

Okay it's Just a forum??? Let not be so sassy Please ? let all get together and be nice to one another

Hey, I know the answer, I know the answer! Me me me!

We post back because someone googling for the answer may be able to use what we say, for example, in the case of validation, quirks mode comes into play. http://www.quirksmode.org/css/quirksmode.html