News wrote:
first here is my CSS file
http://www.wyght.com/warren/Warren/TMBanner.css
here is the url
http://www.wyght.com/warren/tmbanner.html
Please get your XHTML to validate before posting! You have an unclosed
link element, and two script elements in illegal positions.
I'm afraid your code is rather a dog's dinner, particularly the CSS.
Just try changing the font size in your browser, and you'll see what I
mean...
Here's what you need to do to overhaul your code, and in the course of
things fix the problems that you knew about, the problems that you
probably knew about but hadn't yet dealt with, and the problems that
you perhaps didn't know were there:
1. Set your body margins to zero.
2. Delete the stray character between "</script>" and "<body>". If
you leave it in and follow the next few steps, you'll soon see why this
is important!
3. Wrap everything that you currently have in the body in a new div
with an id of (say) "HeaderBlock".
4. Remove the rules for font-family, font-size, font-style,
text-align, and color from all of your elements, and put them in as a
rules for "HeaderBlock". Note that "ITC Avant Garde Gothic" should be
in quotes. Also, it's not sensible to only specify a single font name,
(Google "web-safe fonts"), so add a couple of alternatives, and make
sure that you end the list with a generic catch-all such as "serif"
(except make sure you don't use quote marks for it!).
5. Add a height in pixels for "BannerPurple", and add a height for
"BannerGold".
6. Wrap menu1 through menu10 with a <ul> element, and change the
individual divs into li elements. In your stylesheet, set the margin
and padding for <ul> to zero; you need to set both to get the two
browsers doing the same thing.
7. Get rid of all the rules for classes .tbPos and .space, and those
for classes menu1 through menu10.
8. Remove the absolute positioning for all elements, as well as all
remaining rules for "left", "top", "bottom", and "width". Remove all
the height rules (except for the two mentioned in item 5 above). Set
the margin for "BannerPurple" and "BannerGold" to "0% 2.5%".
9. Add the following style rules for <li>: "float: left", "width:
10%", "list-style-type: none". Consider adding appropriate left and
right padding and margins for the element.
10. Move "SomeSite" to a new div within "BannerGreen"; let's call it
"BannerText", so that the text is in a sibling div to the rest of
"BannerGreen".
11. Set the font-size for <li> at 125%, for "BannerText" at 250%, and
for "BannerGold" at "0px". The last of these avoids height problems
with the gold bar in IE.
12. Set the background-color for <li> and "HeaderBlock" to #004401.
13. Remove the redundant commented-out table from your XHTML source
code.
If you do the above your stylesheet will go from 196 to 43 lines of
code, your design will be flexible, it'll look identical* in IE and
Firefox, and it should be a darned sight easier to maintain than it is
at present.
You might also want to finesse things further by using conditional
commenting, so that Firefox and Opera and so on can use ":hover" for
the <li> boxes, but that the external JavaScript file is downloaded for
IE 6 and under; you would then avoid the need for browser-sniffing and
could pare your script down accordingly.
Finally, if you're not already using them, I'd strongly recommend the
Web Developer extension for Firefox, and the Internet Explorer
Developer Toolbar. You'll be able to use these to make experimental
changes on the fly with your CSS, as well as being able to understand
better some of the things that the two browsers do behind the scenes.
Hope that the above was of use. No refunds offered for any errors,
omissions, or howlers!
* Usual disclaimers apply.
--
AGw.
