Simple css! Green Gobbs of Goodness for First Correct Answers

Ok I have a few questions..

First I want the space between my header and the next line to be decreased, whats the command for that?

Second I'm making a nice new design that will expand with the screen. When i tested it on IE 6.0 with the following code it leaves a space of around 10-15 pixels on the right side. I cleaned that up by attaching a background image to the right side which displays right under the first div (which makes things display the same).

I have to do that 3 times in this page because of expandable divs.. Anyway to fix this without my shoddy work around?

#banner{
position:absolute;
left: 0px;
top: 22px;
background-image:url(../images/topbg.gif);
background-repeat: repeat-x;
width: 100%;
}

Code (markup):

Next question is about links.. At the top of the page I have a horizontal links menu.

position:absolute;
left:0px;
top:0px;
width: 100%;
background-color:#5C646D;	

Code (markup):

I need to display 7 links across the top with even spaces (currently they're in a table and each have 14% width). Between each link there is a small vertical | mark which will show a divide. It should only be between the marks, so not on the far right link or the first link. On a mouseover of the space between the vertical | marks it will highlight the entire link. So its not good enough to just have the mouseover work when it goes over the text, it needs to work when going over the entire 14% width.

Currently I have this working in a table however it would be nicer to have it in working css.


Anyhow thanks for any solutions!!!

 

For the first question... use margin

http://www.w3schools.com/css/css_margin.asp

Look around that site if you have any other simple questions.

 

Yeah the margin command doesn't work on decreasing distance between lines.

 

Well i fixed the second problem.. I just needed to set the margins and padding in body to 0.

 

Apparently you were right about the margin command.. just need to use it no more then one section (namely the paragraph).

So the h1 space is correctly displaying.

I have one new problem.. the left and right columns don't automatically scale to the correct size in IE. Currently I have them nested in the main section.. they're code..

#leftside{
position:absolute;
left: 0px;
top: 0px;
background-color: #EBEFF2;
width: 150px;
height: 100%;
}

Code (markup):

Its kind of interesting.. when I mouseover a link in this div it then stretches the background color to the bottom of the page.

 

klown, have you got your work online somewhere I could take a sneak peak?

 

The #leftside is defined to be of fixed width 150px and probably that's why its not scaling.. Also, if you have working demo, someone could help you much better.

 

Ok i'll share the addy for this, http://www. insurancehealthinternational .com/chi/template.php

The main problem right now is that the side panels don't span to the bottom. Also it would be nice to replace the menu going across the top and on the left side with pure css instead of a table with links inside.

BTW this is just the front page, if you click on the ad for Individual Health Insurance across the top you can see the internal page's design which doesn't have as much across the top.