?

Log in

No account? Create an account

Previous Entry | Next Entry

tag page view - SOLVED

  • Nov. 23rd, 2009 at 1:16 PM

i've been customizing my LJ backgrounds, colors, layoutspacing etc., so far so good, i could find the elements names from different help pages, or reading the source code. doesn't mean i'm a pro - i'm just learning.

but i couldn't find the ID, class or whatever defines the content of the "view my tags" page.

the issue is that parts of my backgrounds are transparent ( content, #alpha ), so you can see the bgd image between the entries, comments, navigation strips etc. it worked fine for entries, comments, for the archive calendar page, and for the single post views choosed by tag or by date clicking. i think i looked at all possible views of my LJ, and everything seems to be conform to my design ideas.

but as i clicked on the "view my tags page", the bgd color (and other items like border, padding etc) aren't applied at all.
the result: a light blue bgd (from the page bgd) and a light blue text color (which works fine on the normally dark post-asset bgd) - you can't read a single word.
now, if i knew the name of the element, ID (or what it's called there) for this page specific list of tags, i could add it in the css paragraph where the posts and widgets are defined or add a paragraph.
when i opened the source code though, i didn't really see any ID nor div, it's if like the content was poured directly on the page.

can somebody help solve this problem? thx ^_^

BODY {
background-color: #94A0AE;
background-repeat: repeat;
background-attachment: fixed;
background-image: url(http://pics.livejournal.com/portisheart/pic/0003c312);
cursor: url

(http://www.deviantart.com/download/144384934/chinese_symbol_for_love___blue_by_po

rtisHeart.cur);
}

a {
text-decoration: none;
cursor: url

(http://www.deviantart.com/download/144385382/symbol_male_male___blue_cursor_by_

portisHeart.cur);
}
a:hover {
text-transform: uppercase;
text-decoration: underline;
}

#lj_controlstrip a {text-transform: none;}

#page {
background-repeat: repeat;
background-attachment: fixed;
background-image: url(http://pics.livejournal.com/portisheart/pic/0003c312);
}

#content {
background-color: transparent !important;
position: relative;
top: +75px;
}

#header {
position: relative;
top: +40px;
}

#header-name, #header-description {
position: relative;
top: +75px;
color: #94A0AE;
}

#header-text {
position: relative;
left: -4px;
}

#alpha, #beta {
position: relative;
left: -20px;
}

#alpha {background-color: transparent !important;}

#beta, #gamma {background-color: transparent !important;}

.post-asset,
.widget,
.prevnext,
.comment-even,
.comments-header,
.comments-nav,
.skiplinks {
background-color: #151525;
}

.comment-odd {
background-color: #94A0AE;
color: #151525;
}

.comment-odd a {color: #FFFFFF;}
#dayyymmmmmdddd {background-color: #000000;}

.post-asset,
.comment,
#dayyymmmmmdddd {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 4px solid #000000;
padding: 20px;
}

.comments-header,
.comments-nav,
.prevnext,
.skiplinks {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 4px solid #000000;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}

.widget, #header {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 4px solid #000000;
}

.widget-header {
text-transform: uppercase;
font-size: 120%;
}

.about-me-widget a {
text-transform: uppercase;
text-decoration: none;
}

.categories-widget a:hover {text-transform: none;}

.post-asset {
background-repeat: no-repeat;
background-position: right bottom;
background-image: url(http://pics.livejournal.com/portisheart/pic/0003azz1);
}

Comments

( 15 comments — Leave a comment )
av8rmike
Nov. 23rd, 2009 01:34 pm (UTC)
There really isn't an "entry"-type container for the Tags Page, which is something of a deficiency in the layout. Just from a few seconds of toying around, it looks like you can emulate the same effect by adding
.lj-view-tags #alpha-inner
to the CSS rules that color your entry backgrounds.
portisheart
Nov. 23rd, 2009 02:14 pm (UTC)
thank you so much!!
i tried it out, and as you say, this emulates a post on the tag-view page to 99%.

single exception: the alpha-inner is actually broader than the post-asset, and since my beta is positioned -20px to the left, they overlap. but the link list only occupies the left of the (fake)post, and the overlapping effect on the right is actually kind of nice, even with corners on mozFF - at least with my layout design (dunno about other people's) and IMO.

i didn't know of this ".lj-view-tags" entity to name the tag-view page, your reply was really useful about this too.
and since i knew how this (fake)post is called, i put a new rule for it, so i can adapt other things like font-size. *happy*
marahmarie
Nov. 23rd, 2009 11:40 pm (UTC)
I just want to say your layout is so beautiful! You did a fantastic job. Did you resolve your issue with the Tags page, since it looks fine to me in Firefox? I have to run out for a bit but when I get back I'll also check it for you in IE.
portisheart
Nov. 23rd, 2009 11:58 pm (UTC)
wow than you!! ^_^
it's simply css added to expressive,theme "river-at-night".

oh yes, thanx to av8rmike the issue with the transparent bgd is solved, and after hours doing totallysomething else, a sparkle of intelligence found its way to my brain: why don't i try to mention a shorter width in the rule for this tag-viewbox..

in FFox, you see the nice rounded corners, which IE doesn't show - only square boxes.
but in IE,you can add customcursors, which don't work in FFox..


marahmarie
Nov. 24th, 2009 02:36 am (UTC)
You're welcome! Those cursors are awesome, BTW. I looked around for a way to get them to work in Firefox, too, and I tried a few things that I saw suggested, but none of them worked.

You're right about the borders; the only way around that would be to target IE only with some rounded-corner images to get the layout the same in all browsers, but it looks nice in IE even without the rounded corners.

In IE8 only (on Vista, if that helps), I noticed your header's overlapping your nav strip. The following code should fix it if you want to give it a try, but the problem is the hack will target IE7, too:

*:first-child+html #page {top: 10px !important;}

You can try that; if it screws up IE 7, you could try adding this to the #page CSS you already have:

top: -10px !important;

...and that might smooth it out in both browsers for you.
portisheart
Nov. 24th, 2009 08:22 am (UTC)
you're right, the issues with borders IE / corners FF are a pain discussed all over www.. XD

IE8 - you mean the banner overlaps the "previous/next" nav-strip?
i'm not sure where to put your code.. if you look in my 1st post i joined my css (not separate sheet, in customize LJ) - and there, you'll see some code for lowering the banner/header and the content from the top:

#header {
position: relative;
top: +40px;
}
#content {
position: relative;
top: +75px;
}

meanwhile, some details from this css have changed - it's #header +25px, and #content +50px, from the top. you can see details in the source code of my LJ.
so how do i use these rules and your code together?
hey thx a bunch ^^

EDIT: i thought your vista had the higher IE version since you mentioned it, but actually, that's the one i'm using too! with XP though.
so with "my" IE8 on XP i don't see this header dropping - is it possible it's vista the culprit? i have heard vista was crap.. ^^

Edited at 2009-11-24 02:54 pm (UTC)
marahmarie
Nov. 25th, 2009 02:17 am (UTC)
Oh, OK - you'd add this to the very bottom of the CSS in your custom text box:

*:first-child+html #page {top: 10px !important;}

If you need the second line of code (you may not - you'll just want to check how your layout looks in IE7 before using it) you'd add it to the #page code already in your CSS like so:

#page {
background-repeat: repeat;
background-attachment: fixed;
background-image: url(http://pics.livejournal.com/portisheart/pic/0003c312); top: -10px !important;}


And I probably mis-worded myself...sorry. I meant not that the header is overlapping the prev/next links but that it's overlapping the LJ strip along the top. :)
marahmarie
Nov. 25th, 2009 02:39 am (UTC)
Sorry. I read and responded to your original reply before I got to your edited reply, mostly because my Inbox is quite stuffed. To answer your Vista question, yes: Vista's "version" of IE7 (what Vista comes with by default) is different than the version of IE7 that you can download and install for XP.

In turn, this means when us Vista users upgrade to IE8, the underlying code for the browser remains different. What this results in is operating system-specific bugs for IE8 - that is, some bugs will only show up in XP's version of IE8, while other bugs will only show up in Vista's version of it.

Unfortunately, most of the hacks we use to address these bugs usually target both operating system's versions of IE7 and IE8. There are a few hacks for Vista only, but I don't even get into them, since having to use hacks is not ideal coding, requires more work, and can actually produce more errors - so I keep my hacks targeted to both operating systems versions of the browsers and just hope for the best.
portisheart
Nov. 25th, 2009 09:57 am (UTC)
urgh.. the differences between your version on IE8 on vista and my IE8 on XP are frightening..
if i follow the instruction to add top: -10px !important; to the #page rule, you know what happens? NOW, THE HEADER OVERLAPS THE LJ STRIP ON MY DISPLAY AS WELL!!
so i did the contrary, i wrote +10px, since i actually want this header to go down. so how's the result on your vista IE8 now? here there's no difference (or maybe the whole page is 10px down, which i won't really notice since the spacing was random, i just wanted a space).

but, as we all know - bugs fly through open windows XDD
marahmarie
Nov. 26th, 2009 12:10 am (UTC)
On Vista IE8 the header is still overlapping the top strip by 5 or 6 pixels. So it looks like a gray chunk cutting through the bottom of the strip. That chunk is the top of your header. Pic:

http://pics.livejournal.com/marahmarie/pic/0001wb20

If you were to add 5 or 6 more pixels (bringing your total height up to around 15px-16px) how would it look then in IE8 on XP?

If nothing is working, I'd just go with the best compromise you can come up with. IE is kinda reknown for having exactly these kinds of problems.

I'm looking in Google but not finding the targeted hacks for IE8 on Vista that I thought were out there, but I know I wrote something about it last year on my journal (it became a pretty popular post with designers across the Web for a little while because I mentioned that problem and a few others I was having with designing for IE) so I'll look it over, and if I find a link for that in there I'll let you know.
portisheart
Nov. 26th, 2009 12:41 am (UTC)
thanx a bunch for the printscreen ^^

omg.. until this problem with vista appeared, i knew what i was doing, and my page looked good and pretty similar on XP IE8 and on mozFF 3.5.5.

now, i'm totally lost, i only adjust things up and down without really understanding exactly what i'm doing and why - and my page looked at a stage even totally different on IE and FF..
and as i don't have vista, or mac or whatever is not XP IE8 or FF, there are still so many places where my layout may totally suck,and i can't test it either.

i hope now the header is like i want it - not glued on the strip, not stuck to the nav either, but nicely spaced inbetween! XD
marahmarie
Nov. 26th, 2009 12:56 am (UTC)
You fixed it on Vista! It looks just right now. I don't know if you saw the strip itself is a bit out of whack in IE (at least on my Vista version of it) (the boxes don't line up as they should) but seriously, I wouldn't even worry about it, since I think enough Web users know IE doesn't play nice with otherwise perfectly well-coded layouts to blame the designers for that.

Also, if you were to google something like, "don't use hacks for IE" you'll find a ton of websites in favor of just letting our layouts not look right in IE in order to get people to realize it's the browser, not the designers, that are at fault for that - the thinking goes, if enough people were to figure that out, IE usage would drop off a cliff, so then we'd only have to code for Firefox, Safari, Opera and so on.

I know it would be a lot less headaches for all of us if IE usage were to tank, since like you said, it gets to the point where you think you're coding just right, then you check in IE and see how different, and sometimes how bad it looks - seeing that can just suck the wind right out of you, not to mention make you waste a lot of time trying to "fix" it, when, in fact, nothing is "broken" except IE's handling.
portisheart
Nov. 26th, 2009 01:39 am (UTC)
fi-nal-ly! so i won't touch anything about that upper spacing any more *sigh*.
thanxx a lot for helping me fix this ^^.

oww, even i you know you're not responsible for window's endless bugs, it's still a pain if your site looks crappy.. i'm quite design oriented.
and though i appreciate the idea of free source progs, we still have to count with a broad win-user audience..
i just wonder how comes that IE, which has been around for quite a while now, still loses to far newer browsers like FF, opera etc..
marahmarie
Nov. 26th, 2009 02:06 am (UTC)
You're welcome! I'm happy it's working better for you now. As to why IE fails the way it does, without getting technical or citing sources (which I guess I could if I had to) IE is not considered, technically, by a wide swath of people who do know what they're talking about, to be a browser. It's more a set of dynamically linked libraries native to Windows that are normally used to control the way your operating system looks and works, with a customized, browser-looking interface wrapped around it. So basically, Microsoft devs took those Windows-only libraries and "bent" them into a different usage back in the late 90's-early 2000's or so to make IE function like a browser would. Emphasis on "like". Since no other browser maker has access to what MS does to make that browser code, the differences are inevitable.

Also, outside of the obvious browser-build differences, I should mention that IE "handles" CSS differently than other browsers do - even outside of the obvious built-in limitations. Other browsers have always tried to follow W3C specs (for as long as there have been W3C specs, anyway) and for that reason, they pretty much agree on how best to display CSS. IE, on the other hand, started out years ago by using code only they approved of. The code wasn't good CSS - it wasn't even CSS, in fact - so for obvious reasons the code didn't work and broke in other browsers.

From there they moved to using the border-box model - a decision on their part that no other browser maker has supported, since the argument for it turns how padding and margins should be displayed on its head. Starting with IE5, they began suporting standards better, but not enough to quiet designers down, and with IE6 actually came more problems displaying CSS, and more hacks to fix the problems, than most people had ever encountered before.

With IE7 onward, Microsoft has finally started taking serious steps toward relaxing their browser's interpretation of the border-box model and has begun to follow much stricter CSS standards, but the "bugs" and issues are still there. I'm hoping that with IE9 they knock out most of the issues I'm still seeing in my designs and others, but knowing how IE is, there's no guarantees.

Edited at 2009-11-26 02:22 am (UTC)
portisheart
Nov. 26th, 2009 02:40 am (UTC)
"-IE is not considered, technically, to be a browser. It's more a set of dynamically linked libraries native to Windows normally used to control the way your operating system looks and works, with a customized, browser-looking interface wrapped around it.-"

i see.. well, it's called Internet Explorer after all, so it says everything already: an extended Explorer with internet support..

rings a bell.. MS frontpage, with weird code added and this special format a while ago..
but i guess for windows or IE they use the old versions as frame to build the new ones. so to kill all bugs they'd have to start a new version from scratch almost..

the good side of it: enough subjects to fill endless pages of windows-jokes..

Edited at 2009-11-26 02:42 am (UTC)
( 15 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars