Menu
Hello,
I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2×2 form insetad of 4×1.
Any idea?
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
#container {
margin: auto;
padding:0px;
width: 980px;
border: 1px solid #000000;
}
#center {
margin: 0px;
padding: 0px;
clear:both;
}
#left_panel {
width: 240px;
float:left;
border:1px solid #ff0000;
}
#main_panel {
padding: 0px;
margin: 0px;
margin-left:295px;
width:660px;
border:0px solid #ff0000;
}
#main_panel #main_panel_header {
padding-top: 5px;
border:1px solid #ff0000;
overflow:hidden;
}
#main_panel_header .photo_box {
float:left;
background-color:#000000;
}
#main_panel_header .photo_box img {
background-color: #000000;
height: 115px;
width: 140px;
border:2px solid #000;
border-bottom:0px;
margin:0px;
}
#main_panel_header .photo_box a{
color: #ffffff;
text-decoration:none;
font-size:10px;
font-weight:bold;
display:block;
text-align:right;
text-transform: uppercase;
width:140px;
float:left;
padding:2px;
margin:0px;
background-color:#000000;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”center”>
<div id=”left_panel”>
Menu1<br/>Menu1<br/>
</div>
<div id=”main_panel”>
<div id=”main_panel_header”>
<div class=”photo_box”>
<img src=”style/tmp/pic.jpg” />
<a href=”#”>Link</a>
</div>
<div class=”photo_box”>
<img src=”style/tmp/pic.jpg” />
<a href=”#”>Link</a>
</div>
<div class=”photo_box”>
<img src=”style/tmp/pic.jpg” />
<a href=”#”>Link</a>
</div>
<div class=”photo_box”>
<img src=”style/tmp/pic.jpg” />
<a href=”#”>Link</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>