Please help me get this working with Opera and Firefox

UnknownSoldier · 24 Sep 2006 at 09:01

I am redesigning my site so that it works with browsers other than IE but I am stuck: This is what i have so far: www.stanislavberemski.com/newfolder/index2.htm

The box shows up fine on IE but on Opera it sticks out of the bottom. How can I make containter div adjust its size along with the sidebar div?

Here is the code:

Code:

CSS FILE
body { text-align: center;
background-color:#000000; }

#container {
	text-align: left;
	margin: 0 auto;
	width: 770px;
	background-image:url(back.jpg);
	border: 1px solid #858585;
	height:auto;
}

#header {
	border: 1px solid black;
	margin: 20px;
	padding: 20px;
}

#content {
	margin-left:350px;
	margin-right: 10px;
	border: 1px solid #858585;
	padding: 20px;
}

#footer {
	margin: 20px 20px 0 20px;
	padding: 20px;
	border: 1px solid black;
	clear: left;
}

#sidebar {
	border: 1px solid #858585;
	width: 330px;
	margin-left: 10px;
	float: left;
	display: inline;
	height:auto;
}

#item {
width:320px;
border: 1px solid #858585;
margin-left:4px;
margin-top:4px;
margin-bottom:4px;
background:#3C3C3C;

}




.title {
font-family:Arial, Helvetica, sans-serif;
color:#C7C7C7;
font-size:36px;
margin-top:10px;
margin-left:10px;
}

.itemtitle {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
margin-top:2px;
margin-left:2px;
text-transform:capitalize;
}

.itemdate {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:10px;
text-transform:capitalize;
font-style:italic;
margin-left:0px;
margin-top:0px;

}

.itemtext {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:11px;
margin-left:0px;
margin-top:0px;
}

Code:

HTML Code

<body>
<div id="container">
<h1 class="title">Stanislav Beremski</h1>

	<div id="sidebar">
		<div id="item">
			<h2 class="itemtitle">Random Testing</h2>
			<p class="itemdate">10.01.1983</p>
			<p>This is some random text that I am using as test. Blah.This is some random text that I am using as test. Blah.This is some random text that I am using as test. Blah.This is some random text that I am using as test. Blah.</p>
		</div>
	
	
	</div>


		<div id="content">
		<p class="itemtext">This is some r.</p>
	
		
		
		
		
		</div>

</div>

</body>

UnknownSoldier · 24 Sep 2006 at 12:24

Thanks Sic

Thats all sorted.

Just one more question (I hope). How can I get the text to warp around the orange image nicely (i.e without that gap between the text and the image at the bottom of the image). Have a look here www.stanislavberemski.com/newfolder/index2.htm

Thanks again

UnknownSoldier · 24 Sep 2006 at 13:20

Thanks

If you like what I am doing with the website have a look at the original at www.stanislavberemski.com.

I did what you said and it seems to have fixed the problem in IE but only lesten the problem in Opera. Is there some work around where I can adjust the padding settings for individual browsers?

Also If you have a look at the updated second version of the site at:
www.stanislavberemski.com/newfolder/index2.htm

You can see that in IE there is a gap between the top image and the container div. This gap is not present in the Opera rendering. How can I close this gap in IE?

UnknownSoldier · 25 Sep 2006 at 01:36

I have come to terms with the text gap but its the gap between the header image and the container that I am worried about.

Isnt there some way of usinga margin parameter only to IE browsers but not to all other. I seem to remeber that you put in some symbol in the css line and ony IE reads it?