Forum Moderators: not2easy
Hi folks,
I'm assuming that I've just missed something out here and I'm just being a eejit. So, two problems:
Background:
I have a simple layout - a div which everything is placed into (to centre it on screen)
Within this I have three div'ed rows: a top banner, a middle area for an image and a final row which I use for my navigation.
Underneath this I have a two column layout - a left, smallish column and a right column for the majority of my text. Within the left column I have put a coloured box (again a div), which I use for my sub navigation. I have used the fix position code for this so that no matter how long the page, the navigation stays put on the screen (ie, it's always on screen even if I scroll all the way down a long page) - this works on most browsers excepting IE6 PC
Problems:
Simple problem 1 ( i think!)
I've set up the top three divs with no spacing between them, but IE6 creates a gap between the image (middle) div and the bottom div (navigation) - what have I missed?
Problem 2:
This happens in firefox for the pc, but not in safari or firefox for the mac. The sub navigation column on the left hand side is in orange as a background colour. It does float and remain on screen as it should do, but for some reason FF on the pc leaves a trailing orange line on the right hand side which looks messy. It looks to be only 1px wide, but is very noticeable. Any ideas. Ill post the css below.
div 'wrap' is the overall container for all the content
div 'toplinks' is the top banner
div 'header' is for the main image
div 'nav' is for navigation
div 'content' holds the main text area of the pages and contains:
div 'columnleftsm' and div 'columnrightbig' for the columns
within 'columnleftsm' is the final div called 'blocksnav' which has the ornage box with the sub navigation.
Hope that makes sense...
#wrap {
width: 740px;
margin-top: 0.5em;
margin-right: auto;
margin-left: auto;
border: 15px solid #FFFFFF;
background-color: #FFFFFF;
margin-bottom: 0px;
padding: 0px;
}
#toplinks {
background-color: #FFFFFF;
margin: 0px;
}
#toplinks .title {
float: left;
margin-left: 0em;
margin-top: 0em;
font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 0.4em;
}
#toplinks .links {
float: right;
margin-top: 3.3em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bolder;
color: #007F7B;
text-align: right;
margin-right: 0em;
letter-spacing: 0em;
}
#nav {
background-color: #000000;
margin: 0px;
text-decoration: none;
padding: 0px;
height: 30px;
border-top-style: none;
border-bottom-style: none;
border-top-color: #000000;
}
#nav .links2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #FFFFFF;
text-align: center;
letter-spacing: 0.1em;
font-size: 100%;
float: left;
padding-top: 7px;
}
#nav .links2 a:link, #nav .links2 a:visited {
text-decoration: none;
color: #CCCCCC;
margin: 0em;
padding-right: 0.7em;
padding-left: 0.7em;
bottom: 12px;
}
#nav .links2 a:hover {
color: #FFFF00;
background-color: #000000;
padding-top: 4px;
padding-bottom: 4px;
}
.blocks {
background-image: url(../images/stripes.gif);
background-repeat: repeat-y;
background-position: left top;
border-top: none;
border-right: none;
border-bottom: none;
border-left: 5px solid #B5B8C3;
margin: 0em 0em 1.5em;
padding: 0.5em 0.5em 0.5em 1em;
height: 0.1%;
}
.blocksnav {
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
position: absolute;
width: 170px;
background-color: #FF7300;
background-repeat: no-repeat;
background-position: right bottom;
background-image: url(../images/blocknavcorner.gif);
margin-top: 0em;
margin-right: 0em;
margin-bottom: 1.5em;
margin-left: 0em;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0em;
}
#columnrightbig img {
border: 1px solid #CCCCCC;
padding: 0px;
margin: 5px 5px 3px 0px;
float: left;
}
.blocks a:link, .blocks a:visited, .blocksred a:link, .blocksred a:visited, .blocksnav a:link, .blocksnav a:visited, #columnrightbig a:link, #columnrightbig a:visited, #columnrightbig2 a:link, #columnrightbig2 a:visited {
font-weight: bold;
color: #456566;
text-decoration: none;
font-size: 100%;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-left: 0em;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
}
.blocks a:hover, .blocksred a:hover, .blocksnav a:hover, #columnrightbig a:hover, #columnrightbig2 a:hover {
font-weight: bold;
color: #990000;
text-decoration: none;
font-size: 100%;
margin: 0px;
padding: 0px;
}
#columnleftsm {
width: 190px;
float: left;
}
#columnrightbig {
width: 520px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 200px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #E6E6E6;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-left: 0.5em;
}
#header {
margin: 0px;
padding: 0px;
}
.blocks h4, .blocksnav h4 {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0em;
margin-left: 0px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0em;
padding-left: 0px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
font-size: 90%;
color: #333333;
text-decoration: none;
margin: 2px 0px 0px;
padding: 0px 0px 5px;
line-height: 1.4em;
}
#content {
margin: 2em 0em 0em;
padding: 0px;
}
#content h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 165%;
color: #0098D5;
text-decoration: none;
font-weight: bolder;
letter-spacing: 0em;
padding: 0px;
margin-top: 0.4em;
line-height: normal;
}
#nav ul {
text-decoration: none;
list-style-type: none;
background-color: #456566;
margin: 0px;
padding: 0px;
}
#nav li {
display: inline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
color: #652916;
text-decoration: none;
font-weight: bolder;
letter-spacing: 0.1em;
padding: 0px;
margin-top: 0em;
}
#wrap #footer img {
margin: 1em 1em 0em;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 170%;
line-height: 1.5em;
color: #666666;
text-decoration: none;
font-weight: normal;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 150%;
color: #666666;
text-decoration: none;
font-weight: normal;
line-height: 1.1em;
margin: 0px;
padding: 0px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 130%;
line-height: 1.5em;
color: #666666;
text-decoration: none;
font-weight: normal;
padding: 0px;
margin-bottom: 0em;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
font-size: 80%;
line-height: 1.5em;
text-decoration: none;
text-align: left;
background-image: url(../images/stripesSAU.gif);
background-repeat: repeat;
background-position: center;
}
h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
line-height: 1.5em;
color: #666666;
text-decoration: none;
font-weight: bolder;
padding: 0px;
margin-top: 0.3em;
margin-bottom: 0.3em;
}
#footersub {
clear: left;
background-color: #000000;
margin: 0px;
padding: 2px 12px 4px 0px;
border-top-width: 1px;
border-top-style: solid;
color: #CCCCCC;
}
#clear {
clear: both;
}
#wrap #footersub img {
float: right;
margin: 0px;
padding: 0px;
}
.bold {
font-weight: bold;
}
.blocks ul, .blocksred ul, .blocksnav ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
list-style-type: square;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 0.5em;
padding-left: 0em;
margin: 0px;
}
.blocks li, .blocksred li, .blocksnav li {
font-style: normal;
color: #3A0F00;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
}
.blocks h6, .blocksnav h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
font-weight: bolder;
color: #FFFFFF;
padding: 0em;
border-bottom-style: none;
}
#wrap #content #columnleftsm .blocks ul, #wrap #content #columnleftsm .blocksnav ul {
list-style-type: none;
padding-left: 0px;
padding-top: 0em;
padding-bottom: 0.5em;
padding-right: 0px;
margin: 0px;
}
#columnrightbig p.quotes {
font-style: italic;
clear: both;
}
#wrap #content #columnrightbig .quotebox {
margin: 6px 6px 6px 0px;
border: 1px solid #E3D5C4;
padding: 5px;
background-color: #FEF8F2;
font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
}
#wrap #content #columnleftsm .blocks li, #wrap #content #columnleftsm .blocksnav li {
margin: 0px;
padding-top: 0.4em;
padding-right: 0px;
padding-bottom: 0.1em;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CEC8B2;
}
#columnrightbig h5 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 140%;
font-weight: normal;
font-variant: normal;
color: #3A0F00;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #456566;
margin-bottom: 1em;
padding-bottom: 0.3em;
clear: both;
line-height: normal;
}
#wrap #content #columnrightbig h6 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: bold;
clear: both;
}
#wrap #content #columnrightbig p .clear {
clear: both;
}
#wrap #content #columnrightbig img .nofloat {
float: none;
}
.audiolists li {
margin: 0px;
padding: 0px;
list-style-position: inside;
list-style-image: url(../images/speaker.gif);
}
#wrap #content #columnrightbig img.speaker {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
padding: 0px;
position: relative;
top: -2px;
}
#largeimage {
margin: 3px 3px 3px 3px;
z-index: 1;
}
#wrap #content #columnrightbig2 #thumbnails img {
display: block;
border: 1px solid #990000;
}
#wrap #content #columnrightbig2 #clear {
clear: both;
}
#wrap #content #columnrightbig2 #thumbnails {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#wrap #content #columnrightbig2 #thumbnails li {
font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
font-size: 0.8em;
font-weight: bold;
float: left;
margin-right: 6px;
margin-bottom: 10px;
color: #456566;
list-style-type: none;
margin-left: 0px;
height: 120px;
width: 100px;
text-align: left;
}
#wrap #content #columnrightbig2 #thumbnails ul {
margin: 0px;
}
#columnrightbig2 img {
border: 1px solid #CCCCCC;
padding: 0px;
margin: 5px 5px 3px 0px;
}
#columnrightbig2 {
width: 490px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 200px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #E6E6E6;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-left: 0.5em;
}
thanks in advance,
Sunster
[edited by: sunsterv at 2:18 pm (utc) on Mar. 10, 2007]
Me eyes are waterin'
#wrap {
width: 740px;
margin-top: 0.5em;
margin-right: auto;
margin-left: auto;
border: 15px solid #FFFFFF;
background-color: #FFFFFF;
margin-bottom: 0px;
padding: 0px;
}
#toplinks {
background-color: #FFFFFF;
margin: 0px;
}
#toplinks .title {
float: left;
margin-left: 0em;
margin-top: 0em;
font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 0.4em;
}
#nav {
background-color: #000000;
margin: 0px;
text-decoration: none;
padding: 0px;
height: 30px;
border-top-style: none;
border-bottom-style: none;
border-top-color: #000000;
}
#nav .links2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #FFFFFF;
text-align: center;
letter-spacing: 0.1em;
font-size: 100%;
float: left;
padding-top: 7px;
}
#nav .links2 a:link, #nav .links2 a:visited {
text-decoration: none;
color: #CCCCCC;
margin: 0em;
padding-right: 0.7em;
padding-left: 0.7em;
bottom: 12px;
}
#nav .links2 a:hover {
color: #FFFF00;
background-color: #000000;
padding-top: 4px;
padding-bottom: 4px;
}
.blocksnav {
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
position: absolute;
width: 170px;
background-color: #FF7300;
background-repeat: no-repeat;
background-position: right bottom;
background-image: url(../images/blocknavcorner.gif);
margin-top: 0em;
margin-right: 0em;
margin-bottom: 1.5em;
margin-left: 0em;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0em;
}
#columnleftsm {
width: 190px;
float: left;
}
#columnrightbig {
width: 520px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 200px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #E6E6E6;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-left: 0.5em;
}
#header {
margin: 0px;
padding: 0px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
font-size: 90%;
color: #333333;
text-decoration: none;
margin: 2px 0px 0px;
padding: 0px 0px 5px;
line-height: 1.4em;
}
#content {
margin: 2em 0em 0em;
padding: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
font-size: 80%;
line-height: 1.5em;
text-decoration: none;
text-align: left;
background-image: url(../images/stripesSAU.gif);
background-repeat: repeat;
background-position: center;
}
problem 1 - i have no idea, but by pruning down the code it disappeared.
problem 2 - this was also a case of a repeated div - one nested withing the parent div - blocksnav into columnleftsm, and one where I have a separate slightly different code for blocknav on its own. removed the nested one and hey presto, it works.
Thanks anyway for anyone who's looked already.
I've solved several of my own problems, simply by reducing code to its component atoms.
I once ranted about it here [webmasterworld.com].
This is a fantastic forum, and has saved my own butt several times. It's well worth the effort.
And on the other count - the fact that these forums are excellent - couldn't agree with you more either. SuzyUK helped out the last time I had a monster problem with IE6 and of course you've helped too cmarshal so thanks.
And for anyone else reading this - it's always worth the visit.
