Please help me get this working with Opera and Firefox

UnknownSoldier

UnknownSoldier

UnknownSoldier

Associate
Joined
29 Jul 2005
Posts
230
Location
London / Nottingham
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>
 
you're not using your footer div. after your content div...insert <div id="footer"></div> if your sidebar content is always going to be longer...leave it at clear: left...if it's not...change your footer clear attribute to clear: both;
 
Take the top padding off the text, and the bottom padding off the image.

Code: 
.itemtext {  
font-family:Arial, Helvetica, sans-serif;  
color:#FFFFFF;  
font-size:10px;  
[B]padding:0 4px 4px 4px; [/B] 
}    
.itemimage {  
clear:right;  
float:left;  
[B]margin:4px 4px 0 4px;[/B]  
}

By the way, I really love your work. Love that kind of urban, bold colours, patchy, mixed media kinda stuff :)
 
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?
 
All looks normal to me now mate. Just the opera gap present still, and that's simply because of the text itself. Hard to explain, but its because of the number of lines and the line height, if they were slightly thicker the bottom one would drop down and it'd look nice.

Maybe tweak the line height?

Edit: Nope, doesn't fix anything
 
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?
 
Oh right, I think you mean the gap between the container and the edge of the page. In which case add

Code: 
margin:0;

to body.

A good tip for sorting things like this is adding a border of a certain colour to the container, and a different colour to the header (or whatever). That shows you the edges of each div, so you can sort out padding and such.
 
You must log in or register to reply here.
Back
Top Bottom