www.webdeveloper.com
Results 1 to 6 of 6

Thread: Div centering displacement in Opera or IE and FF

  1. #1
    Join Date
    May 2009
    Posts
    9

    Div centering displacement in Opera or IE and FF

    Hi all
    Here is my trouble:
    http://www.myspace.com/blackartofficial

    In opera it should look fine, but in FF and IE borders of bottom element and element under menu are displaced. If I will fix it in FF and IE - it will accure in Opera.

    here is code of div and ccs:
    Code:
    div.centerholder {
    position: absolute;
    top: 320px; 
    left: 50%;
    width: 848px;
    margin-left: -424px;
    height: 71px;
    }
    
    <div class="centerholder">
    <img src="http://data.virusman.ru/ax20/devs/ArmorDarks/BA_centerholder.gif" border="0" />
    </div>
    As you see, I'm using absolute position due to limitations of myspace. In fact. in other situation I'd prefer not to use absolute position, but at myspace I don't have any choice.

    I don't know is it problem of Opera or of FF and IE. Looks like in fact it is problem of IE and FF, becouse background centered properly. Or I've just done something wrong.

    I googled many sites, founded different solutions, but they didn't worked. For example use of auto margins (margin-left and margin-right) results in same effect + do not work in IE.

    I can only hope that this problem can be solved =(
    Last edited by Armor Darks; 05-15-2009 at 01:37 PM.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    I see no notable differences between Opera (9.6) and FF (3). The problem is with IE7. In fact the best look is in FF3.

    Anyway, I guess you made you code much too intricate. Horizontal centering of a div is rather easy if you use the auto value for the left and right margins.
    Code:
    .containerDiv{
    width:848px;
    height: 71px;
    margin:323px auto 0 auto;
    }
    On the other hand, another solution could be using that picture as a background and center the background

  3. #3
    Join Date
    May 2009
    Posts
    9
    thanx for reply

    it won't work in ie =(

    In ie6.

  4. #4
    Join Date
    May 2009
    Posts
    9
    tryed variant with background image. In opera and Mozilla it worked, but in ie6 didn't work as always + if I place img as background, half of div becomes overwrited by another div. And looks like there is no any possiblity to pull it at upper layer.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    give your all divs precise size (width and height)

  6. #6
    Join Date
    May 2009
    Posts
    9
    here is all code at myspace:

    Code:
    <style>.MyspaceGens Navigation Bar Generator V2.0 { http://www.myspacegens.com/handler.php?gen=newnavbar } div.profileWidth table td { background-color: black !important; background-image: none !important; } div.profileWidth div ul li a {color: white !important; font-size: 11px !important; font-family: Verdana !important;}div.profileWidth div ul li a:hover, div.profileWidth div ul li .open {color: white !important; font-size: 11px !important; font-family: Verdana !important; background-color: black !important;}div.profileWidth div td.rail { background-color: black !important; } div.profileWidth table td ul small {color: white !important; font-size: 8px !important;}div.profileWidth table tr td div table.rail {background-color: darkred;}</style>
    <style> 
    
    table, tr, td{ 
    background-color:transparent; 
    border-style:none; 
    } 
    
    body, body.bodycontent{ 
    background-color:rgb(0,0,0); 
    background-image:url(http://data.virusman.ru/ax20/devs/ArmorDarks/bwbg4.gif); 
    background-position:center center; 
    background-repeat:repeat-y; 
    background-attachment:fixed; 
    margin-top: 150px;
    margin-bottom: 14px;
    } 
    
    body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{ 
    color:white; 
    font-weight:normal; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    font-family:verdana,sans-serif; 
    } 
    
    table, tr, td, li, p, div,.text,.redtext, .blacktext12 { color:ffffff; }
    .whitetext12, .orangetext15 { color:ffffff; font-weight:bold; }
    .lightbluetext8, .blacktext10, .redbtext,.btext { color:ffffff; }
    .nametext { color:ffcc66; font-weight:bold; }
    
    a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{ 
    color:rgb(107,1,1); 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    font-family:verdana,sans-serif; 
    } 
    
    div.toplogo {
    position: absolute;
    top: 0&#37;; 
    left: 50%;
    width: 800px;
    margin-left: -400px;
    height: 150px;
    }
    
    div.centerholder {
    position: absolute;
    top: 320px; 
    left: 50%;
    width: 848px;
    margin-left: -424px;
    height: 71px;
    }
    
    div.bottomholder {
    position: fixed;
    bottom: 0%; 
    left: 50%;
    width: 863px;
    margin-left: -431px;
    height: 51px;
    }
    
    a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link { color:ffcc66; font-weight:bold; }
    a:hover, a.searchlinksmall:hover, a.navbar:hover, a.redlink:hover { color:FF6622; }
    
    table table table, div table table{ 
    border-color:rgb(255,255,255); 
    border-style:none; 
    border-width:1px; 
    } 
    
    table table table table, div table table table{ 
    border-style:none; 
    } 
    
    .contactTable { width:300px!important; height:150px!important; padding:0px!important; background-image:url(http://data.virusman.ru/ax20/devs/ArmorDarks/ba_links.png); background-attachment:scroll; background-position:center center; background-repeat:no-repeat; background-color:transparent;}
    .contactTable table, table.contactTable td {padding:0px !important; border:0px; background-color:transparent; background-image:none;}
    .contactTable a img {visibility:hidden; border:0px!important;}
    .contactTable a {display:block; height:28px; width:115px;background-color:transparent!important;}
    .contactTable .text {font-size:1px!important;}
    .contactTable .text, .contactTable a, .contactTable img {filter:none!important;background-color:none!important;}
    .contactTable .whitetext12 {display:none;; }
    </style>
    
    <div class="toplogo">
    <img src="http://data.virusman.ru/ax20/devs/ArmorDarks/ba_logo_blackgold_large.jpg" border="0" />
    </div>
    <div class="centerholder">
    <img src="http://data.virusman.ru/ax20/devs/ArmorDarks/BA_centerholder.gif" border="0" />
    </div>
    <div class="bottomholder">
    <img src="http://data.virusman.ru/ax20/devs/ArmorDarks/BA_bottom.gif" border="0" />
    </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles