Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Exclamation HTML/CSS Layout Issues w/ Nested Divs and Negative Margins

    I'm currently in development of a site with numerous overlapping DIVs. I'm having issues with the layout and how different browsers are rendering my code.

    I have a container that has all my content in it - and I wish to move it up behind the container of content above it - but when I do, the encompassing DIV only moves, not the content within it (in IE ONLY) - all the content and DIVs move properly in Chrome (who would've thunk it). Hopefully my explanation makes sense - if not, just copy+paste the code and create the files - you'll see what I mean.

    Here's my HTML -
    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>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body>
    <div id="page">
    <div id="top">
    <div class="container">
    <p class="reservations">Reservations Call <a href="tel:8138745466">813-874-5466</a></p>
    <a href="#"><img src="images/img-logo-advantage-limo.png" width="367" height="122" border="0" class="logo" /></a><div class="clear"></div><a href="#"><img src="images/img-icon-email.png" width="42" height="42" border="0" class="email" /></a><a href="#"><img src="images/img-icon-facebook.png" width="42" height="41" border="0" class="facebook" /></a>
    <ul class="top-menu">
    <li><a href="#">our fleet</a></li>
    <li><a href="#">limo services</a></li>
    <li><a href="#">specials</a></li>
    <li><a href="#">contact us</a></li>
    </ul>
    <div class="clear"></div>
    </div><!--/.container-->
    </div><!--/#top-->
    <div class="extras">
    <div class="reservation"></div><!--/.reservation-->
    <div class="cta"><a href="#"><img src="images/img-btn-cta-airport-transport.png" width="204" height="181" border="0" /></a><a href="#"><img src="images/img-btn-cta-corporate-limo.png" width="204" height="181" border="0" /></a><a href="#"><img src="images/img-btn-cta-wedding-service.png" width="204" height="181" border="0" /></a><a href="#"><img src="images/img-btn-cta-night-out.png" width="204" height="181" border="0" /></a></div><!--/.cta-->
    </div><!--/.extras-->
    <div class="clear"></div>
    <div id="middle">
    <div class="container">
    <div id="rotator"><img src="images/img-rotator-1.jpg" width="1098" height="359" border="0" /></div><!--/#rotator-->
    <div id="slider"></div><!--/#slider-->
    <div id="content"><a href="#"><img src="images/img-btn-our-fleet.png" width="166" height="40" border="0" class="fleet-btn" /></a>
    <div class="clear"></div>
    </div><!--/#content-->
    <div class="clear"></div>
    </div><!--/.container-->
    </div><!--/#middle-->
    <div id="bottom"></div><!--/#bottom-->
    </div><!--/#page-->
    </body>
    </html>
    And here's the CSS that coincides with it -
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body{margin:0px; padding:0px;}
    .clear, .clearfix{clear:both !important;}
    
    #page{width:100%; background-image:url(images/bg.png); background-color:#272727;}
    
    
    #page #top{width:100%; height:296px; position:relative; z-index:8; background:url(images/bg-header.png) repeat-x;}
    #top .container{width:1098px; height:296px; margin:0px auto;}
    #top .container p.reservations{float:right; text-align:right; font-family:Arial; font-size:18px; font-weight:bold; color:#FFF; text-shadow:.1em .1em .1em black; margin-top:8px;}
    #top .container p.reservations a{color:#FFF; text-decoration:none;}
    #top .container img.logo{float:left; width:367px; height:122px; margin-top:36px;}
    #top .container img.email{float:right; height:42px; width:42px; margin-top:-115px;}
    #top .container img.facebook{float:right; height:42px; width:42px; margin-top:-116px; margin-right:40px;}
    
    #top .container ul.top-menu{float:right; list-style:none; display:inline-block; text-align:left; font-family:Arial; font-size:14px; color:#FFF; margin-top:-65px;}
    #top .container ul.top-menu li{float:left; padding:12px;}
    #top .container ul.top-menu li a{color:#FFF; text-decoration:none; text-transform:uppercase;}
    
    
    .extras{width:1098px; margin:0px auto; position:relative; z-index:9; margin-top:-130px;}
    .extras .reservation{float:left; width:302px; height:466px; background:url(images/bg-quick-reservation-form.png) no-repeat top center; margin-left:8px; margin-top:20px; position:relative;}
    .extras .cta{float:right; width:760px; height:181px; text-align:right; padding-right:30px; margin-top:-475px; position:relative;}
    .extras .cta img{margin-right:-20px;}
    
    
    #page #middle{width:100%; position:relative; z-index:7; background-image:url(images/bg.png); background-color:#272727;}
    #middle .container{width:1098px; margin:/*-150px auto */0px auto; padding:0px; background-color:#E8E8E8;}
    #middle .container #rotator/* > #middle .container #rotator img*/{/*margin-top:-373px;*/ width:1098px; height:359px;}
    #middle .container #slider{width:1133px; height:154px; background:url(images/bg-fleet-container.png) no-repeat top center; margin-left:-17px; margin-top:-15px;}
    
    #middle .container #content{width:1098px; height:auto; background:url(images/bg-body-content.png) repeat-x top center #E8E8E8; margin-top:-20px;}
    #middle .container #content img.fleet-btn{float:left; margin-top:-6px; margin-left:10px;}
    
    
    #bottom{width:100%; min-height:292px; background:url(images/bg-footer.png) #161616;}

    This design will eventually be cut up and put into Wordpress - any and all suggestions/solutions are appreciated!

    Thanks in advance

    -AF

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Here's a link to the files on my server for web viewing.

    http://webbetasite.com/advantage/test/rotate.html

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    well i ghetto-rigged it - took too long for a response :-/


  •  

    Posting Permissions

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