Not sure why this happened. I was editing some HTML and CSS. Next thing I know the bg image for the first panel on the bottom rollover moved up. I wasn't messing with the code for the rollover.

Any ideas as to how can realign it?

Just FYI, unfortunately I can't test on IE since I'm on a Mac. I will have a PC laptop soon to test on. Can't get VM ware since I'm on a PPC Mac. This problem is seen both on Firefox and Safari.

  • I don't exactly get your question. How is it Supposed to look like, and which part exactly? Andy Zhang about 7 years ago
  • Sorry for the late response. I fixed it by simply adding a table around the rollover div. That brought it into alignment. I appreciate you taking the time in responding. Frank Juval about 7 years ago

2 answers

0
points

You've overriden the positioning with

#rotator .ui-tabs-selected a:link,
#rotator .ui-tabs-selected a:visited,
#rotator .ui-tabs-selected a:hover,
#rotator .ui-tabs-selected a:active {
/**** ADJUST BUTTON SIZE HERE */
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: top center;
    }

overrides this:

/**** NON-SELECTED TABS */
li.ui-tabs-nav-item a:link,
li.ui-tabs-nav-item a:visited {
    background: transparent url(../images/b_learn_more_4col_over.png) no-repeat;
/**** ADJUST BUTTON SIZE HERE */
    background-repeat: no-repeat;
    background-position: left 92px;
    }

so what exactly did you edit?

Answered about 7 years ago by Tony Crockford
  • I was editing content. Also, the initial code was done by another web developer. I took over the project, so the foundation was already in place. I did what I could to clean up some of the code. I was limited on time. Frank Juval about 7 years ago
Guffa 316
0
points

I'm not sure, perhaps because the HTML code is broken. (Even if that's not the reason for the background misalignment, you should fix it to make sure that it isn't.)

You have placed h1 elements inside the a elements. An inline element may not contain block elements. If you want a block element inside the link you have to use an element that is an inline element by default, and use CSS to make both the link and the element inside block elements.

By floting the links they are already made block elements, so replace the h1 elements inside them with span elements for example, and use display:block; on the span elements in the CSS.

Answered about 7 years ago by Guffa
  • Sorry for the late response. I appreciate you taking the time to respond. Thanks for the H1 tip as well. Frank Juval about 7 years ago