Div layout problem??

You have fallen victim to the 3 pixel jog bug.

cheers,

gary

eek - that all looks a bit complex to me!!

Weird thing is it looks fine in my IE at home but not at work.....

Also even in dreamweaver when i set the 3 divs = 100% total the middle box jumps in the dreamweaver program!

I will post my css sheet when i get home.

Dreamweaver is not a great in general I feal.

Also when adding percentage width its best not to make them exactally 100%. Due to rounding errors you might find the boxes not fitting into the available space. I would guess that is what is causing your middle box to jump down.

Also statements like this make baby rabbits cry.

"Boyakasha.co.uk is best viewed with Internet explorer and a KFC mega bucket "

Mega Buckets are fine, but "best viewed with Internet explorer" my my :?

lol - ok that needs removing! This was true when i was using tables - not the case anymore!!

I have just noticed that all the other pages on the website are fine - it is only 'index1.html that pushes the middle div out........... this is strange as the same css file is liked to all pages...... any ideas!?

thanks
much appreciated!!

Hi - if anyone is feeling helpful could you fix my code so i elimitate this 3 pixel bug thing!! Your help would be much appreciated!! thanks!!

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background-color: #000000;
border-top: #333333;
border-right: #333333;
border-bottom: #333333;
border-left: #333333;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #999999;
text-decoration: none;
}

a:visited{
color: #999999;
text-decoration: none;
}

a:hover{
color: #E2B62E;
text-decoration: none;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #333333;
width: 100%;
}

#navBar{
float: left;
width: 18%;
background-color: #000000;
border-right: #cccccc;
border-bottom: #99CC00;
}

#headlines{
float:right;
width: 21%;
border-left: 1px #333333;
border-bottom: 1px #333333;
padding-right: 10px;
}

#content{
float: left;
width: 60%;
border-top: none #333333;
border-right: 1px solid #333333;
border-bottom: none #333333;
border-left: 1px solid #E2B62E;
padding-right: 5px;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding: 0 0 0 10px;
}

/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #333333;
color: #cccccc;
}

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}

/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}

/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #333333;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}

/************* #search styles ***************/

#search{
border-bottom: #cccccc;
font-size: 90%;
padding-right: 0px;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
border-bottom: #333333;
font-size: 90%;
border-right-color: #E2B62E;
border-right-width: 1px;
}

#sectionLinks h3{
padding: 0px;
}

#sectionLinks a {
display: block;
border-top: #cccccc;
padding-top: 10px;
padding-bottom: 4px;
}

#sectionLinks a:hover{
color: #E2B62E;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}

/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 0px;
font-size: 80%;
border-left-width: 1px;
border-left-color: #333333;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

Just a suggestion, none of the pages seem to validate, that is important if you want the site to work properly in most browsers over different OS's, so perhaps working on that is a good idea?

I also noticed a mix of upper and lower case in the code, xhtml should really be in lower. You seem to be using some css inline which could quite easily be put in the main external file. Keeping all the css in an external file will make it so much easier to maintain.

Examples http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.boyakasha.co.uk%2F and http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.boyakasha.co.uk%2Fpages%2Findex1.html

Just trying to help.

What's the deal with the border on the body? Have you specified a border? Do you want a border?

Hi!!

Thanks for the help! I am TOTALLY new to CSS so dont really know what im doing.

I noticed that it didnt validate but seemed to work ok so just left it -
So i need to put everything in lowecase...

I dont know anything about a border...... is this in the css file??

cheers for the help!

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background-color: #000000;
border-top: #333333;
border-right: #333333;
border-bottom: #333333;
border-left: #333333;
} 

Is the border stuff intentional?

Hmm im not sure.

I think the bored that i wanted is already there under the 'content' div

I dont know what that border would apply to?

That border wouldn't do anything, as it hasn't actually set a thickness or style. I just wondered whether you knew it was in there.

oh yeah thats ok the border size = none. no worries!

OK so i need to go through and validate the site.. but can anyone help me fix this padding bug?