Zymic Webmaster Forums > Help With A Site?

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

Morgoth

May 23 2008, 01:51 PM

Hello everyone, I'm back to bug you all with more of my noobity. I am redesigning my old site, and by that I mean that I'm completely replacing it. However, I am having an annoying time with several aspects of it. Mostly, it's conflict between browsers.

http://www.realms-of-renth.com/newsite/index.html

- First, on the IE version, the entire page is placed on the left side of the screen. In the FF version, it's centered the way it should be.

- However, in the IE version it repeats y very nicely, but in FF it doesn't tile at all.

- Under the (as-of-yet unlinked) menu, there is an area where I would like nested navigation to be. I have the text there, but I cannot for the life of me get it to center vertically. It's driving me mad.

- When I attempt to add the footer, it refuses to be shown, or appears at the wrong position vertically. At first I thought this was confusion in my div tags, but I labelled them all and they are pretty organized.

Windows from the zymic chat was kind enough to script a quick php file that determines which browser is being used and provides the correct page, so if anyone could help with solutions for either browser, it would help greatly.

I know it seems like a bunch to ask for, but I'm proud of myself for getting as far as I have, and I have tried fixing everything myself first, mostly to no avail. ANY help would be greatly appreciated!

Thanks.

wozzym

May 23 2008, 03:11 PM

it worked well on safari, but ya did what you said it did on IE. could you post some source code for the footer and maybe more..

Banjo

May 23 2008, 03:23 PM

By viewing your source the start of it didn't have the <html> and <head> tags but it had the closing parts, also iv added this to the start of it.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

So replace your index file with:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Realms of Renth</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div id="container">

<div id="header">
</div><!-- end header -->

<div id="main">

<div id="menu">
</div><!-- end menu -->

<div id="navmenu">
<div id="navtext">
<p><b>- HOME ->  CODEX ->  RACES ->  ASTAR -</b></div>
</div><!-- end nav menu -->

<div id="sidebar">

<div id="topbox"></div><!-- end topbox -->

<div class="project"><a href="#"><img src="images/box.gif" alt="www.realms-of-renth.com"/><br/>www.realms-of-renth.com</a></div>
<div class="project"><a href="#"><img src="images/box.gif" alt="www.realms-of-renth.com"/><br/>www.realms-of-renth.com</a></div>
<div class="project"><a href="#"><img src="images/box.gif" alt="www.realms-of-renth.com"/><br/>www.realms-of-renth.com</a></div>

</div><!-- end sidebar -->

<table><div id="news">

<div id="top"></div><!-- end top -->

<div id="text">
<p><b>May 1 2007, 10:30 PM - Posted by: Morgoth - "Site Construction"</br></br></b> As you can see, the site in in quite the state of disrepair. This is not due to laziness, (Alright, maybe it is, on my part.) but because we are in the midst of designing a brand new site.</p>
<a href="http://img155.imageshack.us/img155/8088/sitescreenil7.jpg"><img border="0" align="Left" src="images/sitethumb.jpg"></a> The new pages will be much easier to navigate, and will be created to focus upon the vast amounts of written information and lore that needs to be catalogued. We also plan to enhance the design, to make it fit the setting of the game more closely. A glimpse of the new design can be had by clicking the adjacent image. Here is some extra text to show just how nicely a paragraph wraps around thumbnail images, making the boxes ideal for visual examples.</p>
<p>Thanks to everyone for your patience, and please stay tuned for future developments.</p>
<h2> - The Realms of Renth Team</h2>
</br>
<div id="divider"><img border="0" align="center" src="images/divider.gif"></div>
</br>
<p><b>May 1 2007, 10:30 PM - Posted by: Morgoth - "Site Construction"</br></br></b> As you can see, the site in in quite the state of disrepair. This is not due to laziness, (Alright, maybe it is, on my part.) but because we are in the midst of designing a brand new site.</p>
<img border="1" align="Right" src="images/sitethumb.jpg"> The new pages will be much easier to navigate, and will be created to focus upon the vast amounts of written information and lore that needs to be catalogued. We also plan to enhance the design, to make it fit the setting of the game more closely. A glimpse of the new design can be had by clicking the adjacent image. Here is some extra text to show just how nicely a paragraph wraps around thumbnail images, making the boxes ideal for visual examples.</p>
<p>Thanks to everyone for your patience, and please stay tuned for future developments.</p>
<h2> - The Realms of Renth Team</h2> </div><!-- end text -->

<div id="bottom"></div><!-- end bottom --> 

</div><!-- end news --></td>

</div><!-- main -->

</body>

</html>

Im not sure if thats the problem or not but it's worth a try.

Valency

May 23 2008, 04:44 PM

It might also be a CSS Problem, Post your CSS here and we'll see what we can do

Morgoth

May 23 2008, 05:08 PM

Thanks guys - I'm commuting home but will post when I get there.

Banjo

May 23 2008, 06:25 PM

You could just view his source for the code, and the css looks ok to center the layout that's how i do mine but i need this

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

in the html document so it will be center in browsers.

Morgoth

May 24 2008, 03:47 AM

Wow, first of all I don't know how the beginning part got cut out of the code, I never even noticed. Good news = after I added that to the top, the IE page centers. I'm still having tiling issues on both though, so here's my CSS:

CODE

body {
background:url(images/bg.gif);
margin: 0;
padding: 0px 0 0px 0;
font-family: "Myriad Pro";
}

#container {
width: 814px;
margin: 0 auto;
background-repeat: repeat-y;
}

#header {
height:163px;
background-image:url(images/header.gif);
}

#logo {
padding: 32px 0 0 30px;
}

#logo a {
color: #232D09;
text-decoration: none;
font-size: 36px;
}

#menu {
width: 814px;
height:44px;
background-color: #6F6750;
background-image:url(images/menu.gif);
background-repeat: no-repeat;
border-left: 0px #221F18 solid;
border-right: 0px #221F18 solid;
}

#navmenu {
width: 719px;
height:25px;
background-color: #6F6750;
background-image:url(images/chainmenu.gif);
border: solid 2px #420C0C;
margin: 0 0 0 45px;
}

#navtext {
margin: 0px 0px 0px 50px;
color: #2B370C;
font-size: 13px;
text-vertical-align: center;
}

#news {
width: 539px;
height:450px;
background-color: #8E7C63;
background-image:url(images/news.gif);
margin: 50px 0px 0px 45px;
background-repeat: repeat-y;
}

#top {
width: 539px;
height:100px;
background-color: #8E7C63;
background-image:url(images/top.gif);
margin: 0px 0px 0px 0px;
background-repeat: no-repeat;
}

#bottom {
width: 539px;
height:50px;
background-color: #8E7C63;
background-image:url(images/bottom.gif);
margin: 0px 0px 0px 0px;
background-repeat: no-repeat;
}

#sidebar {
float: right;
width: 160px;
padding: 30px 50px 0px 0px;
margin: 0;
text-align:center;
}

#sidebar a {
text-decoration: none;
color: #161D03;
font-size: 13px;
}

#sidebar a:hover {
color: #2B370C;
}

#sidebar img {
border: solid 2px #420C0C;
}

.project {
width: 160px;
margin: 15px 0 0px 0;
}

#topbox {
margin: 53px 0px 0px 0px;
width: 160px;
height:19px;
border: solid 2px #420C0C;
background-image:url(images/topbox.gif);
}

h2 {
color: #5E6835;
font-size: 15px;
margin: 20px 0 0 0;
}

#main {
background-image:url(images/bg2.gif);
background-repeat: repeat-y;
}

#text {
margin: 0 30px 0 30px;
padding: 0px 0px 0px 0px;
color: #2B370C;
font-size: 14px;
line-height: 19px;
text-align: justify;
}

#text a {
color: #647C2E;
text-decoration: none;
}

#text a:hover {
color: #4F6300;
}

#footer {
width: 814px
height: 90px
background-image:url(images/footer.gif);
background-repeat: no-repeat;
color: #F8FCF7;
}

#footer a {
text-decoration: none;
width: 814px
background-image:url(images/footer.gif);
height: 50px
color: #FFFFFF;
}

#footer a:hover {
color: #E0F0B9;
}

.separator {
font-size: 11px;
color:#FFFFFF;
}

.clear {
clear:both;
}

#divider {
margin: 0px 0px 0px 75px;
width: 300px
height: 11px
}

I think the tiling is the last major issue to conquer, then hopefully it will be just final touchups.

Jetteh22

May 24 2008, 12:14 PM

Just a little comment on my side

I think you're site is pretty damn awesome.

Did you do all the graphics yourself?

Morgoth

May 24 2008, 04:10 PM

Thanks, that means a lot. Yeah, I did a layout in PS first, which you can see if you click the thumbnail, aand then I tried to make it into a site as accurately as possible. I work at a print shop and I do a lot of concept art for the project, so I get lots of practice.

I should contribute to the design forum here more, I love doing graphic stuff.

Morgoth

May 26 2008, 05:02 AM

Just bumping, still bewildered by the tiling issue.

Jetteh22

May 26 2008, 05:27 AM

What exactly is tiling? the background?

Morgoth

May 26 2008, 01:53 PM

Yeah, the menu where the text is and the page background are both set to repeat-y in my CSS, but they won't expand in any browser.

Banjo

May 26 2008, 06:03 PM

One problem i noticed was

CODE

#navtext {
margin: 0px 0px 0px 50px;
color: #2B370C;
font-size: 13px;
text-vertical-align: center;
}

where it says

CODE

text-vertical-align: center;

that wont work, so you have to use line-height: instead.

In your case it will be line-height: 25px; because thats how hight your menu is.

So change the above code to this.

CODE

#navtext {
margin: 0px 0px 0px 50px;
color: #2B370C;
font-size: 13px;
line-height: 25px;
}

Another thing you can shorted this:

CODE

#main {
background-image:url(images/bg2.gif);
background-repeat: repeat-y;
}

CODE

#main {
background: url(images/bg2.gid) repeat-y;
}

Morgoth

May 27 2008, 03:35 AM

Thanks, that made the line of text center perfectly in IE, though unfortunately not in FF. But it's something at least.

Banjo

May 27 2008, 01:14 PM

Strange, always works for me in FF doing that.

troop22

May 27 2008, 07:32 PM

ok bro...just got home and had time to check your stuff.

There were a few design flaws with cross browser compatibility between IE and FF so i went ahead and corrected them. Along with a few misplaced or missing closing div tags. You can check to see what changes i've made, but I'll save you the headache of finding the most critical error.

DO NOT specify the height for an image if you want a repeated background to work in FF

I've had the honor of finding this out for myself a few years ago, which literally took an entire day.

hehe.

btw.. for footer stuff try checking out :

text-align: center;
vertical-align: middle;

Below is tested and working for both IE and FF.

CSS

CODE

body  {
background:url(images/bg.gif);
margin: 0;
padding: 0px 0 0px 0;
font-family: "Myriad Pro";
}

#container { 
width: 814px;
margin: 0 auto;
background-repeat: repeat-y;
}

#main {
background-image:url(images/bg2.gif);
background-repeat: repeat-y;
}


#header { 
height:163px;
background-image:url(images/header.gif);
background-repeat: none;
} 

#logo {
padding: 32px 0 0 30px;
}

#logo a {
color: #232D09;
text-decoration: none;
font-size: 36px; 
}

#menu {
width: 814px;
height:44px;
background-color: #6F6750; 
background-image:url(images/menu.gif);
background-repeat: no-repeat;
border-left: 0px #221F18 solid;
border-right: 0px #221F18 solid;
}

#navmenu {
width: 719px;
height:25px;
background-color: #6F6750; 
background-image:url(images/chainmenu.gif);
background-repeat: none;
border: solid 2px #420C0C;
margin: 0 0 0 45px;
}

#navtext {
margin: 5px 0px 5px 50px; 
color: #2B370C;
font-size: 13px;
/*line-height: 25px;*/
}

#news {
width: 539px;
/*height:450px;*/ /* DO NOT SPECIFY HEIGHT IF YOU HAV REPEATED BACKGROUND IN FF*/
background-color: #8E7C63; 
background-image:url(images/news.gif);
background-repeat: repeat-y;
margin: 50px 0px 0px 45px;
}

#top {
width: 539px;
height:100px;
background-color: #8E7C63; 
background-image:url(images/top.gif);
margin: 0px 0px 0px 0px;
background-repeat: no-repeat;
}

#bottom {
width: 539px;
height:50px;
background-color: #8E7C63; 
background-image:url(images/bottom.gif);
margin: 0px 0px 0px 0px;
background-repeat: no-repeat;
}

#sidebar {
float: right;
width: 160px;
padding: 30px 50px 0px 0px;
margin: 0;
text-align:center;
}

#sidebar a {
text-decoration: none; 
color: #161D03;
font-size: 13px;
}

#sidebar a:hover {
color: #2B370C;
}

#sidebar img {
border: solid 2px #420C0C;
}

.project {
width: 160px;
margin: 15px 0 0px 0;
}

#topbox {
margin: 53px 0px 0px 0px;
width: 160px;
height:19px; 
border: solid 2px #420C0C;
background-image:url(images/topbox.gif);
}

h2 {
color: #5E6835;
font-size: 15px; 
margin: 20px 0 0 0;
}

#text { 
margin: 0 30px 0 30px;
padding: 0px 0px 0px 0px;
color: #2B370C;
font-size: 14px; 
line-height: 19px;
text-align: justify;
} 

#text a {
color: #647C2E; 
text-decoration: none;
}

#text a:hover {
color: #4F6300;
}

#footer {
width: 814px;
height: 90px;
background-image:url(images/footer.gif);
background-repeat: no-repeat;
color: #F8FCF7;
}

#footer a {
text-decoration: none; 
width: 814px;
background-image:url(images/footer.gif);
height: 50px;
color: #FFFFFF;
}

#footer a:hover {
color: #E0F0B9;
}

.separator {
font-size: 11px;
color:#FFFFFF;
}

.clear {
clear:both;
}

#divider {
margin: 0px 0px 0px 75px;
width: 300px;
height: 11px;
}

INDEX

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Realms of Renth</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
  <div id="main">
  <div id="header"></div>
      <div id="menu"></div>
    <!-- end menu --> 
   <div id="navmenu">
      <div id="navtext">
<b>- HOME ->  CODEX ->  RACES ->  ASTAR -</b>
      </div>
    </div>
    <!-- end nav menu -->
   <div id="sidebar">
      <div id="topbox"></div>
      <!-- end topbox -->
      <div class="project"><a href="#"><img src="images/box.gif" alt="www.realms-of-renth.com"/><br/>
        www.realms-of-renth.com</a></div>
      <div class="project"><a href="#"><img src="images/box.gif" alt="www.realms-of-renth.com"/><br/>
        www.realms-of-renth.com</a></div>
      <div class="project"><a href="#"><img src="images/box.gif" alt="www.realms-of-renth.com"/><br/>
        www.realms-of-renth.com</a></div>
    </div>
    <!-- end sidebar -->
	    <div id="news">
      <div id="top"></div>
      <!-- end top -->
      <div id="text">
        <p><b>May 1 2007, 10:30 PM - Posted by: Morgoth - "Site Construction"</br>
          </br>
          </b> As you can see, the site in in quite the state of disrepair. This is not due to laziness, (Alright, maybe it is, on my part.) but because we are in the midst of designing a brand new site.</p>
        <a href="http://img155.imageshack.us/img155/8088/sitescreenil7.jpg"><img border="0" align="Left" src="images/sitethumb.jpg"></a> The new pages will be much easier to navigate, and will be created to focus upon the vast amounts of written information and lore that needs to be catalogued. We also plan to enhance the design, to make it fit the setting of the game more closely. A glimpse of the new design can be had by clicking the adjacent image. Here is some extra text to show just how nicely a paragraph wraps around thumbnail images, making the boxes ideal for visual examples.
        </p>
        <p>Thanks to everyone for your patience, and please stay tuned for future developments.</p>
        <h2> - The Realms of Renth Team</h2>
        </br>
        <div id="divider"><img border="0" align="center" src="images/divider.gif"></div>
        </br>
        <p><b>May 1 2007, 10:30 PM - Posted by: Morgoth - "Site Construction"</br>
          </br>
          </b> As you can see, the site in in quite the state of disrepair. This is not due to laziness, (Alright, maybe it is, on my part.) but because we are in the midst of designing a brand new site.</p>
        <img border="1" align="Right" src="images/sitethumb.jpg"> The new pages will be much easier to navigate, and will be created to focus upon the vast amounts of written information and lore that needs to be catalogued. We also plan to enhance the design, to make it fit the setting of the game more closely. A glimpse of the new design can be had by clicking the adjacent image. Here is some extra text to show just how nicely a paragraph wraps around thumbnail images, making the boxes ideal for visual examples.
        </p>
        <p>Thanks to everyone for your patience, and please stay tuned for future developments.</p>
        <h2> - The Realms of Renth Team</h2>
      </div>
      <!-- end text -->
      <div id="bottom"></div>
      <!-- end bottom -->	  
    </div>
    <!-- end news -->
	</div>
  <!-- end main -->
  <div id="footer"></div>
</div>
<!--end container-->
</body>
</html>

troop22

May 27 2008, 11:27 PM

On another note, I sure wish I could design like that in PS. Great Job!! Every time I build a temp it just seems so flat....

Morgoth

May 28 2008, 03:34 AM

First, Troop you are a SAVIOR. Thanks for the help, I'm going to go over the code and check out what you did for future reference. Also, thanks for the compliment, I really love designing. If you ever need anything in that area, I'd be glad to help.

And thanks to everyone else who was willing to offer their help. Issue resolved.

EDIT: Here's the finished page's location, I'll be moving it to the main once I link the links and soforth.

http://www.realms-of-renth.com/newsite/index.html

Morgoth

Jun 4 2008, 05:55 PM

Guess there's no sense making a new topic when I could just use this one.

As I said above, the main page is pretty much finished, but now for navigation purposes I'm thinking about adding drop-down menus. I was looking at stock scripts for them, and it seems a choice between the dynamic-drive ones, and suckerfish dropdowns. I'm specifically looking for some that will work with image links, on my old site I could only use text links and it was a pain.

Any suggestions?

Morgoth

Jun 7 2008, 02:39 AM

Just bumping. I don't mean to be a pest, but this is an area I'm really confused with is all. If anybody has suggestions, hit me up on Yahoo: bow_hunter023

Morgoth

Oct 21 2008, 06:37 PM

I'd like to bump this topic with the same question, in regards to my site (Click my sig, or www.realms-of-renth.com )

As I said above, the main page is pretty much finished, but now for navigation purposes I'm thinking about adding drop-down menus. I was looking at stock scripts for them, and it seems a choice between the dynamic-drive ones, and suckerfish dropdowns. I'm specifically looking for some that will work with image links, on my old site I could only use text links and it was a pain.

Could anybody please suggest how to set these up with the links I'm currently using? I have tried this to no avail, but this would really be the icing on the cake for our website.

MUCH thanks to anybody who can answer me.

k.digennaro

Oct 21 2008, 09:06 PM

Just use a drop down menu like you said, here's the script I use, works great, involves a bit of JS but easy to do.

HTML

CODE

<div id="menu">

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Music</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">Discography</a>
        <a href="#">Lyrics</a>
        <a href="#">Learn To Play</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Community</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">Forum</a>
        <a href="#">News</a>
        <a href="#">Street Team</a>
        <a href="#">Affiliates</a>
        </div>
    </li>
        <li><a href="#">Contact Us</a></li>
</ul>
<div style="clear:both"></div>


</div>

CSS

CODE

      #nav
{	margin-left: -1px;
	padding: 0;
	z-index: 30;}

#nav li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial;}

#nav li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 70px; 
	background: #392115;
	color: #d4cebd;
	text-align: center;
	text-decoration: none;}

#nav li a:hover
{	background: #5a0e09;}

#nav div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #d0bb8c;
	border: 1px solid #392115;}

	#nav div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #d0bb8c;
		color: #330000;
		font: 11px arial;}

	#nav div a:hover
	{	background: #766441;
		color: #330000;}

Make sure you add this in between your head tags to link to your JS,

CODE

JavaScript

CODE

// Copyright 2006-2007 javascript-array.com

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;

This will give you a great drop down, it's what I'm putting on my site, currently not completely up but you can see a preview here; http://www.nascentdescent.com/test/index.php

Good Luck,
Kevin DiGennaro

Morgoth

Oct 22 2008, 01:34 AM

Hey Kevin, thanks a lot for the info. I'm going to try it out when I get to work tomorrow, I'll definitely post the results if it works.

Morgoth

Oct 22 2008, 02:14 AM

Hey, just decided to try it out now, this is what I get:

http://www.realms-of-renth.com/test.html

You can view the source of the page to see what I've done. I think it must be an issue with the image links, which is why I've had an issue with some of the other DD's I've tried. Or maybe (hopefully) I've done it wrong?

k.digennaro

Oct 22 2008, 01:39 PM

your JS file isn't right, iono where you got all that other info in there, but all it should have in it is the following.

CODE

// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

Then it should work.

Edit: Here's wat you have, http://www.realms-of-renth.com/dropdown.js notice there's some HTML and CSS in there not sure why.

Here's what it should look like, http://nascentdescent.com/test/dropdown.js

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.