Border and Button misplacing in html and css

Please anyone can you get me where i am goin wrong as i want that button to be corrected and require a full dashed bordered lines for top to bottom of content section.any hep would be great.

please suggest also how to show anyone the code and page in case required without downloading the file.

[FONT=Verdana]I’m not sure which button you mean, or what’s wrong with it. Please can you clarify?

To get the border to extend the length of the content section, you need to wrap the right-hand sidebar in a div, as per the original code I gave you, and apply the dashed border to the left side of that div.[/FONT]

more button middle portion i dont understanding where i m goin wrong with it and border one ok thank you i will be trying according to your logic even i didnt get it when i read once.

I’m sorry - I still don’t understand what’s wrong with the button. It looks OK to me. What is it you want to change?

please check my code could you i wrapped it in a div still it shows incomplete i dont know where i am goin wrong with it

[FONT=Verdana]To me, it looks the same as your other buttons:

You need to look at the <span> tags, though, because you seem to have used opening tags where you should have used closing tags. Run your page through the W3C Validator, which will pick up coding errors for you.
[/FONT]

You could put it on the web, say in a test folder on your site or on at the domain where the page will end up, and post a link to it here. E.g: mydomain/test/testpage.html

when i tried span with end tas button size deceases could help me where could i be geting wrong in stylesheet presently i feel there is error in stylesheet it would be great to know.

hi could you help in getting order done techno bear.

[FONT=Verdana]Please don’t be impatient. I am a volunteer, like the rest of the forum staff, and I have other things to do, including having my lunch.

As you still haven’t answered my question regarding what you think is wrong with the buttons, I am unable to offer any suggestions there.

You really need to correct the HTML before worrying about the stylesheet, because invalid code is liable to produce unexpected results. You may get the site to display as you expect in one browser, only to find it is quite different in another.[/FONT]

[FONT=Verdana]I think I have finally worked out what you mean by a problem with the middle portion of the button. The top and bottom of the background image is being cut off. You can solve that particular problem by increasing the top and bottom padding from 10px to 12px, but that will leave you with a different problem, because the centre image will then show beyond the rounded ends.

Your coding seems to me to be unnecessarily complex, with <div>s and <span>s that you really don’t need. If you’re not able to fix the buttons, then I suggest you take a look at this article. It shows various ways of creating buttons in different styles.

In future, please try to be clear when you ask a question as to exactly what the problem is, and reply to those trying to help you when they ask for further information. That way, you’re more likely to get prompt help and a satisfactory answer.[/FONT]

could you please tell me where i am goin wrong with color to links at top it does not stays even when i click it and it does not change active state as well .

Please post a link to your page online. If it’s not online yet, upload it to your server. :slight_smile:

[FONT=Verdana]Do you mean the main menu - “Home”, “Services” etc.? That’s working OK on hover in the last lot of code you posted, but of course, we only have the index page, so we can’t see what’s happening elsewhere.

As ralph.m says, we really need a link to a full version so that we can see what’s going on.
[/FONT]

hi in this i am not able to get those links active and stay even though hovering is fine i do not undestand which part i am getting an error please tell me any alternative way to put in live somewhere.

Html file

<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Rose Infomedia</title>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=“css/reset.css” type=“text/css” media=“all”>
<link rel=“stylesheet” href=“css/style.css” type=“text/css” media=“all”>
<script src=“js/jquery-1.6.3.min.js” type=“text/javascript”></script>
<script src=“js/jquery.featureCarousel.js” type=“text/javascript”></script>
<script type=“text/javascript”>
$(document).ready(function() {
$(“#carousel”).featureCarousel({
autoPlay:7000,
trackerIndividual:false,
trackerSummation:false,
topPadding:50,
smallFeatureWidth:.9,
smallFeatureHeight:.9,
sidePadding:0,
smallFeatureOffset:0
});
});
</script>
<!–[if lt IE 9]>
<script type=“text/javascript” src=“js/html5.js”></script>
<style type=“text/css”>
.bg {behavior:url(js/PIE.htc)}
</style>
<![endif]–>
<!–[if lt IE 7]>
<div style=’ clear: both; text-align:center; position: relative;'>
<a href=“http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode”><img src=“http://www.theie6countdown.com/images/upgrade.jpg” border=“0” alt=“” /></a>
</div>
<![endif]–>
</head>
<body id=“page1”>
<div class=“body1”>
<div class=“main”>
<div id=“wrapper”>
<!-- header –>
<header>
<div class =“heade”>
<div class=“wrapper”>
<nav>
<ul id=“top_nav”>
<li><a href=“RoseInfomedia.html”><img src=“images/home.png” width=“18” height=“18” alt=“”/></a></li>
<li><a href=“#”><img src=“images/contactus.png” width=“18” height=“18” alt=“”/></a></li>
<li><a href=“#”><img src=“images/services.png” width=“18” height=“18” alt=“”/></a></li>
</ul>
</nav>
</div>

		&lt;div class="wrapper"&gt;
			&lt;h1&gt;&lt;a href="RoseInfomedia.html" id="logo"&gt;&lt;/a&gt;&lt;/h1&gt;
			&lt;nav&gt;
				&lt;ul id="menu"&gt;
					&lt;li id="menu_active"&gt;&lt;a href="Rose Infomedia.html"&gt;&lt;span&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="Rose Infomedia.html"&gt;&lt;span&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li class="nav3"&gt;&lt;a href="Rose Infomedia.html"&gt;&lt;span&gt;&lt;span&gt;Client's&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li class="nav4"&gt;&lt;a href="Rose Infomedia.html"&gt;&lt;span&gt;&lt;span&gt;About us&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li class="nav5"&gt;&lt;a href="Rose Infomedia.html"&gt;&lt;span&gt;&lt;span&gt;Contact us&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/nav&gt;
		&lt;/div&gt;
	&lt;/div&gt;&lt;!--heade--&gt;
	
		&lt;div class="row-bot"&gt;
        	&lt;div class="center-shadow"&gt;
            	&lt;div class="carousel-container"&gt;
                  &lt;div id="carousel"&gt;
                    &lt;div class="carousel-feature"&gt;
                      &lt;a href="#"&gt;&lt;img class="carousel-image" alt="" src="images/gallery-img1.png"&gt;&lt;/a&gt;                          
                    &lt;/div&gt;
                    &lt;div class="carousel-feature"&gt;
                      &lt;a href="#"&gt;&lt;img class="carousel-image" alt="" src="images/gallery-img3.png"&gt;&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="carousel-feature"&gt;
                      &lt;a href="#"&gt;&lt;img class="carousel-image" alt="" src="images/gallery-img2.png"&gt;&lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
				&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/header&gt;

<div id=“main-content”>
<div id=“left-content”>
<h2>Welcome! Why Choose us?</h2>
<p>At RoseInfomedia we convert your concept into a brilliant website. When companies world-wide need a unique and original website they turn to us. Whether you want to create a lasting impression for your brand, or increase leads and sales, our team has the creativity, technology, and marketing.</p>

<div class=“category”>

<div class =“box_top”>

<div class =“header”>
<h3>E Buiseness Solution’s</h3>
</div>

<div class =“box_mid”>
<div class =“boxcontent”>
<pre><img src=“images/icon.gif” width=“18” height=“18” alt=“”/> Web Designing</pre>
<pre><img src=“images/icon.gif” width=“18” height=“18” alt=“”/> Web Development</pre>
<pre><img src=“images/icon.gif” width=“18” height=“18” alt=“”/> Bespoke Application</pre>
<pre><img src=“images/icon.gif” width=“18” height=“18” alt=“”/> E Commerce Solution’s</pre>
<div class =“button”>
<a href=“#” class=“button1”><span><span>More<span><span></a>
</div>
</div>

<div class =“box_bot”>
</div></div></div>
</div>

<div class=“category”>

&lt;div class ="box_top"&gt;

&lt;div class ="header"&gt;
&lt;h3&gt;Technology&lt;/h3&gt;
&lt;/div&gt;

&lt;div class ="box_mid"&gt;
&lt;div class ="boxcontent"&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Open Source Solutions  &lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; MVC/WaterFall/RAD&lt;/pre&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Asp/sqlserver/access   &lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; PHP/MySql/NoSql&lt;/pre&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Wordpress/Drupal/joomla&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Magento/OpenCart&lt;/pre&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; CakePHP/Cohana/Codeigniter.&lt;/pre&gt;
&lt;div class ="button"&gt;
&lt;a href="#" class="button1"&gt;&lt;span&gt;&lt;span&gt;More&lt;span&gt;&lt;span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class ="box_bot"&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 

</div>

<div class=“gutter”> </div>

<div class=“category”>

&lt;div class ="box_top"&gt;

&lt;div class ="header"&gt;
&lt;h3&gt;Product's&lt;/h3&gt;
&lt;/div&gt;

&lt;div class ="box_mid"&gt;
&lt;div class ="boxcontent"&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; SMS Solution's&lt;/pre&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Billing Solution's&lt;/pre&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; MIS Solution's&lt;/pre&gt;
&lt;div class ="button"&gt;
&lt;a href="#" class="button1"&gt;&lt;span&gt;&lt;span&gt;More&lt;span&gt;&lt;span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class ="box_bot"&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 

</div>

<div class=“category”>

&lt;div class ="box_top"&gt;

&lt;div class ="header"&gt;
&lt;h3&gt;IT Support Solution's&lt;/h3&gt;	
&lt;/div&gt;

&lt;div class ="box_mid"&gt;
&lt;div class ="boxcontent"&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Optimize the use of IT products & services&lt;/pre&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Simplify support in resolving problems&lt;/pre&gt;
&lt;pre&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; IT environment availability&lt;/pre&gt;
&lt;div class ="button"&gt;
&lt;a href="#" class="button1"&gt;&lt;span&gt;&lt;span&gt;More&lt;span&gt;&lt;span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class ="box_bot"&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 

</div>
</div><!–left-content–>

<div class =“right-content”>
<div id=“sidebar”>
<div class =“box_top1”>

&lt;div class ="header"&gt;
&lt;h3&gt;Contact Us&lt;/h3&gt;
&lt;/div&gt;

&lt;div class ="box_mid2"&gt;
&lt;div class ="boxcontent"&gt;
&lt;form id="contact-form" method="post"&gt;
&lt;label&gt;&lt;input name="email" value="Email" onBlur="if(this.value=='') this.value='Email'" onFocus="if(this.value =='Email' ) this.value=''" /&gt;&lt;/label&gt;&lt;/br&gt;
&lt;label&gt;&lt;input name="subject" value="Subject" onBlur="if(this.value=='') this.value='Subject'" onFocus="if(this.value =='Subject' ) this.value=''" /&gt;&lt;/label&gt;&lt;/br&gt;
&lt;textarea onBlur="if(this.value=='') this.value='Message'" onFocus="if(this.value =='Message' ) this.value=''"&gt;Message&lt;/textarea&gt;
&lt;div class="buttons"&gt;
&lt;a href="#" class="button2" onClick="document.getElementById('contact-form').submit()"&gt;&lt;span&gt;&lt;span&gt;Send&lt;span&gt;&lt;span&gt;&lt;/a&gt;
&lt;a href="#" class="button2" onClick="document.getElementById('contact-form').reset()"&gt;&lt;span&gt;&lt;span&gt;Reset&lt;span&gt;&lt;span&gt;&lt;/a&gt;
&lt;/div&gt;											          
&lt;/form&gt;
&lt;/div&gt;

&lt;div class ="box_bot1"&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 

</div>

<div class=“gutter1”> </div>

<div id=“sidebar”>
<div class =“box_top1”>

&lt;div class ="header"&gt;
&lt;h3&gt;Recent comments&lt;/h3&gt;
&lt;/div&gt;

&lt;div class ="box_mid1"&gt;
&lt;div class ="boxcontent"&gt;
&lt;p&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Rose Infomedia Fufilled all my demands in &lt;br/&gt; timely manner and at affordable pricing - John&lt;/p&gt;
&lt;p&gt;&lt;img src="images/icon.gif" width="18" height="18" alt=""/&gt; Rose Infomedia Fufilled completed my projects timely manner and at affordable pricing - Jane&lt;/p&gt;
&lt;div class ="button"&gt;
&lt;a href="#" class="button1"&gt;&lt;span&gt;&lt;span&gt;More&lt;span&gt;&lt;span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class ="box_bot1"&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 

</div>

</div><!–right-content–>
</div>
</div>

<div class=“client”>
<img src=“images/client.gif” width=“1280” height=“100” alt=“”/>
</div>

</div>
</div>

<div class=“footer”>
<div class=“col_1”>
<ul>
<li><a href=“RoseInfomedia.html” title=“Technology Services”><h4>Technology Services</h4></a></li>
<li><a href=“RoseInfomedia.html”>Website Development</a></li>
<li><a href=“RoseInfomedia.html”>PHP</a></li>
<li><a href=“RoseInfomedia.html”>Asp.Net</a></li>
<li><a href=“RoseInfomedia.html”>Java/J2ee</a></li>
<li><a href=“RoseInfomedia.html”>XHTML/CSS</a></li>
<li><a href=“RoseInfomedia.html”>E-Learning</a></li>
<li><a href=“RoseInfomedia.html”>Content Mangement Systems</a></li>
<li><a href=“RoseInfomedia.html”>Microsoft Crm Solutions</a></li>
</ul>
</div>

  &lt;div class="col_2"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Web 2.0 solutions&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Web 2.0 Design&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Web 2.0 Development&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Wordpress&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Social Media Application&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Facebook Application&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Widget's&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;E-Commerce&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Custom Sharepoint Development&lt;/a&gt;&lt;/li&gt;
      
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="col_3"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Ipad Application's&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;IPhone&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Android&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;BlackBerry&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Rich Internet Application&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Flex3&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;AJAX&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="col_4"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html" title="outsourcing"&gt;&lt;h4&gt;Creative Services&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Website Design&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Banner Design&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Graphic Design&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;User Experience Design&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Flash & Multimedia&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="col_5"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Landing Page Design&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Logo Design&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Email Design&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Coporate Identity Packages&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;Microsite-Development&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
 &lt;/div&gt; 
  
&lt;div class="footer-bot"&gt;
   
   &lt;div class="footer_copyright-left"&gt;
   &lt;p&gt;Copyright @ 2010 RoseInfomedia Technologies Pvt. Ltd. All Rights Reserved&lt;p&gt;
   &lt;/div&gt;
   
  &lt;div class ="footer_copyright-right"&gt;
   &lt;ul id="menu-bot"&gt;
    &lt;li&gt;&lt;a href="RoseInfomedia.html"&gt;&lt;span&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="Services.html"&gt;&lt;span&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li class="nav3"&gt;&lt;a href="Client's.html"&gt;&lt;span&gt;&lt;span&gt;Client's&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li class="nav4"&gt;&lt;a href="Aboutus.html"&gt;&lt;span&gt;&lt;span&gt;About us&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li class="nav5"&gt;&lt;a href="Contactus.html"&gt;&lt;span&gt;&lt;span&gt;Contact us&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
  &lt;/div&gt;
  
&lt;/div&gt;

</body>
</html>

style.css

/* Getting the new tags to behave /
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/
Left & Right alignment /
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
/
Global properties */
body {background:black;border:0;font:13px Arial,Helvetica,sans-serif;color:#818181;line-height:18px}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;padding:0}
.main { margin:0 auto; width:100%; overflow:hidden;}
.body1 {background:white;top repeat-x #f2f2f2}
.heade{background:black;}

/* main layout */
a {color:#000;text-decoration:underline;outline:none}
a:hover {text-decoration:none}
h1 {float:left;padding:23px 0 0 30px}
h2 {font-size:36px;color:#000;padding:36px 0 21px 0;letter-spacing:-1px}
h2.pad_bot1 {padding-bottom:11px}
h2.pad_top1 {padding-top:10px}
h3 {font-size:24px;color:#000;padding:30px 0 13px 0;letter-spacing:-1px}
p {padding-bottom:18px}

/* header */
#top_nav {float:right;padding:0px 32px 0 0;}
#top_nav li {float:left;padding-right:8px;margin-right:7px;}
#top_nav li a {color:#000;text-decoration:none;font-size:12px}
#top_nav li a:hover {text-decoration:none }
#logo {display:block;background:url(…/images/logo.png) 0 0 no-repeat;width:209px;height:68px;text-indent:-9999px}
#menu {float:right;padding:52px 0 0 0}
#menu li {float:left;padding-left:1px}
#menu li a {display:block;font-size:15px;color:#000;text-decoration:none;line-height:60px;background:url(…/images/menu_bg.gif) top repeat-x;height:56px;overflow:hidden;cursor:pointer}
#menu li a span {display:block;background:url(…/images/menu_bg_left.gif) top left no-repeat}
#menu li a span span {background:url(…/images/menu_bg_right.gif) top right no-repeat;padding:0 32px;height:56px}
#menu li a:hover, #menu #menu_active a {color:#fff;background:url(…/images/menu_bg_active.gif) top repeat-x}
#menu li a:hover span, #menu #menu_active a span {background:url(…/images/menu_bg_left_active.gif) top left no-repeat}
#menu li a:hover span span, #menu #menu_active a span span {background:url(…/images/menu_bg_right_active.gif) top right no-repeat}
#menu .nav3 a:hover, #menu .nav3#menu_active a {background:url(…/images/menu_nav3_bg.gif) top repeat-x}
#menu .nav3 a:hover span, #menu .nav3#menu_active a span {background:url(…/images/menu_nav3_left.gif) top left no-repeat}
#menu .nav3 a:hover span span, #menu .nav3#menu_active a span span {background:url(…/images/menu_nav3_right.gif) top right no-repeat}
#menu .nav4 a:hover, #menu .nav4#menu_active a {background:url(…/images/menu_nav4_bg.gif) top repeat-x}
#menu .nav4 a:hover span, #menu .nav4#menu_active a span {background:url(…/images/menu_nav4_left.gif) top left no-repeat}
#menu .nav4 a:hover span span, #menu .nav4#menu_active a span span {background:url(…/images/menu_nav4_right.gif) top right no-repeat}
#menu .nav5 a:hover, #menu .nav5#menu_active a {background:url(…/images/menu_nav5_bg.gif) top repeat-x}
#menu .nav5 a:hover span, #menu .nav5#menu_active a span {background:url(…/images/menu_nav5_left.gif) top left no-repeat}
#menu .nav5 a:hover span span, #menu .nav5#menu_active a span span {background:url(…/images/menu_nav5_right.gif) top right no-repeat}

.row-bot {
width:100%;
min-height:20px;
background:url(…/images/row-bot-tail2.gif) center top repeat-x;
}
#page1 .row-bot {background-image:url(…/images/row-bot-tail.gif);}

/********************

  • FEATURE CAROUSEL *
    ********************/
    .carousel-container {
    position:relative;
    width:960px;
    margin:0 auto;
    }
    #carousel {
    height:449px;
    width:980px;
    position:relative;
    }
    .carousel-image {
    border:0;
    display:block;
    }
    .carousel-feature {
    position:absolute;
    top:-1000px;
    left:-1000px;
    cursor:pointer;
    }
    #wrapper{background:white; width:100%;}

#left-content{width: 850px; float:left;padding-left:30px;padding-right:5px; border-right: 1px dashed #000;}

#sidebar{width: 320px; float:right;}

#right-content{width: 380px;float:right;}

.category{width:395px; float:left;padding-left:30px;}

.header{text-align:left; padding-left:60px;padding-top:5px;}

.box_top{background:url(…/images/box_top.gif) center top no-repeat; width:100%;}

.box_mid{background:url(…/images/box_mid.gif) center;height:180px; width:100%;}

.box_bot{background:url(…/images/box_bot.gif) center bottom no-repeat; height:75px;}

.box_top1{background:url(…/images/box_top1.gif) center top no-repeat; width:100%;}

.box_mid1{background:url(…/images/box_mid1.gif) center;height:180px; width:100%;}

.box_mid2{background:url(…/images/box_mid1.gif) center;height:340px; width:100%;}

.box_bot1{background:url(…/images/box_bot1.gif) center bottom no-repeat; height:75px;}

.boxcontent{padding-top:10px;padding-left: 10px;}

.button{text-align:right;padding-right:25px; padding-bottom:23px;}

.button1{background:url(…/images/button1_bg.gif) repeat-x;text-decoration:none; padding-bottom:10px;padding-top:10px;}
.button1 span {background:url(…/images/button1_left.gif) left no-repeat; padding-bottom:10px; padding-top:10px; padding-left:15px}
.button1 span span {background:url(…/images/button1_right.gif) right no-repeat; padding-bottom:10px; padding-top:10px; padding-left:15px}
.button1:hover {color:#006abb}

.buttons{text-align:right;padding-right:25px; padding-bottom:20px; padding-top:20px;}

.button2{background:url(…/images/button1_bg.gif) repeat-x;text-decoration:none; padding-bottom:10px;padding-top:10px;}
.button2 span {background:url(…/images/button1_left.gif) left no-repeat; padding-bottom:10px; padding-top:10px; padding-left:15px}
.button2 span span {background:url(…/images/button1_right.gif) right no-repeat; padding-bottom:10px; padding-top:10px; padding-left:15px}
.button2:hover {color:#006abb}

.gutter{padding-bottom:75px;}

.gutter1{padding-bottom:410px;}

#contact-form {width:320px}
#contact-form label {
display:block;
height:44px;
}
#contact-form input {
width:180px;
font-size:15px;
line-height:1.2em;
color:#a0a0a0;
padding:8px 15px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #fff;
background:url(…/images/input-tail.gif) 0 0 repeat-x #e6e6e6;
outline:none;
}
#contact-form textarea {
height:75px;
overflow:auto;
width:180px;
font-size:15px;
line-height:1.2em;
color:#a0a0a0;
padding:7px 15px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #fff;
background:url(…/images/text-area-tail.gif) 0 0 repeat-x #e5e5e5;
outline:none;
}

.footer {padding-top:10px; width:100%;}
.footer a {color:white;text-decoration:none;}
.col_1 {width:250px;float:left;padding-left:50px;}
.col_2 {width:250px;float:left;}
.col_3 {width:200px;float:left;}
.col_4 {width:250px;float:left;}
.col_5{width:230px;float:left;}

#menu-bot {float:right;padding:15px 0 0 0;}
#menu-bot li {float:left;padding-left:15px;padding-right:40px;border-right:1px solid #fff;}
#menu-bot li a {display:block;font-size:15px;color:#f10;text-decoration:none;line-height:20px;height:25px;overflow:hidden;cursor:pointer}

.footer_copyright-left{float:left;padding-left:0px; font-size:15px;}

.footer_copyright-right{float:right; padding-right:50px; font-size:15px;}

reset.css

a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top}
ol, ul {list-style:none}
blockquote, q {quotes:none}
table, table td {padding:0;border:none;border-collapse:collapse}
img {vertical-align:top}
embed {vertical-align:top}

  • {border:none}

[FONT=Verdana]ralph.m answered that question for you in post #8 above.

Your menu is using background images, which we don’t have, so we can’t run the above code to see what might be going wrong. We need a live link to the full page.[/FONT]

This doesn’t show the other pages, where you need the links highlighted. You can do this with CSS, JavaScript or PHP. Have a lot at this thread. It provides a number of methods:

Here is a way with jQuery:

hi please Could you tell me where i am goin wong with thse links at bottom i have sent all the folder seperately in zip it does not seem to stay or change hovering seems fine i dont understand where i am goin wrong it has almost a day to slve this still not getting .

Is there a reason why you are not uploading this to your website? It would be easier to help you that way.