My CS:S clan, [TGM], is going to get a website soon. I have taken it
upon myself as the founder and least artistically retarded (that I know
of) to design the layout. I fired up PS and looked up a tutorial...
long story short, my third attempt is the only one I don't think is
complete garbage. It's not quite done, but I'd like to know what you
guys think I could improve on in it before I start going crazy and
making it so uber-detailed that its crap. :biggrin:

http://i3.photobucket.com/albums/y80/Naklajat/layout03.jpg

---

o

Can someone explain this trend of having an overtly large banner at the top? Unless you plan on putting some navigation up there it'd be a good idea to make it smaller.

Personally, I think, navigation at the top or bottom (and since the bottom doesn't make much sense most times) is more intuitive and in general uses the space better than a left or right navigation. Just because it's intuitive to scroll up and down ... and not left to right, so, that potentially makes it so the navigation, which is suppose to be the visitors buddy, starts cutting into the content.

It's only when you get to fairly high resolutions (1600) that the content usually doesn't outweigh it as much, but most people don't run on 1600 :smile:

The colors are bland. Try more variations.
Usually, as a rule of thumb, you pick three or four main colors to stick with, make sure they blend together, but are at different points on the spectrum. One of which is background. Silver or Gray backgrounds are not too bad. Pretty easy on the eyes. But, you definitely need color variation (However, that could be done through links and text)

I would suggest, to finish making a static image of what a generic page will look like. Text and all.

It looks pretty though. Just not sure about how functional it can really be. Do you actually plan to use all that sidebar space? If not, find a better use for the area.

---

Blame it on Microsoft, God does.

Exactly the kind of critique I was hoping for :smile:

I've been working on something much different in layout, taking
your suggestions into consideration. I'll post again when I've got that
done. Right now I mainly need practice and as much
input as possible. Thanks

---

o

Dont rely on images. The best sites are often 90% code

---

My Pit

Yes, images are slow.

Add that to your check list.

---

Blame it on Microsoft, God does.

The site isn't going to be very complex, just 6 pages and a phpBB
forum. Home/news, roster, a 'join' page, our league stats,
about/contact, and links. So far it looks like all of the images
together will not break 60KB.

I'll get the style sheet done then post a pic of what this layout looks like.

---

o

Doing it as "code" is dynamic. It makes it very easy to change something visually. And, I imagine, there will be admin access, member access, and guest access. If you're not to reliant on images, they can all have different themes and stuff like that.

Not that I'm suggesting that exactly. But, Admins usually have different abilities, so it'd make sense for them to have differences in their interface.

Also, for my Software Engineering course we made an online library site and it consisted of maybe 8 pages. So, that has no influence on whether the site is complex or not.

SnarkPit appears to be less than ten pages or so. But it's all dynamic content so it seems like more.

---

Blame it on Microsoft, God does.

The most I really know about making web sites dynamic is CSS. I don't
know how to do the kind of stuff you're talking about, but I'd like to
learn. :biggrin:

At the same time, I don't want to make this particular site more
complicated than it has to be. Most of the content is going to be on
the forum... now that I think of it I've seen several sites with the
majority of their content on the forum end up with major headaches
whenever something went wrong with the forum. There is no real deadline
for this but I'd like to have the site functional in a week or two. So
yeah, if you know of some good online resources I would appreciate it
very much.

http://i3.photobucket.com/albums/y80/Naklajat/layout05_demo.jpg

Looking at it now it seems kind of bland. I think I'll try spicing the buttons up.

Edit:

No, its not the buttons... its the middle stuff. blah.

---

o

Oh yeah. One more thing:

DON'T CHANGE STYLES.

You pick one: you stick to it. Don't keep changing the navigation or page layout, that's annoying as hell. Also, most people get confused when their interface changes suddenly.

You'd use PHP and JavaScript and stuff like that to get dynamic content. CSS isn't dynamic ... at all. It's completley static.

---

Blame it on Microsoft, God does.

I recommend against designing your layout in Photoshop, because it will
encourage you to design in ways that cannot be coded effectively (at
least, not by you). It's better to start with content and then
organise your presentation via CSS. That way you are never
extending your task beyond your ability!

Let me give you an example of how working in PS is bad for websites:

In your latest test, you have diagonal nav links. Why? Presumably
because you wanted to make your site stylish, and you couldn't think of
anything better. But it is impossible to create those links without
using an image map. Using an image map creates two problems:

• Reduced accessibility
• Increased work for you

You will need to create the images. You will need to determine the
coordinates. If you want to add or change a link, you will have to
adjust these accordingly.

Alternatively, you could just choose a straightforward horizontal or
vertical navigation bar. This should be created from a simple
unordered list ( [list]
), and styled with whatever borders,
colours, or reusable background images you like. Your code will be clean, flexible, and accessible.

Or you can try to transfer your PS vision to the web :/

If you don't believe that a simple <UL> can look good, then try this: http://css.maxdesign.com.au/listamatic2/index.htm

Also read this for a good summary:

http://www.meyerweb.com/eric/talks/2003/commug/commug.html

CSS isn't dynamic ... at all. It's completley static.

Not true.

Both javascript and CSS can contribute to the dynamic elements of a web
page (the so-called DHTML). There is some overlap between the
capabilities of the two, although javascript is by far the more
powerful.

Conceptually, a web page can be divided into three layers:

<ul>
[*] The content layer
</li>
[*] The presentation layer
[*] The behaviour layer
[/list]

Separation of these three layers is desirable. The HTML should
contain the content, CSS should control the presentation, and
javascript should control the behaviour.

But CSS can also control some of the behaviour, and sometimes it's more
elegant than javascript (for example, pure CSS rollover links).

What should never happen is this: behaviour or presentation sneaking into the content layer (HTML).

Dynamic means it can be changed at run time. So, no CSS (unless defined in a write command out of js or php, in which case, the js or php is dynamic) is not dynamic.

The "dynamic" part of DHTML is the javascript. :razz:

Roll overs and such aren't dynamic. Anything pre-defined isn't dynamic. It's static. That's what the words when regarding programming languages mean.

I guess you might be able to say they're dynamic because it looks better than normal html only pages? But that's a thin argument.

Working in PS is fine if you keep a grasp on your limitations. (Most people don't, I guess)

Leaving all performance to JavaScript would make a mighty slow site. JavaScript should have calculations and things only JS (or some other more complex language) can do. So, at times, saying js is the "behavior" I suppose is a big statement. Which can be argued.

---

Blame it on Microsoft, God does.

When I make a web page, I'm more interested in user experience than what generates the experience.

Consequently, I consider any part of the page that reacts to user
action to be part of the behaviour layer. Rollovers are an
example.

Does it change when I do this? If so, then it's part of the behaviour layer. Rollovers change: their appearance changes upon user action.

I suppose there is a useful distinction between "responds to user
action" and "can be changed at run time". Thus, strictly, I
expect you are right when you say that DHTML = javascript. But
for the most part, I don't care about that :razz:

Of course, you always get grey areas. Are rollovers part of the
presentation or the behaviour? Both. Perhaps, therefore, it
should not be surprising that they can be accomplished using either CSS
or javascript, or a combination of both.

Yeah, but, if you distinct it that way: what if you changed all the styles of links to exactly what a normal link looks like ... you can do it, and it's still using the CSS definition ... would that still be dynamic, even using your definition of it being a user interface element? (I didn't think so either :smile: )

But, that's just links.

I would hope most people who make pages are mainly concerned with the user experience ... however ... (not in this case, I imagine) ... the rest of it (behind the scenes) is very important as well. Because it doesn't just deal with this paper thin level called the user interface.

The user interface, honestly, is the least "intensive" portion of a web page. Making one "interface dynamic" by using CSS (Let's call it that? :smile: ) can completely change the entire layout and everything of the site: it's a front end.

Anyway. For the most part: we agree. However, you should be well aware that the user doesn't want their information leaked :razz: Also, you don't want to allow input fields to allow access to the system the site is running on!

Also, why would you ever use js to define link styles? Just because that'd be "slower". CSS is just a list of definitions, so it's real fast. JS has to be "ran". PHP is technically slower ... but more secure (since it runs server side). I believe it's a little more efficient as a language, but I could be wrong there. (Or you could just use a sledgehammer and implement it all in Perl or something like that)

---

Blame it on Microsoft, God does.

Yeah, but, if you distinct it that way: what if you changed all the
styles of links to exactly what a normal link looks like ... you can do
it, and it's still using the CSS definition ... would that still be
dynamic, even using your definition of it being a user interface
element? (I didn't think so either :smile: )

If I make all the link styles identical, then nothing changes. So
no, they are not dynamic (or "dynamic", if you prefer). But if I
adjust the styles, so that the appearance changes on hover, then they
are "dynamic". No inconsistency there in my "definition".
From a technical point of view, both scenarios are the same; from a
user experience point of view, they are different.

Anyway. For the most part: we agree. However, you should be well
aware that the user doesn't want their information leaked :razz: Also, you don't want to allow input fields to allow access to the system the site is running on!

Er..... Why would I want to do this, and what has it got to do with anything else?

Also, why would you ever use js to define link styles? Just because
that'd be "slower". CSS is just a list of definitions, so it's real
fast. JS has to be "ran".

Yes, I certainly prefer using CSS for exactly that reason (plus less
code to handle, and I'm not really a programmer). But what if you
want to do something like this with your links:
http://www.gazingus.org/html/menuExpandable3.html ?

Okay, I've dropped photoshop (and tables) out of the layout equation,
and the site design I'm currently working on looks neater and more
professional if I do say so myself. The only real problem is that it
shows up differently in IE and Firefox, but since it looks similar its
not really a big problem. The most noticable difference is IE's refusal
to display my logo PNG with #660000 as most of the image with the
correct color. Now I'm trying to figure out how to add dynamic content
like news posts, a list of members with profiles, and a clan
application.

Thanks for all the help guys!

---

o

? quote:
Er..... Why would I want to do this, and what has it got to do with anything else?

You wouldn't want to do that. That's why I said it.

If you accept input from a user, you're setting your self up. Something people should be aware of is an input buffer. You can input text, into a form online, and if the site isn't checking the input for validation (which happens a lot) the data, no matter what is there, will be written to memory. You can do an overflow (write more than the site will use) and all of it will be stored in memory.

This means someone could fill up the buffer with garbage, then input some asm code to open a terminal to the computer.

There's also other things that can be done through buffer overflow, but none as harmful as allowing access to the server!

Obviously, a lot of people don't know about this because they think it's all taken care of or something like that. There are safety checkers and stuff on most servers ... but you should still check your input. Why take the risk?

It's a easy way to hack a site.

A reason you should limit tries is someone could load up a key generator ... based on your sites password rules ... and find the key for an administrative account on the site (assuming the site is large enough to warrant one).

You should note, I'm putting a distinction on the implementation level, which is where any web developer or programmer of any kind would put the distinction ... that's the big one.

There is really no reason to focus ALL of your energy on the User aspect, you have bigger things to worry about. Sure, UI is important. But, it's changeable in a blink of the eye.

If there's a "dynamic" link set and ... just because visually, not code wise, it looks the same is suddenly isn't ... "dynamic"? Well that's a flake way to categorize it! Why isn't it? because it looks the same? That means nothing to the person developing it, the UI can be changed. The extra data is still there and everything, so I think that should still be considered "dynamic" ... even though we're using the term incorrectly :razz:

I don't think people should design the site strictly on layout ... I know that sounds weird, but, the layout is BS compared to the middle ground stuff.
User interfaces can change.

By the way, that's a menu. Even though they are links, it's considered a menu. It's even categorized that way. But, all the JS is doing is saying what elements to hide and on what event ... the CSS is still static and saying what the colors, widths, and all that visual stuff is.

Baron, dynamic content = Scripting language. If it's something ... crucial like passwords, or personal information, use something like PHP, since it is executed server side. JavaScript is executed client side, which is good for little interface things, or unimportant counters (popup windows, menus, clocks ... etc)

If you want a database, that's getting into a little more work. And I would definitely suggest PHP, because the security, efficiency, and effort are all pretty decent trade offs between one another. (As opposed to using something like C with a web-interface: secure as you want it to be, hard to implement)

---

Blame it on Microsoft, God does.

I'm going to close my discussion with Crono because it is becoming
increasingly technical and irrelevant. If we carry on like this
it will be a case of "who can show off better", and I don't expect to
win.

Okay, I've dropped photoshop (and tables) out of the layout equation,
and the site design I'm currently working on looks neater and more
professional if I do say so myself. The only real problem is that it
shows up differently in IE and Firefox, but since it looks similar its
not really a big problem. The most noticable difference is IE's refusal
to display my logo PNG with #660000 as most of the image with the
correct color. Now I'm trying to figure out how to add dynamic content
like news posts, a list of members with profiles, and a clan
application.

Thanks for all the help guys!

Well done for making the switch away from tables :smile:

Crono can help you with the dynamic content. This is not my area.

As for using PNG images -- IE has problems with them.
Specifically, you can't use alpha-channel transparent PNGs in IE.
That's a fancy way of saying you can't get a nice "image fits on any
background" effect in IE.

Actually, you can. You need a bit of javascript. Create a
text file, rename it "pngfix.js", and put the following text inside
it. Then add this line inside the <head> of you HTML:

<!--[if gte IE 5.5000]><script type="text/javascript"
src="pngfix.js"></script><![endif]-->

And here's the script text:

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.

{

for(var i=0; i<document.images.length; i++)

{

var img = document.images[i]

var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

{

var imgID = (img.id) ? "id='" + img.id + "' " : ""

var imgClass = (img.className) ? "class='" + img.className + "' " : ""

var imgTitle = (img.title)
? "title='" + img.title + "' " : "title='" + img.alt + "' "

var imgStyle = "display:inline-block;" + img.style.cssText

if (img.align == "left") imgStyle = "float:left;" + imgStyle

if (img.align == "right") imgStyle = "float:right;" + imgStyle

if (img.parentElement.href)
imgStyle = "cursor:hand;" + imgStyle

var strNewHTML = ""

img.outerHTML = strNewHTML

i = i-1

}

}

}

window.attachEvent("onload", correctPNG);

Bah, I'd recommend against using the "Check spelling" button to the left for anything other than testing the button :sad:

Thanks for the script, but it doesn't fix my problem. I don't have
alpha transparency in the image, IE just won't display the color right.
I'll probably just make a gif since the image is only 748 bytes and is
the only one on the page so far.

Well done for making the switch away from tables :smile:

I'm just glad I didn't finish the site using tables (sloppily) then
have to rework every page when I got tired of my sub-par photoshop
layout :smile:

Edit:

And as for the dynamic content, the host I'm looking at,
ZZHosting offers mySQL and PHP with
both of their plans.

---

o

Sorry, I don't know what the problem is then :sad:

But if a gif works, use it :smile: Although png compression is
slightly better, it hardly matters when you are using small images.

Gollum, I was viewing it more as a discussion ... but okay.

Not much to know about the php aspect (php.net) Other than that ... you'll have to deal with mySQL. That'll be the harder part.

All I can really suggest on those fronts is to make sure you don't make simple exploitable mistakes. :smile: (I know that's a big and open suggestion, but, try anyway)

If you have any specific questions, of course, ask away.

---

Blame it on Microsoft, God does.

I downloaded Opera for testing, and the navigation bar shows up
differently in each browser. I've been playing with just this for over
an hour, and it's getting to be pretty frustrating. I'm going to drop
it for now and get to finishing off the look of the page. If anyone
wants to see the code to see if they know of a workaround/hack/fix I'd
be much obliged.

The problem is with an inline unordered list being used for the
navigation bar. The borders to the left of the links show up
differently.
pic

The relevant code is as follows:

html said:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="main.css" />

</head>

<body>

<!--Container div-->

<div id="container">

<!--banner div-->

<div id="banner">

<h3>Tactical Gamers Militia</h3>

</div>

<!--navigation div-->

<div id="nav">

• Home
• Forums
• Roster
• About
• Contact

</div>

</div>

</body>

</html>

To get it to look right I've been using different 'height' 'min-height'
and 'max-height' values along with different 'padding' values for #nav
li a.

css said:
body{

margin-top: 0px;

text-align: center;

background-color: #666666;

}

**Main Layout Container**

#container{

margin-left: auto;

margin-right: auto;

text-align: left;

padding: 0px 0px 0px 0px;

width: 933px;

background-color: #333333;

}

**Banner Style**

#banner{

height: 60px;

background-color:#660000;

background-image: url(images/logo_small-red.png);

background-repeat: no-repeat;

background-position: top left;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

border: 1px solid #000000;

}

#banner h3{

margin: 0px;

padding: 0px;

font-size: 20px;

font-weight: normal;

text-align: center;

}

**Navigation Styles**

#nav{

min-height: 1em;

max-height: 20px;

background-color: #333333;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

}

#nav ul{

text-align: right;

margin: 0;

}

#nav li{

list-style: none;

margin: 0;

display: inline;

color: #990000;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

#nav li a{

padding: 0em 0.5em 0em 0.75em;

border-left: 6px solid #666666;

}

#nav li a:link{

color: #990000;

text-decoration: none;

}

#nav li a:visited{

color: #990000;

text-decoration: none;

}

#nav li a:hover{

color: #CC0000;

text-decoration: underline;

}

#nav li a:active{

color: #CC0000;

background-color:#999999;

text-decoration: underline;

}

**Content Styles**

#main{

width: 933px;

background-color: #330000;

padding: 5px 10px 0px 10px;

}

.content{

background-color: #333333;

}

those are the relevent parts.

---

o

OK, I'm guessing wildly, but this could be yet another manifestation of
the famous
CSS
Box Model bug in IE (where IE interprets boxes in a way that is
completely wrong). That's why you see the extra space above the bullet
points.The wiki has a few links to workarounds (all of which are ugly).

Alternatively, it might just be trouble with the
line-height
attribute. Try modifying that as shown in that link and see what
happens.

line-height didn't do anything to help it in IE, though it will provide
a way for this to display correctly in Firefox. :smile: It seems kind of
ridiculous that one has to use workarounds and write seperate style
sheets for seperate browsers just to get them all on the same page.

---

o

I'd say make them | and leave it at that. Should use images as little as possible anyway.

But, if you're nit picking about something that like ... you're going to give your self many headaches. Design it specified for one browser ... then go through and make compramises to make it decent in all the browsers you want it to work in.

IE is funky with CSS at times.

---

Blame it on Microsoft, God does.

Damn right - the main reason I've stopped working on my website for the
time being is because IE refuses to acknowledge half the CSS tags I
used to make things show up right :sad:

---

[img]http://card.mygamercard.net/sig/Default/reno84.png[/img]
Designer @ Haiku Interactive | ReNo-vation.net

BLARGH! IE users can suffer.

Crono: they aren't images, they're 'border-left: 6px solid #333333'
Though I just realised if I used an image with dimensions of 6x20 it
would probably work. Which is what I'll try now. :biggrin:

Edit:

The bad news is that it didn't work and I see no plausible way of
making it look the same on all platforms. The good news is I may have
inadvertantly stumbled onto a new treatment for perfectionism:
therapeudic web design! It's so frustrating to try to make it look the
same cross-platform, that you have no choice but to call it done and
move on.

---

o

As Crono said, pixel-perfect design is dangerous. Yet oh-so-tempting...

With list presentation, the following can be useful:

• For the <UL> element, set margin and padding to 0
• Add padding back into the <A> element
• Possibly set the <A> element to "display: block"
• Add borders to everything so that you can see where the boundaries lie between elements
  </li>

I'm pretty confident that your example is achievable without too much
fuss. Read up on various articles about lists from sources such as
A List Apart if you really want to fix it.

It wouldn't be so bad if IE didn't execute code that isn't meant for it.

Like if you put a if statement to check to see if the person is running IE it'll always execute the "else" code. Which, if it didn't do that, no sweat, right? Just make two css definitions. I suppose, you could do it if you did a lot of workaround with variables. Like, don't check for IE through the variable. (I haven't tried this, but feel free to give it a try and let us know if it works)

Get the browser name back, store it in a string variable (through javascript) ... output that value, so you can make sure it's getting written. Try it in other browsers, and make sure the value is what it's suppose to be.

Then, compare the string to what it should be for IE, and set another variable to 1 if it's true. Then check THAT and load the css page you want. The layering of variables is the only way, if any, that I can think of to get rid of this garbage IE does.

You can also do as I suggest earlier, and what Gollum is suggesting now: make it so 'dynamic' about it's placement that'll it'll look the same no matter what. To do that, you have to use things like invisible borders and padding and all sorts of other crap that you really shouldn't need ... if some browser ... not naming specifics ... followed the standards.

Also, I didn't pay any attention to them. Good they're not images.

---

Blame it on Microsoft, God does.

First, note that a lot of position problems can arise because of
differing values on default paddings and margins. How do you know what
the default padding for a [list]
or a

is? Might it not
vary depending on the browser?

You can save some hassle using a global reset. This resets all elements to default values that you choose. I use:

• {

font-size: 100%;
line-height: 1em;
margin: 0;
padding: 0;
}

The * is the universal selector. This selects every element.

I know of three ways to serve different style sheet rules to IE:

<ul>
[*] Browser detects plus javascript. I believe this is what Crono describes above.
[*] CSS hacks
[*] Conditional comments
</li>
[/list]

Conditional comments, I believe, are by far the best. Let's look at all three:

Browser detects and scripting

This
will work if you get your scripting right, but it's unnecessary.
Scripting, as Crono pointed out earlier, is slower than CSS and should
be avoided when a pure CSS solution is available.

Therefore, you should choose one of the other two methods.

CSS hacks

IE
does not understand some of the CSS selectors, and you can use this to
hide rules from it. For example, IE does not understand the child
selector "parent>child":

:body {color: red;}

html>body {color: black;}

This
CSS will cause your web page text to be coloured black in all major
browsers except IE, which will have red text instead. How does it work?

Well,
in CSS later rules overide earlier ones. Both rules set the text colour
of the <body>, but the one that comes second will have priority.
This second rule selects every <body> element (there's only one!)
that is a child (direct descendant) of an <html> element (again,
there's only one!).

In other words, the selectors select exactly the same element: <body>.

But
since IE doesn't understand the child selector ">", it will ignore
the second rule. So only the first rule is seen by IE, and the text
remains red.

But CSS hacks are a bad idea, I believe. When IE7
comes along, a lot of hacks will break; for example, IE7 will
understand the child selector. But IE7 won't fix all the shortcomings
of IE, so you might end up with broken pages! Read http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx for details.

Conditional comments

These,
I believe, are the best method to use. Conditional comments are
conditional statements hidden inside ordinary comments. This means that
only the browsers you target (typically IE) will execute the
conditional statements. Other browsers will treat them like ordinary
comments -- and ignore them.

For example, this HTML will load an extra style sheet just for IE. Other browsers will only get the first stylesheet:

<link href="style.css" rel="stylesheet" type="text/css">
<!--[if gte IE 5]><link href="ie-hacks.css" rel="stylesheet" type="text/css"><![endif]-->

Those orange bits are the conditional comments. You can read about the conditional comments syntax here: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

Let's
recreate the CSS hacks example, but without using any CSS hacks. Here
is the content of the normal style sheet "style.css":

body {color: black;}

And here is the content of ie-hacks.css, which only IE will see:

body {color: red !important;}

The
"!important" means that this rule will overide other rules. Note
that no CSS hacks have been used, so this example will always work as
expected even in future versions of IE (although it's still best to
review the consequences when IE7 comes out; the point here is that
nothing crazy will go wrong).

Would conditional statements work for browsers other than IE? Because
Netscape and Firefox are the ones that don't display correctly, and I
have to set a line-height value lower than the font size to get them
to. In any case I've already spent far too much time and effort on the
little gray bars next to the navigation links.

---

o

Conditional comments can be used to target what Microsoft calls
"downlevel browsers" -- that is, anything other than IE. But they
cannot be used to distinguish between these browsers.

But if Firefox is not displaying correctly, then it's probably your
fault, not the browser's. Firefox almost always interprets code
correctly, because it is highly compliant with web standards.

You could write a browser detection script, but that's a very bad
approach. Web designers used to rely on browser detection, but
nowadays almost all browsers are highly compliant with standards.
The only popular exception is IE. Therefore, the best approach is
to write standards-compliant code, and, where necessary, add a hack for
IE.

The alternative approach: you write trashy "tag soup", then hack
endlessly when different browsers make different guesses how to
interpret it. This painful method used to be the only choice, but
with the ascendancy of web standards you really should not need it.

In any case I've already spent far too much time and effort on the
little gray bars next to the navigation links.

Welcome to the world of web design :smile:

Because
Netscape and Firefox are the ones that don't display correctly, and I
have to set a line-height value lower than the font size to get them
to.

I don't want to sound like a prick, but if Netscape/FF:Gecko is not
rendering something the way you expect, then 9 times of 10 it's your
code that's wrong.

If your Webpage isn't secret, put up the HTML, CSS, and images
somewhere. I'll try to fix it, and I'm sure the more experienced Gollum
and Crono can find out what's wrong.

Edit: Oops, Gollum beat me to it.

I've just started having a go with developing a theme for WordPress, and use the Firefox developer toolbar. The bonus is that it lets you upload files to the W3C page for testing, so it's fairly quick. So far my theme is standards compliant, but typically IE messes up, so I use the following code with two seperate stylesheets to load CSS dependant on the browser:

<?php if (eregi("MSIE",getenv("HTTP_USER_AGENT")) ||
eregi("Internet Explorer",getenv("HTTP_USER_AGENT"))) { ?><link rel="stylesheet" type="text/css" href="wp-content/themes/underneath-the-sky/style-ie.css"/>
<?php } else { ?>

<link rel="stylesheet" type="text/css" href="wp-content/themes/underneath-the-sky/style.css"/>

<?php } ?>

Fairly handy stuff, and I'm sure you could change the "Internet Explorer" bit to "Netscape" if necessary.

---

My site

Nice short script for detecting a browser and serving a different style sheet, but why use scripting at all?

<!--[if IE]><link href="source/ie-hacks.css" rel="stylesheet" type="text/css"><![endif]-->

That may look like scripting, but it's not. Most browsers ignore it completely :smile:

Of course, it cannot select any browser other than IE. But
really, you should not need to serve special rules to other
browsers. They are good enough to look after themselve; IE is the
only problem child :biggrin:

I'm gonna get a geocities site real quick for those who would like to take a look at it.

Done.

http://www.geocities.com/naklajat/

three files at a total of 4.6KB.

We'll also be getting the real site very soon.

---

o

Just a tiny bit of advice. There are many free web hosting sites out there. Shop around a bit before settling for geocities.

---

There is no history until something happens, then there is.

Your grey border is linked to the size of the text in your <a>
tags. Therefore unless this text entirely fills the height of the
containing block, your border will be too short.

I've had a quick play around with the source, but I'm tired and
spending too much time on this so I'd better stop. Sorry :sad:

Again, this SHOULD be possible. But trying to achieve pixel-precision with CSS is not easy :sad:

Thanks for trying Gollum :smile: Its been very frustrating, which is why
I've given up on that particular portion. line-height and the padding
of '#nav li a' alter it, but the main difference I've found is that
gecko renders the text a few pixels further down than IE and Opera.
Since Opera is used less than FF and NS I think I'll just make a
conditional comment for IE and Opera users will get it displayed wrong
:sad:

@UD: Yeah, I didn't realize the ads on Geocities were so bad :/ I was just
going by memory of free hosting, geocities was the first that came to
mind. The ads don't even show up in Opera, which is what I was using at
the time. In any case, like I said we'll be paying for a real site very
soon (within a couple days at the longest). It will start with
hard-coded HTML content, but I'll be working on getting PHP stuff going.

As a side note I now use Opera very often, good browser :smile:

---

o

Death to IE!

Uh, yeah. I haven't had to make anything professionally yet, so, I haven't mucked with the detection stuff.

If I could make a suggestion:

Make the main pages completley static first. And make the site look exactly how you want it to look before you start php at all. Because, php needs to output that code depending on the conditions. It's just easier that way :smile: Should be faster too. I think that's where you're going, but I just wanted to emphasize. (Allowed my CS300 project to be coded and finished in about 10 hours)

---

Blame it on Microsoft, God does.

I feel like an idiot now. I was trying to change too much stuff at once
and never tried just line-height. 'line-height 13' did the trick. I
also changed the text from lime green. :razz:

---

o

Ah, well done :smile: I was looking for a solution where you could
control the size of the text independently of the containing block, but
if you don't require that then no problem.

(Note that the layout doesn't adapt when you increase the text size, but that's another story for another day :wink: )

I just figured out how to make all of the content 95% of the width of
the available screen! And it also sort of adapts to changing the text
size now, though it doesn't look perfect when you do.

#banner{

height: 5em;

font-size: 12px;

}

#banner h3{

font-size: 20;

}

nav styles

#nav{

height: 0.85em;

}

It doesn't display quite right in IE like that, but its close enough and I'm done with it.

---

o

www.arclan.net

mine's covered with pictures ... and a flash menu .. and music is thinking he's gonna take that out rather quick now...

BUT it looks very pretty ;D and professional

---

.else /me ~kill you
www.arclan.net