css troubleshooting...

At http://datapassion.net/index.html, I have a page where the selected menu button gets out of shape. Please try going back and fort between "Resume" and "Demo" buttons.

Question: How can I fix this?
html{background : rgb(244,244,244)  
    url(../images/html.png) repeat-x;
}
body{
    font-family:"Tahoma","sans-serif";
    color : #5a1c46; 
    margin:0;
    padding-top: 30px; 
     /*font-size:90%; */
	color:rgb(89,89,89);	
	background : url(../images/body.png) repeat-x; 
}
.content
{
   margin: 0 auto;
   padding-left: 0px;
   padding-bottom: 0px;
   width: 1065px;/* 866px*/
    height:1080px; /* to be removed*/
   
}

.center1{text-align:center;}



.wrapper{
   margin: 0 auto auto 10em;
   padding-top: 35px;
   padding-left: 50px;
   padding-bottom: 35px;
   width: 880px;/* 866px*/
   /* height:1080px;  to be removed*/
   background-color:white;
  
   -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
   -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);

}
.horizontalGap{ 
   width: 776px;/* 726*/
   border: 0px solid black;
   background-color:#eef;
   height: 10px;
}
.verticalGapTop
{
   width: 10px;
   background-color:#eef;
   height:4.7em;
   display:inline-block;
   vertical-align: top;
}
.verticalGapBottom
{
   width: 10px;
   border: 0px solid black;
   background-color:#eef;
   height:1140PX;
   display:inline-block;
   vertical-align: top;
}
.left-col, .right-col{
    display:inline-block;
	vertical-align: top;
}
.right-colBottom{
    border: 0px solid black;
    display:inline-block;
	width:586px;/* 536px*/
	padding-left: 5px;
    border: 0px solid orange;
    display:inline-block;
}
.left-col{
    width:180px; 
    margin-right:0;
	padding-right: .5em;
	text-align:right;
	display:inline-block;
	vertical-align: top;
}
.contact{
	color:rgb(89,89,89);
	text-align:right;
	white-space: nowrap;
	height:4em;
	display:inline-block;
    border: 0px solid black;
}
.left-colBottom{
    width:180px;
	padding-right: 0.5em;
	padding-top: 1.5em;
	text-align:right;
    white-space: nowrap;	
    display:inline-block;
	vertical-align: top;
}

.right-col{
    width:586px;/* 536px*/
    border: 0px solid black;
    display:inline-block;
}
.date{
    width: 60px;
	/*border: 0px solid red;
	display:inline-block
	text-align:top;;*/
	float:left;
}
.companyCity
{
    width:518px;/* 468px*/
	border: 0px solid red;
    display:inline-block;
}

.company
{
  width: 315px;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
  border: 0px solid yellow;
  display:inline-block;
  }

.city
{
  width:197px;/* 55*/
  min-width:10em;
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
  border: 0px solid green;
  font-weight:bold;
  display:inline-block;
}
.companyOther{
 width:150px;
  font-weight:bold;
  white-space: nowrap;
  border: 0px solid red;
  display:inline-block;
}
.cityOther{
  width:360px;/* 310px*/
  min-width:10em;
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
  border: 0px solid green;
  font-weight:bold;
  display:inline-block;
}
.workDescription{
    width:100%;
	min-width:10em;
	border: 0px solid blue;
    text-align:justify;
    display:inline-block;
}
.skills ,.skillsDescription{
    width:581px;/* 531px*/
	border: 0px solid blue;
    text-align:justify;
}

.experience{
    width:581px;/* 531px*/
	border: 0px solid green;
    display:inline-block;
}


.contactBlue{
  font-size:1.1em;
  font-weight:bold;
  white-space: nowrap;
  color:rgb(84,142,212);
}
.nameBlock{
  text-align:center;
  height:4em;
  display:inline-block;
}
.name{
  font-size:2em;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
}
.title{
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
}

.blue18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
}
.black18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(89,89,89);
}

.others
{
  color:rgb(187,74,36);
  font-size:.9em;
}
.cssLogo
{
    float:right;
     float: right;
    border: 0px solid black;
}
.note
{
    float: left;
    border: 0px solid green;
}
.footer {
    margin: 0 auto;/*40px auto auto auto; */
    padding: 10px 0px 25px 100px;

    width: 866px;/*816px */	
    text-align:left;
    font-size:.8em;
    border: 0px solid red;
}
/* ggggggggggggggggggggggggggggggg */
.btn-group-vertical
{
   width: 120px;
   float:left;
   padding-top: 10em;
   position:fixed;
   
}
.btn-group-vertical ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.btn-group-vertical li 
{ 
	/*margin: 0 0 .2em 0; */
	width:3em;
	color:red;
}

.btn-group-vertical a
{
	/*display: block;*/
	color: #FFFFFF;
	
	background-color: rgb(137, 137, 137);
	/*width: 5em;
	padding: .2em .2em;
	text-decoration: none;*/
	text-align: left;
}

/*.btn-group-vertical a:hover
{
	background-color: #336699;
	color:rgb(84,142,212);
	font-weight:bold;
}*/
.btn-group-vertical a
{
font-size: 1.25em;
}
.btn-group-vertical .current a:hover
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
/*
.btn-group-vertical .current a, .btn-group-vertical .current a:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 6em;
	padding: .2em .2em;
	text-decoration: none
};*/
.dropdown-menu a
{
	background-color: #FFFFFF;
	
}
a {color:rgb(89,89,89); text-decoration: none;}      /* unvisited link */
a:visited {color:rgb(89,89,89);}  /* visited link */
a:hover {color:blue; text-decoration: none;}  /* mouse over link */
a:active {color:rgb(89,89,89);text-decoration: none;}  /* selected link */

.btn-group-vertical a {color:#FFFFFF; text-decoration: none;}      /* unvisited link */
/* .btn-group-vertical a:visited {color:#FFFFFF;}  visited link */
.btn-group-vertical a:hover {color:rgb(84,142,212); font-weight:bold;text-decoration: none;}   /*mouse over link */
/*.btn-group-vertical a:active {color:rgb(155, 47, 45);text-decoration: none;}   /*selected link */

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SSupremeCommented:
At current page it adds class="current" but removes "btn btn-default". Fix you processing code to simply add "current" class without replacing default.
Tom BeckCommented:
I don't see any script that changes the classes so I'm thinking you are just hard coding them in the markup on each page.
You have two class attributes in the anchor for each current page. The second class attribute is being ignored.
<a class="current" href="index.html" class="btn btn-default">Resume</a>

Open in new window

Just put all classes in the same class attribute.
<a href="index.html" class="current btn btn-default">Resume</a>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
@SSupreme,

re: Fix you processing code to simply add "current" class without replacing default.

How? I suppose this work needs to be done in css file but I am not sure how it is done.

The only think I tried is to move the hover, selected, and alike styles to the very beginning but that doesn't help.

@Tom Beck,

Reading your comments now. brb

Yes, you are right. That fixed it.

Mike
SSupremeCommented:
There are many approaches to build a site. One of them as Tom Beck said
you are just hard coding them
.
I thought you have some kind of CMS or parser which outputs HTML.
Example of Joomla menu parser:
<ul class="nav menu<?php echo $class_sfx;?>"<?php
	$tag = '';

	if ($params->get('tag_id') != null)
	{
		$tag = $params->get('tag_id') . '';
		echo ' id="' . $tag . '"';
	}
?>>
<?php
foreach ($list as $i => &$item)
{
	$class = 'item-' . $item->id;

	if (($item->id == $active_id) OR ($item->type == 'alias' AND $item->params->get('aliasoptions') == $active_id))
	{
		$class .= ' current';
	}

	if (in_array($item->id, $path))
	{
		$class .= ' active';
	}
	elseif ($item->type == 'alias')
	{
		$aliasToId = $item->params->get('aliasoptions');

		if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
		{
			$class .= ' active';
		}
		elseif (in_array($aliasToId, $path))
		{
			$class .= ' alias-parent-active';
		}
	}

	if ($item->type == 'separator')
	{
		$class .= ' divider';
	}

	if ($item->deeper)
	{
		$class .= ' deeper';
	}

	if ($item->parent)
	{
		$class .= ' parent';
	}

	if (!empty($class))
	{
		$class = ' class="' . trim($class) . '"';
	}

	echo '<li' . $class . '>';

	// Render the menu item.
	switch ($item->type) :
		case 'separator':
		case 'url':
		case 'component':
		case 'heading':
			require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
			break;

		default:
			require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
			break;
	endswitch;

	// The next item is deeper.
	if ($item->deeper)
	{
		echo '<ul class="nav-child unstyled small">';
	}
	elseif ($item->shallower)
	{
		// The next item is shallower.
		echo '</li>';
		echo str_repeat('</ul></li>', $item->level_diff);
	}
	else
	{
		// The next item is on the same level.
		echo '</li>';
	}
}
?></ul>

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.