I've got an issue with my css and wondered if someone could help.

 

I've got the following CSS code and I'll use images to explain what's going wrong. The first image is what I want the layout to look like and the second one is what's happening with the css.

 

#container 
{
width: 984px;
height:auto;
margin-left: auto;
margin-right: auto;
}

#header 
{
width: 100%;
height: 199px;
margin-left: auto;
   margin-right: auto;
background-image:url("../images/header.jpg");

}

#menu
{
position: relative;
width: 85%;
height:40px;
float:right;
margin-top:0px;
display:block;
}
#indexImage
{
width: 100%;
height: 354px;
margin-top:10px;
}
#advertContainter {
width: 100%;
height: 250px;
position:relative;
top:-70px;
z-index:1000;
margin-left:6px;
}
#indexContent {
position:relative;
width:60%;
height:400px;
float:left;	
}

So, I used to be good at spot the difference so correct me if I am wrong, but basicly you just want a gap at the top of #indexContent?

 

If this is the case try something like a margin top.

 

#indexContent {
       position:relative;
       width:60%;
       height:400px;
       float:left;
       margin:50px 0px 0px 0px;
}

So, I used to be good at spot the difference so correct me if I am wrong, but basicly you just want a gap at the top of #indexContent?

 

If this is the case try something like a margin top.

 

#indexContent {
       position:relative;
       width:60%;
       height:400px;
       float:left;
       margin:50px 0px 0px 0px;
}

No, it's putting the gap about #indexContent but I don't want the gap there.

No, it's putting the gap about #indexContent but I don't want the gap there.

 

You going to have to explain the examples a bit more then because from those images the gap is above #indexContent

 

EDIT: Sorry, i understand now. I got the images the wrong way around.

 

Try a CSS reset. Something like...

 

#indexContent {
       position:relative;
       width:60%;
       height:400px;
       float:left;
       margin:0px;
       padding:0px;
       border:0px;
}

 

try resetting the #advertContainter too.

You going to have to explain the examples a bit more then because from those images the gap is above #indecContent

That's why I said the first image shows what I want the layout to be like (i.e. no gap about #indexContent) and the second image shows what the css is doing (i.e. putting the gap above #indexContent that shouldn't be there).

That's why I said the first image shows what I want the layout to be like (i.e. no gap about #indexContent) and the second image shows what the css is doing (i.e. putting the gap above #indexContent that shouldn't be there).

 

see edited post above.

its because of the margin-top:-70px on #advertContainter.

 

If you use this method, the element moves but the space it would have used in the flow will remain.

 

You can try margin-top:-70px instead and do not set position to relative.

 

Another way to postion something absolutely on the page but without effecting the other elements is like this:

 

<div style="position:relative">

<div style="position:absolute; top:351px; left:1022px;z-index:999 ">

<img src="SiteImages/Commercial/right_clip.png" alt="image tip" id="faq-button" />

</div>

</div>

Just put in on the page somewhere near to where you want to display it, and use the top and left to position it. It will float over the top of all the elements and not effect flow.

Thanks guys, those tips solved the problem. However, I now have a different problem. I have created a div class for a button in the link, it's the 'DOWNLOADS' and 'CASE STUDIES' buttons and I'm using 'line-height' in the css. They look great in Firefox and IE8 but when using compatibility mode in IE, the top half of the text for both buttons is cut off. Any ideas?

 

The page is at: http://www.citycm.co.uk/tfs

When similar things happen to me, I stick this in my header...

 

<meta http-equiv="X-UA-Compatible" content="IE=7" />

 

Often does the trick, god how I hate IE.

 

It is by no means a FIX though.

You could try just setting the height of those buttons, and then using a padding-top:20px (or some value).