Formatting Problem

Can someone help me get rid of the sliver of grey (in Internet Explorer) above the image on this website?
http://003a17b.netsolhost.com/kwdwebsite/index.html
Thanks!

joslyn (AT) kwdesign (DOT) net wrote:

Can someone help me get rid of the sliver of grey (in Internet Explorer) above the image on this website?
http://003a17b.netsolhost.com/kwdwebsite/index.html
Thanks!

Delete the height from the css below.


..twoColElsLtHdr #header {
background: #333;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
height: 118px;
text-align: left;
font-size: 100%;
}


However if you're then expecting the image to be flush to the navigation
button images (no vertical gap) it wont be because you have an empty
<div> above the image. I don't know why its there?

<div class="topempty"></div>

Thanks! The empty div tag is so the address, etc stays on the left side. do you have a better method I should use?

You shouldn't need the empty <div> to keep the address on the left side.

However you are using an overcomplicated css template as shipped with
DW. Quite frankly these are awful!

Try removing the empty <div> and adding float: left; width: 536px; to
the #mainContent <div> as shown below.




..twoColElsLtHdr #mainContent {
color: #333;
text-align: center;
background-color: #CCC;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
float: left;
width: 536px;

}





joslyn (AT) kwdesign (DOT) net wrote:

Thanks! The empty div tag is so the address, etc stays on the left side. do you have a better method I should use?

Best bet would be to use the "float" attribute (eg. float:left) with a fixed width on the div tag (eg. width: 100px). This should fix the problem.

Thanks! The sliver of grey is still there in IE. Any other ideas?

As an aside note when you remove the height from the #header and float
the £mainContent left add overflow: hidden; as below


..twoColElsLtHdr #header {
background: #333;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
text-align: left;
font-size: 100%;
overflow:hidden;
}


You'll need to make sure also that the height of your logo is the same
height as the combined height of your navigation images and the image
above them. Then the main image will sit flush up against the navigation
buttons.




Osgood wrote:

You shouldn't need the empty <div> to keep the address on the left side.

However you are using an overcomplicated css template as shipped with
DW. Quite frankly these are awful!

Try removing the empty <div> and adding float: left; width: 536px; to
the #mainContent <div> as shown below.




.twoColElsLtHdr #mainContent {
color: #333;
text-align: center;
background-color: #CCC;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
float: left;
width: 536px;

}





joslyn (AT) kwdesign (DOT) net wrote:
Thanks! The empty div tag is so the address, etc stays on the left
side. do you have a better method I should use?

I think that you have a few problems with your code and your use of HTML
elements but to answer your question first, I think that you can achieve what
you want by thinking about applying margins and padding to your elements in
your CSS. For instance, if you have an image in your HTML and it's in your
<div id=header> you could add:

#header img
(
margin-bottom: 20px;
}

You could simplify your page a little by adding say, your logo image as a
background image to your header. You can even position the image as a
background using a CSS declaration.

You have used a <div> element as a kind of spacer somewhere and I think that
is not considered semantically correct. You should really only use an HTML
element to contain something and then, try to use the correct element. So, a
[LI] element contains a list item, a <p> element some text, <h1> the main
heading of your page, <h2> a sub-heading. You have used a <div> element for
your address lines which I think would be better if they were <p> tags.

You also have a repeated <div> in your header ( <div class="logo">) which I
think is a mistake.

One way to get a check on your code is to use a validator to check them. A
validator will check your code and show you the problems. You can then find
out how to fix the problems.

Does that help?

Hartin

joslyn (AT) kwdesign (DOT) net wrote:

Thanks! The sliver of grey is still there in IE. Any other ideas?

Read my other replies. If you have removed the empty <div> then you need
to make sure your logo image at the top left and the navigation images
plus the image above those equal the same height.

Still no luck... I couldn't see where <div> was repeated in the header...