#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2005
    Posts
    20
    Rep Power
    0

    Box size problem in Opera


    Hello,

    I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2x2 form insetad of 4x1.

    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>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    94
    Rep Power
    31
    Tried it in a few browsers, netscape, ie6/7,FF all render it fine.
    Opera and Safari both render it 2x2.

    Not sure exactly what is causing the difference but it seems Opera and Safari are expanding the #main_panel_header div to accomodate the image and link. The image is inline and to get around this you floated the anchor tag left so it falls beneath, but both browsers are still rendering it as if it were taking up space.

    remove the float from -
    #main_panel_header .photo_box a{

    and add display:block to -
    #main_panel_header .photo_box img

    Is that what your after anyway?
    Just looking at your code too and without being sure exactly what your trying to achieve I can't help but think theres a better way to do this.

    eg. Get rid of some of those divs.
    Use an Unordered list for the navigation.
    Add the image as a background to the anchor's and just use

    background-position:top;

    then size as needed if you want the link text shown underneath the image.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2005
    Posts
    20
    Rep Power
    0
    Thanks!
    It works fine.

IMN logo majestic logo threadwatch logo seochat tools logo