Michael Stevens wrote:
> www.bctarizona.com/test/index_new2.php
> So, I started dicking with it and finally gave up trying to figure
> out all the tables. I'm trying to start from scratch but I've run
> into a few problems.
Go ahead. We'll help you sort them out, one by one :-)
> 1. The top menu running vertical under the header logo does not reach
> all the way to the edges of the page DIV. I tried using a UL with
> the background and could not get it working to the whole width. Then
> I started playing with the padding & margins and got close but
> decided on another DIV called TOPMENU and gave it the required
> background, which doesn't show up.
- The div#topmenu doesn't expand to contain floats, and the anchors are
floated.
- The margins are pushing the div#topmenu away from the edges.
#topmenu {
background: #b51b37 url(images/topbarback.jpg) repeat-x bottom left;
margin: 0 /* default */;
float: left /* make it expand to contain floats */;
width: 100% /* full width */;
}
> 2. The top menu's mouseover does not work.
The background-image is covering the background-color, so you can't see
any hover-effect. You'll have to change, or modify, the background-image
too, or set the background-color as the only background.
#menu a:hover {background: #b51b37;}
...will do the latter.
> 3. The top menu is actually placed 2px underneath the logo, thus the
> -2px margin in the CSS. Why the extra space?
The header-image is an inline-element by default, placed on the baseline
with room/space for descenders. The 2px gap is what you get at a certain
font-size, and it will change when font-resizing is applied.
Add...
#header img {display: block;}
...and the space will be gone.
You can then delete the 'margin-top: -2px;' on #topmenu a, #topmenu
a:link, #topmenu a:visited.
> I took the original CSS file and have been changing and adding
> properties as I run into them on the page so there's a lot of stuff
> in there that isn't used yet. But, the XHTML validates (minus the
> empty link titles & href="#" tags).
The use of 'target="_blank"' is not valid Strict.
> Another question is can a PHP file be valid XHTML or should I go with
> HTML 4 strict?
Only the end-result counts. Ask the validator...
<http://validator.w3.org/check?uri=http://www.bctarizona.com/test/index_new2.php>
...but remember that XHTML has to be 100% perfect if you ever intend to
serve it properly...
<http://www.gunlaug.no/contents/wd_1_06_03.html>
> I'm pretty new to the hardcore CSS use and I'm sure there are some
> dumb mistakes. Let me know what you find...
I see that you are using 'pixels' for font-sizing. No problem for me but
you can not rely on font-size being respected in browsers. You should
test across browser-land and make sure the layout doesn't break when
some serious amounts of font-resizing is applied.
The page-container doesn't expand in the good browsers - because you
haven't "told them to". That's normal response when 'floats' are used,
but I guess you want a complete background down the whole page.
Adding either...
#page {overflow: hidden;}
...or...
#page {display: table;}
...will make them "get the idea" and make #page expand to contain
everything inside.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
