Div positioning - need help

I'm currently in the middle of making a website for my friend for his clan, and I've almost finished coding the main layout, but I need help with positioning for 2 divs that simply won't look right on IE.

On firefox, the divs are located exactly where I want them to be, but on IE they are in the wrong place. Any help would be awesome, thanks.

http://www.longynet.com/kor/index.php
http://www.longynet.com/kor/style.css

 

IE sucks..!! Thtz all i can say.
You need to add few extra lines of code to make that appear well in IE.
Me too waiting for someone to help

 

is it any IE BuG ?

 

Uhm.. I am slightly confused as to why you would chose to code it like that at all?

You could have just as easily done:

<h2>Latest News</h2> and <h2>Latest Matches</h2>

h2 { background:url(images/thewholebannerimage.gif) no-repeat; /* I would probably use repeat on this, but it's up to you. it's a bit more complciated if you use repeat but smaller file size */
font:normal 1em/2.833em Arial, Helvetica, Sans Serif; /* 1em in this case is 12px */
color:#fff; 
height:/*height of the banner image */;
width:/* width of the banner image */;
/* and use margins or positions or whatever to move it. you just made it really complicated */}

Code (markup):

This isn't exact, but play with it. It's soo much easier than doing what you did.

Also, what is up with having margin:0 and padding:0 on like every style? body already has margin:0; and padding:0; meaning you don't have to put it on anything else unless it's inherited from something else.

Regards,
Nick

 

Hmm, I can't seem to get the <h2> tags to work the way I want. The reason I did it that way is becuase they have to overlap each other, and it's the only way I could think of doing it.

Is there a way of doing this with Divs?

 

position relative on the big part. Position absolute on the h2. top:-5px; left:-10px; approximately of course. That will make it overlap.

It would be the same with divs instead of h2's.

 

what version of IE are you having problems with for your web design?

 

Ie7 (7.0.5730.13)

 

Here:

* {
	margin:0;
	padding:0;
}
h2 {
	background:url(header.png) no-repeat;
	font:normal 12px/54px Arial, Helvetica, sans-serif;
	color:#FFF;
	position:absolute;
	top:-5px;
	left:-5px;
	height:34px;
	width:365px;
	padding:0 5px;
}
#news {
	background:url(midcontenttop.png) no-repeat;
	width:375px;
	height:165px;
	margin:22px 0 0 47px;
	position:relative;
}
#matches {
	background:url(midcontentbottom.png) no-repeat;
	width:375px;
	height:165px;
	margin:20px 0 0 47px;
	position:relative;
}

Code (markup):

<div id="news">
	<h2>Latest News</h2>
</div>

<div id="matches">
	<h2>Latest Matches</h2>
</div>

HTML:

If you know how to combine the css, you should. Since a lot is repeated in there.

Regards,
Nick

 

My current website project is working on Google Chrome, Firefox and Opera but when i tried it IE it doesn't look like what i've coded.

One of the <div> element had overlapped the other <div> element. Hmmm... Something strange, i searched through various forums but couldn't find one.

Update: This is in relation Longy's website being displayed abnormally on IE.

 

Longy909 is actually trying to overlap here. Cipals15 you should make your own thread on this.

YIPKP,
Nick

 

That code works great for Internet explorer, but on Firefox there is a gap that shouldn't be there.

 

Never mind, I fixed it by adding a margin: 0px; on to the <h2> stylesheet.
Thank you very much for your help.

 

no problem.

 

SIgh...tables were so simple...