Blog Template Change
Sunday, February 12, 2006
1. This post is partly to make sure new posts show up correctly after the template changes I made today.
2. I also need several kinds of feedback.
a. Does anyone out there who knows CSS well know how to vertically center my blog title? While I can live with its height, it does annoy me that it is not vertically centered. On at least one browser, it is clipped at the top.3. For the curious, the image at the top left has an amusing story behind it. I was blogging late one night when my wife interrupted me to ask a question. When I get going good, I can sometimes be quite testy when interrupted. She left the room after the interruption and came back grinning awhile later with a drawing titled, "The Bitchy Blogger". I liked it so much I decided to scan it in and use it for my new masthead.
b.I already am aware that there is a stray "<\". I'm trying to track that down and wouldn't mind any helpful suggestions. Also, ifIf you find anyotherproblems, please leave a comment or email me.
c. How do you like the new design? Are there any improvements you'd make?
d. If you use any version of Internet Explorer, how does this look? I do not normally use Windows on the Internet and would like to know.
4. If you're on my blogroll, take a quick look to make sure I haven't lost you. There should be no changes to the blogroll today.
5. I have moved a few things and added a few others as follows.
a. I have moved several sets of links off the front page, but still available elsewhere from links in the sidebar. Here's a list with links: "News and Opinion", "Humor", "Other", and "Some Favorite Posts". Everything else that used to be available still is, but you may have to hunt for it.6. And no, I will not help you redo your template. This was not especially difficult, but it was very tedious and time-consuming. And I'm very pressed for time.
b. I have instituted new email and link policies. Nothing earth-shattering, but I've heard it's a good idea to make such things explicit, so now I finally have.
c. I will probably be updating my list of favorite posts soon. I'm open to suggestions.
-- CAV
7 comments:
WooHoo! Way to go with the new skin! But if I may ask, who da man at the top?
R-E,
That's as close to a picture of myself as you'll ever get to see on this blog.
Gus
In IE for WinXP, the sidebar overlays (and obscures) the text instead of forcing it to wrap. In Firefox 1.5 for Windows, I don't see any problems.
Gus,
For the CSS to center the blog title:
First, get the WebDeveloper extension for Firefox. If you haven't used it, you will be quite amazed by what it will allow you to learn about your site design.
By using WebDeveloper, you can edit the CSS and see real-time changes to your site (a "preview" really, since you would still need to change the code via the Blogger interface.) There are plenty of other things you can do, though...
Try using these codes in place of the codes you have:
h1{
margin:0px;
padding:0px
}
h2, h3, .side h4{
margin:0px;
padding:0px
}
#banner{
background: url(http://photos1.blogger.com/blogger/2931/619/320/gvh.jpg) no-repeat;
margin-top:25px;
color:#FFF;
background-color:#004080;
padding-left:0px;
font-size:large;
font-family:georgia, times, serif;
height:121px;
}
#banner a, #banner a:link{
color:#FFF;
background:transparent;
text-decoration:none;
font-style:italic;
text-transform:lowercase;
font-weight:normal;
padding-top:35px;
padding-bottom:40px;
padding-right:10px;
text-align: center;
display:block
}
---
You can place both the background image and the background color in the style codes for the #banner division; and, by setting the height of that division to 121px, you won't be screwing up your placement of the title text or the height of the banner as you tweak the padding declarations for the title link.
I've tried these codes in Firefox, but not in IE, and they seem to work fine.
Curtis,
Wow! That fixed things. I really appreciate the help.
Andrew,
Thanks for the heads-up. I looked at the file on my wife's laptop, with WinXP and "state of the art" IE 6 on it and saw the same thing. Bleh!
I won't have time to figure out whatever IE hack my old template had that made it work tonight. One possibility is that I had one big CSS "container" holding all the others, but I don't see why this would be a big deal.
Anything else from the peanut gallery would be greatly appreciated, though probably not acted upon until late tomorrow.
Gus
Gus,
I've just checked your site in IE 6.0 for windows and discovered a potentially huge problem. Highlighting text (in order to copy or quote) is virtually impossible. I had the exact same problem once, discussed here, and only learned of it when a semi-regular visitor commented on his blog that "apparently it's impossible to copy text" from my site after trying to cite one of my posts.
The problem is in IE's non-compliance with web standards. When you use the "absolute" positioning attribute for your main text area, the IE browser thinks that text begins wherever the left and top attributes are set. That means, if I begin to highlight text lower down on the page, all the text from the "left:0" position down will be highlighted!
Unfortunately, after finding a solution for IE, I ended up messing up the appearance in Firefox. So I had to make several major changes in the way particular divisions were positioned; and, I don't remember all the changes.
In IE, an absolutely positioned element -- your content division, for instance -- sometimes needs to be placed within another division which is positioned. You could try adding "position:relative" without a left or top attribute to the "body" CSS (they are not needed for this hack), since your main content division, like everything, is within the body. I tried it for Firefox, and unfortunately it screwed up the appearance slightly in Firefox. (I could not try it for IE for your site, because I don't have a similar extension for IE; but, I suspect it would solve the highlighting problem in IE.) This might also be why your removal of the previous wrapper division has messed things up a bit; instead of positioning the body, you could position the wrapper division if you added it back in.
You could also try using a "float:left" declaration instead of "position:absolute" for the content division. This left the site looking fine in Firefox, but I don't know if it would solve the highlighting problem in IE.
The central potential conundrum with the "position" declarations is that those declarations cause the divisions they style to be interpreted outside the natural, uh, "flow" of the page. This may be part of the reason why your text is overlapping with the right sidebar, since both divisions are positioned and so won't flow around each other or recognize the boundaries of each other. I'm not very familiar with the way you have set up the fluid layout. I wonder, did you mean "clear:right" for the content division rather than "clear:left"? Maybe the aforementioned non-compliance issue would also help to solve the overlap of these two divisions in IE.
Oh, I see that David has given a potential solution! I had wondered about setting a width for the content division -- but does it work for the highlighting problem in IE?
David,
Thanks! I slipped in both bits of code and it solved the worse problem, which was the one Andrew pointed out (failure to scroll/sidebar over text). Oddly, on my wife's 'puter, the links landed on top of the banner, but at least people can still read my blog.
Curtis,
The hightlighting problem shows up and I think it will be tough to tackle. I'll have to do, I think, exactly what you suggest and what I was hoping to avoid.
What a mess! Barring some more opportune kibbitzing, I'm not sure when I'm going to get this all straightened out.
But heck, during an hour or so of doing somethng else entirely, I've made quite a bit of headway! I do appreciate all the help, guys!
Gus
Post a Comment