Snarkpit Forum Index » Art » Web site layouts
Web site layouts
« previous page 1
2
3 next page »
Post Reply
Quote
 Re: Web site layouts
Posted by Naklajat on Fri Nov 11th at 2:54pm 2005

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:
? quoting html
<!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">
<br><h3>Tactical Gamers Militia</h3>
</div>
<!--navigation div-->
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Forums</a></li>
<li><a href="index.html">Roster</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</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.
? quoting css
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



Quote
 Re: Web site layouts
Posted by fraggard on Fri Nov 11th at 3:19pm 2005

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.




Quote
 Re: Web site layouts
Posted by Naklajat on Fri Nov 11th at 4:13pm 2005

line-height didn't do anything to help it in IE, though it will provide a way for this to display correctly in Firefox. <img src=" SRC="images/smiles/icon_smile.gif"> 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



Quote
 Re: Web site layouts
Posted by Crono on Fri Nov 11th at 4:21pm 2005

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.



Quote
 Re: Web site layouts
Posted by ReNo on Fri Nov 11th at 4:35pm 2005

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 <img src=" SRC="images/smiles/sad.gif">




Designer @ Haiku Interactive | ReNo-vation.net



Quote
 Re: Web site layouts
Posted by Naklajat on Fri Nov 11th at 5:01pm 2005

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.

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



Quote
 Re: Web site layouts
Posted by Gollum on Fri Nov 11th at 6:29pm 2005

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
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.




Quote
 Re: Web site layouts
Posted by Crono on Sat Nov 12th at 10:58pm 2005

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.



Quote
 Re: Web site layouts
Posted by Gollum on Sun Nov 13th at 11:16am 2005

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 <ul> or a <p> 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:
? quote:
* {
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:
  • Browser detects plus javascript. I believe this is what Crono describes above.
  • CSS hacks
  • Conditional comments
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":
? quote:
: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:
? quote:
<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":
? quote:
body {color: black;}

And here is the content of ie-hacks.css, which only IE will see:
? quote:
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).



Quote
 Re: Web site layouts
Posted by Naklajat on Sun Nov 13th at 12:20pm 2005

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



Quote
 Re: Web site layouts
Posted by Gollum on Sun Nov 13th at 3:37pm 2005

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.

? quote:
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




Quote
 Re: Web site layouts
Posted by fraggard on Sun Nov 13th at 3:40pm 2005

? quote:
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.




Quote
 Re: Web site layouts
Posted by Loco on Sun Nov 13th at 6:45pm 2005

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:

? quote:
<?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



Quote
 Re: Web site layouts
Posted by Gollum on Sun Nov 13th at 7:21pm 2005

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

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




Quote
 Re: Web site layouts
Posted by Naklajat on Sun Nov 13th at 8:18pm 2005

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



Quote
 Re: Web site layouts
Posted by Underdog on Sun Nov 13th at 8:28pm 2005

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.



Quote
 Re: Web site layouts
Posted by Gollum on Sun Nov 13th at 9:27pm 2005

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 <img src=" SRC="images/smiles/sad.gif">

Again, this SHOULD be possible. But trying to achieve pixel-precision with CSS is not easy <img src=" SRC="images/smiles/sad.gif">




Quote
 Re: Web site layouts
Posted by Naklajat on Sun Nov 13th at 9:41pm 2005

Thanks for trying Gollum <img src=" SRC="images/smiles/icon_smile.gif"> 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 <img src=" SRC="images/smiles/sad.gif">

@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 <img src=" SRC="images/smiles/icon_smile.gif">


=o



Quote
 Re: Web site layouts
Posted by Crono on Sun Nov 13th at 10:56pm 2005

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 <img src=" SRC="images/smiles/icon_smile.gif"> 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.



Quote
 Re: Web site layouts
Posted by Naklajat on Mon Nov 14th at 1:36am 2005

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. :P



=o




« previous page 1
2
3 next page »
Post Reply