Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27151
    I've recently decided to rebuild a friends website because the current site isn't working properly in all browsers, especially Firefox. The CSS positioning before was 'absolute' and i've changed the sites entire CSS to 'relative' positioning. I am using a div.wrapper to centre the entire site in the browsers but on certain pages the div.wrapper makes the browser scroll down to below the website where it is just the background colour.

    I have attached a image screenshot of what happens.

    Code for the div.wrapper I am using is...

    div.wrapper {
    position: absolute;
    left: 50%;
    top:5px;
    margin-left: -270px;
    width: 700px;
    padding: 0;
    border: 0;
    }
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    post the entire code... HTML and CSS... of one of the pages that is not displaying properly

  4. #3
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27151
    HTMl;

    <!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>Rapid Security LTD - Our Services</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />

    <meta name="DESCRIPTION" content="Rapid Security - RapidSecurityLTD" />
    <meta name="keywords" content="Rapid Security, Rapid Security LTD, rapidsecurityltd, Rapid, Security, Hull, East Yorkshire, Personal Alarms, Key Holding, Guards, Guard, Static Guard, Mobile Patrol, Mobile, Patrol, Key, Holding, " />

    <style type="text/css">
    body
    {
    font-family:Arial;
    font-size:15px;
    background-color:#100f10;
    }

    a:link { text-decoration:bold; border:none; font-size:45px; font-family: Arial; }

    p.big {line-height:240%;}

    </style>

    </head>

    <body>
    <div class="wrapper">

    <div class="logo">
    <a href="index.html"><img src="images/logo-1.png" border="0" /></a>
    </div>


    <div class="real-link-text">
    <a href="http://www.reslinkcluster.com/realtimedc/sec.php" class="reallink">Customer Log In</a>
    </div>


    <div class="logo-text">
    Supporting Businesses And Safer Communities
    </div>


    <div class="line">

    </div>


    <div class="aboutlink">

    <a href="about-us.html" class="nav">ABOUT US</a>

    </div>


    <div class="serviceslink">
    <a href="our-services.html" class="nav"><font color="#76b75d">OUR SERVICES</font></a>
    </div>

    <div class="contactlink">
    <a href="contact-us.html" class="nav"><B>CONTACT US</B></a>
    </div>




    <div class="servicescontent">
    Our aim is to satisfy each individualís security needs by being more innovative than other companies, incorporating the latest technology to carry out specific tasks in our role without any hidden charges. We use highly skilled and trained staff that are all licensed and regulated by the Security Industry Authority (SIA) and have been fully vetted.
    We are available to suit your security needs 24hrs a day whether it is a one off assignment or a contractual agreement to serve.

    </div>
    <div class="services-links">
    <p class="big"> <a href="mobile-patrol.html" class="mini">MOBILE PATROL</a><br />
    <a href="key-holding.html" class="mini">KEY HOLDING</a><br />
    <a href="static-guards.html" class="mini">STATIC GUARDS</a><br />
    <a href="personal-alarms.html" class="mini">PERSONAL ALARMS</a><br />
    <a href="epss.html" class="mini">EMERGENCY PREMISES<br />SECURING SERVICE</a><br />
    <a href="elss.html" class="mini">EVENT & LICENSED SERVICE</a><br />
    <a href="alarms.html" class="mini">ALARMS</a></p>
    </div>
    <div class="line2">
    </div>


    <div class="footer-services">
    Telephone; <a class="phone" href="tel:01482 666815">01482 666815</a> Email; info@rapidsecurityltd.co.uk
    </div>



    </div>
    </body>
    </html>

  5. #4
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27151
    CSS;


    a.nav:link {color: #2d3525; text-decoration:none; font-weight:bold; }
    a.nav:visited {color: #2d3525; text-decoration: none;font-weight:bold; }
    a.nav:hover {color: #76b75d; text-decoration: none; font-weight:bold; }
    a.nav:active {color: #76b75d; text-decoration: none; font-weight:bold; }


    a.mini:link {color: #2d3525; text-decoration:none; font-size:24px; font-weight:lighter; }
    a.mini:visited {color: #2d3525; text-decoration: none; font-size:24px; font-weight:lighter; }
    a.mini:hover {color:#50b951; text-decoration: none; font-size:24px; font-weight:lighter; }
    a.mini:active {color: #50b951; text-decoration: none; font-size:24px; font-weight:lighter; }

    a.email:link {color: #929090; text-decoration:none; font-size:18px; font-weight:lighter; }
    a.email:visited {color: #929090; text-decoration: none; font-size:18px; font-weight:lighter; }
    a.email:hover {color:#CCC; text-decoration: none; font-size:18px; }
    a.email:active {color: #CCC; text-decoration: none; font-size:18px; font-weight:lighter; }

    a.phone:link {color: #929090; text-decoration:none; font-size:16px; font-weight:lighter; }
    a.phone:visited {color: #929090; text-decoration: none; font-size:16px; font-weight:lighter; }
    a.phone:hover {color:#929090; text-decoration: none; font-size:16px; }
    a.phone:active {color: #929090; text-decoration: none; font-size:16px;font-weight:lighter; }

    a.reallink:link {color: #76b75d; text-decoration:none; font-size:13px; font-weight:lighter; }
    a.reallink:visited {color:#76b75d; text-decoration: none; font-size:13px; font-weight:lighter; }
    a.reallink:hover {color:#2d3525; text-decoration: none; font-size:13px; }
    a.reallink:active {color: #2d3525; text-decoration: none; font-size:13px;font-weight:lighter; }


    div.wrapper {
    position: absolute;
    left: 50%;
    top:5px;
    margin-left: -270px;
    width: 700px;
    padding: 0;
    border: 0;
    }

    div.logo{
    position:relative;
    height:99px;
    width:1080px;
    left:-218px;
    top:2px;
    background-repeat:no-repeat;
    }



    div.real-link-text{
    position:relative;
    height:32px;
    width:190px;
    left:584px;
    top:-100px;
    color:#929090;
    font-size:10px;
    text-align:center;
    }

    div.logo-text{
    position:relative;
    height:22px;
    width:638px;
    left:32px;
    top:-76px;
    color:#d6d7d9;
    font-size:16px;
    font-style:italic;
    }



    div.line{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-10px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }

    div.line1{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-162px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }


    div.line2{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-528px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }

    div.line3{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-373px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }

    div.line4{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-529px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }

    div.line5{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-183px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }


    div.line6{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-362px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }

    div.line7{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-515px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }



    div.line8{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-442px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }

    div.line9{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:-603px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }

    div.line10{
    position:relative;
    height:12px;
    width:1017px;
    left:-190px;
    top:60px;
    background-image:url(images/line.png);
    background-repeat:no-repeat;
    }




    div.homeimage{
    position:relative;
    height:501px;
    width:978px;
    left:-216px;
    top:-163px;
    background-image:url(images/front-image-1.jpg);
    background-repeat:no-repeat;
    }

    div.contact-form-image{
    position:relative;
    height:501px;
    width:978px;
    left:-216px;
    top:-163px;
    background-image:url(images/contact-form-image-1.png);
    background-repeat:no-repeat;
    }

    div.submit-header{
    position:relative;
    height:67px;
    width:642px;
    left:118px;
    top:-159px;
    color:#100f10;
    font-size:40px;
    font-weight:200;
    text-align:center;
    }

    div.aboutlink{
    position:relative;
    height:50px;
    width:350px;
    left:-202px;
    top:-75px;
    color:#2d3525;
    font-size:45px;
    }

    div.aboutcontent{
    position:relative;
    height:501px;
    width:790px;
    left:-121px;
    top:-160px;
    font-size:18px;
    color:#929090;
    text-align:center;
    }





    div.serviceslink{
    position:relative;
    height:50px;
    width:350px;
    left:64px;
    top:-126px;
    color:#2d3525;
    font-size:45px;
    }






    div.contactlink{
    position:relative;
    height:50px;
    width:350px;
    left:437px;
    top:-176px;
    color:#2d3525;
    font-size:45px;
    }

    div.contactcontent{
    position:relative;
    height:279px;
    width:934px;
    left:-199px;
    top:-160px;
    font-size:18px;
    color:#929090;
    text-align:center;
    }



    div.contactcontent-job{
    position:relative;
    height:501px;
    width:934px;
    left:-199px;
    top:-160px;
    font-size:18px;
    color:#929090;
    text-align:center;
    }


    div.contactform{
    position:relative;
    height:202px;
    width:439px;
    left:59px;
    top:-210px;
    font-size:18px;
    color:#929090;
    }


    div.vacancies{
    position:relative;
    height:20px;
    width:934px;
    left:-197px;
    top:-195px;
    font-size:18px;
    color:#929090;
    text-align:center;
    }



    div.contact-header{
    position:absolute;
    height:67px;
    width:934px;
    left:-197px;
    top:596px;
    color:#929090;
    text-align:center;
    }


    div.servicescontent{
    position:relative;
    height:474px;
    width:923px;
    left:-199px;
    top:-160px;
    font-size:18px;
    color:#929090;
    text-align:center;
    }

    div.services-links{
    position:relative;
    height:375px;
    width:923px;
    left:-199px;
    top:-515px;
    font-size:18px;
    background-image:url(images/services-image.png);
    background-repeat:no-repeat;
    color:#929090;
    text-align:center;
    }


    div.servicesimage{
    position:relative;
    height:355px;
    width:934px;
    left:-205px;
    top:-497px;
    background-image:url(images/services-image.jpg);
    background-image:url(images/services-image.png);
    background-repeat:no-repeat;
    }


    div.services-sub-content{
    position:relative;
    height:474px;
    width:923px;
    left:-199px;
    top:-165px;
    font-size:18px;
    color:#929090;
    text-align:center;
    }


    div.contentheader{
    position:relative;
    height:48px;
    width:923px;
    left:-199px;
    top:-164px;
    color:#929090;
    font-size:40px;
    font-weight:200;
    text-align:center;
    }




    div.mobileimage{
    position:relative;
    height:190px;
    width:976px;
    left:-220px;
    top:-365px;
    background-image:url(images/m-patrol.png);
    background-repeat:no-repeat;
    }

    div.keyholding-image{
    position:relative;
    height:346px;
    width:1033px;
    left:-234px;
    top:-488px;
    background-image:url(images/k-holding.png);
    background-repeat:no-repeat;
    }

    div.p-alarms-image{
    position:relative;
    height:179px;
    width:1008px;
    left:-237px;
    top:-358px;
    background-image:url(images/p-alarms.png);
    background-repeat:no-repeat;
    }

    div.epss-image{
    position:relative;
    height:332px;
    width:1008px;
    left:-237px;
    top:-530px;
    background-image:url(images/epss.png);
    background-repeat:no-repeat;
    }


    div.els-image{
    position:relative;
    height:259px;
    width:1008px;
    left:-237px;
    top:-457px;
    background-image:url(images/els.png);
    background-repeat:no-repeat;
    }

    div.alarms-image{
    position:relative;
    height:420px;
    width:1008px;
    left:-217px;
    top:-563px;
    background-image:url(images/alarms.png);
    background-repeat:no-repeat;
    }





    div.serviceslink-mobile{
    position:absolute;
    height:24px;
    width:790px;
    left:-121px;
    top:194px;
    color:#2d3525;
    text-align:center;
    }

    div.serviceslink-static{
    position:absolute;
    height:24px;
    width:790px;
    left:-121px;
    top:226px;
    color:#2d3525;
    text-align:center;
    }


    div.footer{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-170px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }


    div.footer-services{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-536px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }

    div.footer-services-1{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-381px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }

    div.footer-services-2{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-537px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }


    div.footer-services-3{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-191px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }


    div.footer-services-4{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-370px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }

    div.footer-services-5{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-523px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }


    div.footer-services-6{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-450px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }

    div.footer-services-7{
    position:relative;
    height:16px;
    width:933px;
    left:-196px;
    top:-611px;
    color:#929090;
    font-size:13px;
    text-align:center;
    }

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    When I put this in a single file... ( no CSS include ).... is displays properly... since I don't have your images...

    I'm thinking it has to do with your "logo-1.png "... as your CSS is trying to define the size and position, as a background image, but you actually attached the image on the page as a regular image...

    you should either try including the image as a background image... or dropping the BG image attributes and insert the image normally into the DIV

  7. #6
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27151
    Yeah i'll give it a go. If you use Firefox, go to www.rapidsecurityltd.co.uk/test/ and especially on the 'our services' page you will notice the problem i'm facing.

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    hmmmm..

    looks the same to me in firefox and chrome

  9. #8
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27151
    Strange, I have looked at it again using Firefox on both my mac and my girlfriends Windows computer, and both still show the same fault with the big blank space below the website. It is the same in Chrome on my mac, a huge space below the website.

    Something is making the div.wrapper to create the space below the website, not sure what though.

  10. #9
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27151
    There is space appearing under each page of the website, some less than others, its the worst with the services pages.

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Just a side note... when you're using absolute positioning, the wrapper should be Relative and the rest of the divs would be Absolute. That's the way I've learned anyway.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

css container vs wrapper

,

css wrapper vs container

,

html css container vs wrapper

,

html wrapper container

,

webdesign wrappter container

,

wrapper and container

,

wrapper and container css

,

wrapper container css

Click on a term to search for related topics.
All times are GMT -6. The time now is 08:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com