SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS divs pushing each other about....

    Heres the page

    http://www.stanmore.ac.uk/test/defau...=article&ID=37

    If i understand right, the links underneath the image of the man are pushing the main text of the page down. I am wanting the main text to be aligned with the top of the image of the man, rather than 2 inches down, as it is at the moment.

    Is there anyway I can make it so that this 'collegelinks' div isnt interferring with the 'maintext' div?

    Heres the CSS:

    html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
    font-size: 100%;
    letter-spacing: 1px;
    text-align: left;
    background: #FCFCFC;
    }

    #outer{
    min-height:100%;
    margin-bottom:-84px;
    height:auto;
    }
    * html #outer{height:100%;}
    #footer {
    width:100%;
    clear:both;
    height:30px;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:3px;
    text-align: right;
    }
    div#footer a:link {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    }
    div#footer a:visited {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    }
    div#footer a:active {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#footer a:hover {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }

    #clearfooter{clear:both;height:37px;}
    div p {margin-top:14px}
    #minHeight{float:left;width:0px;height:100%;margin-bottom:-32px;} /*safari wrapper thanks to Tim

    Connor*/* html #minHeight{margin-bottom:-33px;}
    div#menu {
    background: #FFFFFF url(http://www.stanmore.ac.uk/images/nav/ccbg.jpg);
    padding: 0px;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    text-align: left;
    border-top: 2px solid #999999;
    border-bottom: 2px solid #222222;
    }
    div#menulinks img {
    vertical-align: middle
    }
    div#menulinks {
    line-height:25px;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    width: 100%;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 86%;
    font-weight: bold;
    color: #6699FF;
    letter-spacing: -0.5px;
    }
    div#menulinks a:link {
    color: #6699FF;
    text-decoration: none;
    }
    div#menulinks a:visited {
    color: #6699FF;
    text-decoration: none;
    }
    div#menulinks a:active {
    text-decoration: none;
    border-bottom: 2px solid #6699FF;
    }
    div#menulinks a:hover {
    text-decoration: none;
    border-bottom: 2px solid #6699FF;
    }
    div#menulinks a:focus {
    text-decoration: none;
    border-bottom: 2px solid #6699FF;
    }

    abbr {
    cursor:help;
    border-bottom:1px dotted #FFFFFF;
    }

    img {
    border: none;
    }

    div#header {
    width: 100%;
    text-align: right;
    background: #183788 url(http://www.stanmore.ac.uk/images/nav/headerbg.jpg);
    position:relative;
    }

    div#header img {
    position:absolute;
    top:7px;
    right:4px;
    }

    div#header span {
    font-size: 67%;
    font-weight: bold;
    color: #FCFCFC;
    position:absolute;
    bottom:0;
    right:0;
    padding-bottom: 2px;
    }

    div#toplinks {
    height: 90px;
    left: 0px;
    top: 0px;
    text-align: left;
    background: url(http://www.stanmore.ac.uk/images/nav...r_students.jpg);
    background-repeat: no-repeat;
    font-size: 76%;
    font-weight: bold;
    color: #FCFCFC;
    }
    div#toplinks a:link {
    color: #FCFCFC;
    text-decoration: none;
    }
    div#toplinks a:visited {
    color: #FCFCFC;
    text-decoration: none;
    }
    div#toplinks a:active {
    color: #FCFCFC;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#toplinks a:hover {
    color: #FCFCFC;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#toplinks a:focus {
    color: #FCFCFC;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    form {
    padding: 0px;
    margin: 0px;
    }
    div#search {
    width: 100%;
    height: 1.8em;
    line-height:24px;
    padding-top: 0.2em;
    background: #6699FF url(http://www.stanmore.ac.uk/images/nav/searchbg.jpg) repeat-x ;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 88%;
    text-align: right;
    font-weight: bold;
    color: #FFFFFF;
    }

    #searchlinks {
    float:left;
    padding-top: 0.1em;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 95%;
    text-align: left;
    }

    #searchlinks span {
    border-bottom: 1px solid #FFFFFF;
    }

    #searchlinks a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #searchlinks a:visited {
    color: #FFFFFF;
    text-decoration: none;
    }
    div#searchlinks a:active {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#searchlinks a:hover {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#searchlinks a:focus {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#cookiecrumbs {
    position:relative;
    width: 100%;
    height: 1.4em;
    padding-top: 3px;
    background: #FFFFFF url(http://www.stanmore.ac.uk/images/nav/ccbg.jpg);
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 75%;
    font-weight: bold;
    text-align: left;
    color: #686868;
    border-top: 1px solid #777777;
    }
    div#cookiecrumbs a:link {
    color: #6699FF;
    text-decoration: none;
    }
    div#cookiecrumbs a:visited {
    color: #6699FF;
    text-decoration: none;
    }
    div#cookiecrumbs a:active {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#cookiecrumbs a:hover {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#cookiecrumbs a:focus {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#titletext {
    margin-left: 15px;
    text-align: left;
    font-size: 70px;
    color: #639EFF;
    letter-spacing: -4px;
    }

    div#sublinks {
    position: relative;
    top: -150px;
    margin-left: 235px;

    background-repeat: no-repeat;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 100%;
    color: #686868;
    letter-spacing: -0.5px;
    font-weight: bold;
    }

    div#sublinks a:link {
    color: #183788;
    text-decoration: none;
    }
    div#sublinks a:visited {
    color: #183788;
    text-decoration: none;
    }
    div#sublinks a:active {
    color: #183788;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#sublinks a:hover {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#sublinks a:focus {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }

    div#content {
    width: 100%;
    }

    div#mainpics {
    position: relative;
    top: 0px;
    margin-left: 20px;
    width: 200px;
    height: 150px;

    }

    div#maintext {
    position: relative;
    top: -150px;
    margin-left: 235px;
    text-align: left;
    font-size: 82%;
    color: #183788;
    padding: 4px;
    background: url(http://www.stanmore.ac.uk/images/nav/arrowbg.gif) right top;
    background-repeat: no-repeat;
    }

    div#maintext span {
    font-weight: bold;
    font-size: 120%;
    border-bottom: 1px solid #183788;
    }

    div#maintext a:link {
    font-weight: bold;
    color: #639EFF;
    text-decoration: none;
    }
    div#maintext a:visited {
    font-weight: bold;
    color: #639EFF;
    text-decoration: none;
    }
    div#maintext a:active {
    font-weight: bold;
    color: #639EFF;
    text-decoration: none;
    border-bottom: 1px solid #639EFF;
    }
    div#maintext a:hover {
    font-weight: bold;
    color: #639EFF;
    text-decoration: none;
    border-bottom: 1px solid #639EFF;
    }
    div#maintext a:focus {
    font-weight: bold;
    color: #639EFF;
    text-decoration: none;
    border-bottom: 1px solid #639EFF;
    }

    div#subsearchlinks {
    width: 100%;
    height: 1.8em;
    background: #6699FF url(http://www.stanmore.ac.uk/images/nav/searchbg.jpg) repeat-x ;
    line-height:24px;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 79%;
    text-align: left;
    font-weight: bold;
    color: #FFFFFF;
    padding-top: 5px;
    border-top: 1px solid #183788;
    }

    div#subsearchlinks span {
    text-align: right;
    }

    div#subsearchlinks a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    div#subsearchlinks a:visited {
    color: #FFFFFF;
    text-decoration: none;
    }
    div#subsearchlinks a:active {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#subsearchlinks a:hover {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#subsearchlinks a:focus {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }

    div#copyright {
    width:100%;
    clear:both;
    height:30px;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:3px;
    color: #FFFFFF;
    background: #183788 url(http://www.stanmore.ac.uk/images/nav/headerbg.jpg);
    text-align: right;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 70%;
    }
    div#copyright a:link {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    }
    div#copyright a:visited {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    }
    div#copyright a:active {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }
    div#copyright a:hover {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }

    div#toolbar {
    width: 100%;
    height: 1.4em;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 75%;
    font-weight: bold;
    text-align: right;
    color: #686868;
    }
    div#toolbar a:link {
    color: #6699FF;
    text-decoration: none;
    }
    div#toolbar a:visited {
    color: #6699FF;
    text-decoration: none;
    }
    div#toolbar a:active {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#toolbar a:hover {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#toolbar a:focus {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }

    div#collegetitle {
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 105%;
    font-weight: bold;
    color: #6699FF;
    text-decoration: underline;
    }
    div#collegelinks {
    position: relative;
    margin-left: 10px;
    font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 90%;
    color: #686868;
    letter-spacing: -0.5px;
    font-weight: bold;
    }

    div#collegelinks a:link {
    color: #183788;
    text-decoration: none;
    }
    div#collegelinks a:visited {
    color: #183788;
    text-decoration: none;
    }
    div#collegelinks a:active {
    color: #183788;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#collegelinks a:hover {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }
    div#collegelinks a:focus {
    color: #6699FF;
    text-decoration: none;
    border-bottom: 1px solid #6699FF;
    }

    Any help would be great

    Cheers.

  2. #2
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to say, the gap problem only appears in Internet Explorer, Opera and Mozilla display it fine. Any ideas?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    The answer to this is that you should have floated the image and links and allowed the text to come alongside naturally.

    You have dragged the text up using negative relative positioning which meant that you have dragged the sublinks and then the mainlinks (and then anything else that follows would also have to be dragged up). Negative margins on the first element would have worked better and not leave the gaps that relative positioning does.

    The reason that ie is different from moz is that you have set the height of your pic and links to 150px which it clearly isn't. Therefore mozilla will only treat it as 150px which means your text lines up ok. On the other hand ie sees the height for what it really is (about 300px) and is therefore 150px lower than other browsers. So it is your mistake that has caused the problem in the first place .

    I would float the pic like this (and fix the 3 pixel jog).
    Code:
    div#mainpics {
    position: relative;
    top: 0px;
    margin-left: 20px;
    width: 200px;
    float:left;
    display:inline;/* ie double margin fix*/
    }
    /* commented backslash hack - 3 pixel jog \*/ 
    * html div#mainpics{height:1%;} 
    /* end hack */ 
    div#maintext {
    position: relative;
     margin-left: 235px; 
     text-align: left;
     font-size: 82%;
     color: #183788;
     padding: 4px;
     background: url(http://www.stanmore.ac.uk/images/nav/arrowbg.gif) right top;
     background-repeat: no-repeat;
    Also take out the negative positioning from sublinks also. You will the need to sort the footer out because you have probably done something weird with that to compensate for you earlier negative positioning.

    Paul

  4. #4
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    You have fixed 2 problems of mine at the same time! Firstly the one posted, and also due to the negative positioning, there was always a massive gap underneath the main text, so the footer was always miles away from the rest of the page. Now ive tweaked the footer properties, its all looking much better.

    Can't thank you enough mate. No wonder it says Mentor Webdesigner of the Year 2004, you deserve it....


Bookmarks

Posting Permissions

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