It’s technically legitimate. However, there are many of these all spread throughout the CSS. It’s a mess. The same can be achieved with fewer of them and/or concentrated in one area. I would hate to have to debug this this.
As far as the HTML, this is a mess:
<li><a href="2colfixedtest_4.htm">Example 1<span><img src="images/screen2col1.gif" alt="2 column layout" width="150" height="85" /></span></a></li>
<li><a href="2colfixed_5.htm">Example 2<span><img src="images/screen2col2.gif" alt="2 col layout with space between elements" width="150" height="85" /></span></a></li>
Yeah, I know the author is using flyout navigation menus and that’s a problem in and of itself. But it still could be reduced to something like this:
<li><a href="2colfixedtest_4.htm">Example 1<span><img src="images/screen2col1.gif" alt="2 column layout" class="alpha" /></span></a></li>
<li><a href="2colfixed_5.htm">Example 2<span><img src="images/screen2col2.gif" alt="2 col layout with space between elements" class="alpha" /></span></a></li>
… or the flyout eliminated entirely (they really are Capt. Dunsel code) to this:
Something similar may be achieved by using this —> Pure CSS Popups The popup appears outside of the main content in an area of the left nav designed for it. Again, no hacks. Here is is with images —> Pure CSS Popups 2
Wow, you’re really picky. You call that “cleaning up” a “mess”? You’ve just replaced 22 characters with 13 characters. Which now need additional CSS styling.
Perhaps you have a very specific way of organising your code, but I’m with Mangetout in that I really don’t see a mess in that page. There may be a few optimisations that could be employed, but that’s the worst you can say about it.
Perhaps if you took my post in its entirety you would see I took a progressive approach at code clean up. I an no fan <span> tags if a simpler process can be used. The last three links I offered expressed a simpler code design while achieving the same visual representation.
But it was, essentially, the same trick with the same code. All you’ve really done is moved the image dimension information to the CSS, which may or may not be a good idea, depending on if the images are the same size each time.
As Eric Meyer is quite well known for his CSS tips, the idea was probably originally copied from his site anyway.
Anyhoo, my point still stands: your claim that the code was “messy” is, in my opinion, a great exaggeration. At worst it’s not optimised.
After spending a couple of evenings building my own page template from scratch and managing to get it working in IE and Firefox, I found that converting it to a template for the CMS was too difficult (or rather, it still broke when I tried to combine it with the necessary parts of the CMS template).
The negative margins thing was proving very difficult to get working consistently across all browsers and clearing floats on images within the content was breaking up the page in IE.
In the end, I did it the other way - I took an existing template that worked with the CMS, then modified it to my requirements.
Anyway, this is a test page of the new layout and it works in Firefox, IE6 and Safari (I don’t have IE7 to test it).
I’m viewing your test page in Opera and IE7. IE7 is adding about a cm deeper of extra white. The bottom centre logo stays the same relative point above the bottom of the box in both browsers. I’ve got no idea about web page design, so I can’t use the correct terms :smack:
Interesting - I think IE6 does the same - some sort of default padding or margins, I think. getting it to be identical in IE and any other browser is damn near impossible (without doing it in Flash or something). As long as it’s not actually broken in IE (like it was before- no two blocks of text or images could be alongside each other on the page), I’m going to settle for that
That’s probably the box model problem, where IE sets a width of a div, and padding doesn’t change its size (in my opinion, a logical way to behave). But the correct way it is supposed to be, according to proper CSS specs, is the padding adds to the width of the div, so a 200px div with 10px padding becomes 220px wide.
It’s very annoying, as it messes up things like “100%” widths when you also add padding onto that, but those are the (stupid) rules, so that’s what you’ve gotta deal with.
Thanks for that. I don’t think I can use any of those templates exactly as they are, but there’s certainly some nice stuff in there I will be thinking of using piecemeal.
One criticism of YUI though… a lot of their CSS code isn’t very human-friendly - lacking whitespace, making it very hard to read.
Mangetou, I feel your pain. I stopped my pain by rationalizing that my customers/website-viewers would have the entire range of browsers from IE 5 on up and monitors from VGA on up.
Just to add to your pain, don’t forget to test your pages in Lynx which is how the search engines “see” them.