Sun, 2008-05-18 22:35
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
- Kayak Fishing
- Kayak Waders
- Kayak Fishing Forum Topics
- Kayak Fishing
- Bass From A Kayak
- Which Kayak For Fishing ?
- Kayak Fishing Gallery
- Launching Your Kayak
- Kayak Fishing For Conger
- Ocean Kayak Prowler Trident 15
- Kayak Fishing Links
- Ocean Prowler 13
- C Tug Kayak Trolley
- Buy A Fishing Kayak
- Kayak Fishing Basics
- Boat Fishing
- Boat Fishing Festival
- Kayak Fishing
- Using Shads
- Small Boat Fishing
- Sea Urchin
- Sea Otter 2
- Storm Shads
- Fishing
- Cod Fishing
- Hall Of Fame
- Mike Ladle Bass
- Articles
- Fishing Marks
- Fishing Marks
- Fishing Marks Menu
- Fishing At Scarborough
- Blea Wyke
- Scaling Dam
- Holderness
- SouthGare - Sandsend
- Sandsend - Jacksons Bay
- Cloughton Wyke
- Port Mulgrave
- Cowbar Jetty
- Filey Brigg
- Sandsend Car Park
- Steetley Pier
- North West - Cumbria
- Forum
- Fishing Forum Index
- Kayak, Shore & Boat Fishing Forum
- Website Reviews
- Charter Boats & Tackle Shops
- Coarse And Game Fishing Forum
- Fresh Water Website Reviews
- UK Sea Fishing Forum
- Forum Featured Topics
- Club
- Club Details
- Results
- Positions
- Angler Stats
- History
- Archives
- Outside A Match
- Whitby Fishing Forum
- Angling Strategy
- Pictures
- Spotty Dog Photography Competition
- Galleries Home
- Fishing Club
- Sea Fishing
- Boat Fishing
- Game Fishing
- Coarse Fishing
- Nature Pictures
- Rough Seas
- Landscapes, Sunsets & Scenery
- Friends 1
- Friends 2
- Juniors
- Kayak Fishing
- Forum Pictures
- Flikr Gallery
- Information
Other Areas Of Our Site
- Kayak Fishing
- Rock Fishing Tackle
- Fishing Baits
- Boat Fishing
- Targeting By Species
- North East Fishing Marks
- Fishing Club Archives
- RSA Strategy
- Open Match Calendar
- Surf Casting
- New UK Bass Record
- Fishing Videos
- Fresh Water Fishing
Latest Fishing News
- Fishing News Page
- Kayak Fishing News
Useful Fishing Links
- Whitby Sea Anglers Forum
- Whitby Tackle Shops
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.
_uacct = "UA-2033956-1";
urchinTracker();
Mon, 2008-05-19 22:02
#1
Anyone offer any advice ?
Anyone offer any advice ?
Tue, 2008-05-20 19:28
#2
COuld anyone assist ? even a
COuld anyone assist ? even a "No" would be a start :shrug:
Tue, 2008-05-20 19:38
#3
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.
Wed, 2008-05-21 04:35
#4
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 ?
Wed, 2008-05-21 05:37
#5
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:
Wed, 2008-05-21 17:01
#6
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
Wed, 2008-05-21 21:05
#7
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
Thu, 2008-05-22 07:11
#8
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
Fri, 2008-05-23 17:15
#9
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 ?
Sat, 2008-05-24 07:13
#10
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 ?
Sat, 2008-05-24 08:03
#11
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.
Sat, 2008-05-24 08:46
#12
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.
Sat, 2008-05-24 08:58
#13
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 */
Sat, 2008-05-24 10:01
#14
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 ?
Sat, 2008-05-24 10:07
#15
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:
Sat, 2008-05-24 10:17
#16
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.
Sat, 2008-05-24 10:39
#17
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.