[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 854
  • Last Modified:

Table (with textboxes and textarea) displaced in Firefox, works fine with IE & Opera

Hello experts,

I just modified one XHTML template and added one form input fields within a table. It has a CSS Stylesheet. It works fine with IE 6/7 & Opera but it is tottally displaced to right in Firefox 2. Actually it is floating over some other textboxes and images. I tried many things.

<!--body start -->
<div id="body">
<p class="top"></p>
<!--left panel start -->
<div id="left">
<h2>Contact Me</h2>
<h3></h3>
<p class="event">
<form action="xxx.php" method="post"><table border=0><tr><td>
Name: </td><td align=left style="width: 239px"><input type="text" size=35 name="name"><span style="color: #ff6633">*</span></td></tr><tr><td>
Email Address: </td><td align=left style="width: 239px"><input type="text" size=35 name = "email"><span style="color: #ff6633">*</span></td></tr><tr><td>
Comments: </td><td align=left style="width: 239px">
<textarea name="comments" style="width: 231px; height: 125px"></textarea><span style="color: #ff6633">*</span></td></tr><tr><td>
</td><td style="width: 239px"><input type="submit" value="Submit"></td></tr></table>
</form>
    <span style="color: #ff6633">*All fields are mandatory!</span></p>
</div>
<!--left panel end -->
<!--right panel start -->
<div id="right">
<h2>Search</h2>
<form id="search" action="#" method="post">
<input type="text" name="name" />
<input type="submit" name="go" value="" class="go" />
</form>
<img src="images/xxx.gif" alt="xxx" />
<p class="bottom">
<a href="#" class="xhtm"></a>
<a href="#" class="css"></a>
</p>
</div>
<!--right panel end -->

The table with input fielsds are displaying over the rightpan!!!

I will be appreciative if you could help me on this?

Thanks in advance,
Palz.
0
PaulsonGeorge
Asked:
PaulsonGeorge
  • 5
  • 4
1 Solution
 
TheKyleCommented:
We'd have to see the CSS rules in your stylesheet to understand the problem that you're describing.  

Also, you have a lot of inline styles that should be removed and put in your stylesheet instead.
0
 
PaulsonGeorgeAuthor Commented:
Hi,

Thank you very much for your timely response.

Here is the CSS.

/*------------------------------------------------left panel start---------------------*/
#left{
      width:414px;
      padding:0 0 0 29px;
      float:left;
}
#left h2{
      display:block;
      width:300px;
      font:bold 22px/38px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      background-color:#F8EFD3;
      float:left;
}
#left h3{
      display:block;
      width:354px;
      height:23px;
      padding:0 0 0 12px;
      margin:0 0 0 0;
      background:url(images/h3_bg.gif) 0 0 no-repeat #FCF8EA;
      font:bold 16px/23px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#7C7A02;
      float:left;
}
#left p.text1{
      display:block;
      width:385px;
      font:normal 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#63562E;
      background-color:#F8EFD3;
      margin:0 0 0 0;
      padding:24px 0 0 0;
      float:left;
}
#left p.text2{
      display:block;
      width:385px;
      font:normal 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#63562E;
      background-color:#F8EFD3;
      padding:11px 0 19px 0;
      float:left;
}
#left p.text2 span{
      font:bold 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#9C4D00;
      background-color:#F8EFD3;
}
#left p.rm{
      display:block;
      width:370px;
      height:19px;
      margin:0 0 4px 0;
      font-size:0;
      background:url(images/read_more_div.gif) 0 0 repeat-x;
      float:left;
}
#left p.rm a{
      background:url(images/btn_read_more.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      float:right;
}
#left p.rm a:hover{
      background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}
#left h3.date{
      display:block;
      background:url(images/date_bg.gif) 0 0 no-repeat #FCF8EA;
      width:125px;
      height:18px;
      padding:0 0 0 12px;
      margin:0 0 0 0;
      font:bold 11px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#7C7A02;
      float:left;
}
#left p.event{
      width:354px;
      background:url(images/event_bg.gif) 0 11px no-repeat #F8EFD3;
      padding:11px 0 0 20px;
      margin:0 0 15px 0;
      font:normal 12px/18px Arial, Helvetica, sans-serif;
      color:#63562E;
      float:left;
}
#left p.rm2{
      display:block;
      width:370px;
      height:14px;
      font-size:0;
      margin:0 0 4px 0;
      background:url(images/read_more_div.gif) 0 0 repeat-x;
      float:left;
}
#left p.rm2 a{
      background:url(images/btn_read_more.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      float:right;
}
#left p.rm2 a:hover{
      background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}

/*------------------------------------------------left panel end---------------------*/

/*------------------------------------------------right panel start---------------------*/
#right{
      width:188px;
      padding:5px 0 55px 0;
      margin:0;
      float:left;
}
#right h2{
      display:block;
      background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
      width:145px;
      height:27px;
      padding:0 0 0 9px;
      margin:0 0 5px 0;
      font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      float:left;
}
#right form{
      width:154px;
      padding:0 0 35px 0;
      margin:0;
      float:left;
}
#right form p.domain{
      width:134px;
      height:15px;
      background:url(images/domain_name_bg.gif) 0 0 no-repeat #FCF8EA;
      padding:0 0 0 20px;
      margin:0 0 7px 0;
      font:normal 10px/15px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#900C00;
      text-transform:uppercase;
      float:left;
}
#right form input{
      width:152px;
      height:22px;
      background-color:#fff;
      color:#000;
      border:#D0BE90 solid 1px;
      font:normal 11px/22px Arial, Helvetica, sans-serif;
      float:left;
}
#right form input.go{
      background:url(images/btn_go.gif) 0 0 no-repeat;
      width:27px;
      height:11px;
      border:none;
      cursor:pointer;
      float:right;
}
#right h2.scope{
      display:block;
      background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
      width:145px;
      height:27px;
      padding:0 0 0 9px;
      margin:0 0 12px 0;
      font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      float:left;
}
#right ul{
      width:140px;
      padding:0 0 28px 9px;
      margin:0 0 0 0;
      float:left;
      font-size:0;
}
#right ul li{
      padding:0;
      margin:0;
      float:left;
}
#right ul li a{
      display:block;
      width:125px;
      background:url(images/arrow1.gif) 0 5px no-repeat #F8EFD3;
      padding:0 0 0 15px;
      font:bold 11px/19px Arial, Helvetica, sans-serif;
      color:#BF0000;
      text-decoration:none;
      height:19px;
}
#right ul li a:hover{
      background:url(images/arrow1_hover.gif) 0 5px no-repeat #FEFAEC;
      color:#694F10;
}
#right img.banner{
      display:block;
      width:157px;
      height:146px;
      margin:0 0 15px 0;
      padding:0 0 0 3px;
      float:left;
}
#right p.bottom{
      display:block;
      background:url(images/bottom_bg.gif) 0 0 no-repeat;
      width:162px;
      height:14px;
      padding:0 0 0 22px;
      margin:0;
      float:left;
}
#right p.bottom a.xhtm{
      display:block;
      background:url(images/xhtml_bg.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0 7px 0 0;
      font-size:0;
      float:left;
}
#right p.bottom a.xhtm:hover{
      background:url(images/xhtml_bg_hover.gif) 0 1px no-repeat;
}
#right p.bottom a.css{
      display:block;
      background:url(images/css_bg.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      font-size:0;
      float:left;
}
#right p.bottom a.css:hover{
      background:url(images/css_bg_hover.gif) 0 1px no-repeat;
}
      
/*------------------------------------------------right panel end---------------------*/

It would be highly appreciative if you could help me to solve this ASAP. I'm stuck with this, all the other things are almost done.

Warm Regards,
Palz.
0
 
TheKyleCommented:
I pasted all of your code into an html file, and the problem I'm running into now is that I'm not sure what your page is "supposed" to look like.

However, just by looking at what I have in front of me, it looks like you have an awful lot of floats in your code.  That can very easily cause problems since floats are very temperamental.

Do you have some kind of template (in an image format) that you can link to that would give me an idea of what your page is supposed to look like?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
PaulsonGeorgeAuthor Commented:
Hi,

Please check the page with Firefox, the input fields are mixed with the right panel. That is the problem.

Plesae check these:

Test.htm file contents...
---------------------------------------------------------------------------------------------------------
<head><LINK ID="skin" REL="stylesheet" TYPE="text/css" HREF="skin.css" /></head>
<!--body start -->
<div id="body">
<p class="top"></p>
<!--left panel start -->
<div id="left">
<h2>Contact Me</h2>
<h3></h3>
<p class="event">
<form action="xxx.php" method="post"><table border=0><tr><td>
Name: </td><td align=left style="width: 239px"><input type="text" size=35 name="name"><span style="color: #ff6633">*</span></td></tr><tr><td>
Email Address: </td><td align=left style="width: 239px"><input type="text" size=35 name = "email"><span style="color: #ff6633">*</span></td></tr><tr><td>
Comments: </td><td align=left style="width: 239px">
<textarea name="comments" style="width: 231px; height: 125px"></textarea><span style="color: #ff6633">*</span></td></tr><tr><td>
</td><td style="width: 239px"><input type="submit" value="Submit"></td></tr></table>
</form>
    <span style="color: #ff6633">*All fields are mandatory!</span></p>
</div>
<!--left panel end -->
<!--right panel start -->
<div id="right">
<h2>Search</h2>
<form id="search" action="#" method="post">
<input type="text" name="name" />
<input type="submit" name="go" value="" class="go" />
</form>
<img src="images/xxx.gif" alt="xxx" />
<p class="bottom">
<a href="#" class="xhtm"></a>
<a href="#" class="css"></a>
</p>
</div>
<!--right panel end -->

--------------------------------------------------------------------------------------------------------

and here is the style sheet  "skin.css" file contents...
--------------------------------------------------------------------------------------------------------

/*------------------------------------------------left panel start---------------------*/
#left{
      width:414px;
      padding:0 0 0 29px;
      float:left;
}
#left h2{
      display:block;
      width:300px;
      font:bold 22px/38px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      background-color:#F8EFD3;
      float:left;
}
#left h3{
      display:block;
      width:354px;
      height:23px;
      padding:0 0 0 12px;
      margin:0 0 0 0;
      background:url(images/h3_bg.gif) 0 0 no-repeat #FCF8EA;
      font:bold 16px/23px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#7C7A02;
      float:left;
}
#left form input{
      width:152px;
      height:22px;
      background-color:#fff;
      color:#000;
      border:#D0BE90 solid 1px;
      font:normal 11px/22px Arial, Helvetica, sans-serif;
      float:left;
}
#left form textarea{
      background-color:#fff;
      color:#000;
      border:#D0BE90 solid 1px;
      font:normal 11px/22px Arial, Helvetica, sans-serif;
      float:left;
}
#left p.text1{
      display:block;
      width:385px;
      font:normal 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#63562E;
      background-color:#F8EFD3;
      margin:0 0 0 0;
      padding:24px 0 0 0;
      float:left;
}
#left p.text2{
      display:block;
      width:385px;
      font:normal 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#63562E;
      background-color:#F8EFD3;
      padding:11px 0 19px 0;
      float:left;
}
#left p.text2 span{
      font:bold 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#9C4D00;
      background-color:#F8EFD3;
}
#left p.rm{
      display:block;
      width:370px;
      height:19px;
      margin:0 0 4px 0;
      font-size:0;
      background:url(images/read_more_div.gif) 0 0 repeat-x;
      float:left;
}
#left p.rm a{
      background:url(images/btn_read_more.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      float:right;
}
#left p.rm a:hover{
      background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}
#left h3.date{
      display:block;
      background:url(images/date_bg.gif) 0 0 no-repeat #FCF8EA;
      width:125px;
      height:18px;
      padding:0 0 0 12px;
      margin:0 0 0 0;
      font:bold 11px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#7C7A02;
      float:left;
}
#left p.event{
      width:354px;
      background:url(images/event_bg.gif) 0 11px no-repeat #F8EFD3;
      padding:11px 0 0 20px;
      margin:0 0 15px 0;
      font:normal 12px/18px Arial, Helvetica, sans-serif;
      color:#63562E;
      float:left;
}
#left p.rm2{
      display:block;
      width:370px;
      height:14px;
      font-size:0;
      margin:0 0 4px 0;
      background:url(images/read_more_div.gif) 0 0 repeat-x;
      float:left;
}
#left p.rm2 a{
      background:url(images/btn_read_more.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      float:right;
}
#left p.rm2 a:hover{
      background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}

/*------------------------------------------------left panel end---------------------*/

/*------------------------------------------------right panel start---------------------*/
#right{
      width:188px;
      padding:5px 0 55px 0;
      margin:0;
      float:left;
}
#right h2{
      display:block;
      background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
      width:145px;
      height:27px;
      padding:0 0 0 9px;
      margin:0 0 5px 0;
      font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      float:left;
}
#right form{
      width:154px;
      padding:0 0 35px 0;
      margin:0;
      float:left;
}
#right form p.domain{
      width:134px;
      height:15px;
      background:url(images/domain_name_bg.gif) 0 0 no-repeat #FCF8EA;
      padding:0 0 0 20px;
      margin:0 0 7px 0;
      font:normal 10px/15px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#900C00;
      text-transform:uppercase;
      float:left;
}
#right form input{
      width:152px;
      height:22px;
      background-color:#fff;
      color:#000;
      border:#D0BE90 solid 1px;
      font:normal 11px/22px Arial, Helvetica, sans-serif;
      float:left;
}
#right form input.go{
      background:url(images/btn_go.gif) 0 0 no-repeat;
      width:27px;
      height:11px;
      border:none;
      cursor:pointer;
      float:right;
}
#right h2.scope{
      display:block;
      background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
      width:145px;
      height:27px;
      padding:0 0 0 9px;
      margin:0 0 12px 0;
      font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      float:left;
}
#right ul{
      width:140px;
      padding:0 0 28px 9px;
      margin:0 0 0 0;
      float:left;
      font-size:0;
}
#right ul li{
      padding:0;
      margin:0;
      float:left;
}
#right ul li a{
      display:block;
      width:125px;
      background:url(images/arrow1.gif) 0 5px no-repeat #F8EFD3;
      padding:0 0 0 15px;
      font:bold 11px/19px Arial, Helvetica, sans-serif;
      color:#BF0000;
      text-decoration:none;
      height:19px;
}
#right ul li a:hover{
      background:url(images/arrow1_hover.gif) 0 5px no-repeat #FEFAEC;
      color:#694F10;
}
#right img.banner{
      display:block;
      width:157px;
      height:146px;
      margin:0 0 15px 0;
      padding:0 0 0 3px;
      float:left;
}
#right p.bottom{
      display:block;
      background:url(images/bottom_bg.gif) 0 0 no-repeat;
      width:162px;
      height:14px;
      padding:0 0 0 22px;
      margin:0;
      float:left;
}
#right p.bottom a.xhtm{
      display:block;
      background:url(images/xhtml_bg.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0 7px 0 0;
      font-size:0;
      float:left;
}
#right p.bottom a.xhtm:hover{
      background:url(images/xhtml_bg_hover.gif) 0 1px no-repeat;
}
#right p.bottom a.css{
      display:block;
      background:url(images/css_bg.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      font-size:0;
      float:left;
}
#right p.bottom a.css:hover{
      background:url(images/css_bg_hover.gif) 0 1px no-repeat;
}
     
/*------------------------------------------------right panel end-----------------


Open it in both IE and Firefox, you see the difference!!

Thanks,
Palz.

0
 
PaulsonGeorgeAuthor Commented:
hello experts please look into it... i am totally lost !!!! :(
0
 
TheKyleCommented:
The problem is that you have WAY too many floats.  I deleted all of the floats except for the ones on your #left and #right div's.  It now looks a lot closer to the IE version.

However, it doesn't look perfect yet.  IE looks good, but it's actually not displaying correctly.  It looks like you're trying to use empty paragraph tags to give the page some spacing and for background color, right?  

That's not a good idea. Instead, you should delete those empty paragraphs and either give margins, padding and background color to your existing elements.  Or if you need to, you can wrap your form elements with div's that have the correct margins, padding and background color.
0
 
PaulsonGeorgeAuthor Commented:
Thank you very much for your help. It will be highly appreciative if you could provide the code which worked for you.

Waiting for your reply.

Warm regards,
Pauls.
0
 
TheKyleCommented:
It's exactly the same code as you have above, but all of the floats are deleted except for the two that I referred to above...

#left{
      width:414px;
      padding:0 0 0 29px;
      float:left;
}
#left h2{
      display:block;
      width:300px;
      font:bold 22px/38px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      background-color:#F8EFD3;
}
#left h3{
      display:block;
      width:354px;
      height:23px;
      padding:0 0 0 12px;
      margin:0 0 0 0;
      background:url(images/h3_bg.gif) 0 0 no-repeat #FCF8EA;
      font:bold 16px/23px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#7C7A02;
}
#left form input{
      width:152px;
      height:22px;
      background-color:#fff;
      color:#000;
      border:#D0BE90 solid 1px;
      font:normal 11px/22px Arial, Helvetica, sans-serif;
}
#left form textarea{
      background-color:#fff;
      color:#000;
      border:#D0BE90 solid 1px;
      font:normal 11px/22px Arial, Helvetica, sans-serif;
}
#left p.text1{
      display:block;
      width:385px;
      font:normal 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#63562E;
      background-color:#F8EFD3;
      margin:0 0 0 0;
      padding:24px 0 0 0;
}
#left p.text2{
      display:block;
      width:385px;
      font:normal 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#63562E;
      background-color:#F8EFD3;
      padding:11px 0 19px 0;
}
#left p.text2 span{
      font:bold 13px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#9C4D00;
      background-color:#F8EFD3;
}
#left p.rm{
      display:block;
      width:370px;
      height:19px;
      margin:0 0 4px 0;
      font-size:0;
      background:url(images/read_more_div.gif) 0 0 repeat-x;
}
#left p.rm a{
      background:url(images/btn_read_more.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
}
#left p.rm a:hover{
      background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}
#left h3.date{
      display:block;
      background:url(images/date_bg.gif) 0 0 no-repeat #FCF8EA;
      width:125px;
      height:18px;
      padding:0 0 0 12px;
      margin:0 0 0 0;
      font:bold 11px/18px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#7C7A02;
}
#left p.event{
      width:354px;
      background:url(images/event_bg.gif) 0 11px no-repeat #F8EFD3;
      padding:11px 0 0 20px;
      margin:0 0 15px 0;
      font:normal 12px/18px Arial, Helvetica, sans-serif;
      color:#63562E;
}
#left p.rm2{
      display:block;
      width:370px;
      height:14px;
      font-size:0;
      margin:0 0 4px 0;
      background:url(images/read_more_div.gif) 0 0 repeat-x;
}
#left p.rm2 a{
      background:url(images/btn_read_more.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
}
#left p.rm2 a:hover{
      background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}

/*------------------------------------------------left panel end---------------------*/

/*------------------------------------------------right panel start---------------------*/
#right{
      width:188px;
      padding:5px 0 55px 0;
      margin:0;
      float:left;
}
#right h2{
      display:block;
      background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
      width:145px;
      height:27px;
      padding:0 0 0 9px;
      margin:0 0 5px 0;
      font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
}
#right form{
      width:154px;
      padding:0 0 35px 0;
      margin:0;
}
#right form p.domain{
      width:134px;
      height:15px;
      background:url(images/domain_name_bg.gif) 0 0 no-repeat #FCF8EA;
      padding:0 0 0 20px;
      margin:0 0 7px 0;
      font:normal 10px/15px  "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#900C00;
      text-transform:uppercase;
}
#right form input{
      width:152px;
      height:22px;
      background-color:#fff;
      color:#000;
      border:#D0BE90 solid 1px;
      font:normal 11px/22px Arial, Helvetica, sans-serif;
}
#right form input.go{
      background:url(images/btn_go.gif) 0 0 no-repeat;
      width:27px;
      height:11px;
      border:none;
      cursor:pointer;
}
#right h2.scope{
      display:block;
      background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
      width:145px;
      height:27px;
      padding:0 0 0 9px;
      margin:0 0 12px 0;
      font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
}
#right ul{
      width:140px;
      padding:0 0 28px 9px;
      margin:0 0 0 0;
      font-size:0;
}
#right ul li{
      padding:0;
      margin:0;
}
#right ul li a{
      display:block;
      width:125px;
      background:url(images/arrow1.gif) 0 5px no-repeat #F8EFD3;
      padding:0 0 0 15px;
      font:bold 11px/19px Arial, Helvetica, sans-serif;
      color:#BF0000;
      text-decoration:none;
      height:19px;
}
#right ul li a:hover{
      background:url(images/arrow1_hover.gif) 0 5px no-repeat #FEFAEC;
      color:#694F10;
}
#right img.banner{
      display:block;
      width:157px;
      height:146px;
      margin:0 0 15px 0;
      padding:0 0 0 3px;
}
#right p.bottom{
      display:block;
      background:url(images/bottom_bg.gif) 0 0 no-repeat;
      width:162px;
      height:14px;
      padding:0 0 0 22px;
      margin:0;
}
#right p.bottom a.xhtm{
      display:block;
      background:url(images/xhtml_bg.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0 7px 0 0;
      font-size:0;
}
#right p.bottom a.xhtm:hover{
      background:url(images/xhtml_bg_hover.gif) 0 1px no-repeat;
}
#right p.bottom a.css{
      display:block;
      background:url(images/css_bg.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      font-size:0;
}
#right p.bottom a.css:hover{
      background:url(images/css_bg_hover.gif) 0 1px no-repeat;
}
0
 
TheKyleCommented:
Was there a particular reason why my solution was given a 'B'?  

If my answer wasn't clear or didn't solve your problem, just let me know, and I can try to clarify some more.  Thanks!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now