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 1 of 1
  1. #1
    csa
    csa is offline
    New Coder
    Join Date
    Oct 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Working but would like advice

    Please have a look at the following page:

    http://www.wesellfudge.co.uk/pt/upload.htm

    I've tested it in FF and IE and on W3C and it all works (kinda!), however there are some things which are bugging me and I'm sure there must be a better/tidier way to do it. My questions all relate the right hand column containing the mailing list and latest news.

    In IE the page looks just how I want it too, all the blue runs into the green, green runs into the grey and then back to blue. However, in FF there is a spacing issue ie you can see the blue background between each item.
    Q1: How can I amend this so it looks like IE and all the div's align up next to each other?
    Q2: If I want to reduce the spacing between the Mailing List and the Join our.. text, what is the correct procedure for doing this?
    Q3. Just realised got another issue, how to I get the sidebody to line up the mainbody at the bottom where the body text is? If I specify a height this looks great in IE but not in FF.

    Hope this make sense!

    The code for the right column is below:

    Code:
    /* CSS Document */
    body {
    margin:0px; 
    padding:0px; 
    font: .7em verdana, arial, sans-serif;
    background-image:url(images/topline.gif);
    }
    .cssnav
    {
    position: relative;
    font-family: arial, helvetica, sans-serif;
    background: url(images/productsroll.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 72px;
    height: 82px;
    margin: 0;
    padding: 0;
    padding: 0;
    float:left;
    }
    
    .cssnav a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 72px;
    height: 82px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    padding: 0;
    float:left;
    }
    .cssnav img
    {
    width: 72px;
    height: 82px;
    border: 0
    }
    
    * html a:hover
    {
    visibility:visible
    }
    
    .cssnav a:hover img
    {
    visibility:hidden
    }
    
    .cssnav span
    {
    position: absolute;
    left: 55px;
    top: 50px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    } 
    .cssnav2
    {
    position: relative;
    font-family: arial, helvetica, sans-serif;
    background: url(images/technologyroll.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 93px;
    height: 82px;
    margin: 0;
    padding: 0;
    float:left;
    }
    
    .cssnav2 a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 93px;
    height: 82px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    float:left;
    }
    
    .cssnav2 img
    {
    width: 93px;
    height: 82px;
    border: 0;
    float:left;
    }
    
    {
    visibility:visible;
    }
    
    .cssnav2 a:hover img
    {
    visibility:hidden
    }
     
    .cssnav3
    {
    position: relative;
    font-family: arial, helvetica, sans-serif;
    background: url(images/distributorroll.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 139px;
    height: 82px;
    margin: 0;
    padding: 0;
    float:left;
    }
    
    .cssnav3 a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 139px;
    height: 82px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    float:left;
    }
    
    .cssnav3 img
    {
    width: 139px;
    height: 82px;
    border: 0;
    float:left;
    }
    
    {
    visibility:visible;
    }
    
    .cssnav3 a:hover img
    {
    visibility:hidden
    }
    
    .cssnav4
    {
    position: relative;
    font-family: arial, helvetica, sans-serif;
    background: url(images/aboutusroll.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 73px;
    height: 82px;
    margin: 0;
    padding: 0;
    float:left;
    }
    
    .cssnav4 a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 73px;
    height: 82px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    float:left;
    }
    
    .cssnav4 img
    {
    width: 73px;
    height: 82px;
    border: 0;
    float:left;
    }
    
    * html a:hover
    {
    visibility:visible
    }
    
    .cssnav4 a:hover img
    {
    visibility:hidden
    }
    
    .cssnav5
    {
    position: relative;
    font-family: arial, helvetica, sans-serif;
    background: url(images/contactusroll.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 83px;
    height: 82px;
    margin: 0;
    padding: 0;
    float:left;
    }
    
    .cssnav5 a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 83px;
    height: 82px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    float:left;
    }
    
    .cssnav5 img
    {
    width: 83px;
    height: 82px;
    border: 0;
    float:left;
    }
    
    {
    visibility:visible;
    }
    
    .cssnav5 a:hover img
    {
    visibility:hidden
    } 
    .cssnav6 img
    {
    width: 253px;
    height: 82px;
    border: 0;
    float:left;
    }
    .cssnav7
    {
    position: relative;
    font-family: arial, helvetica, sans-serif;
    background: url(images/homeroll.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 59px;
    height: 82px;
    margin: 0;
    padding: 0;
    float:left;
    }
    
    .cssnav7 a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 59px;
    height: 82px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    float:left;
    }
    
    .cssnav7 img
    {
    width: 59px;
    height: 82px;
    border: 0;
    float:left;
    }
    
    {
    visibility:visible;
    }
    
    .cssnav7 a:hover img
    {
    visibility:hidden
    }
    
    div#navigationwrapper {
    width:772px; margin-left:auto; margin-right:auto; 
    background-color:#CFC;
    background-image:url(images/topline.gif);
    border:#FFF solid;  border-width: 0px 2px  0px 2px;
    }
    div#mainwrapper {
    width:774px; margin-left:auto; margin-right:auto; 
    background-color:#8899B5;
    
    border:#FFF solid;  border-width: 0px 0px  0px 0px;
    }
    div#bodywrapper {
    width:774px;
    background-color:#8899B5;
    border:#FFF solid;  border-width: 0px 2px  2px 0px;
    }
    /* body content */
    div#mainbody{
    width: 504px;
    background-image:url(images/bodyimage.jpg);
    background-color:#D0D1D5;
    float:left;
    border:#FFF solid;  border-width: 2px 2px  0px 2px;
    padding:0 0 5px 0
    }
    div#sidebody{
    width: 266px;
    background-color:#8899B5;
    float:left;
    border:#FFF solid;  border-width: 2px 0px  0px 0px;
    }
    p{
    width: 480px;
    padding-top: 0px;
    padding: 0px 10px;
    color:#333333;
    }
    h1{
    padding-top: 140px;
    padding-left: 10px;
    font-size:14px;
    font-weight:bold;
    }
    /* footer content */
    div#footer{
    width:776px;
    background-color:#FFFFFF;
    clear:both;
    font-size:10px;
    color:#666666;
    text-align:center;
    padding: 5px 0px 5px 0px;
    }
    
    #footer a:link {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #666666;
    	text-decoration: none;
    }
    #footer a:visited {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #666666;
    	text-decoration: none;
    }
    #footer a:hover {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #666666;
    	text-decoration:underline;
    }
    #footer a:active {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #666666;
    	text-decoration: none;
    }
    /* right content */
    div#logo{
    width: 266px;
    background-color:#24408D;
    }
    div#mailinglist{
    position:relative;
    width: 266px;
    background-color:#628676;
    }
    p#mailinglisttext{
    position:relative;
    font-weight: bold;
    width: 220px;
    background-color:#628676;
    color:#FFFFFF;
    padding-top: 5px;
    }
    p#mailinglisttext2{
    position:relative;
    width: 220px;
    background-color:#628676;
    color:#FFFFFF;
    padding-top: 5px;
    }
    .joinhere{
    width: 80px;
    padding-left: 10px;
    }
    div#latestnews{
    width: 266px;
    background-color:#DCDCDD;
    }
    p#latestnewstext{
    width: 220px;
    color:#24408D;
    font-weight: bold;
    padding-top: 5px;
    }
    p#latestnewlinks{
    width: 220px;
    color:#24408D;
    }
    ul{
    }
    div#links li{
    width: 220px;
    text-align:left;
    list-style-type: none;
    margin:0px 0px 0px -32px;
    line-height: 18px;
    }
    div#flash{
    width: 243px;
    }
    Last edited by csa; 05-03-2006 at 12:45 PM.


 

Posting Permissions

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