Title: CSS Problems
Last modified: August 19, 2016

---

# CSS Problems

 *  [avanti_seo](https://wordpress.org/support/users/avanti_seo/)
 * (@avanti_seo)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/css-problems-4/)
 * Re-post:
 * Hi all, thanks in advance
 * My CSS is poor 🙁
    I have jacked the “Oriental” theme, and written some working
   PHP code to display child-pages of the current level-1 page in the ‘search bar’,
   Example URL is: [http://rocket.myzen.co.uk/candidate/](http://rocket.myzen.co.uk/candidate/)–
   The php I will post for others in a seperate post.
 * 2 problems:
    1. The white-swirl background image of the ‘searchbar/sub-page menu’
   works fine in FireFox, but often dissappears in I.E. when you move the window.
   Any thoughts?
 * 2. I would like the child-page links to be in the same ‘black bold non-underlined’
   font as the current parent page item (‘Candidate’ in the exmaple), and then to‘
   black underline’ when hovered over.
    – I have tried stealing chunks of code from
   elsewhere in the CSS, but to no avail. – I am fairly sure the correct place for
   the needed code is ‘somewhere’ in the ‘searchbar’ css code, but not sure which
   bit.
 * Here is the output HTML code in question:
 * > <div id=”page”>
   >  <div id=”navcontainer”> <ul id=”navlist”><font face=”Century
   > Gothic” size=”2″> <li id=”first”> # Home
   > <li class=”page_item page-item-7 current_page_item”>Candidate
   >  <li class=”page_item
   > page-item-11″>Client <li class=”page_item page-item-14″>Contact Us
   > <li class=”page_item page-item-17″>Latest Vacancies
   >  <li class=”page_item page-
   > item-19″>Useful Links </font> </div> <!– <div id=”subnavcontainer”> –>
   > <div id=”searchBar”>
   >  <center> <table align=”center” border=”0″ cellpadding
   > =”0″ cellspacing=”0″ height=”30″ width=”0″> <tbody><tr> <td>
   > <!– <ul id=”navlist”> <font face=’Century Gothic’ size=’4′> </font> –>
   >  Client
   > <font face=”Century Gothic” size=”2″>Cand sub page 1</font><!– </font> <font
   > face=’Century Gothic’ size=’5′> </font> –>
   > </td>
   >  </tr> </tbody></table> </center> </div>
 * Here is the CSS Stylesheet for the Theme:
 * >  /*
   >  <div id=”searchBar”> <div id=”navcontainer”> #navcontainer ul { background:#
   > CC0000; padding: 0; margin: 0; list-style: none; float: left; width: 100%; 
   > font-size: 1.0em;
   > Theme Name: oriental
   >  Theme URI: [http://pure-essence.net/2008/09/19/wordpress-theme-oriental/](http://pure-essence.net/2008/09/19/wordpress-theme-oriental/)
   > Description: Created by pure-essence.net. Oriental, plum, bamboo, pine, flower,
   > foliage, orange, red theme. Now compatible with wordpress 2.7.
   > version 1.1.1 – Recoded to use relative positioning instead of float.
   > version 1.1.2 – Fixed IE 6 issue brought up [http://wordpress.org/support/topic/208400](http://wordpress.org/support/topic/208400)
   > version 1.2.0 – Making the theme compatible with wp 2.7. And sorry I no longer
   > wish to support IE 6. If this theme doesn’t look good in IE 6, use a different
   > one. And seriously everyone need to move off the evil IE 6.
   > version 1.2.1 – Made the theme a bit more backward compatible.
   >  Version: 1.2.1
   > Author: Ying Zhang Author URI: [http://pure-essence.net/](http://pure-essence.net/)
   > Tags: fixed-width, two-columns, threaded-comments, sticky-post, microformats,
   > left-sidebar, yellow, orange, red
   > The CSS, XHTML and design is released under GPL:
   >  [http://www.opensource.org/licenses/gpl-license.php](http://www.opensource.org/licenses/gpl-license.php)
   > */
   > /* Layout – font here is globally applied to whole page- */
   >  body { padding:
   > 0; margin: 0; font-size: 0.7em; font-family:Verdana; background: black; color:#
   > 000; }
   > /* Default */
   >  a { color: #3b6065; }
   > a:hover {
   >  color: #841700; }
   > h1 {
   >  font-size: 1.2em; }
   > h2 {
   >  font-size: 1.1em; }
   > h3 {
   >  font-size: 1em; }
   > h4 {
   >  font-size: .9em; }
   > h5 {
   >  font-size: .8em; }
   > h6 {
   >  font-size: .7em; }
   > h7 {
   >  padding: 0; margin: 0; font-size: 1.0em; font-family:Verdana; background:
   > black; color: #000; }
   > blockquote {
   >  padding: 0 0.5em; font-size: 1.7em; border-left: 5px solid #f0e8a7;
   > margin: 0; background-color: #f8f8e2; }
   > img.alignleft {
   >  float: left; margin: 0 .8em .8em 0; }
   > img.alignright {
   >  float: right; margin: 0 0 .8em .8em; }
   > .aligncenter {
   >  display: block; margin-left: auto; margin-right: auto; }
   > .alignleft {
   >  float: left; }
   > .alignright {
   >  float: right; }
   > a img {
   >  padding: 5px; border: 1px solid #ccc; }
   > form {
   >  padding: 0; margin: 0; }
   > /* Layout */
   >  #container { background: black; width: 980px; margin: 0 auto;}
   > #header {
   >  height: 123px; }
   > #header h1 {
   >  padding: 25px 0 0 53px; margin: 0; color: #faf6bb; font-family:
   > Garamond, Georgia, serif; font-size: 2em; }
   > #header h1 a,
   >  #header h1 a:hover { text-decoration: none; color: #faf6bb; }
   > #header .description {
   >  padding: 0 0 0 53px; color: #c46816; font-family: Garamond,
   > Georgia, serif; font-size: 1.3em; }
   > #page {
   >  padding: 0 53px; background: black; }
   > #pageinner {
   >  position: relative; margin: 13px 0 0 0; background: white; }
   > #navcontainer ul {
   >  background: #CC0000; padding: 0; margin: 0; list-style:
   > none; float: left; width: 100%; font-size: 1.0em; }
   > #subnavcontainer ul {
   > background: #bb0000;
   >  padding: 0; margin: 0; list-style: none; float: left;
   > width: 100%;
   > }
   > * html #navcontainer ul {
   >  background: green; font-family: Gothic; font-size:
   > 1.0em; }
   > #navcontainer ul li {
   >  display: inline; font-family: Gothic; font-size: 1.0em;}
   > #navcontainer ul li#first a,
   >  #navcontainer ul li#first a:hover { cursor: default;
   > background-image: none; text-decoration: none; font-family: Gothic; font-size:
   > 1.0em; }
   > #navcontainer ul li a {
   >  color: #faf6bb; margin: 5px 0 0 0; padding: 4px 14px
   > 8px 12px; text-decoration: none; background: url(images/headerBarLiBk.gif) 
   > right 3px no-repeat; float: left; font-family: Gothic; font-size: 1.0em; }
   > #navcontainer ul li a:hover {
   >  text-decoration: underline; font-family: Gothic;
   > font-size: 1.0em; }
   > /* Change font here for Navigation Menu */
   >  #navcontainer ul li.current_page_item
   > a, #navcontainer ul li.current_page_ancestor a { background: url(images/searchBarBk.
   > gif) repeat-x; color: black; padding: 4px 12px 8px 12px; margin-left: -2px;
   > font-family: Gothic; font-size: 1.0em;
   > }
   > #navcontainer ul li.current_page_item a:hover,
   >  #navcontainer ul li.current_page_ancestor
   > a:hover { text-decoration: none; font-family: Gothic; font-size: 1.0em; }
   > #navcontainer ul li a:hover {
   >  text-decoration: underline; font-family: Gothic;
   > font-size: 1.0em; }
   > #searchBar {
   >  /* color: black; padding: 4px 12px 8px 12px; margin-left: -2px;
   > font-family: Gothic; font-size: 1.0em;
   > background: #CC0000;
   >  padding: 0; margin: 0; list-style: none; float: left;
   > width: 100%; font-size: 1.0em;
   > – orig search bar———
   >  clear: left; background: url(images/searchBarBk.gif) 
   > repeat-x; text-align: right; font-family: Gothic; font-size: 1.0em; ———————–
   > padding: 0;
   >  margin: 0; font-size: 0.7em; font-family:Verdana; background: 
   > black; color: #000; font-family: Garamond, Georgia, serif; a { color: #3b6065;}
   > a:hover { color: #841700; }
   > */
   > // a:hover {color: white}
   >  // color: black; // a:link {hover: text-decoration:
   > underline} display: inline; clear: left; background: url(images/searchBarBk.
   > gif) repeat-x;
   > padding: 0 4px 2px 12px;
   >  // margin: 0px 0 0 0; font-family: Gothic; font-size:
   > 1.2em; color: black width: 100%; // font-weight: bold; a:link {color: black
   > text-decoration: none; }
   > }
   > #searchform {
   >  padding: 5px; }
   > #s {
   >  border: 1px solid #bbb; }
   > #searchsubmit {
   >  border: 1px solid #bbb; background: #fff url(images/buttonBk.
   > gif) repeat-x; }
   > h2.pagetitle {
   >  background: White; margin: 0; color: White; font-family: Garamond,
   > Georgia, serif; padding: 3px 3px 3px 10px; font-size: 1.9em;
   > }
   > #content {
   >  margin: 0 0 0 0px; padding: 0; font-size: 1.2em; }
   > #contentinner {
   >  padding: 10px; font-size: 0.9em; line-height: 1.5em; }
   > /* Post */
   >  .post h2.posttitle { padding: 0; margin: 0; float: left; font-size:
   > 1.2em; }
   > .post h2.posttitle a,
   >  .post h2.posttitle a:hover { text-decoration: none; 
   > color: black; }
   > /* make your own sticky post styling */
   >  .sticky { }
   > small.postmetadata {
   >  font-size: 0.85em; }
   > ul.postmetadata {
   >  padding: 0; margin: 0; list-style: none; font-size: 0.85em;}
   > ul li.tags {
   >  float: left; }
   > ul li.comments {
   >  text-align: right; }
   > div.divider {
   >  background: url(images/divider.gif) center center repeat-x; 
   > height: 47px; margin: 1em 0; }
   > div.navigation {
   >  text-align: center; font-family: Garamond, Georgia, serif;
   > padding: 0 0 2em 0; }
   > div.commentnavigation {
   >  padding: 0; }
   > #singlepost {
   >  background: url(images/commentBk.gif) center bottom repeat-x;
   > padding: 10px 10px 49px 10px; margin: 0; font-size: 0.9em; line-height: 1.5em;}
   > #commentwrapper {
   >  background: #dfd797 url(images/commentBottomBk.gif) center
   > bottom repeat-x; padding: 0 15px 49px 15px; }
   > #commentwrapper h2 {
   >  margin: 0; padding: 0.5em 0; }
   > /* Comment */
   >  h2.commentheading { font-size: 1.2em; color: #fefef6; font-family:
   > Garamond, Georgia, serif; }
   > ol.commentlist {
   >  padding: 0; margin: 0; list-style: none; font-family: Tahoma,‘
   > Trebuchet MS’, Verdana, Arial, sans-serif; color: #3a3a3a; }
   > ol.commentlist a {
   >  text-decoration: none; }
   > img.avatar {
   >  border: 3px solid #fefef6; margin: 0 0.5em; }
   > ol.commentlist li.commentind {
   >  padding: 0 0 2em 0; margin: 0; }
   > ol.commentlist li.depth-1 {
   >  border-bottom: 3px double #fefef6; padding: 0 
   > 0 1em 0; margin-bottom: 1em; }
   > ul.children {
   >  list-style: none; }
   > ol.commentlist ul.children li.commentind {
   >  padding: 1em 0 0 0; }
   > ol.commentlist li.commentind cite {
   >  font-style: normal; }
   > p.commentsedit {
   >  font-size: 0.9em; margin: 0 0 0 0.5em; }
   > .commentindheader {
   >  border-bottom: 1px dotted #fefef6; }
   > .commentindheader img.avatar {
   >  float: left; }
   > ol.commentlist li.legacyAlt .commentindheader {
   >  text-align: right; }
   > ol.commentlist li.legacyAlt .commentindheader img.avatar {
   >  float: right; }
   > ol.commentlist li.legacyAlt p.commentsedit {
   >  text-align: right; margin: 0 
   > 0.5em 0 0; }
   > /* Comment form */
   >  form#commentform input, form#commentform textarea { border:
   > 1px solid #bbb; }
   > input#author,
   >  input#email, input#url { width: 60%; }
   > textarea#comment {
   >  width: 90%; }
   > input#submit {
   >  border: 1px solid #bbb; background: #fff url(images/buttonBk.
   > gif) repeat-x; }
   > #footer {
   >  clear: both; background: black; height: 108px; margin: 0 53px; font-
   > family: Garamond, Georgia, serif; text-align: right; font-size: 1em; color:#
   > a66117; }
   > #footer p {
   >  margin: 0; padding: 0.9em; line-height: 1.5em; }
   > #footer a {
   >  color: #a66117; }
   > #footer a:hover {
   >  color: #cf7819; }
   > div#recaptcha_widget_div {
   >  float: right; }
   > /* WordPress required */
   >  .wp-caption { border: 1px solid #ddd; text-align:
   > center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; }
   > .wp-caption img {
   >  margin: 0; padding: 0; border: 0 none; }
   > .wp-caption-dd {
   >  font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin:
   > 0; }
   > h3.subpages {
   >  padding: 1em 0 0.5em 0; margin: 0; }
   > ul.subpages {
   >  padding: 0 0 0 1em; margin: 0 0 0 1em; list-style: square; }
   > /* Formatting */
   >  fieldset { border: 1px solid #ccc; padding: 0 1em; margin:
   > 0; }
   > legend {
   >  color: #999; font-size: 1.1em; font-weight: bold; }
   > hr {
   >  border: 0; color: #cfc887; background-color: #cfc887; }
   > pre, code {
   >  width: 100%; overflow: auto; font-size: 1em; }
   > .post table {
   >  width: 100%; border: 1px solid #ccc; border-top: 0; border-collapse:
   > collapse; }
   > .post table th,
   >  .post table td { border: 1px solid #ccc; border-bottom: 0;
   > padding: .3em .5em; }
   > .post table th {
   >  text-align: left; border-bottom: 2px solid #ccc; }
   > p.loggedinAs {
   >  margin: 0; padding: 0; }
   > a#cancel-comment-reply-link {
   >  display: block; margin-bottom: 1em; }
   > /* start subnav2 ———— */
   > #subnav2 ul {
   >  background: url(images/searchBarBk.gif) repeat-x; padding: 0;
   > margin: 0; list-style: none; float: left; width: 100%; font-size: 1.0em; }
   > #subnav2 container ul {
   > background: url(images/searchBarBk.gif) repeat-x;
   >  padding: 0; margin: 0; list-
   > style: none; float: left; width: 100%;
   > }
   > * html #subnav2 ul {
   >  // background: green; background: url(images/searchBarBk.
   > gif) repeat-x; font-family: Gothic; font-size: 1.0em; }
   > #subnav2 ul li {
   >  background: url(images/searchBarBk.gif) repeat-x; display:
   > inline; font-family: Gothic; font-size: 1.0em; }
   > #subnav2 ul li#first a,
   >  #subnav2 ul li#first a:hover { cursor: default; //
   > background-image: none; background: url(images/searchBarBk.gif) repeat-x; text-
   > decoration: none; font-family: Gothic; font-size: 1.0em; }
   > #subnav2 ul li a {
   >  color: #faf6bb; margin: 5px 0 0 0; padding: 4px 14px 8px
   > 12px; text-decoration: none; background: url(images/searchBarBk.gif) repeat-
   > x; float: left; font-family: Gothic; font-size: 1.0em; }
   > #subnav2 ul li a:hover {
   >  background: url(images/searchBarBk.gif) repeat-x;
   > text-decoration: underline; font-family: Gothic; font-size: 1.0em; }
   > /* Change font here for Navigation Menu */
   >  #subnav2 ul li.current_page_item
   > a, #subnav2 ul li.current_page_ancestor a { background: url(images/searchBarBk.
   > gif) repeat-x; color: black; padding: 4px 12px 8px 12px; margin-left: -2px;
   > font-family: Gothic; font-size: 1.0em;
   > }
   > #subnav2 ul li.current_page_item a:hover,
   >  #subnav2 ul li.current_page_ancestor
   > a:hover { background: url(images/searchBarBk.gif) repeat-x; text-decoration:
   > none; font-family: Gothic; font-size: 1.0em; }
   > #subnav2 ul li a:hover {
   >  background: url(images/searchBarBk.gif) repeat-x;
   > text-decoration: underline; font-family: Gothic; font-size: 1.0em; }
   > /* end subnav2 ———— */
 * Thanks again, Avanti Computer Northwood

The topic ‘CSS Problems’ is closed to new replies.

 * 0 replies
 * 1 participant
 * Last reply from: [avanti_seo](https://wordpress.org/support/users/avanti_seo/)
 * Last activity: [16 years, 10 months ago](https://wordpress.org/support/topic/css-problems-4/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics