PDA

View Full Version : CSS Navbar Anomalies



enderwiggin7
Sep 21st, 2009, 03:03 PM
I was finally able to take the time and set up a test site and implement a CSS bar. The site is bebetterdomore.atspace.com (http://bebetterdomore.atspace.com).

A significant error that I am getting with the new navbar is an unfortunate tendency to jerk the screen when hovering over the "Help" button. Also, the submenu disappears sometimes when you bring your cursor down from the main menu, and this must be repeated several times before it will stay up long enough to actually click something. Does anyone have any idea what might be causing this? Also, does everything else look right to you? I'm getting an error in every browser that I test, but it's a different error in each one. In several, including Internet Explorer 7.0, a white space appears between the first and second levels of the navbar. This is frustrating the heck out of me! :mad:

As soon as this is worked out, I'll be implementing the bar into all of my pages and posting to our main site.

Thanks for any help that you can provide…

[edit: made the URL clicky]

abduraooft
Sep 22nd, 2009, 09:20 AM
You need to make your markup valid, before going to check cross browser issues. See the errors at http://validator.w3.org/check?uri=http%3A%2F%2Fbebetterdomore.atspace.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

First of all, you need a valid DOCTYPE (http://www.alistapart.com/articles/doctype/) at the top of your document. I'd recommend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

enderwiggin7
Sep 23rd, 2009, 06:29 PM
Darn, i'm sure I fixed all of that last month! Oh well, I've gone thru and re-added the doctype and fixed as many errors as I understand. Any ideas on the last 21? (I started at 84, so I did pretty well…)

Scriptet
Sep 23rd, 2009, 08:18 PM
The errors pretty much explain themself.

- Attribute "ALIGN" is not a valid attribute. Did you mean "align"?

The "align" attribute within HTML has been depreceated, because it's effects can be re-created via the use of CSS (e.g floating elements, or positoning them), therefore there is no use for the align attribute so there will be no support for it in future browsers.

- Same goes for the "border" one, you can just use border:0; or border:none; inside your CSS.

- Same goes for "type" on your ul, use list-style-type:square; inside your CSS instead.

- Same goes for bgcolour use background:color goes here; inside your CSS instead.

- Same goes for color font and font-face, they can all be done with CSS.

Most of these errors are to do with using depreceated attribtues, remember the aim is to keep all things presentational inside the CSS stylesheet, and only have the markup in the HTML. You are using a lot of tags inside your HTML just for presentational purposes.

- Attribute "LANGUAGE" is not a valid attribute. Did you mean "language"?

Replace the word language with type

And when it is saying element "x" is not allowed here, it's because you can not put block elements (e.g div ul h1 h2..) inside inline elements (e.g span, li), but of course you can put blocks inside blocks and inlines inside blocks.

enderwiggin7
Sep 28th, 2009, 04:04 PM
Annoyed with the table-based, error-ridden site that I've been left with, I've just gone ahead and begun to rewrite the entire site with CSS. Right now, I'm dealing with two errors:

1. The navbar is not 760px wide as the code requires, but is longer, shifting the last two parts down to the next line and cutting them off.

2. The orange "Be Better Do More" box in the body does not have a 15px margin or a left float, both in violation of the CSS rules that I set up. Any ideas on why this is?

The link is the same as before: bebetterdomore.atspace.com (http://bebetterdomore.atspace.com).

Thank you for your continuing help – I've learned a ton from this experience.

SB65
Sep 28th, 2009, 04:19 PM
I'm not seeing your navbar problem in FF3 or IE7 at any resolution - what are you viewing in?

Assuming that this is the css you want to apply to the orange square...


div_body bbdm-square{
float: left;
margin-top: auto;
margin-right: 15px;
margin-bottom: auto;
margin-left: auto;
}

then you aren't referencing it in your html, that I can see. First off, there's an error in this css, you need to set this as an id:


#bbdm-square{
float: left;
margin-top: auto;
margin-right: 15px;
margin-bottom: auto;
margin-left: auto;
}

You shouldn't need to include the div reference at the start (div_body can't be right anyway). Then your html needs to reference the id:


<div class="div_body" id="body">
<img id="bbdm-square" src="index_bbdmsquare.gif" alt="bebetterdomore square" width="100" height="100" align="left" longdesc="index_bbdmsquare.gif" /> <h1>What‘s the CLARKE difference?</h1>
<p><em>“Be Better, Do More....

enderwiggin7
Sep 28th, 2009, 04:30 PM
SB65,

Thank you for your help!

I'm viewing the site in Firefox for Mac. I was mistaken in the error that I gave you though - it's not that it is flowing over to the next line anymore (I fixed that by shrinking the text size), but rather that it is too short, not reaching all the way to the right to line up with my header image. (The navbar should be exactly 760px wide.)

The code that you gave me fixed the orange box issue entirely. Thanks!

SB65
Sep 28th, 2009, 04:43 PM
Ok that makes a bit more sense. The navbar is actually 760px wide, but it doesn't show up as such for two reasons. One, there's no background colour defined for the navbar, and two, all the elements in it are floated and hence the navbar doesn't extend to the bottom of the floated elements, without something to clear those floats.

If you make your css:


.div_navbar {
background-color:blue;
margin:auto;
overflow:auto;
text-align:center;
vertical-align:middle;
width:760px;
}

you'll see what I mean. The blue is just to make it show up, and the overflow:auto clears the floated elements.

If you do this you get a big ugly gap underneath the navbar. Solve this by deleting the two line-breaks before <div class="div_body" id="body"> . It's better to use margins and padding rather than <br/>.

enderwiggin7
Sep 28th, 2009, 05:44 PM
Hmm, that had some unusual effects. Where are the break tags that you referred to? I wasn't able to find them. I changed the code that you suggested, but as you can see, something didn't quite go right. Did I miss something?

Also, the "Customer Survey" button dropped down a row for no good reason. I'm not really sure how that happened.

SB65
Sep 28th, 2009, 06:21 PM
Hmm, no dropdown on the menu. Change of plan then, make your navbar:


.div_navbar {
background-color:#FF6600;
margin:auto;
height:29px;
text-align:center;
vertical-align:middle;
width:760px;
}

That will take care of the navbar in a different way.

The two <br/> tags are on line 68 and 69 of your html. They still need deleting even with this approach.

Nothing in the last changes should have changed the linksbar. It actually looks OK in IE but not in FF (and that's not a good sign...). I'd suggest adding the following to your css:



#linksbar img{float:left}

This will allow the two images to float next to each other on the same line.

Then add the following to your linksbar:


.div_linksbar {
margin:30px auto 0;
overflow:auto;
text-align:center;
width:561px;
}

Here the overflow:auto is clearing the floats as before, and the reduced width allows the div to center properly. 561px comes from the sum of the width of the two images. That should then be Ok in IE7 and IE6 as well

enderwiggin7
Sep 28th, 2009, 06:48 PM
Okay: on the happy side, my navbar looks and works perfectly. Thank you! On the not-so happy side, my links bar is wonky. I'm sorry that I'm a little slow with this –*I just learned CSS (self taught) this month.

SB65
Sep 28th, 2009, 07:12 PM
You should have:


#linksbar img{float:left}

not


#linksbar {float:left}

enderwiggin7
Sep 28th, 2009, 07:17 PM
Perfect! Thank you for all of your help.