aerintwin
Apr 20 2009, 10:42 AM
This is an issue I have on my webpage, the blog section, which I publish to my custom domain from blogger.
The site is
http://www.mysynonym.com/blog/index.html The problem is that any links I include in my blog post are non-clickable in any browser other than IE.
I don't know what the problem is, so I can't attempt to correct it.
If you view a post through the archives, the links will work properly but only in the archives.
On the main page, the links won't work, including the comments links.
The links outside of what's published by blogger work fine in Firefox, so anything on the sidebar or menus...
Everything contained within the blog post is non-working.
I've asked for help at the google group for blogger aid, but can't seem to get a response to save my life.
If anyone even has a clue as to where I should look... or what might be causing this, I'd really appreciate it.
Darin McGrew
Apr 20 2009, 01:14 PM
I recommend that you start by fixing the
markup errors and
CSS errors reported by the online tools. Some of the markup errors involve structural problems related to your links.
aerintwin
Apr 20 2009, 02:05 PM
QUOTE(Darin McGrew @ Apr 20 2009, 01:14 PM)

I recommend that you start by fixing the
markup errors and
CSS errors reported by the online tools. Some of the markup errors involve structural problems related to your links.
Well, this was a pre-written template that I brought in to use....
If it's poorly written, I don't know where.
I've made no large adjustments, that I can think of...
I'm not sure where the mark-up errors are...
I'll have to find the site where you can check your code, and try to fix it.
I haven't made many changes up til now because I was worried it would all stop working and as it is, everything works exactly as I wanted except for these links.
Even my side-bar and menu links work...
So there's no chance that it's the added blogger code alone that might be causing the links to fail?
I appreciate the help, and I'll look into trying to fix the mark-up errors in the meantime. If I screw it up too badly, I can always revert back to the original copy of my code.
pandy
Apr 20 2009, 02:15 PM
QUOTE(aerintwin @ Apr 20 2009, 09:05 PM)

I'll have to find the site where you can check your code, and try to fix it.
There are links in Darin's post.
aerintwin
Apr 20 2009, 02:28 PM
Oh, wow, I totally overlooked those. I read it, but totally just missed it.
Well there we go then.... thanks for pointing that out.
That'll save a bit of time.

My bad, hahaha
pandy
Apr 20 2009, 02:36 PM
Do you have a lot of positioning going on there? That's what I usually suspect. If another box overlaps the links, even if its content doesn't, some browsers won't let you click the links, you can't focus them.
And yes, the links here could stand out more. I often miss them myself.
aerintwin
Apr 20 2009, 02:51 PM
There is some positioning but I don't think there's a lot going on.
There's the right side-bar where the outside links are (the links that ARE working) but this seems to be the first comment to make me think..."huh" because if you scroll all the way down to the very last post, the links work fine. But that's only on the very bottom.
So perhaps there is something there... What could I try to see if it's a positioning conflict?
aerintwin
Apr 20 2009, 02:57 PM
I'd also like to emphasize that the only links affected are those contained within the blog post that are brought in through blogger. And those are brought in via FTP, written and controlled on their site and then republished through FTP to my custom domain rather than to their hosted blogspot location.
I simply don't know how their coding for their content management works...so I can't understand it to see if there are any errors or conflicts. However, the one large alteration I made to the template was to insert this blogger code, so perhaps there's a conflict with that??
Darin McGrew
Apr 20 2009, 03:27 PM
QUOTE
Oh, wow, I totally overlooked those. I read it, but totally just missed it.
Sigh. And here I thought I was making my answer more readable by using the links like that.
QUOTE
Do you have a lot of positioning going on there?
That's a good point. The problem isn't limited to the links. I can't select text either.
pandy
Apr 20 2009, 05:03 PM
QUOTE(aerintwin @ Apr 20 2009, 09:51 PM)

So perhaps there is something there... What could I try to see if it's a positioning conflict?
Give the boxes you suspect a background color so you can see where they are.
QUOTE(Darin McGrew @ Apr 20 2009, 10:27 PM)

QUOTE
Oh, wow, I totally overlooked those. I read it, but totally just missed it.
Sigh. And here I thought I was making my answer more readable by using the links like that.
It wouldn't hurt if the links had a contrasting color in all their states... I often miss when people link to the problem page in the way you did. The :link color isn't all that contasty either.
aerintwin
Apr 21 2009, 01:30 PM
Wow, yeah... there's a high chance it's a positioning thing...
I changed the BG color of just one of the boxes and it's showing a section that's everything above the nav bar, excluding my right menu box and the header, and the area drops down to cover every post except the last one.
This is the piece of code:
#content {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
It's a very awkward shaped box... something like a giant T
Any idea how I can change the size or... figure out why it's covering the posts? Because if I change the size... will that affect the area to where blogger publishes the content of the blog?
aerintwin
Apr 21 2009, 01:42 PM
Also, when trying to correct my markup errors... it seems there's a lot of coding in my source code that's hidden to me when I try to edit the template through blogger. Is there a reason it would be hidden to me? Or is it possibly something that blogger adds in itself that isn't part of the template? I'm not sure if you'd know this answer to this if it's a blogger issue..
pandy
Apr 21 2009, 02:20 PM
Yeah, I tried and your whole page turned yellow.
Is there a reason it's 'position: relative'? I removed that and so no difference. Other than the links work and the text can be copied.
pandy
Apr 21 2009, 02:26 PM
Woah! I thought it was odd how what looks like a wrapper element could position itself on top of its content. But you don't have one #content - you have eight! An id is supposed to be unique to a page. You should use a class for that.
That validation thingie ain't bad, you know.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yesCODE
Line 917, character 10:
<div id="content">
^Error: ID content already defined
and six times more.
aerintwin
Apr 21 2009, 04:45 PM
I don't know about how important it is for the position being relative. That's just how the template was written... If it doesn't affect anything negatively, I can change it easily.
I did notice that in the validation there's several of <div id="content"> as well, but like I mentioned above... for some reason this is code that's hidden to me.
Because as far as the template goes... what I see in Blogger's edit template field, and what I initially put in there... only has one content tag, rather than all those extras.
aerintwin
Apr 21 2009, 04:48 PM
If it helps any...
This is the only code I can see or edit through blogger (and also, the only thing I can see here myself is there might be a few too many </div> tags):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">
<head>
<title><$BlogPageTitle$></title>
<!-- Meta Information -->
<$BlogMetaData$>
<style type="text/css">
/**************************************************************
All page content except for footer
**************************************************************/
#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
#content {
height: auto !important;
height: 100%;
min-height: 100%;
}
/**************************************************************
Topbar with newsletter form and theme change buttons
**************************************************************/
#topbar {
float: left;
width: 100%;
font-size: 0.9em;
text-transform: uppercase;
color: #CFD9DB;
background: #FFF url(http://mysynonym.com/images/bg/headertop.gif) no-repeat bottom left;
}
/**************************************************************
Top menu and logo
**************************************************************/
#header {
clear: both;
position: relative;
height: 5em;
margin: 0 auto;
background: #fff url(http://mysynonym.com/images/bg/headertop.gif) no-repeat bottom left;
border-bottom: 1px solid #fff;
background-color: #fff;
}
#header img {
position: absolute;
top: 5%;
left: 10px;
}
#header ul {
margin: 3.5em 1em 0 0 !important;
margin: 3.5em 0.5em 0 0;
padding: 0;
float: right;
}
#header ul li {
display: inline;
list-style: none;
}
#header ul li a {
float: left;
padding: 0 1em;
font: 400 1.1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;
color: #4a4a4a;
border-right: 1px solid #4D5760;
}
#header ul li a.last {
padding-right: 0;
border-right: 0;
}
#header ul li a:hover {
color: #4a4a4a;
}
/**************************************************************
Header Image/Flash Movie
**************************************************************/
#headerImg {
margin: 0 auto;
height: 472px;
background: url(http://mysynonym.com/images/synonymheader.jpg) no-repeat top left;
}
/**************************************************************
Top Block Menu
**************************************************************/
#menu {
margin: 0 auto;
}
#menu ul {
width: 99.5%;
float: left;
margin: 0;
padding: 0;
ext-align: left;
background: #fff url(http://mysynonym.com/images/bg/headermid.gif) repeat-x top left;
}
#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li a {
float: left;
width: 25%;
height: 4.5em;
font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;
color: #000;
border-top: 7px solid #fff;
border-bottom: 15px solid #FFF;
}
#menu ul li a span {
display: block;
padding: 2px 7px;
}
#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}
#menu ul li a:hover,
#menu ul li a.here {
background: #cfcccc;
border-top: 7px solid #dddddd;
}
#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}
/* Top menu icons */
#menu ul li a span.speaker {
padding-left: 22px;
background: url(http://mysynonym.com/images/icons/speaker.gif) no-repeat 5px 50%;
}
#menu ul li a:hover span.speaker {
background: url(http://mysynonym.com/images/icons/speaker_on.gif) no-repeat 5px 50%;
}
#menu ul li a span.bubble {
padding-left: 24px;
background: url(http://mysynonym.com/images/icons/bubble.gif) no-repeat 4px 4px;
}
#menu ul li a:hover span.bubble {
background: url(http://mysynonym.com/images/icons/bubble_on.gif) no-repeat 4px 4px;
}
#menu ul li a span.heart {
padding-left: 20px;
background: url(http://mysynonym.com/images/icons/heart.gif) no-repeat 3px 50%;
}
#menu ul li a:hover span.heart {
background: url(http://mysynonym.com/images/icons/heart_on.gif) no-repeat 3px 50%;
}
#menu ul li a span.dollar {
padding-left: 20px;
background: url(http://mysynonym.com/images/icons/dollar.gif) no-repeat 4px 50%;
}
#menu ul li a:hover span.dollar {
background: url(http://mysynonym.com/images/icons/dollar_on.gif) no-repeat 4px 50%;
}
/**************************************************************
Page Content
**************************************************************/
#page {
clear: both;
float: left;
width: 100%;
margin-bottom: 6em;
text-align: left;
}
#columns {
margin: 0 auto;
}
/* Column widths */
.width {
width: 776px;
}
.widthPad {
width: 746px;
}
.width25 {
width: 25%;
}
.width50 {
width: 48%;
}
.width73 {
width: 73%;
}
.width75 {
width: 75%;
}
.width100 {
width: 100%;
}
/**************************************************************
Footer
**************************************************************/
#footer {
clear: both;
float: left;
width: 99.5%;
height: 5em;
margin-top: -5em;
}
#footer #bg {
position: relative;
height: 3.5em;
margin: 0 auto;
background: #49525B url(http://mysynonym.com/images/footer.jpg)repeat-none bottom left;
}
#footer #bg ul {
float: right;
margin: 3em 1em 0 0 !important;
margin: 3em 0.5em 0 0;
padding: 0;
}
#footer #bg ul li {
display: inline;
list-style: none;
}
#footer #bg ul li a {
float: left;
padding: 0 1em;
font: 400 1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;
color: #4D5760;
border-right: 1px solid #4D5760;
}
#footer #bg ul li a.last {
padding-right: 0;
border-right: 0;
}
#footer #bg ul li a:hover {
color: #6C0;
}
#footer #bg img {
position: absolute;
top: 5%;
left: 10px;
}
/**************************************************************
Icons specific to the colour theme
**************************************************************/
a.lightTheme img,
a.darkTheme img,
a.submitButton img {
width: 20px;
height: 20px;
vertical-align: middle;
}
a.lightTheme img {
background: url(http://mysynonym.com/images/icons/light_light_theme.gif) no-repeat center center;
}
a.darkTheme img {
background: url(http://mysynonym.com/images/icons/light_dark_theme.gif) no-repeat center center;
}
a.submitButton img {
background: url(http://mysynonym.com/images/icons/light_submit.gif) no-repeat center center;
}
/**************************************************************
Posts
**************************************************************/
.post {
float: left;
width: 100% !important;
width: 99%;
position: relative;
margin-bottom: 1.5em;
border-bottom: 1px solid #CCCCCC;
}
.post .date {
position: absolute;
top: 0;
left: 5px;
width: 2.3em;
text-align: right;
}
.post .date .month {
text-transform: uppercase;
font: 700 1.0em arial, sans-serif;
color: #888;
}
.post .date .day {
display: block;
margin-top: -5px;
font: 700 2.1em arial, sans-serif;
color: #888;
}
.post .title {
display: block;
padding: 0 0 5px 0;
font-size: 1.2em;
font-weight: bold;
color: #586B7A;
}
.post p {
margin: 0 0 0 3.5em;
padding: 0 0 1em 1.2em;
border-left: 1px solid #CCCCCC;
}
/**************************************************************
Thumbnail Lists
**************************************************************/
ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}
ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}
a.thumb img {
border: 5px solid #ccc;
}
a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #668FA3;
}
a:hover.thumb {
background: none;
}
a.thumb span {
display: block;
margin-top: -5px !important;
margin-top: -2px;
}
/**************************************************************
Submenu Styles
**************************************************************/
ul.submenu1,
ul.submenu2 {
margin: 0 0 20px 0;
padding: 0;
}
ul.submenu1 li,
ul.submenu2 li{
margin: 0;
padding: 0;
list-style: none;
list-style-image: url(foo.gif); /* because IE is balls */
}
ul.submenu1 li a,
ul.submenu2 li a {
display: block;
height: auto !important;
/* Start hide from IE Mac \*/
height: 1%;
/* End hide from IE Mac */
padding: 1px 5px 1px 20px;
}
ul.submenu1 li a {
background: url(http://mysynonym.com/images/bg/submenu1.gif) no-repeat 5px 50%;
}
ul.submenu1 a:hover {
color: #426F85;
background: #B3C6C4 url(http://mysynonym.com/images/bg/submenu1.gif) no-repeat 5px 50%;
}
ul.submenu2 li a {
color: #426F85;
background: url(http://mysynonym.com/images/bg/submenu2.gif) no-repeat 3px 50%;
}
ul.submenu2 a:hover {
color: #426F85;
background: #B3C6C4 url(http://mysynonym.com/images/bg/submenu2.gif) no-repeat 3px 50%;
}
/**************************************************************
Generic Display
**************************************************************/
.block {
display: block;
}
.clear {
clear: both;
}
.marginRight {
margin-right: 15px;
}
.paddingLeft {
padding-left: 5px;
}
.paddingRight {
padding-right: 5px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.alignLeft {
text-align: left;
}
.alignRight {
text-align: right;
}
.alignTop {
vertical-align: top;
}
.alignMiddle {
vertical-align: middle;
}
.alignBottom {
vertical-align: bottom;
}
.lightBlueBg {
background-color: #dddddd;
}
.dark {
color: #353E47;
}
/*********************************************************
HTML Elements
*********************************************************/
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
text-align: center;
background: url(http://mysynonym.com/images/bg/body.jpg) repeat-y top center;
font: 400 0.7em verdana, arial, sans-serif;
line-height: 170%;
color: #555;
}
/**********************************************
Comments
****************************************************/
#comments {
margin:2em 0 0;
border-top:2px solid #000;
padding-top:1em;
}
#comments h4 {
margin:0 0 .25em;
font:bold 150%/1.4em Helvetica,Arial,Verdana,Sans-serif;
text-transform:lowercase;
color:#000;
}
#comments-block {
margin:0;
line-height:1.6em;
}
.comment-poster {
margin:0 0 .25em;
font:bold 112%/1.4em Arial,Verdana,Sans-serif;
text-transform:lowercase;
}
.comment-body, .comment-body p {
margin:0 0 .75em;
}
p.comment-timestamp {
margin:-.25em 0 2em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.paging-control-container {
float: right;
margin: 0px 6px 0px 0px;
font-size: 80%;
}
.unneeded-paging-control {
visibility: hidden;
}
/**************************************************************
Form Elements
**************************************************************/
form {
padding: 0;
margin: 0;
}
/* If you're finding the input elements get pushed down, increase the width */
label {
float: left;
width: 25%;
vertical-align: top;
}
input,
textarea,
select {
padding: 1px;
font: 400 1em verdana, sans-serif;
color: #999;
background: #EEE;
border: 1px solid #CCC;
}
input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
color: #000;
background: #E7F1F3;
border: 1px solid #888;
}
input.noBorder,
input:focus.noBorder,
input:hover.noBorder {
padding: 0;
border: 0;
}
input.button {
padding: 2px 5px;
font: 400 0.9em verdana, serif;
cursor: pointer;
color: #fff;
background: #FC3307;
border-width: 1px;
border-style: solid;
border-color: #FF7800 #691300 #691300 #FF7800;
}
input.radio {
background: none;
border: 0px;
}
</style>
<title>MySynonym: The Blog</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv " />
<link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
<!-- CSS specific to current theme -->
<link rel="stylesheet" type="text/css" href="css/light.css" title="light" media="screen, projection, tv " />
<link rel="alternate stylesheet" type="text/css" href="css/dark.css" title="dark" media="screen, projection, tv " />
</head>
<body>
<!-- #header: holds the logo and top links -->
<div id="header" class="width">
<ul>
<li><a href="http://www.mysynonym.com/index.html">Home</a></li>
<li><a href="http://www.flickr.com/photos/35103817@N03/">My Flickr</a></li>
</ul>
</div>
<!-- #header end -->
<!-- #headerImg: holds the main header image or flash -->
<div id="headerImg" class="width"></div>
<!-- #menu: the main large box site menu -->
<div id="menu" class="width">
<ul>
<li><a href="http://www.mysynonym.com/portfolio.html"> <span class="title">Portfolio</span> <span class="desc">Writing Samples</span></a></li>
<li><a href="http://www.mysynonym.com/about.html" class="forum"> <span class="title">Bio</span> <span class="desc style3">More About Me</span></a></li>
<li><a href="http://www.mysynonym.com/blog/index.html"> <span class="title">Blog!</span> <span class="desc"> It's Here</span></a></li>
<li><a href="http://www.mysynonym.com/contact.html"> <span class="title">Contact Me</span> <span class="desc">Questions? Comments?</span></a></li>
</ul>
</div>
<!-- #menu end -->
<!-- #page: holds the page content -->
<div id="page">
<!-- #columns: holds the columns of the page -->
<div id="columns" class="widthPad">
<!-- Right link column -->
<div class="floatRight width25 lightBlueBg horzPad">
<h2>My <span class="dark">Links</span></h2>
<h3>Other <span class="dark"> Blogs</span></h3>
<ul class="submenu2">
<li><a href="http://melodom.blogspot.com/">Mel Odom's Adventure In Writing</a></li>
<li><a href="http://www.janicaunruh.com/"> Janica Unruh's Ravings</a></li>
</ul>
<ul class="submenu1">
</ul>
<h3>The Blog <span class="dark"> Archives</span></h3>
<br/>
<select name="archivemenu" style="width:100%" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Archives -</option>
<BloggerArchives><option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option></BloggerArchives>
</select>
<br/>
<br/>
</ul>
</div>
<!-- Right links column end -->
<!-- Left column -->
<div class="floatLeft width73">
<h1>MySynonym:<span class="dark"> The Blog</span></h1>
<!-- Start Post -->
<div class="post">
<div class="date"> <span class="month">Apr</span> <span class="day">01</span> </div>
<p> <span class="title">Working Links?</span> Alright, it seems like the non-working links within the actual posts (to other sites, for comments, labels...) those are working in IE but are not operational in Firefox as of yet. I'm not sure why. I'm trying to figure it out so I can hopefully get it fixed soon. Sorry about this! If you'd like to leave a comment on a blog, you can either use IE or click on that post in the archives, as the links work there. (I don't have a clue why!)</p>
</div>
<!-- End Post -->
<!-- Start Post -->
<div class="post">
<div class="date"> <span class="month">Mar</span> <span class="day">29</span> </div>
<p> <span class="title">New Blog Location!</span> I've finally managed to get my blog up and running here on the website! Although I'm still running into problems. You can read the posts but comments are not yet enabled, and all links within the posts seem to be non-working.</p>
</div>
<!-- End Post -->
<!-- Start Post -->
<h1><span class="dark"></span></h1>
<Blogger>
<!-- Begin #content -->
<div id="content">
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div>
<p class="post-footer">
<em><$I18NPostedByAuthorNickname$> <$I18NAtTimeWithPermalink$></em>
<MainOrArchivePage><BlogItemCommentsEnabled> |
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>
</div>
<!-- End .post -->
<!-- Begin #comments -->
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$I18NNumComments$>:</h4>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-poster" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<p class="comment-timestamp"><a href="<$BlogCommentPermalinkURL$>" title="comment permalink"><$BlogCommentDateTime$></a></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<p id="postfeeds"><$BlogItemFeedLinks$></p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name="links"></a><h4><$I18NLinksToThisPost$>:</h4>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>
<p class="comment-timestamp">
<a href="<$BlogURL$>"><< <$I18NHome$></a>
</p>
</div>
</ItemPage>
</div>
<!-- Left column end -->
<!-- End #comments -->
</Blogger>
</div></div>
<!-- End #main -->
</div>
<!-- #columns end -->
</div>
<!-- #page end -->
<div style="clear:both;"></div>
</div>
<!-- #content end -->
<!-- #footer: holds the site footer (logo and links) -->
<div id="footer">
<!-- #bg: applies the site width and footer background -->
<div id="bg" class="width"> <img src="http://mysynonym.com/images/footer.jpg">
</div>
<!-- #bg end -->
</div>
<!-- #footer end -->
</body>
</html>
pandy
Apr 21 2009, 06:28 PM
QUOTE(aerintwin @ Apr 21 2009, 11:45 PM)

Because as far as the template goes... what I see in Blogger's edit template field, and what I initially put in there... only has one content tag, rather than all those extras.
Can't you change the id to a class and change the style sheet accordingly?
I've never used Blogger, but as I understand it you can upload your own templates since I've seen people offer Blogger templates. So you must be able to change things that way if not through the editor.
aerintwin
Apr 22 2009, 08:51 AM
Well, yes, but what I showed IS my template. A lot of the corrections in the validator thing was showing code I'd never seen. If you ran my blog url through then the validator is reading the source code, right? When I view the source code directly from my page, there's a lot of code added in that I don't actually see in the template file. It's simply not there... so I can't edit or change it. So what I copy and pasted is what I can change.
As far as the actual template for the website goes.... there's three separate files: the html file, and two css files - one for style and one for layout, I think. But in order to incorporate the template into blogger, I had to paste all those files together into one just like all the default blogger templates are set up.
So while I can change all of these files.... none of them shows me more than one content id. Because that's not something that's part of the actual template.... that's something that's being somehow rendered after the fact and viewable only in the source code (I'm assuming) which I can't edit.
Although I can understand some of the basics of html and css, I'm still a beginner, so I don't "really" know what I'm talking about. I'm only making guesses here... All I DO know is that I can't find the code to edit it because it's not there in the original template or in the blogger editor.
Hope I explained that well enough to understand.
aerintwin
Apr 22 2009, 09:13 AM
Is it possible to make a copy of the source code which shows the hidden elements and then use THAT as the template and remove all the extra content tags?
aerintwin
Apr 22 2009, 10:04 AM
I did a test. I copied the source code into my blogger editor and removed all the id content tags.... everything worked just fine.
But... if I do it that way, it's posting the code for those specific posts rather than the blogger variables, so to the new posts would never appear. It wouldn't be updating itself... which would defeat the whole purpose for having blogger managing the content.
However, I'm guessing from my test that it IS the content tags... but again, since they're hidden I can't edit them. Any ideas?
I tried copying the source code and then deleting the post information and pasting the blogger variable codes back in... and it all still worked, only the formatting for the content space was gone.
So the posts filled the entire window rather than the white space defined for the content.
I tried changing sizes of columns to contain the text.. but that didn't seem to do any good. It seems that if there's not a content tag before each post, then the post loses that formatting.
I appreciate the help!! I feel like I'm actually getting closer to a solution. It's great even though it's not yet fixed.
pandy
Apr 22 2009, 10:25 AM
Sorry, but I don't want to register on Blogger to figure this out. Afraid I can't help.
aerintwin
Apr 22 2009, 11:06 AM
That's quite alright. I managed to solve the problem finally.
It wasn't a problem with the content or any of the above.
I just copy and pasted my template bit by bit, previewing after every section. It turns out there was a .post area that was causing problems.
.post {
float: left;
width: 100% !important;
width: 99%;
position: relative;
margin-bottom: 1.5em;
border-bottom: 1px solid #CCCCCC;
}
That's it above, actually. If it's included, you can't highlight any text...
If its not included, you can and the links works. So... somehow I managed to get it working. Thanks for everything anyway.
pandy
Apr 22 2009, 11:20 AM
Oh, good. I guess that and #content overlaps then, since fixing either works.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please
click here.