Problem with CSS on my site

My name is David Bodenheimer and I work for the Riviera Beach Police Department, in Palm Beach County Florida.
I am currently helping design the Intranet site for our Department.

I have a piece of css code (site.css See BELOW), that I am using to make my menus.

I have just one small issue and was hoping someone could resolve it for me. When I click the Home button it reloads for a second in a vertical row and it just doesn’t look fluid. This doesn’t happen when I click any of the buttons besides the home button.

I have attached a photo of how it looks before clicking home and a photo of what it looks like for about a second after hitting home. The css code is below.

/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}
a img {
border: none;
}

a.preview {
border: none;
}

p
{
    margin-bottom: 1px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 960px;
    background-color: #fff;
    margin: 10px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
    top: 0px;
    left: 0px;

}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 0px;
    margin: 0px 0px 0px 0px;
    min-height: 280px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#465c71;
}



/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
    height: 0px;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

div.Menu
{
    padding: 0px 0px 0px 0px;
}

div.Menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 0px;
}

div.Menu ul li a, div.Menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 1px 1px;
    text-decoration: none;
    white-space: nowrap;
}

div.Menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #ffff40;
    text-decoration: none;
}

div.Menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

.MenuButton 
{
background: #465c71;
color: #FFFFFF;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
width: 140px;
font-size: 10pt;
padding: 2px 0;
text-align: center;
display: block;

border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
-moz-border-top-left-radius: 10px 10px;
-moz-border-top-right-radius: 10px 10px;
-webkit-border-top-left-radius: 10px 10px;
-webkit-border-top-right-radius: 10px 10px;
background: #3F8EB5; /* old browsers */
background: -moz-linear-gradient(top, #7b9ccf 0%, #4b6c9f 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b9ccf), color-stop(100%,#4b6c9f)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9ccf', endColorstr='#4b6c9f',GradientType=0 ); /* ie */
}
tr {
	font-family: Arial;
	font-size: 10pt;
}

td {
	font-family: Arial;
	font-size: 10pt;
}
      .logo
        {
            width: 372px;
            height: 90px;
        }
ListViewRow
{
    background-color:  #FFFFFF;
}
ListViewRowA
{
    background-color: #CCCCFF;
}

It is not a major flaw, but something that makes the site look unprofessional and I am desperately looking to fix it.

Any help would be greatly appreciated.

Hi David. Welcome to SitePoint. :slight_smile:

I don’t think we can help you just with the CSS. Is it possible to post a live link? It may be how you are linking to the style sheet, or how your HTML is configured, or something else. Unless someone has seen this sort of thing before and can advise in a jiff.

If a live site is not available, perhaps a test page posted somewhere else?

From the attachment it looks like the styles haven’t been applied to the menu. Does the menu eventually click back into position or does it stay like that?

If you are importing the styles try using the link tag instead as import is a bit slower.

Make sure your images have the height and width attributes in the html as that can sometimes upset a display if they are missing.

If it’s only happening on the main page and other pages are fine then you will need to debug by removing other elements on the page one at a time until the problem disappears and once you know what’s causing the problem you can then look at solutions.

Also validate the html and css in case there is a stray bracket or typo on that page interfering with things.

As Ralph said we will need a demo of the problem to debug properly :slight_smile:

To go with the crowd, I’d have to see the markup that goes with that CSS at the very least, and a live site would be easier to identify issues with. As I often say, CSS is only as good as the HTML it’s applied to, and CSS without HTML is effectively gibberish.

THOUGH, looking at your CSS I do see a few oddities – there is no such tag as listViewRow for example – is that supposed to be a class or ID? You’re not declaring line-heights which could result in broken layouts cross-browser and you’re using pt, which is a bit outdated a font technique. (though I’d sooner see pt than px!). You’re wasting a lot of time setting up your heading tags, again without line-heights which could lead to all sorts of layout issues, and you seem to be using a #header div, which in all likelyhood is an unnecessary wrapper.

In fact, in reading through your CSS I believe you may have overcomplicated something simple layout-wise; but again I’d have to see the HTML to say for sure.