Hi,

 

If you view www.unifydev.co.uk/blog/index.php in IE and FF, you'll notice there is 1px of space between the two divs on the may part of the page, giving it a rather peculiar shadow of the dotted border; anyone know how to solve this?

 

Here is the CSS:

 

/*
 Copyright unifydev.co.uk 2009

*/



object {
float:left;
}

body,
html {
background:#CCC6B6;
font-size: 8pt;
font-family: arial;
color: #999999;
text-align: right;
}


#wrap {
background:#CCC6B6;
margin:auto;
width:879px;
padding: 50px 0px 0px 0px;
color:#7A7A7A;
text-align: right;
}

#inner {
background:#FFFFFF;
margin:auto;
width:879px;
height: 100%;
padding: 0px 0px 0px 0px;

}

#popup {
background:#EAEAEA;
width: 425pt;
padding: 3pt 3pt 3pt 3pt;
color: #708090;
text-align: justify;
font-size: 7pt;
border-style:dotted;
border-width:1px;
border-color:#DCDCDC;
margin: 0pt 0pt 0pt 0pt;
font-family: verdana;
}

#nav {
background:#FFFFFF;
width: 121pt;
padding: 0pt 0pt 0pt 20pt;
color: #333333;
text-align: left;
font-size: 9pt;
float: left;
border-right: 0pt dashed #7A7A7A;
}

#nav h3{
background:#FFFFFF;
padding:0pt 0pt 0pt 0pt;
color: #2665AA;
font-size: 8pt;
font-family: arial;
font-weight: normal;
}


#menu {
background:#FFFFFF;
width: 497pt;
padding: 0pt 10pt 0pt 10pt;
color: #333333;
text-align: left;
font-size: 9pt;
float: right;
border-left: 1pt dashed #7A7A7A;
margin: 0pt 0pt 0pt 0pt;
}

#menu h1{
background:#FFFFFF;
width: 425pt
padding:0pt 0pt 0pt 0pt;
color: #2665AA;
font-size: 11pt;
font-family: arial;
text-align: left;
}

#menu h2{
background:#FFFFFF;
width: 425pt
padding:0pt 0pt 0pt 0pt;
color: #2665AA;
font-size: 8pt;
font-family: arial;
font-weight: normal;
}

#menu h2 img{
display: inline;
}

#menu h3{
background:#FFFFFF;
width: 425pt
padding:0pt 0pt 0pt 0pt;
color: #2665AA;
font-size: 8pt;
font-family: arial;
font-weight: normal;
}

#menu h4{
background:#FFFFFF;
width: 425pt
padding:0pt 0pt 0pt 0pt;
color: #333333;
font-size: 7pt;
font-family: arial;
font-weight: normal;
}

#menu h4 img{
display: inline;
}

#menu h5{
background:#FFFFFF;
width: 425pt
padding:0pt 0pt 0pt 0pt;
color: #333333;
font-size: 9pt;
font-family: arial;
font-style: normal;
font-weight: normal;
}


hr {
border-top: 1px dashed #7A7A7A;
width: 100%;
align: center;
color: #ffffff;
background-color: #ffffff;
height: 0px;

}


img {   
margin:0; 
padding:0; 
display: block
}

a img {   
border-style: none;
display: inline;
}

#footer {
text-align: right;
color: #7A7A7A;
font-family: arial;
font-size: 8pt;
font-style: normal;
float: left;
}

a:visited {
color: #7A7A7A;
font-family: arial;
font-size: 8pt;
font-style: normal;
border-bottom: 1px dotted;
border-color: #7A7A7A;
text-decoration: none;
}

a:link {
color: #7A7A7A;
font-family: arial;
font-size: 8pt;
font-style: normal;
text-decoration: none;
text-underline-style: dotted;
border-bottom: 1px dotted;
border-color: #7A7A7A;
}

 

Hopefully you can help! Cheers.

I don't see any problem with the dotted border, but in IE7 the main content div is extending way below the div with the curved corners. It's probably due to IE and Firefox having different default margins on h1 to h6 and p tags and some of your text sections are inside h2 tags so I suggest that you put styles at the top of your css file just after the body style (as they are general styles which you might want to change in a specific style further down the stylesheet); it could be either the h1 or h2 or h4 tags or a combination that's causing the problem:-

 

h1 { margin: 7px 0; }
h2 { margin: 5px 0; }
h4 { margin: 3px 0; }
p { margin: 3px 0; }

 

Those are just suggestions, edit until both browsers show the text fitting inside the div with the curved borders.

 

If you want the bottom margin to be different from the top margin, code like this (top, right, bottom left):-

h2 { margin: 5px 0 2px 0; }

 

The main text sections don't seem to have any tag; they should be inside p tags.