Member Avatar for Designer_101

Hi

I have a small problem. I have designed this website for internet explorer 7. I didnt think about what it may look like in other brosers or even earlier versions of the same browser.

I downloaded a few and came accross one problem. The navigation bar seems to be pushed across slightly, enough to make it go to the next line. It looks really messy and could really do with a solution.

The website is:
www.psychedelic-rhinos.co.uk

This URL contains screenshots of the website in the different browsers. Hope this helps.


www.psychedelic-rhinos.co.uk/screens.html

If you need some more of the code i have used feel free to ask or alternativly click 'tools / veiw source' on the website.
The stylesheet used is in
www.psychedelic-rhinos.co.uk/images/style.css


Thanks in advance

  • 7 Contributors
  • 22 Replies
  • 119 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for cfajohnson

I have a small problem. I have designed this website for internet explorer 7. I didnt think about what it may look like in other brosers or even earlier versions of the same browser.


If you were coding for IE, why did you use XHTML? IE is the one browser which doesn't understand XHTML, and if it is served correctly as XHTML, IE will not be able to display it. IE can only display it if it is served as text/html (in which case whatever small advantage there may be to using XHTML will be lost).

Use HTML 4.01 strict and make sure there are no errors. Check it with the W3C validator at validator.w3.org.

I downloaded a few and came accross one problem. The navigation bar seems to be pushed across slightly, enough to make it go to the next line. It looks really messy and could really do with a solution.


Don't set fixed widths. Use percentages instead of px.

Member Avatar for essential

Increase the dependability of your stylesheet by using percentage values referencing specific elements in (x)HTML document's instead of absolute width, height, margins and paddings, etc.

And you have the following error in your stylesheet including your actual XHTML document, go and check it!

Member Avatar for Designer_101

Sorry i dont really understand. You say that i shouldnt have used Xhtml in IE. However IE is the only browser i styled it for and it looks fine. ?
I will go through my scripts and use percentages from now on. Although i must admit they do confuse me. The actual width/height ect. depends on other variables which is quite risky isnt it ?

Thanks in advance

Member Avatar for cfajohnson

Sorry i dont really understand. You say that i shouldnt have used Xhtml in IE. However IE is the only browser i styled it for and it looks fine. ?


It usually works, but it has no advantage over HTML since IE parses it as HTML, not as XML/XHTML.

I will go through my scripts and use percentages from now on. Although i must admit they do confuse me. The actual width/height ect. depends on other variables which is quite risky isnt it ?


Much of the time, specifying widths is unnecessary and causes more problems than it solves. Specifying heights is almost always bad.

When you need to specify a width, giving a value in px limits the page to working in a particular size of browser window. If a page has width: 1000px, it will have empty margins when my window is 1200px wide, and will have an annoying horizontal scroll bar when my window is narrower than 1000px.

If the width is specified at, for example, width: 80% with margin: auto, the margins will always be 10% of my window.

If no width is given, the page will always fill the browser window.

Member Avatar for MidiMagic

The problem is twofold:

1. Your line is too long for the browser window, so it wraps.

Use percentages for widths, instead of pixels.

2. You have the IE Incompatibility designed into your site.

The W3C standard places the width and height styles of the box object INSIDE the margin, border, and padding. IE does not obey the standard, and puts the width and height styles OUTSIDE those surrounding styles. Since you set the width of each menu item, they became wider in Firefox, due to the surrounding styles enlarging them.

The secret is to always use zero surrounding styles when you set a width or a height. Nest another tag if you need surrounding styles, so you can force the nesting order of the width and the surrounding styles.

Member Avatar for roryt

ok So when you set the padding for the menu items you used ie. So now you need to set them so they work perfectly in firefox. Then use

.menu_item { padding: 5px; *padding: 7px;}

IE is the only browser that will read the selector after the asterisk. This means you can change this padding until it fits for IE.

Despite what Midimagic says, you won't be able to set that up with percentages.

Good luck!

Member Avatar for Designer_101

ok lol
I appreciate all this advice and it seems to be setting but one thing i dont understand is this :

Despite what Midimagic says, you won't be able to set that up with percentages.

Why not? Surly if i style the whole page with percentages, THEN it will work because its a sector of the '#content' div ??

And if not, is it worth going through changing everything? Should i just add the odd asterisk where IE doesnt agree with my html?

Thanks in advance

Member Avatar for roryt

Been as you have a fixed with layout to your page then setting them as percentages won't help. As far as I can see you have not set a width (which obsviously you can't for <li>'s) or any padding?

You need to set the padding in pixels (as this gives you more control because a single pixel is smaller than 1% of your navigation bar) and then use the * before the padding selector to give you the difference needed in ie.

The idea of the percentage is to allow you to vary the width of elements on your page depending on the users windows size. Now your site doesn't as a whole allow you to do that so there is literally no point using percentages at all.

Even if you went through and changed everything to percentages, no you wouldn't be able to use percentage widths for each menu item because you can't set a width for a list item.

If you change your entire design to include percentages then that will completely change your website??? What is the point of that. It looks good as it is and is perfectly accessable to 99% of your users.

The simplist and most time efficient thing to do will be to go through and add the * in where ie doesn't agree.

Remember if your outer width is set (which yours is) then there is absolutely no point in using percentages anywhere because they will just confuse things. But percentages are a great way of making your site accessable by everyone but take alot more time to implement and it is much harder to make a graphical website this way.

I hope that clears things up a bit!

Member Avatar for cfajohnson

Been as you have a fixed with layout to your page then setting them as percentages won't help. As far as I can see you have not set a width (which obsviously you can't for <li>'s) or any padding?
[snip]
Even if you went through and changed everything to percentages, no you wouldn't be able to use percentage widths for each menu item because you can't set a width for a list item.


Of course you can set a width for a list item.

Member Avatar for MidiMagic

ok So when you set the padding for the menu items you used ie. So now you need to set them so they work perfectly in firefox. Then use

.menu_item { padding: 5px; *padding: 7px;}

IE is the only browser that will read the selector after the asterisk. This means you can change this padding until it fits for IE.

This is a kludge. You can't count on any undocumented "feature" like this (actually a violation of standards). Software changes in either IE or in some other browser will cause it to fail. It also should not validate.

Despite what Midimagic says, you won't be able to set that up with percentages.

Why not? I do it all the time. The only time it won't work is if you mix nonzero surrounding styles with width styles.

Note that the left padding of the ol and ul tags is NOT zero. So to properly set width of these tags, you must nest them inside div tags, and apply the width to the div.

Good luck!

Edited by Reverend Jim because: Fixed formatting
Member Avatar for roryt

In that case yes they are a block level element, HOWEVER the way the <li> tag is used on this site it is inline, so they all display along one line: in this case you cannot set the width.

Have a look at this page:

here

And the source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Setting the width of the LI tag</title>
<style media="screen" type="text/css">
#inline li{background-color: #CCCCCC; display: inline; width: 100000000px; }
#block li{background-color: #CCCCCC; display: block; width: 150px;}
</style>
</head>

<body>
<h1>The width of the &lt;li&gt; element</h1>
<div id="block">
<h2>Block level</h2>
You can change the width to be set.
<ul>
	<li>List item one</li>
    <li>List item two List item two List item two</li>
    <li>List item three</li>
    <li>List item four List item four</li>
</ul>
</div>

<div id="inline">
<h2>Inline element</h2>
Using the &lt;li&gt; element as an inline element is required for this website because he wants to display the menu horizontally.  The only way you can do this AND set the widths is to use them as seperate DIV tags set to float left.
<ul>
	<li>List item one</li>
    <li>List item two List item two List item two</li>
    <li>List item three</li>
    <li>List item four List item four</li>
</ul>
</div>

</body>
</html>

You can see I have set the width of the tags displaying inline to 100000000px and it makes no difference at all.

If you can prove me wrong, i would actually be quite happy because it has caused me an annoyance for a very long time.

Hope that clears it up.

Member Avatar for roryt

This is a kludge. You can't count on any undocumented "feature" like this (actually a violation of standards). Software changes in either IE or in some other browser will cause it to fail. It also should not validate.

What would you do it then? I have no idea how else you can get around it. You will always have the problem of there being different setting places browsers add padding whatever you do. Unless you make a different style sheet for the IE browsers.

Member Avatar for ingeva

What would you do it then? I have no idea how else you can get around it. You will always have the problem of there being different setting places browsers add padding whatever you do. Unless you make a different style sheet for the IE browsers.

I don't use CSS hacks. If I have to make special arrangements for some browsers, I let php decide, and I write a separate class for each browser for the element in question. I have a variable called "$browser", which contains a short name for the browser, like IE or IE7, FF or FF3, OP or OP9, or SA (I don't know version numbers here but this is only an example).

This code is not tested, so there's no guarantee that it's free of errors. The intent is to show my method.

$class= 'class';
if (isset ($browser)) $class .= $browser;

// And the use of the class:
<div class = $class .....  >{div contents here} </div>

.. and then I define the different CSS definitions:

.class { this is the generic class}
.classIE { this is for IE}
.classIE7 { this is for IE7 only}
.classOP { this is for Opera}
.classFF { this is for FireFox}
.classSA { this is for Safari}

The first could be used for everything that is common; the later are used for specific adaptions.

One expression that I particularly like is { display:none} which can hide an element for the browser(s) of your choice.

Member Avatar for roryt

I don't use CSS hacks. If I have to make special arrangements for some browsers, I let php decide, and I write a separate class for each browser for the element in question. I have a variable called "$browser", which contains a short name for the browser, like IE or IE7, FF or FF3, OP or OP9, or SA (I don't know version numbers here but this is only an example).

This code is not tested, so there's no guarantee that it's free of errors. The intent is to show my method.

$class= 'class';
if (isset ($browser)) $class .= $browser;

// And the use of the class:
<div class = $class .....  >{div contents here} </div>

.. and then I define the different CSS definitions:

.class { this is the generic class}
.classIE { this is for IE}
.classIE7 { this is for IE7 only}
.classOP { this is for Opera}
.classFF { this is for FireFox}
.classSA { this is for Safari}

The first could be used for everything that is common; the later are used for specific adaptions.

One expression that I particularly like is { display:none} which can hide an element for the browser(s) of your choice.

I guess that is a similar concept to creating a extra style sheets for different browsers. I guess that is a more symantic way of doing things.

Just more time consuming. Are there many differents in rendering between Opera, FF and Safari? I normally find that once you get the site to work in IE and FF it will work in everything else. If that is the case I would have thought using :

<!--[if lt IE 7.]>
<![endif]-->

would be more efficient?

Member Avatar for ingeva

I guess that is a similar concept to creating a extra style sheets for different browsers. I guess that is a more symantic way of doing things.

Just more time consuming. Are there many differents in rendering between Opera, FF and Safari?

They are very few as long as you stick to W3C standards. I aloways use XHTML Strict and check with W3C. I think I have only used it for one site so far, the most significant being that Opera and Safari can display shadowed text. For FF and IE you can use two texts, one with darker color and with a slight offset to the brighter one, with a small offset.
I disagree that it's more time consuming. On the contrary; it saves you a lot of hassle with hack testing and experimenting.

For Safari and Opera you might want to hide the shadow text so the browser-rendered one will be displayed right.

Example:

.bright, .shadow {

	clear:both;

	display:block;

	color:#40e;

	font-size:1.8em;

	font-weight:bold;

	font-style:italic;

	font-family:CenturionOld, Casablanca, France, Gatineau, Souvenir, script;

	white-space:nowrap;

/*	Only IE */

	filter: Shadow(Color=#002,

                 Direction=135,

                 Strength=5);

/* Safari, Opera */

	text-shadow:#002 .2em .2em .05em;


/* The shadow offset *)
	margin:-1.25em 0 0 -.05em;

}

/* Mozilla, Konqueror */

.shadow {

  margin:1em 0 0 0;

  color: #002;

}

/* Safari, Opera (same class name is used here) */
.shadowOP { display:none; }

The text using the "bright" class is almost identical to shadow,
the only difference being the offset and color. For OP and SA only the bright text is used, since they can generate their own shadow.

Member Avatar for kanaku

In that case yes they are a block level element, HOWEVER the way the <li> tag is used on this site it is inline, so they all display along one line: in this case you cannot set the width.
....
....
....

You can see I have set the width of the tags displaying inline to 100000000px and it makes no difference at all.

If you can prove me wrong, i would actually be quite happy because it has caused me an annoyance for a very long time.

Hope that clears it up.

What about inline-blocks? Will they work?

Member Avatar for MidiMagic

What would you do it then? I have no idea how else you can get around it. You will always have the problem of there being different setting places browsers add padding whatever you do. Unless you make a different style sheet for the IE browsers.

I write browser-independent code:

1. I don't put nonzero surrounding styles (margin, border, padding) in the same tags or styles that contain widths or heights. If I need both, I nest tags, one with sizes, and the other with surrounding styles, in the order I want them nested.

Violating this causes large differences between IE (not following the W3C standard of nesting) and all of the other browsers.

2. I don't expect the page to look exactly the same on all browsers. I accept the slight differences in rendering, instead of trying to smash everything into compliance. So I make sure it renders correctly with the slight variations.

3. I set vertical alignment for table cells. Different browsers have different defaults. Certain other items also have different defaults.

4. I test everything on multiple browsers and different window sizes.

If I really have a "Small Browser Problem," I maximize the window.:icon_mrgreen:

Member Avatar for roryt

My more recent websites validate with XHTML 1.0 transitional with no errors or warnings. But still i have to use hacks but i could do the same with additional style sheets (if i thought it would make a huge difference.)

Do you use tables then? bit old fashioned ;)

Member Avatar for MidiMagic

My more recent websites validate with XHTML 1.0 transitional with no errors or warnings. But still i have to use hacks but i could do the same with additional style sheets (if i thought it would make a huge difference.)

Do you use tables then? bit old fashioned ;)

I use tables when I need to present material in tabular form.

Tables are NOT outdated, just used for the wrong thing (in addition to the correct use). Tables are also not deprecated. Here are the best uses:

- Tables are certainly the proper way to show something looking like a spreadsheet. Tables of numbers and facts are very valid uses.

- I use tables for the placement of blanks and instructions within forms, because this is a form of tabular information.

- I use tables to arrange link buttons in tabular form.

- Although this is not a use condoned by the W3C, I use tables where it is absolutely essential that the structure must stay together if it doesn't fit in the browser window. There is yet no other reliable way to do it that works on all browsers. I usually use this to make sure that pictures stay with the text they belong to, instead of being scattered around by the browser trying to make things fit.

- I do NOT use tables to create basic structures.

The W3C wanted to remove tables from the following uses, because web page readers for the blind tell the row and column number of each table cell. This is confusing in the following cases:

- Creating borders, margins, and padding for the body of the web page, or for some other element. At one time, table was the only way to do it.

- Using tables to break up pictures, to avoid file size limits for servers and uploads.

- Using tables to achieve basic placement of page elements.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.