browser problems

Atratus · Post by **Atratus** » Fri Sep 26, 2008 11:04 pm

Hello guys,

I'm so angry. I was very proud of creating my first very own theme and now I've tested it in IE6 (using FireFox normaly) some things really look ugly. I figured out how include a browser-specific css-file, but what I could not find out is what exactly the problems might be.
The w3c validator says everything is ok (excluding some minor things like "background and text-color are the same)...

Maybe you could help me?
The URL is http://www.polystrom.de/

One problem is that the blogdescription is displayed to much under the header, another one is the footer (this grey bar).
It seems like the floating doesn't worke fine in IE...
And the third thing are the Title which are links, that should be all white, but they aren't....

Sorry for my bad english, I hope you could help me through this

...

Post by **Don Chambers** » Sat Sep 27, 2008 1:10 am

It is understandable to get frustrated, but IMHO, you are well on your way to a nice template!!! Great first effort. From here out, it is just a matter of fine tuning and bug correction.

You are not clear on validation yet - so you might want to address these issues as any one of them can yield unexpected visual problems:

http://validator.w3.org/check?verbose=1 ... trom.de%2F

You are displaying your site at that address as a frame from this site: http://www.terra-zone.de/polystrom/

Any reason you don't just do a redirect or point the dns of one site to the other? Serendipity can handle that just fine, preserving the HTTP host if you want it to.

I don't want to get caught up in your IE issues until your validation problems are resolved, but suffice it to say that trillions of hours have been wasted by web designers trying to "fix" things for IE. With respect to links, however, make sure you have all your anchors specifically defined: a:link, a:visited, a:hover and a:active - in that order.

Atratus · Post by **Atratus** » Sat Sep 27, 2008 2:07 pm

Hello Don, thank you for your nice answer, but there are some things I didn't understand yet.
The Problem of the validation thing is, that, if I type "www.polystrom.de" for validating, it only scans this code:

Code: Select all

<html>
					<head>
					<title></title>
					<META NAME="Title" CONTENT="">
					<META NAME="Revisit" CONTENT="After 30 days">
					<META NAME="Keywords" CONTENT="">
					<META NAME="Description" CONTENT="">

					<META NAME="Robots" CONTENT="INDEX,FOLLOW">
					</head>
					<frameset cols="100%,*" rows="*" frameborder=0 border=0> 
					<frame src="http://www.terra-zone.de/polystrom" name="subframe369828">
					</frameset>
					<noframes>
					<body bgcolor=#FFFFFF>
					<h2>www.polystrom.de</h2>
					<h1></h1>
					<p></p>	
					
					<p></p>	
							
					</body>
					</noframes>
					</html>

When I try the direct address http://www.terra-zone.de/polystrom/ i get this error:

Sorry, I am unable to validate this document because on line 77 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

The error was: utf8 "\xFC" does not map to Unicode

I use the frame because in my webspace I got 3 .de-Domains for free and so I used this polystrom thing to point to the special part of my main-project. polystrom should be a standalone project. Because of this I didn't want to have the terra-zone-blabla in my url.
But maybe I didn't understand you right, because I have some language-issues so far...

Maybe you could try to explain this once again?!

Any reason you don't just do a redirect or point the dns of one site to the other? Serendipity can handle that just fine, preserving the HTTP host if you want it to.

Thank you for your patience and sorry for my dumbness!

Neut · Post by **Neut** » Sat Sep 27, 2008 10:08 pm

Why bother with an outdated browser as IE6? Your (beautiful) site renders well in IE7 en 8.

Atratus · Post by **Atratus** » Sun Sep 28, 2008 9:56 pm

Yes in IE7 and 8 it's okay and also in FF 3, but there are so many issues in all other browser and I can't find a solution

.

Post by **Don Chambers** » Sun Sep 28, 2008 10:56 pm

I noticed something using FF2 - your entry titles are being positioned lower than the purple background that you have... that is because the div width was not specifically defined. Your content area is 680, the date is 90, and the right margin of the entry title is 5 - so make it 585px or less: .content_title {width: 585px}

I see your javascript defined twice as:
<script language="javascript">. Try this instead: <script type='text/javascript'>.

I would also suggest removing all the comment lines from the second javascript code segment - I believe they are triggering the validation error regarding utf-8 characters.

I'm not sure where that javascript is being emitted, but I trust you have it enclosed within {literal}{/literal} smarty tags if in a tpl.

Immediately following this: <div id="headlinks"> I see this:<a name=""></a>. Does this not require a name, or did some conditional logic not emit one?

I see this: <div class="content_title"><a id="extended"></a>. IDs are to be unique to a page. I'm not sure why you even want this anchor positioned before each entry title anchor, so I have no real suggestion here other than to point out the ID issue.

Your page bottom links all have the same class, and are all floated right. you might try containing them within a single parent div of some kind, then give them each their own class with separate rules. I'm not sure what appearance you were shooting for, so it is difficult for me to make many suggestions there. You might make each of them a <span> so that they display inline by definition (you can still do it with css even if they remain <div>s.

I'm a bit short on time right now, but see if any of this helps for now.

Atratus · Post by **Atratus** » Mon Sep 29, 2008 1:11 am

Many, many thanks to you Don, you're wonderfull!

Don Chambers wrote:I noticed something using FF2 - your entry titles are being positioned lower than the purple background that you have... that is because the div width was not specifically defined. Your content area is 680, the date is 90, and the right margin of the entry title is 5 - so make it 585px or less: .content_title {width: 585px}

I also recognized that, but didn't got to this solution ... far to easy I think *lol* well now it seems to work!

Don Chambers wrote: I see your javascript defined twice as:
<script language="javascript">. Try this instead: <script type='text/javascript'>.

I changed the code, do you mean, that it's possible to wrote both codes into one <script type='text/javascript'></script> instead of using it twice?

Don Chambers wrote: I would also suggest removing all the comment lines from the second javascript code segment - I believe they are triggering the validation error regarding utf-8 characters.

I did so, forgot to do so, but which error do you mean?

Don Chambers wrote: I'm not sure where that javascript is being emitted, but I trust you have it enclosed within {literal}{/literal} smarty tags if in a tpl.

hum, I'm not sure whether I understand you right, but used this {rdelim} {ldelim} thing to get the scripts to work (garvin told me so). The scripts I used are to make the commentboxes expandable and collapsable (first script in my code; used in entries.tpl) and the second is to make the smilies under my commentform "clickable"...

Don Chambers wrote: Immediately following this: <div id="headlinks"> I see this:<a name=""></a>. Does this not require a name, or did some conditional logic not emit one?

It just is an anchor for the "# top"-Link. It seems like I have forgotten to give it a name

Don Chambers wrote: I see this: <div class="content_title"><a id="extended"></a>. IDs are to be unique to a page. I'm not sure why you even want this anchor positioned before each entry title anchor, so I have no real suggestion here other than to point out the ID issue.

I think this one is some sort of trashy code

Don Chambers wrote: Your page bottom links all have the same class, and are all floated right. you might try containing them within a single parent div of some kind, then give them each their own class with separate rules. I'm not sure what appearance you were shooting for, so it is difficult for me to make many suggestions there. You might make each of them a <span> so that they display inline by definition (you can still do it with css even if they remain <div>s.

I think I get rid of this now...

So many things solved, thank you very much!

But I still have some problems. In IE6 it looks like this
Screenshot IE6
There is this white box under "Kommentar schreiben", which isn't there in any other browser?

And in FF < 3.0 the stars of the karma plugin aren't centered.

And last but not least this problem with the headline which isn't in the header where it should be, in IE < 7 and 8 Screenshot IE6 and in IE6 the .content_title-Thing isn't correct yet

Thank you for your effort!

Post by **Don Chambers** » Mon Sep 29, 2008 6:03 am

You are definitely making progress.

I did not intend for you to combine both javascripts into a single one, nor have you. Looks good, except for this:

Code: Select all

 pos = prompt("Einf?gen an Position (0.." + input.value.length + "):", "0");

Get rid of the non utf-8 characters there - ideally, just translate it to simple English. I think we can finally validate your html output if you do.

Next - switch your karma stars to one of the plugin's defaults. Let's see if your problems have anything to do with your graphic modifications, or something else. I do see a left margin defined in your stylesheet, and that should probably be commented out for now, but I can continue to test whether that rule is there, or not.

Regarding the smarty code - if your code is not triggering any smarty errors, I probably would not worry about {literal} vs. {ldelim} right now...

Your headline issue MIGHT be a function of the margins... try reducing the width of it another 5-10px.

I'm too tired to dig any further. Will check your progress tomorrow (Monday) when I get a chance.

Atratus · Post by **Atratus** » Mon Sep 29, 2008 10:54 pm

Well, the only thing I could fix is the validation error. concerning this, everything seems to be okay...

Post by **Don Chambers** » Mon Sep 29, 2008 11:41 pm

Getting validation is a huge success compared to where you were just a few days ago - don't get too disappointed just yet!! This stuff takes awhile - especially with IE!! Trust me - god only knows how many hundreds of hours I have spent tracking down these quirks for myself and others!

Change your entry title width to 580px: .content_title {width: 580px}.

Incidentally, you should really take a careful look at what you want styled for the entire .content_title container, and the content title anchor, including, if necessary, a:link, a:visited, a:hover and a:active.

What purpose does this image serve, because it is messing with IE:

Code: Select all

<img src="/polystrom/templates/polystrom/img/spacer.gif" width="306" height="52" class="headtitle" alt="Start" />

Atratus · Post by **Atratus** » Tue Sep 30, 2008 7:13 pm

Okay, the content_title seems to be okay now.
The image is an layer above the "[poly]strom"-Title in the header-image, to make it clickable. it refers to the mainpage. First I used a div-container for this, but this wasn't w3c-compatible. I wondered why not use <map>-functionality but this only works with <img>-tags, but the header-image is a background-image of an container...

so still 3 problems remaining, i think:

1. headline ... i can't get it to work
2. this white box in IE6
3. stars of karma plugin are centered but the text underneath isn't...

I have another question: Is there a way of installing older browser versions of IE parallel to the actual one? Because checking by using this screenshot service is more than annoying...

Post by **Don Chambers** » Tue Sep 30, 2008 7:44 pm

See? We keep making progress!! LOL

Humor me - get rid of this in the headlinks div: <a name="up"></a>

Next, make the <h2> tag all a single line:

Code: Select all

<h2><a class="headlink" href="http://www.terra-zone.de/polystrom/">subkultur, underground, trash</a></h2>

There is probably a smarty variable in there for your blog description, not the actual text of it.

I'll move onto the other issues after this one is resolved.

Post by **Don Chambers** » Wed Oct 01, 2008 1:12 am

A few other observations:

.content_text - remove the specified width. Also remove float:right (if you want to float anything here, it is probably the image to the left, but I doubt you need it floated. Also suggest adding a bit of right margin, perhaps margin-right: 10px.

for .content_footer - add clear:both;

let's see where all this gets us.

Atratus · Post by **Atratus** » Thu Oct 02, 2008 9:02 pm

Hey,

sorry for answering this late, but I was busy the last two days.
I changed some code, because I wanted the text in the not extended version not to float underneath the cover-image. but I ran out of time and for this I think you saw some messy stuff. It should now look fine.
I added clear:both to the .content_footer, as you said and it seems like the karma-stars are now centered!

I also changed the headline, but unfortunately without any effect.

But as you said: We keep making progress

Edit: hum, as it seems there are some strange things happening in IE8: Screenshot IE8

Post by **Don Chambers** » Mon Oct 06, 2008 5:48 pm

The link to an IE8 screenshot seems to be broken. Everything now looks great in FF2. However, in IE6, I only see a few remaining issues.

Small white are below the last 2 entries - I think this is caused by your spacer DIV. Rather than use that spacer div, why not just put some bottom margin on the content div?

Search and navbox in header - very common IE error - IE doubles the margin in the floated direction. Just use display: inline on both of those divs, and it will be fixed.

Final issue is your blog description. Not sure why IE wants to place that below the floated navbox, or if it is that <br> in there.... however, rather than battle it too hard, how about position: absolute, and top: 260px on the div?