2 replies [Last post]
jahays100
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT+2
Joined: 2010-01-21
Posts: 3
Points: 5

Hi. I'm new to WordPress and this forum and a beginner with CSS. I'm having lots of issues with my layout but my most immediate need is to extend the green color of the navigation bar down to the bottom of the columns, and to fix the IE issue with the green color being left justified. I'm using IE 7.0 and WordPress 2.9.

The site is a WordPress site and isn't working quite right but you can at least see what I mean http://www.start-mediation.de/index2.php.

Any help anyone can give would be greatly appreciated.

Thanks in advance.

Here is the CSS code for the navigation (both left and right).

{/***** SIDEBAR FORMATTING *****/
 
#sidebarLeft {
	width: 190px;
	float: left;
    background-color: #8FAD15;
	color: #000;
	padding: 5px 10px 10px 10px;
    font-weight:bold;
 
}
 
#sidebarRight {
	width: 190px;
	float:right;
    background-color: #8FAD15;
	color: #000;
	padding: 5px 10px 10px 10px;
 
}
 
#sidebarRight h2{
	font-size: 13px;
	text-align: left;
	padding:  3px;
	color:  #FFFFFF;
	background:url(images/sidebarbg.gif) repeat-x;
	background-color: #285b87;
	margin-top:10px;
	margin-bottom: 5px;
    border: 1px solid #b3b3b3;
	font-family: "Lucida Grande", "Lucida Sans 
 
Unicode", Arial, Helvetica, Sans-Serif;
}
 
#sidebarRight h2 a{
	color:  #FFFFFF;
	text-decoration: none;
}
 
#sidebarRight h2 a:hover{
	color:  #FFFFFF;
	text-decoration: underline;
}
 
#sidebarLeft h2{
	font-size: 13px;
	text-align: left;
	padding:  3px;
	color:  #FFFFFF;
	background:url(images/sidebarbg.gif) repeat-x;
	background-color: #285b87;
	margin-bottom: 5px;
	margin-top:10px;
    border: 1px solid #b3b3b3;
	font-family: "Lucida Grande", "Lucida Sans 
 
Unicode", Arial, Helvetica, Sans-Serif;
    font-weight:bold;
}
 
#sidebarLeft h2 a{
	color:  #FFFFFF;
	text-decoration: none;
}
 
#sidebarLeft h2 a:hover{
	color:  #FFFFFF;
	text-decoration: underline;
}
 
#sidebarRight a {
	color: #03C;
	text-decoration: none;
}
 
#sidebarRight a:hover {
	background: none;
	color:  #49647d;
	text-decoration: underline;
}
 
#sidebarLeft a {
	color: #fff;
	text-decoration: none;
}
 
#sidebarLeft a:hover {
	background: none;
	color:  #ffcc00;
 
}
 
 
.sidebar ul, .sidebar ol { 
	margin: 0 0 1em 0; 
	font-size: 11px;
}
 
.sidebar ul { 
	list-style-type: none;
}
.sidebar li { 
	list-style-type: none;
}
.sidebar ul li { 
	margin: 0 0 0.6em 7px; 
	list-style-image: url(images/bullet.png);
	list-style-position: inside;
}
 
.sidebar ul li ul, .sidebar ul li ol, .sidebar ol li ul, 
 
.sidebar ol li ol { 
	margin: 0.5em 0 0.5em 5px; 
}/**END**/
 
}

tmharsh
Offline
Regular
Owosso, MI
Last seen: 12 years 18 weeks ago
Owosso, MI
Timezone: GMT-5
Joined: 2009-06-22
Posts: 27
Points: 26

The reason your sidebars

The reason your sidebars aren't going all the way down is because their size is relative to how much is in them. So the green will only go down as far as the length of your list of links. If I'm judging how you want the site to look, what you can do is have the sidebars and content all wrapped in one div and then set the background color of that div to green. This way, the sidebars will appear to be green and go all the way down and separated because the content is between them. Since the div has the content within it, it's height will grow with the content and the green background along with it.

As far as IE issues are concerned, I don't like to cater to them in my main stylesheet. I prefer to create clean code that works properly in standards compliant browsers. I will then create a separate stylesheet for IE that addresses each of the issues. You don't need to make a stylesheet with every element from your main one, you just need to include the problem areas in IE. With WordPress, I place a conditional comment in the header file (probably header.php located under appearance > editor from the WP dashboard) containing the link to the IE specific stylesheet.

jahays100
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT+2
Joined: 2010-01-21
Posts: 3
Points: 5

Thanks! I'll give it a try.

Hi. Thanks for your comment. I'll give it a try and see what happens. Appreciate your feedback regarding the IE CSS file. Great idea. I'll give that a try too. More soon.