25 replies [Last post]
DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

I just read Tyssen's sticky on AP, I have known for some time that I will have to get rid of the APs for my site to be more easibly accessed. I just pointed that out because I know someone would have brought it up.

My problem is that everything is perfect in IE but FF will not display the container div or the iframe. No idea why, I couldn't find anything that seemed to be similar on Google so I thought I would ask the community.

CSS:

/*
#############################################################
Name: Mythic Software
Date: 3-17-2007
Description: Used for my personal site.
Author: Snow Wolf
URL: http://www.mythicsoftware.com
E-Mail: ,
#############################################################
*/

body {
background: #4E5D3C url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bg.jpg);
color: #444;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 0;
}

a {color: #36C;}

a:hover {color: #06F;}

p,blockquote,ul {margin-bottom: 1.2em;}

h1 {font: normal 1.6em serif;}

h2 {
font: bold 1em Verdana,serif;
margin: 3px 0 1px;
}

ul {margin-left: 1.8em;}

blockquote {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/quote.gif) no-repeat;
color: #555;
font: normal 1.4em serif;
padding-left: 22px;
}

blockquote p {padding: 6px;}

/* structure */
.container {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bgcontainer.jpg) repeat-y center top;
margin: 0 auto;
position: absolute;
right: 180px;
width: 680px;
top: 0px;
height: 100%;
z-index: -1;
}

/* navigation */
.navigation {margin: 0 24px;}

.navigation a {
position: absolute;
right: 570px;
top: 75px;
color: #6C7151;
font: normal 1.9em serif;
line-height: 50px;
margin: 0 16px;
text-decoration: none;
}
.navigation a:hover,.navigation #selected {
color: #2C3111;
}

/*Banner Advertisement on the left, Sky format*/
#BannerLeft {
position: absolute;
left: 0;
height: 474px;

}

#BannerRight {
position: absolute;
right: 0;
height: 474px;

}

#BannerTop {
position: absolute;
right: 280px;
width: 150px;
top: 0px;
}

#iFramePositioning {
position: absolute;
right: 0px;
width: 150px;
top: 411px;
height: 100%;

}

#content {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bgcontainer.jpg) repeat-y center top;
margin: 0 150px 0 150px;
text-align: center;
width: 736px;
}

#header
{
position: absolute;
right: 204px;
top: 150px;
}

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}

Index.html


Mythic Software - Test Page






var imgs1 = new Array("img/ads/yourAdHereSky.gif","img/ads/hteSky.gif")
var lnks1 = new Array("www.mythicsoftware.com/advertisement.html","www.healingtree-herbals.com")
var alt1 = new Array("Advertise with us Today!","Healing Tree Herbals, for all of your Pagan needs!")
var currentAd1 = 0
var imgCt1 = 2
function cycle1()
{
if (currentAd1 == imgCt1)
{
currentAd1 = 0
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++
}
window.setInterval("cycle1()",10000)









var imgs2 = new Array("img/ads/yourAdHereSky.gif","img/ads/hteSky.gif")
var lnks2 = new Array("www.mythicsoftware.com/advertisement.html","www.healingtree-herbals.com")
var alt2 = new Array("Advertise with us Today!","Healing Tree Herbals, for all of your Pagan needs!")
var currentAd2 = 0
var imgCt2 = 2
function cycle2()
{
if (currentAd2 == imgCt2)
{
currentAd2 = 0
}
var banner2 = document.getElementById('adBanner2');
var link2 = document.getElementById('adLink2');
banner2.src=imgs2[currentAd2]
banner2.alt=alt2[currentAd2]
document.getElementById('adLink2').href=lnks2[currentAd2]
currentAd2++
}
window.setInterval("cycle2()",10000)




var imgs3 = new Array("","") var lnks3 = new Array("www.mythicsoftware.com/advertisement.html","www.healingtree-herbals.com") var alt3 = new Array("Advertise with us Today!","Healing Tree Herbals, for all of your Pagan needs!") var currentAd3 = 0 var imgCt3 = 2 function cycle3() { if (currentAd3 == imgCt3) { currentAd3 = 0 } var banner3 = document.getElementById('adBanner3'); var link3 = document.getElementById('adLink3'); banner3.src=imgs3[currentAd3] banner3.alt=alt3[currentAd3] document.getElementById('adLink3').href=lnks3[currentAd3] currentAd3++ } window.setInterval("cycle3()",10000)



News.html


#content
{
margin: 0 150px 0 50px;
width: 550px;
text-align: left;
}
body
{

background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bgcontainer.jpg) repeat-y;

}

Sweet!


thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Incomplete DTD, let's get

Incomplete DTD, let's get that fixed up first Wink

Verschwindende wrote:
  • CSS doesn't make pies

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

thepineapplehead

thepineapplehead wrote:
Incomplete DTD, let's get that fixed up first Wink

Lets expand that for the newbie, please. I think your talking about DocType definition but I may be wrong, if so I assume your talking about the links to the images?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

DenKain

DenKain wrote:
thepineapplehead wrote:
Incomplete DTD, let's get that fixed up first Wink

Lets expand that for the newbie, please. I think your talking about DocType definition but I may be wrong, if so I assume your talking about the links to the images?

Quite right, the doctype is incomplete, missing the URI.

Granted, googling for "incomplete DTD" doesn't make any sense, I shoudl have said "incomplete doctype" Wink

Verschwindende wrote:
  • CSS doesn't make pies

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

thepineapplehead

thepineapplehead wrote:

Quite right, the doctype is incomplete, missing the URI.

Granted, googling for "incomplete DTD" doesn't make any sense, I shoudl have said "incomplete doctype" Wink

Could you please point out which instances you are refering to?

Triumph (not verified)
Anonymous's picture
Guru

DenKain wrote:... Could you

DenKain wrote:
... Could you please point out which instances you are refering to?

Well, there's only one per page and I didn't look but it should be the first line.

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

Triumph wrote:DenKain

Triumph wrote:
DenKain wrote:
... Could you please point out which instances you are refering to?

Well, there's only one per page and I didn't look but it should be the first line.

What I was getting at was, are you saying that something like the following would be more acceptable?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Yes.

Yes.

Verschwindende wrote:
  • CSS doesn't make pies

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

Thank You!

Everything was fine with the DTD once I switched out my APs for RPs. The only thing that bothers me now is that the Container is my parent DIV (not for the whole page but for the iFrame and a few other things) and its set to "height: 100%;" but it does not extend all the way to the bottom of the page. That and for some reason the home link is not clickable while it is a child of container. Is there a way to fix that without taking it out of the parent DIV?

I can't wait to leave work and see what it looks like in FF.

Here is my updated CSS, the HTML pages are the same save the DTDs.

/* ############################################################# Name: Mythic Software Date: 3-17-2007 Description: Used for my personal site. Author: Snow Wolf URL: http://www.mythicsoftware.com E-Mail: , ############################################################# */

body {
background: #4E5D3C url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bg.jpg);
color: #444;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 0;
}

a {color: #36C;}

a:hover {color: #06F;}

p,blockquote,ul {margin-bottom: 1.2em;}

h1 {font: normal 1.6em serif;}

h2 {
font: bold 1em Verdana,serif;
margin: 3px 0 1px;
}

ul {margin-left: 1.8em;}

blockquote {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/quote.gif) no-repeat;
color: #555;
font: normal 1.4em serif;
padding-left: 22px;
}

blockquote p {padding: 6px;}

/* structure */
.container {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bgcontainer.jpg) repeat-y center top;
margin: 0 auto;
position: relative;
right: 0px;
width: 680px;
height: 100%;
top: 0px;
z-index: -1;
}

/* navigation */
.navigation {margin: 0 24px;}

.navigation a {
position: absolute;
right: 570px;
top: 75px;
color: #6C7151;
font: normal 1.9em serif;
line-height: 50px;
margin: 0 16px;
text-decoration: none;
}
.navigation a:hover,.navigation #selected {
color: #2C3111;
}

/*Banner Advertisement on the left, Sky format*/
#BannerLeft {
position: absolute;
left: 0;
height: 474px;

}

#BannerRight {
position: absolute;
right: 0;
height: 474px;

}

#BannerTop {
position: absolute;
right: 260px;
width: 150px;
top: 0px;
}

#iFramePositioning {
position: relative;
right: 0px;
width: 150px;
top: 150px;
height: 100%;

}

#content {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bgcontainer.jpg) repeat-y center top;
margin: 0 150px 0 150px;
text-align: center;
width: 736px;
}

#header
{
position: relative;
right: -24px;
top: 150px;
}

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

*sigh*

I just checked in FF and I still have the exact same problem. Its perfect in IE (as long as no one is using 800x600...*sigh*)but the container does not show up in FF.

http://www.mythicsoftware.com/revamp/

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

The validator is still

The validator is still saying "no valid Doctype" along with 14 other errors

It isn't obvious when you see it on 2 lines but there is a space between the first and second parts...

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

In other words, if you were to write it on one line that bit would read
....EN" "http...

Try that and see if it helps. As well as fixing the other stuff of course Smile I know this might seem a bit pedantic - but nothing is going to render correctly until you have a valid Doctype and error free html.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

Woot!

Well, I changed the DTD to HTML 4.01 Transitional to fix my iFrame issue, it validated and all seems well. I will check to see how well it works with FF when I get home.

I know this seems like the easy way out but if it works....

Valid HTML 4.01 Strict

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

you're still missing a

you're still missing a space:

should be

^ SPACE HERE

Verschwindende wrote:
  • CSS doesn't make pies

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

thepineapplehead

thepineapplehead wrote:
you're still missing a space:

should be

^ SPACE HERE

Oh, I have not had time to upload the changes I have made to the source yet as I was at work and a friends house all day yesterday.

Here is my CSS:

/*
#############################################################
Name: Mythic Software
Date: 3-17-2007
Description: Used for my personal site.
Author: Snow Wolf
URL: http://www.mythicsoftware.com
E-Mail: ,
#############################################################
*/

body
{
background: #4E5D3C url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bg.jpg);
color: #444;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 0;
}

a {color: #36C;}

a:hover {color: #06F;}

p,blockquote,ul {margin-bottom: 1.2em;}

h1 {font: normal 1.6em serif;}

h2 {
font: bold 1em Verdana,serif;
margin: 3px 0 1px;
}

ul {margin-left: 1.8em;}

blockquote {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/quote.gif) no-repeat;
color: #555;
font: normal 1.4em serif;
padding-left: 22px;
}

blockquote p {padding: 6px;}

/* structure */
.container {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bgcontainer.jpg) repeat-y center top;
margin: 0 auto;
position: relative;
right: 0px;
width: 680px;
height: 100%;
top: 0px;
z-index: -1;
}

/* navigation */
.navigation {margin: 0 24px;}

.navigation a {
position: relative;
right: 0px;
top: 70px;
color: #6C7151;
font: normal 1.9em serif;
line-height: 50px;
margin: 0 16px;
text-decoration: none;
}
.navigation a:hover,.navigation #selected {
color: #2C3111;
}

/*Banner Advertisement on the left, Sky format*/
#BannerLeft {
position: absolute;
left: 0;
height: 474px;

}

#BannerRight {
position: absolute;
right: 0;
height: 474px;

}

#BannerTop {
position: absolute;
right: 260px;
width: 150px;
top: 0px;
}

#iFramePositioning {
position: relative;
right: 0px;
width: 150px;
top: 150px;
height: 100%;

}

#content {
background: url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bgcontainer.jpg) repeat-y center top;
margin: 0 150px 0 150px;
text-align: center;
width: 736px;
}

#header
{
position: relative;
right: -24px;
top: 150px;
}

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}

Here is my HTML:


Mythic Software - Test Page






var imgs1 = new Array("D:\Data\Personal\MS\img\ads\yourAdHereSky.gif","D:\Data\Personal\MS\img\ads\hteSky.gif")
var lnks1 = new Array("www.mythicsoftware.com/advertisement.html","www.healingtree-herbals.com")
var alt1 = new Array("Advertise with us Today!","Healing Tree Herbals, for all of your Pagan needs!")
var currentAd1 = 0
var imgCt1 = 2
function cycle1()
{
if (currentAd1 == imgCt1)
{
currentAd1 = 0
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++
}
window.setInterval("cycle1()",10000)









var imgs2 = new Array("D:\Data\Personal\MS\img\ads\yourAdHereSky.gif","D:\Data\Personal\MS\img\ads\hteSky.gif")
var lnks2 = new Array("www.mythicsoftware.com/advertisement.html","www.healingtree-herbals.com")
var alt2 = new Array("Advertise with us Today!","Healing Tree Herbals, for all of your Pagan needs!")
var currentAd2 = 0
var imgCt2 = 2
function cycle2()
{
if (currentAd2 == imgCt2)
{
currentAd2 = 0
}
var banner2 = document.getElementById('adBanner2');
var link2 = document.getElementById('adLink2');
banner2.src=imgs2[currentAd2]
banner2.alt=alt2[currentAd2]
document.getElementById('adLink2').href=lnks2[currentAd2]
currentAd2++
}
window.setInterval("cycle2()",10000)




var imgs3 = new Array("","") var lnks3 = new Array("www.mythicsoftware.com/advertisement.html","www.healingtree-herbals.com") var alt3 = new Array("Advertise with us Today!","Healing Tree Herbals, for all of your Pagan needs!") var currentAd3 = 0 var imgCt3 = 2 function cycle3() { if (currentAd3 == imgCt3) { currentAd3 = 0 } var banner3 = document.getElementById('adBanner3'); var link3 = document.getElementById('adLink3'); banner3.src=imgs3[currentAd3] banner3.alt=alt3[currentAd3] document.getElementById('adLink3').href=lnks3[currentAd3] currentAd3++ } window.setInterval("cycle3()",10000)



DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

*sigh*

Well it works perfectly for IE but not for FF. Everything looks fine to me.

http://www.mythicsoftware.com/revamp/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Begin by removing all

Begin by removing all instances of {position: relative;} and any displacement properties (top, left, etc.).

Do not use position relative unless there is compelling reason. Generally, but not always, you do not want to establish an element as "positioned".

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

kk5st wrote:Begin by

kk5st wrote:
Begin by removing all instances of {position: relative;} and any displacement properties (top, left, etc.).

Do not use position relative unless there is compelling reason. Generally, but not always, you do not want to establish an element as "positioned".

cheers,

gary

Alright, if I don't use positioning then how should I arrange it?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Relative position is not a

Relative position is not a tool for layout. You don't need it at all, as I recall from messing with the page. Just remove the property as I suggested, then we'll have a working version to tweak.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

kk5st wrote:Relative

kk5st wrote:
Relative position is not a tool for layout. You don't need it at all, as I recall from messing with the page. Just remove the property as I suggested, then we'll have a working version to tweak.

cheers,

gary

Okay, can't wait to see how this works.

The version you wanted to see is at http://www.mythicsoftware.com/revamp2/

The first version is at http://www.mythicsoftware.com/revamp/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You've got no content, so

You've got no content, so unless height and width are specified, AP element shrink wrap to zero. Floats, too, for that matter.
Background color added for clarity

#BannerLeft {  /*mythicstyle.css (line 74)*/
  background-color: yellow;
  float: left;
  height: 474px;
  width: 100px;
  }

#BannerRight {  /*mythicstyle.css (line 81) */
  background-color: pink;
  float: right;
  height: 474px;
  width: 100px;
  }

#BannerTop {  /*mythicstyle.css (line 88)*/
  background-color: lightblue;
  height: 100px;
  margin: 0 auto;
  width:150px;
  }

.container {  /*mythicstyle.css (line 45)*/
  background: transparent 
              url(http://i159.photobucket.com/albums/t135/mythicsoftware/img/bgcontainer.jpg) 
              repeat-y center top;
  height: 100%;
  margin: 0 auto;
  width:680px;
  }

This works for me.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

Well everything is perfect

Well everything is perfect in IE and mostly so in FF. All I need to know now is how to push the container down to meet the bottom on the page like it does in IE, after that this should be fixed.

I just want to thank you all for your help.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Well, you did tell it to

Well, you did tell it to push off the bottom 90px.

#myContent {  /*mythicstyle.css (line 124)*/
  font-size: 130%;
  margin: 90px;
  position: relative;
  top: 0;
  }

IE doesn't collapse margins correctly. Firefox is displaying what you told it. If IE and Firefox display differently, you should bet the farm that IE's version is wrong—even if it's what you want.

Fix the margin, and lose the position and top properties.

#myContent {
  font-size: 130%;
  margin: 90px 90px 0;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

fixed.

fixed.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Any other problems or is it

Any other problems or is it all good now?

Verschwindende wrote:
  • CSS doesn't make pies

DenKain
DenKain's picture
Offline
Regular
Last seen: 12 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-09-27
Posts: 25
Points: 0

thepineapplehead wrote:Any

thepineapplehead wrote:
Any other problems or is it all good now?

I thought so but I tried to open the site in IE 7 and it looks like crap.

http://www.mythicsoftware.com/revamp2/

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Validate!

Verschwindende wrote:
  • CSS doesn't make pies