# New site ready for launch...



## uoba (Oct 18, 2003)

Our new site: http://www.co-ord.com is now on-line! It's going up tonight as so I can proof it before Monday (when I let clients and past clients know).

Just need a favour from someone. Everything seems to be fine upon upload, except one of the link area's playing up in my version of Safari. It's fine on my local version, but not on the intended server. At present I am putting this down to Safari's cache, since every other browser displays it fine.

If you click on either WEB DEVELOPMENT, IDENTITY, or DESIGN links in the box to the left, you should get something that looks like this:

http://c-o2.net/correct.gif

Instead I am getting something like this:

http://c-o2.net/incorrect.gif

... Can anyone verify this please?


This site was meant to take 2 weeks. I've finished it after 6. It's been a great learning curve. I originally set out for a table-less design. However, CSS just could not do what I needed (the 10px white border around the edge of the screen). It's XHTML and CSS validated.


----------



## uoba (Oct 18, 2003)

UPDATE:
Just noticed that perhaps some files didn't upload correctly via FTP. Mainly example images (you may get a few blank pop-ups).


----------



## Trip (Oct 18, 2003)

Hey, that's a really nice site! Great job!!!


----------



## Arden (Oct 18, 2003)

It looks pretty good... IE, however, has a couple problems, as you can see in the screenshot.


----------



## Arden (Oct 18, 2003)

Netscape, on the other hand, rendered the page perfectively.


----------



## mr. k (Oct 18, 2003)

Looks great, but uoba - One way to get a 10px white border is to give the body element a border definition - but I bet you tried that already.  The site looks great!  And I can confirm that bug with the two items spaced too far apart.


----------



## dlloyd (Oct 18, 2003)

uoba, the text in question doesn't appear in Safari for me period


----------



## Arden (Oct 19, 2003)

Try this in your style sheet, what Mr. K is saying:

```
div {border: solid 10px white;}
```
Also, if you set the size of a div and you have text that takes up more space than that size, it will flow out of the div and look very strange, so in these cases it's best not to set one dimension for the div if you want to prevent this.


----------



## uoba (Oct 19, 2003)

Unfortunately, as simple as it may sound, I tried this white border 1 million different ways to get it to work how it should.

I'm gonna try one more time today, but I doubt anything other than what I've done will work.

It had to scale with the page, and, not show any scrolls. Which, by the way it looks you'd think that would be reasonable (a simple white body border or div border), does not work (due to the box model problem whereby borders and padding, margin adds to the total width or height of an element).

Also, I'm aware of the IE5 for Mac problems, unfortunately it's going to have to be a trade off (I can probably fix the badly positioned divs, but not the scrolling page). Thanks for the images arden.

And thanks guys 


UPDATE:
Nope, the body border won't work. To get the border to edge of the page, you need to specify it as 100% height and width. However, this is fine until you add a 10px border, or margin, since, it adds those 10px's to the 100% width/height. This makes the page go beyond the browser.


----------



## uoba (Oct 19, 2003)

Back to my original problem of the navigation links misplacing in Safari. This is a strange one. Here is the exactly the same site http://c-o2.net/co-ordcom2004/index.html on my development server (my G4 in my studio). It's the same site I've uploaded to the ISP's server!

My thinking is either some of the files got corrupted via ftp upload, or that their perhaps is a permissions problem, or something different about the ISP's server (which on spec, doesn't seem too dissimilar to mine (Apache)).


----------



## Darkshadow (Oct 19, 2003)

Here uoba, here's a page that does the 10px borders with just a div.

The only thing about that one is that the div won't go to the bottom of the page like the table does.  Perhaps someone else knows how to, I haven't ever tried to make any element the size of the page and I couldn't with this test when I tried.

Border Test


----------



## uoba (Oct 19, 2003)

This has been the general problem, loads of different ways, but they just lack that last bit needed to make what I want. Thanks anyway. I'm happy to use the table as it is and wait until the browsers catch up with CSS specs.


----------



## dlloyd (Oct 19, 2003)

Gosh guys, you've been doing it the hard way!
uoba, try one of these:

```
body {
margin: 10px;
}

OR

body {
padding: 10px;
}
```
Either one of those SHOULD work, it shouldn't make any difference which one you use. I personally would use the MARGIN version, but it doesn't matter


----------



## uoba (Oct 19, 2003)

Apparently you have to use:

```
body {
margin: 0px;
padding: 0px;
}
```
Because Mozilla/NS uses padding for the body margin, and IE uses margin for the body margin (or is it the other way round).So you have to specify both in the same body style for it to work successful on both browser types. (Actually just tested this and without either one of the above attributes they both work fine, maybe it's for older IE and NS browsers).

The fact is, I need a grey background with a white border. The border is to sit exactly 100% wide and 100% high, producing no scrollbar. The closest I have come CSS wise is:

```
body {
margin: 0px;
padding: 10px;
background-color: #CCC;
border: 10px solid #FFF;
}
```

But, it will not extend 100% page height. As soon as you specify the 100% body height/width, it goes beyond the browser screen (because it adds the padding and border width to the 100% values).

As mentioned, I've given up on this issue, mainly because the way it works is fine, and validates. I've even been on about 5 other CSS/code specific forums, and no one had an answer (except to help find the current solution). The only browser that it refuses to work in is IE5 for the Mac. But I can live with this trade off.


----------



## uoba (Oct 19, 2003)

I've fixed the minor errors (missing example images and Safari bug).

Plain and simple (but I still manage to do it! )... the text case in the html didn't match that of the css name, ie:

an image being called rtIDScrn1.jpg in CSS was being called as rtidscrn1.jpg in the relevant HTML. All the problems where stemming from this reason!


----------



## mr. k (Oct 19, 2003)

Yeah, the whole case sensitive thing is one of the hardest errors to correct in css.  and about your dilemma uoba  - I made a mockup that gives a certain border on the edges of the viewport and have tested it in safari mozilla and ie5mac, and it works.  I just used a little css magic!  not that having one table in your site is such a big deal, I just felt like challenging myself a little.  My webserver is down right now (because whenever my dynamic ip lease runs out the router fowards port 80 to the wrong gd computer :b) but I'll get it back up in a minute and if you have any questions just fire away.
edit - forgot the address...
http://kao.sytes.net/tmp/test/kao/viewport.html


----------



## Darkshadow (Oct 19, 2003)

Heheheh...I dunno if you did the same thing I did, mr. K (as your site still doesn't load yet), but I did come up with a solution too.

So here ya go, 10px borders without using a table.  Same address as above...guess I'll post it again to make it easy.

Borders Test


----------



## uoba (Oct 19, 2003)

Still can't see yours mr. K...

Darkshadow, guess which browser your example doesn't work on? 

IE6 for PC! I thought you'd got it for a minute there  IE6 particularly doesn't like the bottom positional attribute (which is a pain 'cause it's so good!)

Here's what you get:


----------



## Darkshadow (Oct 19, 2003)

Sheesh, you just can't win. 

That should work fine, though. IE must be doing something weird... 

That doesn't help you out any, though.


----------



## uoba (Oct 19, 2003)

If it's not one browser causing a problem it's the other. I'm particularly annoyed about IE's lack of support for the bottom attribute.

If only everybody was using Safari


----------



## Darkshadow (Oct 19, 2003)

That would be nice.

Try it again...I changed the CSS slightly, it might work better...or it might be worse.  Who knows?


----------



## uoba (Oct 19, 2003)

Nope, exactly the same! 

Don't worry about it, I spent 4 solid days looking into this, staring at a grey box with white borders the whole time! It drove me mental. I stumbled across the table way eventually (since, it had to validate, you couldn't do the normal table tricks either).


----------



## dlloyd (Oct 19, 2003)

Heh, who cares about IE? (j/k).
 I personally am designing my site to XHTML Strict, and screw compatibility. I understand that this isn't an option for most people though


----------



## Arden (Oct 21, 2003)

Uoba, if your site's aim is standards, then you should also aim for compatibility across everything possible, which may mean creating browser-specific external stylesheets to control the way that a certain browser displays something.  I know, I know, it's a pain in the ass...


----------



## uoba (Oct 21, 2003)

I know, you're right, I will do it arden. As soon as I find a way of feeding a stylesheet to IE5+ Mac!

Any suggestions?


----------



## Cat (Oct 21, 2003)

> I personally am designing my site to XHTML Strict, and screw compatibility.


 I'm leaning towards this option too ... and then put a sign up when someone tries to access it with IE that says "Your browser is outdated, download an update now: click here."  How many people could we switch this way?


----------



## mr. k (Oct 21, 2003)

The whole browser upgrade campaign was years ago cat  that's mean!  Just let the site look decent in IE, you can style with stuff IE just doesn't get.  I stopped testing my work in IE pc recently - Mabye a production site would get tested though.
And arden - the point of having one standard is so that every browser renders the same thing identically - not so you can make 5 different sheets to serve 5 different browsers 
And why not use xhtml strict?  It's not much harder then transitional one you learn it, and it's almost identical to xhtml 2.0 which will be a big jump from just xhtml 1.  I use the 1.1 doctype!


----------



## uoba (Oct 21, 2003)

I would love to design in strict. In fact, my next site on the list (a font site) will follow this route (it won't need to be as fancy as many of the sites we do). 

However, I've hit a brick wall with one browser (IE5+ Mac). I am unfortunately going to have to look for a detection script for this and feed it another CSS file. 

I wouldn't normally bother, but I have a few old acquaintances and clients who work in the design industry, so, yep, they are probably still on OS9 IE5+.


----------



## Cat (Oct 21, 2003)

I too have problems with my homepage and IE on both PC (5&6) and Mac (5).
If you find a solution, please post! I have tried some workarounds, but nothing seems to work ...


----------



## uoba (Oct 21, 2003)

Hey Cat, you studied Husserl! Great. I am studying Philosophy at present (not Degree level but will hopefully one day!)

When I get time I'll have a look at your site (maybe tonight).


----------



## Cat (Oct 21, 2003)

Thanks uoba!  Guess what I was thinking to use as an optional theme for my site ...


----------

