This is killing me.
Here is my positioning CSS:
/* body block definitions */
body {
margin: 20px;
background: #9A823A;
color: #4C401C;
text-align: center;
padding: 0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:740px;
height:440px;
overflow:hidden;
margin:auto;
}
#hdr {
height: 80px;
background: #4C401C;
color: White;
}
#bar {
height: 10px;
background: #CCB777;
color: #21270E;
border: solid #000000;
border-width: 1px 0 1px 0;
}
#bodyblock {
/* position:relative; */
background:transparent;
background-image: url('../images/joe-birds1.jpg');
background-repeat: no-repeat;
background-attachment:scroll;
color: #333333;
width:740px;
overflow: hidden;
padding:0;
}
#body2 {
/* position:relative; */
background:transparent;
color: #333333;
width:740px;
overflow: hidden;
padding:0;
}
#l-col {
float: left;
height:100%;
background: transparent; /* #dcdcdc*/
color: #27200E;
width: 115px;
}
#cont {
width:613px;
height:314px;
overflow:auto;
align:center;
background:transparent;/* #ffffff */
color: #303030;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height:30px;
background: #4c401c;
color: #EDE7D0;
border: solid black;
border-width: 1px 0 0 0;
margin: 0;
}
The DIVS are applied in this order:
OUTER
HDR /HDR
BAR /BAR
BODY (or Body2)
MENUV /MENUV
CONT /CONT
/BODY
FTR /FTR
/OUTER
so that all seems good to me....
But look at the pages ... don't work in IE or FireFox...
Check HERE. (<!-- m --><a class="postlink" href="http://jtest.stegenga.net/index.php">http://jtest.stegenga.net/index.php</a><!-- m -->)
The only menu link that works right now is Ornithological / then Audubon.
Please help! I've worked so hard on getting the PHP/MySQL crap working that I was hoping this could be up by now!
John
PS - the whole CSS file (yes, its big and needs to be cleaned up!) is in /css/menus.cssYou main problems weren't browser compatibility. They were a missing end-tag for a DIV in your HTMl source and several fatal CSS errors in menus.css. I've attached a revised version of each in the ZIP file below, along with explanations. Your layout now works in the following browsers:
Moz 1.6
FF 0.8
FB 0.7
Opera 7.2
Opera 6.04 (somewhat, but oh well)
IE6/XP
IE 5.5 9x/NT
IE 5.01 9x/NT
EDIT: The menu could use to be a little wider to accomodate Ornithological. I'm not sure what you mean by the "menu not working." Could you be more specific?Originally posted by toicontien
You main problems weren't browser compatibility. They were a missing end-tag for a DIV in your HTMl source and several fatal CSS errors in menus.css. I've attached a revised version of each in the ZIP file below, along with explanations. Your layout now works in the following browsers:
Moz 1.6
FF 0.8
FB 0.7
Opera 7.2
Opera 6.04 (somewhat, but oh well)
IE6/XP
IE 5.5 9x/NT
IE 5.01 9x/NT
EDIT: The menu could use to be a little wider to accomodate Ornithological. I'm not sure what you mean by the "menu not working." Could you be more specific?
Damn. I counted div tags like 4 times. I even printed out the source! Thanks! I'll Download these files straight away!
What were the fatal CSS errrors, other than the notices of the opacity problem??
Thanks a MILLION!
oh, what I mean by menu not working - nothing else loaded but that one set of data!
JohnI discovered the HTML and CSS errors by simply validating them at <!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m --> and <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m --> . It's an easy way to spot invalid CSS and missed end tags in HTML.
If the menus aren't working, as in they are not loading the content: That's a PHP problem. Looking at you source code, I couldn't find any HTML that wasn't being displayed on screen. Sorry
Maybe the PHP forum could help you out
Originally posted by toicontien
I discovered the HTML and CSS errors by simply validating them at <!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m --> and <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m --> . It's an easy way to spot invalid CSS and missed end tags in HTML.
If the menus aren't working, as in they are not loading the content: That's a PHP problem. Looking at you source code, I couldn't find any HTML that wasn't being displayed on screen. Sorry
Maybe the PHP forum could help you out
I did run the HTML validator, it didn't warn me about a missing tag... arrgh.
Oh well. THANKS!
OH, the menus work fine - I've just not loaded the relative tables yet!
Thanks.
You know, the one big thing that you did to fix it - removing the 'position:relative' is what FANG added to help me make the text DARK on the 'opacity filtered' background.
Now if I can figure a way around that!
JohnOriginally posted by Bigjohn
Damn. I counted div tags like 4 times.
This is where indenting of tags, and using XHTML vs. HTML comes in useful.You know, the one big thing that you did to fix it - removing the 'position:relative' is what FANG added to help me make the text DARK on the 'opacity filtered' background.
The filter didn't work over the table IE. Upon visiting it in Moz, Firebird, and Opera, a filter was applied over everything.
Anyway, positioning the table relatively really messed up the table. I should've done more experimenting because the solution for that actually took me about 30 seconds.
Set .normal and .cont to position: relative;
That should do it.
But every other browser still applies the opacity filter, so you get the undesired effect in those browsers.
Instead of using alpha transparency, why not just use the actual colors?
This is where indenting of tags, and using XHTML vs. HTML comes in useful.
Very true, but I understood that the HTML was generated by PHP. Sometimes formatting generated HTML code is more of a pain that it's worth. But when you are developing your layout while it's being written in PHP you really do need to. I'd recommend making static HTML mock-ups of all your pages and get the design working. Then break the layouts up for use in your PHP scripts.Originally posted by toicontien
The filter didn't work over the table IE. Upon visiting it in Moz, Firebird, and Opera, a filter was applied over everything.
Anyway, positioning the table relatively really messed up the table. I should've done more experimenting because the solution for that actually took me about 30 seconds.
Set .normal and .cont to position: relative;
That should do it.
But every other browser still applies the opacity filter, so you get the undesired effect in those browsers.
Instead of using alpha transparency, why not just use the actual colors?
Very true, but I understood that the HTML was generated by PHP. Sometimes formatting generated HTML code is more of a pain that it's worth. But when you are developing your layout while it's being written in PHP you really do need to. I'd recommend making static HTML mock-ups of all your pages and get the design working. Then break the layouts up for use in your PHP scripts.
I'm going to ditch the transparency, since the picture only applys to the first page of the site anyway. I'll just fade the picture myself. A ton of thanks!
I did 'mock up' statically, and clipped much of the static stuff into files that are called through include statements. If you want to look, a modified version of the site will be up tomorrow with more data. I hope to have a 'buy' form working too!
John
Here is my positioning CSS:
/* body block definitions */
body {
margin: 20px;
background: #9A823A;
color: #4C401C;
text-align: center;
padding: 0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:740px;
height:440px;
overflow:hidden;
margin:auto;
}
#hdr {
height: 80px;
background: #4C401C;
color: White;
}
#bar {
height: 10px;
background: #CCB777;
color: #21270E;
border: solid #000000;
border-width: 1px 0 1px 0;
}
#bodyblock {
/* position:relative; */
background:transparent;
background-image: url('../images/joe-birds1.jpg');
background-repeat: no-repeat;
background-attachment:scroll;
color: #333333;
width:740px;
overflow: hidden;
padding:0;
}
#body2 {
/* position:relative; */
background:transparent;
color: #333333;
width:740px;
overflow: hidden;
padding:0;
}
#l-col {
float: left;
height:100%;
background: transparent; /* #dcdcdc*/
color: #27200E;
width: 115px;
}
#cont {
width:613px;
height:314px;
overflow:auto;
align:center;
background:transparent;/* #ffffff */
color: #303030;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height:30px;
background: #4c401c;
color: #EDE7D0;
border: solid black;
border-width: 1px 0 0 0;
margin: 0;
}
The DIVS are applied in this order:
OUTER
HDR /HDR
BAR /BAR
BODY (or Body2)
MENUV /MENUV
CONT /CONT
/BODY
FTR /FTR
/OUTER
so that all seems good to me....
But look at the pages ... don't work in IE or FireFox...
Check HERE. (<!-- m --><a class="postlink" href="http://jtest.stegenga.net/index.php">http://jtest.stegenga.net/index.php</a><!-- m -->)
The only menu link that works right now is Ornithological / then Audubon.
Please help! I've worked so hard on getting the PHP/MySQL crap working that I was hoping this could be up by now!
John
PS - the whole CSS file (yes, its big and needs to be cleaned up!) is in /css/menus.cssYou main problems weren't browser compatibility. They were a missing end-tag for a DIV in your HTMl source and several fatal CSS errors in menus.css. I've attached a revised version of each in the ZIP file below, along with explanations. Your layout now works in the following browsers:
Moz 1.6
FF 0.8
FB 0.7
Opera 7.2
Opera 6.04 (somewhat, but oh well)
IE6/XP
IE 5.5 9x/NT
IE 5.01 9x/NT
EDIT: The menu could use to be a little wider to accomodate Ornithological. I'm not sure what you mean by the "menu not working." Could you be more specific?Originally posted by toicontien
You main problems weren't browser compatibility. They were a missing end-tag for a DIV in your HTMl source and several fatal CSS errors in menus.css. I've attached a revised version of each in the ZIP file below, along with explanations. Your layout now works in the following browsers:
Moz 1.6
FF 0.8
FB 0.7
Opera 7.2
Opera 6.04 (somewhat, but oh well)
IE6/XP
IE 5.5 9x/NT
IE 5.01 9x/NT
EDIT: The menu could use to be a little wider to accomodate Ornithological. I'm not sure what you mean by the "menu not working." Could you be more specific?
Damn. I counted div tags like 4 times. I even printed out the source! Thanks! I'll Download these files straight away!
What were the fatal CSS errrors, other than the notices of the opacity problem??
Thanks a MILLION!
oh, what I mean by menu not working - nothing else loaded but that one set of data!
JohnI discovered the HTML and CSS errors by simply validating them at <!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m --> and <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m --> . It's an easy way to spot invalid CSS and missed end tags in HTML.
If the menus aren't working, as in they are not loading the content: That's a PHP problem. Looking at you source code, I couldn't find any HTML that wasn't being displayed on screen. Sorry
Maybe the PHP forum could help you out
Originally posted by toicontien I discovered the HTML and CSS errors by simply validating them at <!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m --> and <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m --> . It's an easy way to spot invalid CSS and missed end tags in HTML.
If the menus aren't working, as in they are not loading the content: That's a PHP problem. Looking at you source code, I couldn't find any HTML that wasn't being displayed on screen. Sorry
Maybe the PHP forum could help you out
I did run the HTML validator, it didn't warn me about a missing tag... arrgh.
Oh well. THANKS!
OH, the menus work fine - I've just not loaded the relative tables yet!
Thanks.
You know, the one big thing that you did to fix it - removing the 'position:relative' is what FANG added to help me make the text DARK on the 'opacity filtered' background.
Now if I can figure a way around that!
JohnOriginally posted by Bigjohn
Damn. I counted div tags like 4 times.
This is where indenting of tags, and using XHTML vs. HTML comes in useful.You know, the one big thing that you did to fix it - removing the 'position:relative' is what FANG added to help me make the text DARK on the 'opacity filtered' background.
The filter didn't work over the table IE. Upon visiting it in Moz, Firebird, and Opera, a filter was applied over everything.
Anyway, positioning the table relatively really messed up the table. I should've done more experimenting because the solution for that actually took me about 30 seconds.
Set .normal and .cont to position: relative;
That should do it.
But every other browser still applies the opacity filter, so you get the undesired effect in those browsers.
Instead of using alpha transparency, why not just use the actual colors?
This is where indenting of tags, and using XHTML vs. HTML comes in useful.
Very true, but I understood that the HTML was generated by PHP. Sometimes formatting generated HTML code is more of a pain that it's worth. But when you are developing your layout while it's being written in PHP you really do need to. I'd recommend making static HTML mock-ups of all your pages and get the design working. Then break the layouts up for use in your PHP scripts.Originally posted by toicontien
The filter didn't work over the table IE. Upon visiting it in Moz, Firebird, and Opera, a filter was applied over everything.
Anyway, positioning the table relatively really messed up the table. I should've done more experimenting because the solution for that actually took me about 30 seconds.
Set .normal and .cont to position: relative;
That should do it.
But every other browser still applies the opacity filter, so you get the undesired effect in those browsers.
Instead of using alpha transparency, why not just use the actual colors?
Very true, but I understood that the HTML was generated by PHP. Sometimes formatting generated HTML code is more of a pain that it's worth. But when you are developing your layout while it's being written in PHP you really do need to. I'd recommend making static HTML mock-ups of all your pages and get the design working. Then break the layouts up for use in your PHP scripts.
I'm going to ditch the transparency, since the picture only applys to the first page of the site anyway. I'll just fade the picture myself. A ton of thanks!
I did 'mock up' statically, and clipped much of the static stuff into files that are called through include statements. If you want to look, a modified version of the site will be up tomorrow with more data. I hope to have a 'buy' form working too!
John