On 8/7/05, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> Good morning, everyone! Hope everyone else got some well-deserved shut-eye.
>
> With caffeine and pretzels (breakfast of champions) in hand, replies are in
> order to Roger, Kelly, and Ingo:
> I'm definitely aware that re-factoring is severely needed. My main goal was
> to bludgeon everything into place first, and then sort out the duplications,
> etc. However, I am curious... you say there are some conflicting
> instruction in there. Can you give me an example, so that I have a better
> idea of what to examine? These are by far the most specific and detailed
> styles I have ever written, to date.
I sort of meant two things.
1. Conflicting instructions: combining display: inline; and float:
left; - these are mutually exclusive. I believe float takes priority
and all floats are block level so it ignores the display: inline.
2. Using general selectors for very specific styling. For example,
your css contains this bit of code
--------------
form {
display: block;
margin-bottom: 3em;
margin-left: 4%;
margin-right: 4%;
width: 12em;
}
-------------
Either your site will only ever have one of these, or some of them may
look really odd. I try to avoid specifying widths on anything except
main page containers. Setting them elsewhere makes maintenance much
more difficult.
>
> >>Third, it looks like you are creating complete separate stylesheets for
> >>each browser. This isn't necessary, and will come back to bite you in the
> >>end.
>
> Yeah, it looks pretty ooky right now. What's going on is this: I normally
> use two style sheets - one for IE, one for everything else.
I too tend to have a stylesheet that is linked in with those handy ie
conditional comments. However only the overrides go in that file.
I'm currently reading 'The Pragmatic Programmer' and one of my
favorite principles from the book is "Don't Repeat Yourself" Copy and
Paste is evil :-) Anytime you write the same bit of code more than
once, you will loose time later trying to figure out why something
isn't working when all it is is that you forgot to change one of the
copies.
> >>Second, change #header from position: absolute; to position: relative.
>
> Got it. Did it, and was quite surprised by how easy it was to correct the
> changes in display. However, the h1.head and #header p, I believe, are
> still position: absolute. Do they also need to be changed to position:
> relative? Relative positioning is not something I have ever really grasped,
> so any quick and dirty lessons about it would be fabu.
Position: static; - normal place on the page, takes up space.
Position: relative - normal place on the page, takes up space, can be
offset by setting top/left, provides positioning context for
positioned child elements.
Position: absolute; - positioned within its context, if no parent is
absolute or relative, positioned relative to the top/left of the
document.
Position: fixed: positioned relative to the _window_, not the document.
>>Third, don't set height on elements with text in them if you can at all
> >>avoid it. min-height is what you really want in most cases. This is one
> >>place you have to work around in ie. This is important because if the
> >>user has a larger font-size set than you do, the text will overflow into
> >>the next horizontal slice. In your case that means that the navigation
> >>beomes unreadable because it is white on white.
>
> Would it work to set the background area in ems, by any chance? I've been
> wondering about this because it would also effect the "events" and "news"
> headers on the front page.
You could, but that doesn't really solve the problem. If the content
wraps to more lines than you planned for, it will still overflow. Its
better to set the background color of the thing and let it grow or
shrink as necessary based on the user's settings.
> >>Fourth, images are content too. I would put the logo and expo images
> >>inside their respective a tags and use alt text to describe what they
> >>communicate. You are correct that decorative images belong in the css,
> >>but some are content and belong in the markup.
> Actually, (and I know this is going to sound weird) originally I had the
> expo graphic written in exactly that way. When I tried running all the code
> through HTML Tidy and the validators, it told me that the alt tag did not
> exist.
I don't know what was going on here, but I know that <img src="..."
alt="some text here /> will validate just fine. BTW technically it is
an alt _attribute_, but I'm sure you already knew that.
> >>I will try to give more specific advice tomorrow,
Actually I did one better (I hope). I'm sending via off-list email, a
rewrite of the home page that addresses most of the things we
discussed. Hopefully it will be a good learning tool.
--
Roger
Roger Roelofs
Know what you value.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
