I've inherited an HTML/CSS rats nest

[TrogL]

I've taken over development of a website that uses, among other things, cascading style sheets. I've never worked with them before.

It looks like the code may have been maintained by some sort of CSM at some point, possibly something by Apple, and there's all sorts of leftover artifacts that are making my head spin. :crazy:

My worst nightmare, at the moment, is this. On the main page, the code contains all sorts of quotation marks, special characters (eg. acute-e, o-oomlaut) and it works just fine. It calls another page of similar code, where I have to use ASCII/UTF-8 codes, and they don't even work consistently between browsers.

How can this be?

[DaveJ]

1. Thanks for posting -- I'm forgoing my own rant now...

I was about to post my own frustration about having to work with other people's crazy code, but the craziest thing about this code is -- they are still writing it this way, and are too stupid to know any better. That is, they are using old fashioned asp and do not understand that Asp.Net in which development is 100 times faster. I despise old code, There is no reason for it. Rewriting would be much faster than maintaining it.

Anyway I don't know about those special characters, but I use CSS constantly. How have you been getting by without using CSS??? What language have you been using?

The only context in which I've seen special characters is to filter them out, or convert them an acceptable format for viewing. Or maybe your site is international?

Special characters though have no direct relationship to CSS. You can show me snippets of the code if you really are still having trouble.

[TrogL]

2. I haven't up until now been doing any really fancy coding

flat HTML has done what I've needed or some simple frames. Any CSS code I've waded through has seemed a way of spending 50 lines doing something I could do it two, like cobbling up a whole lotta code on how to format a paragraph, then only having one paragraph.

The site is only international in terms of there are often names French, German, Russian, Swedish and other languages. I'll post some fake code later that emulates the problem.

[TrogL]

3. Obfuscated Code

Here's a mystery.

<blockquote> 
<div><a href="seas.html" 
="/exhibition/1" class="first"><img
src="images/seas2010_1.png" 
="/images/exhib1.jpg?1212739121" /> 
</a><a href="sea.html#Para" 
="/exhibition/2" ><img
src="images/seas2010_2.png" border="0" 
="/images/exhib2.jpg?1212739121"
/></a><a href="seas.html" 
="/exhibition/1" class="first"> 
</a><a href="seas.html#Earth" 
="/exhibition/3" ><img
src="images/seas2010_3.png" border="0" 
="/images/exhib3.jpg?1212739121"
/></a></div>
</blockquote>

What's up with the ="/exhibition/1" ?

From the page that displays weird characters correctly.

    <div class="clear"> 
      <h1 style="margin-right:
0;"><strong>Welcome to
whatever</strong></h1>
      <p>Featured works include John Smith’s “Batman
theme,” and Jane Doe’s “Requiem,” p>
    </div>

Note - I don't have a class called "clear".

And this page doesn't unless I mess around with UTF-8 codes,
which don't work on all browsers...


  <div id="content"> 
    <div class="clear"> 
      <h1 class="style2">Foo</h1>
      <div id="subfeatures"> 
        <div class="sub_item"> 
          <div class="sub_thumb"><img
src="images/seas2010_1.png" alt="poster1"
width="150" height="232" /></div>
          <div class="sub_desc"> 
            <h3>Tidings of Joy</h3>
            <p><strong>When</strong> -
4:00pm<br />
              <strong>Where</strong> - Church
<br />
              <strong>Tickets</strong> - Tickets
available at the door 
              <p>
              Concert featuring Smith’s &quotbar&quot
as well as stuff by Gooky G&oacutec, and Andy
P&aumleu.
 
</p>Tickets are $144 (adults)/$125 (students and
seniors)
                   </div>
            <p>&nbsp;</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Here's the sub_desc code.

  .sub_desc {
	float: left;
	width: 530px;
	height: 232px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

[DaveJ]

4. Nothing Too bad

I'm guessing this is server side code, that expects you to have a language engine installed on the server. I admit, I don't know what language it is. Maybe PHP or Ruby? Do you know? I'm guessing it is Linux based. Since it isn't Flat HTML, it needs that language engine on the server, to interpret the code before it's sent to the client so that it shows up properly.

As far as the Clear class goes, it is a pretty useful class that is used in order to work around issues that IE had in the past with Divs that did not resize vertically. If it's not there, I think you should make sure it looks like this:

clear{
clear:both;
height:0;
}

Sorry I don't recognize whatever language/server that it needs. Things should make more sense if you can determine that.

[canetoad]

5. Big Fail, Dave

TrogL, that is pretty standard, if untidy, html and css. You can recognise the basic html elements, and the <div> </div> things are css. The "/exhibition/1" is calling up something stored in another folder called 'exhibition' and so on.

Looking at the way it was built, I'd take a punt on the css rules not being stored all together in one stylesheet that is linked to the site pages. If, say, it was put together in Dreamweaver, it is easy to embed the css in some pages and store others in a stylesheet (or several SSs). This is just carelessness and bad management on the part of whomever built the site.

[DaveJ]

6. Obfuscate much?

Ct, how does it help and/or explain anything to say this: "/exhibition/1 is calling up something stored in another folder called 'exhibition' and so on". What new information is actually being conveyed?

The option appearing after the equals sign looks like like nonstandard HTML to me, which is why I am 'guessing' a server side language is reinterpreting the pages. And "Dreamweaver" is not a language and does not explain anything. If you could explain what exactly that reference does, that would actually be helpful....

Plus, with regard to CSS being store in multiple pages, that explains like practically every page on the internet!

[TrogL]

7. OK, calling it up to do what? That code has no business being there.

There is no 'exhibition' folder.

There are several style sheets, one for IE6, one for IE7 and a site-specific one.

Dreamweaver makes sense. I know the previous administrator knows nothing about HTML.

I'm not about to go out and buy Dreamweaver just to maintain this site so I'm probably going to rewrite this mess so it's actually readable.

There are several style sheets, one for IE6, one for IE7 and a site-specific one.

[canetoad]

8. I was going to suggest that in the last post

Because its the only way you will know exactly what is going on with the site. There may have been an 'exhibition' folder at one time. It looks like what I call Shanty Town code - lean-tos and bits added with no method over time.

[DaveJ]

9. Just curious, what IDE do you use?

Most IDEs I know of are free, I believe, like Eclipse, for instance.

I wonder if the development environment was Java based, or like you said, some kind of Apple server. It would really help to look at the file names... do you see .php or .jsp extensions?

At any rate, you probably would have a better time rewriting.

[TrogL]

10. I don't use an IDE

I had to google it to find out what it meant. Found some .js files in an aspnet_client\system_web directory and AC_RunActiveContent.js is a Scripts directory.

I figured it out. It's Dreamweaver. Found some .dwt files in a Templates folder.

God help me.

I am NOT paying $400 US for something that generates this crap.

[DaveJ]

11. The free trial is good for 30 days

If you can get your project done in 30 days. Or at least gain an understanding of the site architecture.

I gotta say having both .dwt files and a aspnet_client\system_web folder is wierd! Those are Asp.net folders, Microsoft based, and it is not normally used in conjunction with Dreamweaver, but can be. It leads me to believe the original site might have been on an MS server -- I'm not trying to lead you in the direction of MS, just sayin'. Yet you need it to be on a Linux server, I presume, based on your avatar! If you see any .asp or .aspx files then it's definitely a MS site, which you will want to rewrite to Linux.

And that code with the extraneous euals assignment is totally strange. Never saw it. I googled around for quite awhile and never saw any other examples of it.

Hopefully Dreamweaver the trial will help: https://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver

[TrogL]

12. I have no idea what server it's on

It's just an IP address to me. I'm (hopefully) not doing any server-side scripting. I'm just displaying a couple of flat pages and one password-protected file dump.

They're talking about buying Dreamweaver for me, but I don't think it's really necessary, especially at that price. The previous maintainer had his own copy.

I'm going to try a major code cleanup on local code and see if that helps.

[TrogL]

13. new hint - the second page displays badly on iPad and iPhone

Seems to work OK most other places including Blackberry.

[DaveJ]

14. Awesome... my work here is done! lol

If you have the pages displaying on any browser, that is outstanding. Sounds like no server side issues are getting in the way, and some tweaking should do the trick.

[TrogL]

15. They've always displayed, just badly

I've still got the same issues; different code on different pages to do the same thing, won't display properly on some browsers (eg. iPhone/Pad)