17 replies [Last post]
glennk
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2008-03-06
Posts: 15
Points: 0

Hi There,

I am attempting to rejig a css template I found on the net. The aim is to switch to a tableless design for my site using a full css design.

The test page can be found at :

http://www.whitbyseaanglers.co.uk/test1/

In Firefox all appears well with the right column extending below the left column. However in Internet explorer the right column stops at the same height as the centre column and I think the extra content in the right column is getting shoved under the footer. Also a scroll bar is showing In IE.

The code involved is as follows

/*****************************************************/

/* Author: Gerhard Erbes */

/* */

/* Version: 5.0 */

/* Date: March 14, 2006 */

/*****************************************************/

/*****************/

/* MAIN BODY */

/*****************/

body {

font-size: 62.5%;

margin: 0em auto;

padding: 0em;

background-color: #8C8C8C;

font-family: Verdana,Tahoma, Arial,sans-serif;

}

#wrap {

width: 95em;

background-color: white;

margin: 0em auto;

overflow: auto;

}

/**************/

/* HEADER */

/**************/

#header-section {

width: 95em;

margin: 0em 0em 0em 0em;

border-top: medium solid #8C8C8C;

border-top-width: 15px

}

#header-background {

width: 100%;

height: 100%;

float: left;

border: none;

margin: 0em 0em 0em 0em;

}

#header-background-left {

/* width: 180px; */

float: left;

margin: 0em 0em 0em 0em;

padding: 0em 0em 0em 0em;

border: 0em 0em 0em 0em;;

}

#header-background-right {

float: right;

margin: 0em 0em 0em 0em;

padding: 0em 0em 0em 0em;

border: none;

}

#header {

clear: both;

margin: 0em 0em 1.5em 0em;

border-top: solid 0.1em rgb(175,175,175);

border-bottom: solid 0.1em rgb(175,175,175);

background-color: rgb(235,235,235);

text-transform: uppercase;

line-height: 2.0em;

height: 2.0em;

color: rgb(50,50,50);

}

/*****************/

/* MENU */

/*****************/

.menu1 {

float:left; width:100%; font-family: verdana, arial, sans-serif; font-size:11px;

/* background:url(images/menu1.gif) repeat-x top left;*/

background-color: #000080;

border-top:3px solid #4c597f; border-bottom:3px solid #4c597f;

margin:0 0 20px 0; /* for this demo only */

}

.menu1 ul {

padding:0;margin:0;list-style-type:none;

}

.menu1 ul li {

float:left; position:relative; background:url(images/divider1.gif) no-repeat top right;

}

.menu1 ul li a, .menu1 ul li a:visited {

float:left; display:block; text-decoration:none;color:#ddf; padding:0px 16px; line-height:25px; height:30px; border-bottom:3px solid #fff;

}

.menu1 ul li:hover {width:auto;}

.menu1 ul li a.menu1one:hover {border-color:#c00; color:#f88;}

.menu1 ul li a.menu1two:hover {border-color:#c60; color:#fc0;}

.menu1 ul li a.menu1three:hover {border-color:#cc0; color:#cc0;}

.menu1 ul li a.menu1four:hover {border-color:#080; color:#0e0;}

.menu1 ul li a.menu1five:hover {border-color:#00c; color:#aaf;}

.menu1 ul li a.menu1six:hover {border-color:#c0c; color:#f8f;}

.menu1 ul li:hover a.menu1one {border-color:#c00; color:#f88;}

.menu1 ul li:hover a.menu1two {border-color:#c60; color:#fc0;}

.menu1 ul li:hover a.menu1three {border-color:#cc0; color:#cc0;}

.menu1 ul li:hover a.menu1four {border-color:#080; color:#0e0;}

.menu1 ul li:hover a.menu1five {border-color:#00c; color:#aaf;}

.menu1 ul li:hover a.menu1six {border-color:#c0c; color:#f8f;}

.menu1 ul li ul {

display: none;

}

.menu1 table {

margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;

}

/* specific to non IE browsers */

.menu1 ul li:hover ul {

display:block;position:absolute;top:32px;margin-top:1px; left:0;width:154px;border-bottom:1px solid #000;

}

.menu1 ul li:hover ul.endstop {

left:-92px;

}

.menu1 ul li:hover ul li ul {

display: none;

}

.menu1 ul li:hover ul li a {

display:block;background:#fff;color:#000;height:auto;line-height:15px;padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0;

}

.menu1 ul li:hover ul li a.drop {

background:#ccd url(images/bullet1.gif) no-repeat 3px 8px;

}

.menu1 ul li:hover ul li a:hover {

color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;

}

.menu1 ul li:hover ul li a:hover.drop {

background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;

}

.menu1 ul li:hover ul li:hover ul {

display:block; position:absolute; left:153px; top:-1px;

}

.menu1 ul li:hover ul li:hover ul.left {

left:-153px;

}

/* specific to IE5.5 and IE6 browsers */

.menu1 ul li a:hover ul {

display:block;position:absolute;top:30px; t\op:33px; background:#fff;left:0; border-bottom:1px solid #000;

}

.menu1 ul li a:hover ul.endstop {

left: -92px;

}

.menu1 ul li a:hover ul li a {

display:block;background:#fff;color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0;

}

.menu1 ul li a:hover ul li a.drop {

background:#ccd url(images/bullet1.gif) no-repeat 3px 8px; padding-bottom:4px;

}

.menu1 ul li a:hover ul li a ul {

visibility:hidden; position:absolute; height:0; width:0;

}

.menu1 ul li a:hover ul li a:hover {

color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;

}

.menu1 ul li a:hover ul li a:hover.drop {

background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;

}

.menu1 ul li a:hover ul li a:hover ul {

visibility:visible; position:absolute; top:0;color:#000; left:153px;

}

.menu1 ul li a:hover ul li a:hover ul.left {

left:-153px;

}

/***********************/

/*** LEFT COLUMN ***/

/***********************/

#left-column {

width: 20%;

float: left;

vertical-align: top;

background-color: rgb(255,255,255);

font-size: 1.1em;

color: rgb(50,50,50);

}

#left-column ul {

width: 95%;

padding: 0em;

margin: 0em;

list-style: none;

}

#left-column li {

margin: 0em 0em 0em 0em;

}

#left-column li a {

display: block;

padding: 0.3em 0.7em 0.2em 1.2em;

border-left: solid 0.5em rgb(235,235,235);

border-top: solid 0.1em rgb(200,200,200);

background-color: rgb(235,235,235);

text-decoration: none;

font-weight: normal;

color: rgb(50,50,50);

height: 1.3em;

}

#left-column a:hover {

border-left: solid 0.5em rgb(175,175,175);

background-color: rgb(220,220,220);

text-decoration: none;

color: rgb(50,50,50);

}

#left-column .selected {

display: block;

padding: 0.3em 0.7em 0.2em 1.2em;

border-left: solid 0.5em rgb(175,175,175);

border-top: solid 0.1em rgb(200,200,200);

background-color: rgb(220,220,220);

font-weight: normal;

color: rgb(50,50,50);

}

#left-column .left-navheader-first {

display: block;

margin: 0em 0em 1.0em 0em;

padding: 0.3em 0.7em 0.3em 0.9em;

border-left: solid 0em rgb(255,210,113);

background-color: rgb(220,220,220);

text-transform: uppercase;

text-decoration: none;

font-weight: bold;

color: rgb(50,50,50);

}

#left-column .left-navheader {

display: block;

margin: 1.0em 0em 0em 0em;

padding: 0.3em 0.7em 0.2em 0.4em;

border-left: solid 0.5em rgb(235,235,235);

background-color: rgb(220,220,220);

text-transform: uppercase;

text-decoration: none;

font-weight: bold;

color: rgb(50,50,50);

}

/*************************/

/*** MIDDLE COLUMN ***/

/*************************/

/* Sections */

/************/

#middle-column {

float: left;

width: 67.5%;

padding: 0em 0.6em 0em 0.7em;

background-color: rgb(255,255,255);

color: rgb(100,100,100);

line-height: 1.3em;

font-size: 1.2em;

}

#middle-column a {

color: #7A7ACC

}

#middle-column a:visited {

color: #000080

}

#middle-column a:hover {

color: red

}

.middle-column-left {

float: left;

width: 47.75%;

}

.middle-column-right {

float: right;

width: 47.75%;

}

/*****************/

/* Box titlebars */

/*****************/

.middle-column-box-title-grey {

clear: both;

display: block;

margin: 0em 0em 0.5em 0em;

padding: 0.2em 0em 0.2em 0.3em;

background-color: rgb(187,211,247);

font-weight: bold;

color: rgb(50,50,50);

}

.middle-column-box-title-blue {

clear: both;

display: block;

margin: 0em 0em 0.5em 0em;

padding: 0.2em 0em 0.2em 0.3em;

background-color: rgb(187,211,247);

font-weight: bold;

color: rgb(50,50,50);

}

.middle-column-box-title-yellow {

clear: both;

display: block;

margin: 0em 0em 0.5em 0em;

padding: 0.2em 0em 0.2em 0.3em;

background-color: rgb(255,236,128);

font-weight: bold;

color: rgb(50,50,50);

}

.middle-column-box-title-green {

clear: both;

display: block;

margin: 0em 0em 0.5em 0em;

padding: 0.2em 0em 0.2em 0.3em;

background-color: rgb(196,221,108);

font-weight: bold;

color: rgb(50,50,50);

}

.middle-column-box-title-red {

clear: both;

display: block;

margin: 0em 0em 0.5em 0em;

padding: 0.2em 0em 0.2em 0.3em;

background-color: rgb(255,176,176);

font-weight: bold;

color: rgb(50,50,50);

}

/* Box backgrounds */

/*******************/

/* Full Box backgrounds - Full width boxes */

/***************************************/

.middle-column-box-white {

float: left;

width: 100%;

margin: 0em 0em 1.5em 0em;

padding: 0em 0em 0em 0em;

}

.middle-column-box-white-feature {

float: left;

width: 100%;

margin: 0em 0em 1.5em 0em;

padding: 0em 0em 0em 0em;

background-color: #E9E9E9;

}

/* Box backgrounds - Half width boxes */

/**************************************/

.middle-column-box-left-white {

float: left;

width: 98%;

margin: 0em 0em 1.5em 0em;

padding: 0em 0em 0em 0em;

}

.middle-column-box-right-white {

float: right;

width: 98%;

margin: 0em 0em 1.5em 0em;

padding: 0em 0em 0em 0em;

}

/* Text headings and paragraphs */

/********************************/

h1{

clear: both;

display: block;

font-family:verdana;

font-size: 1.0em;

margin: 0em 0em 0.5em 0em;

padding: 0.2em 0em 0.2em 0.3em;

background-color: #000080;

font-weight: bold;

color: white;

}

h2{

clear: both;

display: block;

font-family:verdana;

font-size: 1.0em;

margin: 0em 0em 0.5em 0em;

padding: 0.2em 0em 0.2em 0.3em;

background-color: #000080;

font-weight: bold;

color: white;

}

h3{

clear: both;

display: block;

font-family:verdana;

font-size: 1.0em;

margin: 0em 0em 0.5em 0em;

padding: 0.2em 0em 0.2em 0.3em;

background-color: #000080;

font-weight: bold;

color: white;

}

h4{

margin: 1.0em 0em 0.2em 0em;

padding: 0em 1.0em 0em 0em;

font-weight: bold;

font-size: 1.0em;

color: #000080;

}

.middle-column-box-white p.heading {

margin: 1.0em 0em 1.0em 0em;

font-weight: bold;

font-size: 1.2em;

}

.middle-column-box-white p.subheading {

margin: 1.0em 0em 0.6em 0em;

font-weight: bold;

}

.middle-column-box-white p {

margin: 0em 0em 0.6em 0em;

}

.middle-column-box-left-white p.heading {

margin: 1.0em 0em 1.0em 0em;

font-weight: bold;

font-size: 1.2em;

}

.middle-column-box-left-white p.subheading {

margin: 1.0em 0em 0.6em 0em;

font-weight: bold;

}

.middle-column-box-left-white p {

margin: 0em 0em 0.6em 0em;

}

.middle-column-box-right-white p.heading {

margin: 1.0em 0em 1.0em 0em;

font-weight: bold;

font-size: 1.2em;

}

.middle-column-box-right-white p.subheading {

margin: 1.0em 0em 0.6em 0em;

font-weight: bold;

}

.middle-column-box-right-white p {

margin: 0em 0em 0.6em 0em;

}

/* Images */

/**********/

.middle-column-img-left{

float: left;

margin: 0.3em 0.5em 0.5em 0.5em;

border: solid 1px rgb(100,100,100);

}

.middle-column-img-right{

float: right;

margin: 0.3em 0em 0em 0.5em;

border: solid 1px rgb(100,100,100);

}

/************************/

/*** RIGHT COLUMN ***/

/************************/

#right-column {

float: right;

width: 30%;

background-color: #F7F7F7;

color: rgb(100,100,100);

font-size: 1.1em;

padding: 0.2em 0.4em 0em 0em;

}

.rightsideheader {

border-top:5px solid #000080;

border-bottom:1px solid #000080;

padding:6px 0 6px 5px;

margin:0px 0 15px 0;

font-size:1em;

}

/*This sideheader is styled different from the top side header to give it a top margin of 30px to seperate it away from the one above*/

.generalsideheader {

border-top:5px solid #000080;

border-bottom:1px solid #000080;

padding:6px 0 6px 5px;

margin:30px 0 15px 0;

font-size:1em;

}

.bullets li {

list-style:square;

margin-bottom:10px;

line-height:115%;

margin-left:22px;

}

.bullets a:link {

color: #7A7ACC;

text-decoration: None;

}

.bullets a:visited {

color: #000080;

text-decoration: None;

}

.right-column-box-title-grey {

clear: both;

display: block;

margin: 0em 0em 0.2em 0em;

padding: 0.2em 0.2em 0.2em 0.2em;

background-color: rgb(220,220,220);

font-weight: bold;

color: rgb(50,50,50);

}

.right-column-box-title-blue {

clear: both;

display: block;

margin: 0em 0em 0.2em 0em;

padding: 0.2em 0.2em 0.2em 0.2em;

background-color: rgb(187,211,247);

font-weight: bold;

color: rgb(50,50,50);

}

.right-column-box-title-yellow {

clear: both;

display: block;

margin: 0em 0em 0.2em 0em;

padding: 0.2em 0.2em 0.2em 0.2em;

background-color: rgb(255,236,128);

font-weight: bold;

color: rgb(50,50,50);

}

.right-column-box-title-green {

clear: both;

display: block;

margin: 0em 0em 0.2em 0em;

padding: 0.2em 0.2em 0.2em 0.2em;

background-color: rgb(196,221,108);

font-weight: bold;

color: rgb(50,50,50);

}

.right-column-box-title-red {

clear: both;

display: block;

margin: 0em 0em 0.2em 0em;

padding: 0.2em 0.2em 0.2em 0.2em;

background-color: rgb(255,176,176);

font-weight: bold;

color: rgb(50,50,50);

}

.right-column-box-white {

float: right;

width: 91%;

margin: 0em 0em 0.8em 0em;

padding: 0.4em 0.4em 0.4em 0.4em;

border: solid 0.1em rgb(200,200,200);

}

.right-column-box-blue {

float: right;

width: 91%;

margin: 0em 0em 0.8em 0em;

padding: 0.4em 0.4em 0.4em 0.4em;

border: solid 0.1em rgb(200,200,200);

background-color: rgb(226,238,252);

}

.right-column-box-yellow {

float: right;

width: 91%;

margin: 0em 0em 0.8em 0em;

padding: 0.4em 0.4em 0.4em 0.4em;

border: solid 0.1em rgb(200,200,200);

background-color: rgb(255,240,170);

}

.right-column-box-green {

float: right;

width: 91%;

margin: 0em 0em 0.8em 0em;

padding: 0.4em 0.4em 0.4em 0.4em;

border: solid 0.1em rgb(200,200,200);

background-color: rgb(224,244,181);

}

.right-column-box-red {

float: right;

width: 91%;

margin: 0em 0em 0.8em 0em;

padding: 0.4em 0.4em 0.4em 0.4em;

border: solid 0.1em rgb(200,200,200);

background-color: rgb(255,219,219);

}

.right-column-box-white p {

margin: 0.3em 0em 0.4em 0em;

}

.right-column-box-blue p {

margin: 0.3em 0em 0.4em 0em;

}

.right-column-box-yellow p {

margin: 0.3em 0em 0.4em 0em;

}

.right-column-box-green p {

margin: 0.3em 0em 0.4em 0em;

}

.right-column-box-red p {

margin: 0.3em 0em 0.4em 0em;

}

.right-column-img{

float: right;

margin: 1.0em 0em 0em 0em;

border: solid 1px rgb(100,100,100);

}

/*******************/

/*** FOOTER ***/

/*******************/

#footer {

clear: both;

float: left;

width: 100%;

height: 100%;

margin: 1.0em 0em 0.0em 0em;

padding: 0.25em 0em 0.3em 0em;

border-top: solid 0.1em rgb(150,150,150);

border-bottom: solid 0.1em rgb(150,150,100);

background-color: white;

text-align: center;

color: #000080;

font-size: 1.3em;

}

#footer img {

border:none;

}

#bottom {

clear: both;

float: left;

width: 100%;

height: 100%;

margin: 1.0em 0em 0.0em 0em;

padding: 0.25em 0em 0.3em 0em;

border-top: solid 0.1em rgb(150,150,150);

border-bottom: solid 0.1em rgb(150,150,100);

background-color: #000080;

text-align: center;

color: white;

font-size: 1.0em;

}

#bottom a{color:white; text-decoration:none; text-align: center;background-color: #000080;}

#bottom a:hover {color:red; text-align: center;background-color: #000080;}

/*#bottom a:link {color:red; text-decoration:none; text-align: center;background-color: #000080;}*/

/*#bottom a:visited {color:white; text-decoration:none; text-align: center;background-color: #000080;}*/

#bottom a:active {color:orange; text-decoration:none; text-align: center;background-color: #000080;}

/**************************/

/*** MISCELLANEOUS ***/

/**************************/

a:hover {

color: rgb(10,106,245);

text-decoration: none;

background-color: rgb(255,255,255);

}






New Template




anythinganything



















  • Fresh Water Fishing









  • Fishing Tackle


  • Fishing Tackle Reviews

  • Abu 700i C3 Ct Mag

  • Princton Tec Apex
  • Rock Fishing Reels

  • Rotten Bottom Rigs

  • Tackle Shops
  • Pulley Rig







  • Glossary

  • Fishing Video's







  • More From Our Kayak Fishing Section


  • Buy Storm Shads

  • Fishing Kayak Reviews

  • UK-Kayak Fishing

  • Kayak Fishing Tackle

  • Kayak Fishing News

  • Kayak Fishing Competition
  • Which Fishing Kayak ?

  • Kayak Fishing For Bass

  • Kayak Fishing Forum Topics

  • Yak Angling Gallery

  • Launching A Kayak

  • Kayak Fishing For Conger
  • Ocean Prowler Trident 15

  • Kayak Fishing Links

  • Ocean Prowler 13

  • Kayak Fishing Forum

  • C Tug Kayak Trolley

  • Buy Fishing Kayaks, Accessories & Tackle
  • Tri Star Angling - Fishing Kayaks

  • Kayak Fishing Basics

  • Kayak Fishing DVD


  • Other Areas Of Our Site

    Latest Fishing News

    Useful Fishing Links


    whitby angling supplies and rods and reels tackle shops



    Whitby bass and cod fishing Ravenscaar and saltwick nab top of the world sandsend

     














    Kayak Fishing

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non risus a diam convallis lobortis. Read more here








    H2 this


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis.

    Read more






    h2 this


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis.

    Read more




    H2 this


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis.


    Read more





    h2 this


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis.


    Read more








    h2 this


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis.




    h2 this


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis




    h2 this


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis.



    h2 this


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis








    h3 this

    h4 this


    The basic concept consiss of a three-column layout combined with individual boxes in the middle and right columns. The layout is flexible in two ways. Firstly, the strong menu-capabilities at the top header and left column are comphrehensive and can navigate through a content heavy website. Secondly, by having boxes in the middle and right columns, important topics can be brought to special attention and found more quickly than by going through the menus.


     


    Middle section


    The text boxes in the middle column consist of two types. Firstly, boxes covering the full width, and secondly boxes covering the half width. The number or sequence of full- or half-width boxes can be chosen freely.


     


    Color scheme and graphics

    The color scheme for the middle and right columns have an independent control of the box titles and the box backgrounds. The layout also provides the possibility of inserting or removing graphics in the middle column.


     


    Text paragraphs


    Three types of text paragraphs are offered, namely "heading", "subheading" and normal text.





    sea otter 2


     

    Google


    Search WWW Search www.whitbyseaanglers.co.uk

    AddThis Social Bookmark Button var addthis_pub = 'GlennKilpatrick';






    _uacct = "UA-2033956-1";
    urchinTracker();

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    Anyone offer any advice ?

    Anyone offer any advice ?

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    COuld anyone assist ? even a

    COuld anyone assist ? even a "No" would be a start :shrug:

    ifohdesigns
    ifohdesigns's picture
    Offline
    Enthusiast
    Providence, RI
    Last seen: 11 years 20 weeks ago
    Providence, RI
    Timezone: GMT-4
    Joined: 2008-02-22
    Posts: 269
    Points: 0

    Well, the first step would

    Well, the first step would be to ditch the tables.

    Next, you should be using a strict doctype.

    Also, what is with all the inline IE conditionals?

    You need to validate out the HTML and CSS once you get a good solid layout down, then repost your code.

    mattrossidesigns.com

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    Hi Ifoh first of all thanks

    Hi Ifoh first of all thanks for your reply it is appreciated, I was beginning to think I was the only 1 here.

    With Knowledge of this sites strict policy on validation I did spend some time ensuring the code was html valid before I posted. Olease see :

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.whitbyseaanglers.co.uk%2Ftest1%2F

    I shall check the sites css validation. The IE conditionals came as part of the menu I downloaded from CSS play - http://www.cssplay.co.uk/menus/ The code is copied exactly as given. I was quite shocked and unsure of what you mean when you say ditch the tables ? I thought there wasn't any tables in this new design its purely css, or have I overlooked something (It is quite possible as Im fairly new to css) ? Not sure if you have got the right page as its only http://www.whitbyseaanglers.co.uk/test1/ we are looking at, all the links from the menu go into the site as it currently stands, prior to changing to this new tableless design. Maybe I should have posted into the beginners forum as I dont really have a great grasp on CSS ?

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 8 years 4 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    On 'wrap' try removing the

    On 'wrap' try removing the overflow:auto and see what IE does if that is the issue try changing to overflow:hidden (preferred choice for forcing containment of float) or fall back on the clearfix technique which should be kept handy at the bottom of your stylesheet, if you are not familiar with this technique you will find a page on it under 'tools' on the main forum menu.

    For clarification:
    The tables used in the layout are a device to provide on hover menu activation without resorting to scripting, originally the author wrote this as a proof of concept not intending - as he stated - that it be used in the wild, since then he has changed his tune on that and more and more people are copying this menu structure, I have said before that I dislike it intensely and think that it's just plain wrong to add all that markup for the sake of old sad browsers, when a simple file can provide that functionality and be hidden in Conditional comments so that only IE<=6 can see it, but horses for courses :shrug:

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    Thanks Hugo,

    Thanks Hugo,

    I sense it is related to the overflow auto bit as I was told to add that for a previous problem where the site background colour was leaking into the wrap under the right column when the left column was longest. The overflow:auoto fixed that problem. Sadly Overflow:hidden does not cure this current problem. I can not seem to find the clearfix technique in the tools menu. Perhaps you would be kind enough to supply a link. I did a google search on clear fix but I didnt fully understand what I found. Is the clearfix applied to the right column or to the wrap ? Would you be kind enough to offer a few words on the technique as well ?

    Cheers - Glenn

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 8 years 4 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Sorry I ought to get out of

    Sorry I ought to get out of the habit of referring to 'it' as 'clearfix' the issue is containing floats and the technique works by adding a pseudo element to the element you add the class name to. Making use of :after appended to a class name allows us to add content 'after' any content already in an element, we add content in the form of a 'period' we make this content display:block but visibility hidden (there's a little more to the rules but that's the essence) , this forces the parent to have to contain this element thus also having to contain any elements before it which in this case would be floated elements normaly removed from the flow thus not having the effect of expanding their parent height.

    You need to copy the rulesets to the bottom of your stylesheet and then simply add the class name to any element requiring to contain it's floated children, this method is useful when overflow is not suitable due to clipping content.

    The technique and it's rulesets also take care of IE and it's misbehaviour

    http://csscreator.com/attributes/containedfloat.php

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    Thanks Hugo, Slowly getting

    Thanks Hugo,

    Slowly getting there but not quite yet. I have read the page you mention and a couple more besides. I think being fairly new to css is against me and I dont quite get some concepts, proving I do need to do a lot more reading around.

    Still not sure where I am going wrong here. I have placed this in my stylesheet

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    and created a div around the #wrap with the class of clearfix. However this doesnt seem to work so suggest I have got the wrong end of the stick at some point.

    Cheers - Glenn

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    OK

    OK

    Still struggling here. I have added this to the css

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
    }

    and this to the html. Is this right ?

    is this code acceptable or not ?

    I think I am now on the right track but am just missing something ?

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    No Joy,

    No Joy,

    I have now added the clear fix class to each coloumn to see if that would work and it doesnt. I also tried this code added into the floated div and still no change. Could it be that this problem is not the clearfix one ?


    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 8 years 4 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Sounds as though you have

    Sounds as though you have tried applying the class to every element except the one I originally mentioned, 'wrap'. This may or may not be the issue; I'm also slightly concerned that in the main stylesheet there is commented notes to the effect that a series of rulesets are specific to IE5 & 6 yet I see no method employed to actually make then specific i.e hide them from other browsers.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    Hi Hugo, thanks again. Sorry

    Hi Hugo, thanks again. Sorry I had applied it to the wrap also but still no joy. Is this the correct syntax for doing this ?

    Is it ok to mix an id and a class together ?

    I have now also removed the conditional css you worried about and the corresponding html - The menu. I have completely cleared the style sheet of anything unneeded.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 8 years 4 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    You can add both a class and

    You can add both a class and an ID to an element.

    I would remove the overflow:hidden from the ruleset, if using the 'clearfix' class

    edit/
    use this group of rules:

    .clearfix:after { content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .clearfix { display: inline-block; } /* Hides from IE Mac \*/ * html .clearfix {height: 1%;} .clearfix {display:block;} /* End Hack */

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    Hi Hugo,

    Hi Hugo,

    Not quite sure what is happening here but I cant see all of your last reply in my browser,its been sliced off on the right hand side.

    I think I've got what you are suggesting and have tried your clearfix code in the css and removed the overflow hidden but still it was the same.

    I have just tried removing the footer and now it looks right - but obviously I dont have a footer now. Is it possible the footer is the cause of this problem ?

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    Eureekaaaaaaaaaaa

    Eureekaaaaaaaaaaa

    :ohdear: :thumbsup: :thumbsup: :thumbsup:

    Think thats got it. I removed the float off the footer css and that seems to have done it - I hope ???? It looks right now anyway. Hopefully thats it sorted and I have also learnt the clearfix as part of the process. Everyones a winner. Thanks for your help and perseverance with me :thumbsup:

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 8 years 4 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    footer would never have

    footer would never have wanted to be floated, it would either be stated after the #wrap had closed thus naturally clearing all elements above or last in the set of elements within #wrap and with clear:both described so that it sat below the floated elements.

    You need a variety of clearing methods as there is not really one size fits all , keeping a clearfix set of rulesets handy at the bottom of your styles is what most of us do and constitutes part of a default stylesheet that we would always start with.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    glennk
    Offline
    Regular
    Last seen: 14 years 37 weeks ago
    Joined: 2008-03-06
    Posts: 15
    Points: 0

    Thanks for that tip Hugo I

    Thanks for that tip Hugo I shall make sure I always have that clearfix in the css from now on. I think it was a long process to get that right but it certainly was not fruitless as from now on, if ever a floated column dont behave as expected the first thing to come to my mind will be "CLEARFIX".

    The template I am using is one I downloaded free of charge and I have hacked it up to try and create what I want. It initially started life with another column on the left which I deleted. Not sure if thats why the footer was floated left by the original template author.

    Once again many thanks for your assistance - I am now 1 step closer to having the template I want. There is still quite a lot to do but at least Im past that difficult hurdle.