New site ready for launch...

uoba

uoba

Re: member
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.
 
UPDATE:
Just noticed that perhaps some files didn't upload correctly via FTP. Mainly example images (you may get a few blank pop-ups).
 
It looks pretty good... IE, however, has a couple problems, as you can see in the screenshot.
 

Attachments

  • co-ord_in_ie.jpg
    co-ord_in_ie.jpg
    88.9 KB · Views: 8
Netscape, on the other hand, rendered the page perfectively.
 

Attachments

  • co-ord_in_ns.jpg
    co-ord_in_ns.jpg
    85.9 KB · Views: 4
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.
 
Try this in your style sheet, what Mr. K is saying:
Code: 
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.
 
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.
 
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)).
 
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
 
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.
 
Gosh guys, you've been doing it the hard way!
uoba, try one of these:
Code: 
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 :)
 
Apparently you have to use:
Code: 
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:
Code: 
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.
 
I've fixed the minor errors (missing example images and Safari bug).

Plain and simple (but I still manage to do it!:rolleyes: )... 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!
 
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
 
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
 
Still can't see yours mr. K...

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

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:
cssExample.gif
 
Sheesh, you just can't win. :p

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

That doesn't help you out any, though.
 
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 :rolleyes:
 
You must log in or register to reply here.
Back
Top