SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Boston
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with columns?

    I'm having problems making the columns of my webpage work. I've tried a bunch of float variations, but nothing seems to work cross-browser. Right now, it looks great in IE 6, but gets all jumbled in mozilla.

    here's the webpage:
    http://www.tuftscycling.org
    and the css:
    http://www.tuftscycling.org/home.css

    I'm just looking at the part with the white background. I realize its not really liquid design, but its what I've got. If I find some time later, I might change things around to make it liquid. It validates CSS 2.0 and HTML 4.01 strict, so my code is at least syntactically fine.

    Thanks for any help you can give!

    Jon

  2. #2
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.glish.com/css/ should help you with your problem...

    but more specifically...
    http://www.glish.com/css/7.asp .
    Daniel Balsdon
    My Site

  3. #3
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Boston
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still can't get it to work, try as I may. I've got a kinda strange setup, unfortunately, and it doesn't seem to like the layout. Well, Netscape doesn't.

    I'd seen that page before, and tried some of the scripts, and they pretty much all work in IE, but none of htem seem to work in Netscape! ARGH!

    thanks...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think the problem is that you have floated the newsbox left and then tried to make your rightcontent 200px wide expecting it to wrap to the right. Ie6 oblidges (incorrectly) but Moz (& nn) allow the background and borders of the rightcontent to slide underneath the float. A float allows room for itself by increasing padding on the following text (images) but does not move the whole background and borders whcih are allowed to slide behind the float. IE gets this wrong and moves the whole element which is sometimes what you want.

    The solution is to float your right content as well.

    Something like this should work (although you will still need to tweak it a bit). I've added a few changes to your css but can't remember where I've made all the changes - so here's the whole css (sorry).
    Code:
    body {
     margin: 0px;
     padding: 20px 0;
     color: #888;
     background-color: #222;
     text-align: center;
      }
    img.block { display:block;}
    #page {
     padding: 0px; 
     margin: 0px auto;
     width: 776px;
     text-align: left;
     background-color: #002654;
     color: #000;
      }
    #side-logo {
     float: left;
      }
    #nav1 {
     border-bottom: 1px solid white;
      }
    .navlinkbox {
     border: 1px solid #fff;
     border-left-width: 0;
     margin: 0px 0px 0px 51px;
      background-color: #002654;
     color: #000;
     position: relative;
     font-family: Verdana, sans-serif;
      }
    /*/*/
    .navlinkbox UL {
     padding: 4px 2px 2px 135px;
     margin: 0px;
      }
    .navlinkbox UL LI {
     padding-right: 0.5em;
     display: inline;
      }
    /* */
    #home {
     border: 1px solid white;
      position: absolute;
     width: 101px;
     height: 45px;
     z-index: 10;
     top: 0px;
     left: 24px;
     background-color: #002654;
     color: #000;
     text-align: center;
     padding-top: 4px;
      }
    html>body #home {top:-1px}
    #topcontent {
     width:724px;
     position:relative;
     border-top: #fff 0px solid;
     border-right: #fff 1px solid;
     border-left: #fff 0px solid;
     border-bottom: #fff 0px solid;
     margin: 0px 0px 0px 51px; 
     font-family: verdana, sans-serif;
     background-color: #FFF;
     padding: 0px;
     color: #000;
     overflow: visible;
      }
    #bottomcontent {
     width:724px;
     position:relative;
     border-top: #fff 0px solid;
     border-right: #fff 1px solid;
     border-left: #fff 0px solid;
     border-bottom: #fff 1px solid;
     margin: 0px 0px 0px 51px; 
     font-family: verdana, sans-serif;
     background-color: #FFF;
     padding: 0px;
     color: #000;
     overflow: visible;
     
      }
    #newsbox {
     width:520px;
     float:left;
     border-bottom:1px dotted #002654;
     margin:0px;
     height:273px;
     background-color: #FFF;
     color: #000;
      }
    #rightcontent {
     background:#fff;
     border-left:1px dotted #002654;
     border-bottom:1px dotted #002654;
     padding:0px;
     width:200px;
     float:right;
      
      }
    #sponsors {
     border-bottom:1px dotted #002654;
      }
    #weather {
     height:132px;
     text-align:center;
      }
    html>body #weather {height:130px}
    #training {
     float:right;
     width:49.5%;
     border-left:1px dotted #002654;
     height:189px;
       background-color: #FFF;
     
     color: #000;
      }
    #traininginfo {
     padding:12px;
      }
    #racing {
     
     width:50%;
     height:189px;
      }
    .info{
     font-family: Times New Roman;
     padding-left:12px;
     padding-right:12px;
      }
    p {
     padding:0px;
     margin:0px;
     }
    
    a {
     color: #002654;
     text-decoration: underline;
     border: 0px none;
      }
    a:hover {
     color: #002654;
     text-decoration: overline underline;
      }
    a .white {
     color: #ffffff;
     text-decoration: none;
      }
    a:hover .white {
     color: yellow;
     text-decoration: none;
      }
    a .blue {
     color: #0093fa;
     text-decoration: none;
      }
    a:hover .blue {
     color: yellow;
     text-decoration: none;
      }
    a .noborder {
     border: 0px none;
      }
    h1, h2 {
    		border: #002654 1px dotted;
    		border-left: 0px none;
    		border-right: 0px none;
    		border-top: 0px none;
    		margin-bottom: 5px;
    		margin-top: 0px;
      margin-left: 0px;
    		margin-right: 0px;
    		padding: 0px;
     padding-left:5px;
    		display: block;
    		background: rgb(0, 38, 84);
    		color: #FFF;
    		font-size: 18px;
    		font-weight: bold;
     font-style: italic;
    		letter-spacing: 8px;
    		text-align: left;
    		height: 21px;
    		background-image: url("images/newsbg.jpg");
     }
    This works (for me) in Ie6, Mozilla 1.2 and OPera7, although it does need tidying up here and there.

    Paul


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
  •