Elements beside each other

Question

sirlink99 56 Practically a Master Poster

12 Years Ago

I have this website, which is still under development, and I am wondering why, when I go to Termékek it displays them all under each other, when in firefox, and opera it doesn't.

here is the css

*{
	margin: 0;
	padding: 0;	
}
*{
	text-decoration: none;
}

.wrapper {
	width: 800px;
	height: auto;
	border: 1px solid;
	margin: 10px auto 0 auto;
}
.header {
	width: 800px;
	height: 150px;
	background-image:url('Images/header.png');
	background-repeat: no-repeat;
}
.navbar {
	width: 800px;
	height: 25px;
	background-image:url('Images/button.png');
	background-repeat: repeat-x;
	
}
.button a {
	float: left;
	width: 200px;
	height: 25px;
	line-height: 20px;
	font-family: Arial;
	font-size: 13px;
	color: #000;
	font-weight: bold;
	text-align: center;
}
.button a:hover {
	float: left;
	width: 200px;
	height: 25px;
	line-height: 20px;
	font-family: Arial;
	font-size: 13px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background-image:url('Images/button_down.png');
	background-repeat: repeat-x;
}
.body {
	
	width: 800px;
	height: auto;
	font-family: Arial;
	font-size: 11px;
	color: #000;
	background: url('Images/backgTrans.png');
	
}


div.textbody {
	padding: 10px;
	color: #000000;
	font-weight: bold;
	
	
	
}
div.textbody h1 {
	float: left;
}

div.textbody p{
	font-size: 15px;
	font-weight:bold;
    color:#000000;	
}
div.textbody img{
	padding: 5px;
}


.leftDiv{
	 position: relative;
     margin-right: 10px;
     display: inline;
}
.productsDiv {
	display: inline-block;
	padding: 20px;
	font-size: 14px;
}
.important h1{
}

Also another quick question when I view it in firefox all of the elements are at the same height (the top of the pictures are in line), but when I view it in opera one of them is one <br /> higher. Is there a way to fix this?

Thanks for any help.

web-design

2 Contributors
6 Replies
98 Views
16 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by sirlink99

lps 71 Posting Pro in Training

12 Years Ago

Try refer this: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

lps 71 Posting Pro in Training

12 Years Ago

please enclose your html code for usage. As in my personal experience, opera does read the line break of coding. try joining the coding of div so that there is no space between 2 div: </div><div>

Edited 12 Years Ago by lps because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sirlink99 56 Practically a Master Poster · Answer 1 · 2011-12-29T09:01:10+00:00

Thanks that fixed the first error, but now how come one item in opera is a <br /> higher then the other ones?

sirlink99 56 Practically a Master Poster · Answer 2 · 2011-12-29T09:47:22+00:00

here is the HTML

<!DOCTYPE html>

<head> 
	<title>Website Name</title>
	<meta http-equiv="Content-Type" content="text/html; charSet=UTF-8"> 
    <link rel="stylesheet" href="styles.css" media="screen" />
</head>

<body>
	<div class="wrapper">
		<center>
		<div class="header">
		</div>
		<div class="navbar">
			<div class="button"><a href="index.php">Főoldal</a></div>
			<div class="button"><a href="products.php">Termékek</a></div>
			<div class="button"><a href="about.php">Rólunk</a></div>
			<div class="button"><a href="contact.php">Elérhetőség</a></div>

			
		</div>
		
		<div class="body">
			<h1>Termékek</h1>
			<br />
			<div class="productsDiv">
				<div>
					<a href="fa.php">
						<img src="Images/fa.jpg" width="125px" height="125px"/>
						<p>Faáruk<br /><br /><br /></p>
						
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				
					<a href="villany.php">
						<img src="Images/skapocs.jpg" width="125px" height="125px"/>
						<p>Villanyszerelési anyagok <br /><br /><br /></p>
					</a>
				
			</div>
			<div class="productsDiv">
				<div>
					<a href="karnis.php">
						<img src="Images/karnis.jpg" width="125px" height="125px"/>
						<p>karnisok <br />
						ezer aprócikk <br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="zár.php">
						<img src="Images/lock.jpg" width="125px" height="125px"/>
						<p>Zárak, Lakatok<br /><br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="lanc.php">
						<img src="Images/chain.jpg" width="125px" height="125px"/>
						<p>Láncok, Kötelek, <br />Drótkötelek<br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="rogzites.php">
						<img src="Images/screw.jpg" width="125px" height="125px"/>
						<p>Rögzités teknika, <br /> Kötő ellemek<br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="furo.php">
						<img src="Images/furo.jpg" width="125px" height="125px"/>
						<p>Fúrók, Vágókorongok<br /><br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="csiszolo.php">
						<img src="Images/csiszol.jpg" width="125px" height="125px"/>
						<p>Csiszolo anyagok,<br /> Festő szerszámok, <br /> Fóliák ragasztószallagok</p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="kezi.php">
						<img src="Images/fogo.jpg" width="125px" height="125px"/>
						<p>Kéziszerszamok, <br />Electromos gépek <br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="ragaszto.php">
						<img src="Images/szilikon.jpg" width="125px" height="125px"/>
						<p>Ragasztók, szilikonok, <br /> purhabok, vegyiáruk<br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="kerekek.php">
						<img src="Images/kerek.jpg" width="125px" height="125px"/>
						<p>Kerekek, görgők, <br />Fogasok, Butorvasalások<br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="kerti.php">
						<img src="Images/gereblye.jpg" width="125px" height="125px"/>
						<p>Kerti szerszámok<br /><br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="vedelem.php">
						<img src="Images/vedo.jpg" width="125px" height="125px"/>
						<p>Munkavédelem<br /><br /><br /></p>
					</a>
				</div>
			</div>
			
			
		</div>
		
		
		
		
		</center>
	</div>
</body>
</html>

and changing the divs did not make a difference.

lps 71 Posting Pro in Training · Answer 3 · 2011-12-29T09:50:47+00:00

please remove the line break between divs. For example:

<div class="productsDiv">
				<div>
					<a href="kerti.php">
						<img src="Images/gereblye.jpg" width="125px" height="125px"/>
						<p>Kerti szerszámok<br /><br /><br /></p>
					</a>
 
				</div>
			</div><div class="productsDiv">
				<div>
					<a href="vedelem.php">
						<img src="Images/vedo.jpg" width="125px" height="125px"/>
						<p>Munkavédelem<br /><br /><br /></p>
					</a>
				</div>
			</div>

Please try if this work

sirlink99 56 Practically a Master Poster · Answer 4 · 2011-12-29T10:29:02+00:00

nvm I found it. I was missing a set of divs in the productsDiv

this

<div class="productsDiv">
 
					<a href="villany.php">
						<img src="Images/skapocs.jpg" width="125px" height="125px"/>
						<p>Villanyszerelési anyagok <br /><br /><br /></p>
					</a>
 
			</div>

should have been this

<div class="productsDiv">
				<div>
						<a href="villany.php">
							<img src="Images/skapocs.jpg" width="125px" height="125px"/>
							<p>Villanyszerelési anyagok <br /><br /><br /></p>
						</a>
					</div>
			</div>

Thanks for your help