PDA

Click to See Complete Forum and Search --> : newbie to webs

bj_guitarist
06-25-2007, 09:12 AM
hi

i am having a problem with rendering on different browsers.

my page has a table in the middle that on i.e comes out fine, but on firefox or netscape the table comes out on the bottom of the page. someone told me css is the way to fix this.

i dont want to rewrite my pages. i just want to control the one table in the middle. is it possible to use css to use positioning of a table?
Fang
06-25-2007, 09:19 AM
Yes, but we need to see your document to help.
bj_guitarist
06-25-2007, 09:21 AM
just that part of the code or the entire doc?
bj_guitarist
06-25-2007, 09:28 AM
ok. here it is. its really messy to read. if you want i can clean it up

<div align="center" style="width: 681; height: 248">
<center>
<div align="center">
<center>
<table width="74%" border="0">
<tr>
<td height="1485" valign="top"><div align="center">
<p><font color="#FFFFFF" face="Dracula" size="5"><i><b>R</b></i></font><font size="5"><i><b><font color="#FFFFFF" face="Dracula">AGING
MOB&nbsp; </font></b></i></font> </p>
</div>
<p align="center"><font size="5"><i><b><font color="#FFFFFF" face="Dracula">&nbsp;&nbsp;</font></b></i></font>
<font size="4">For bookings and interviews:
<font color="#FFFFFF">Yu Yang </font>&nbsp;<a href="mailto:yang@rockinchina.com" style="text-decoration: none">yang@rockinchina.com</a>
<font color="#FFFFFF">13701029421</font></font>
<p align="center"><font size="4"> Website info:&nbsp;
<font color="#FFFFFF">Dave<a href="mailto:usa_man_bj@hotmail.com" style="text-decoration: none">usa_man_bj@hotmail.com</a>
</font>
<table width="67%" height="327" border="0" align="center" background="warpics2.jpg">
<tr>
<td width="100%" height="323" valign="top"><div align="center"></div></td>
</tr>
</table>
</tr>
</table>
</center>
</div>
</center>
Fang
06-25-2007, 09:47 AM
Do you have a valid DTD?
Recommend to add this at the top of the document<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
bj_guitarist
06-25-2007, 10:06 AM
im such a novice. haha.

there wasnt one at all!

i added your suggestion to the top of two pages to try out that has the positioning problem i mentioned. it helps the positions but it also causes a different problem.

i have a picture as a header on the top of each page.

after adding your dtd the picture doesnt appear in firefox or netscape.
Fang
06-25-2007, 10:13 AM
Run your document through the validator (http://validator.w3.org/) to clean-up any errors.
docpepper
06-25-2007, 10:19 AM
Obviously with the Doctype etc added if you change your code to this:

<style>
.wrapper{
margin: auto;
width: 681px;
height: 248px;
}
</style>
<div class="wrapper">
<center>
<div align="center">
<center>
<table width="74%" border="0">
<tr>
<td height="1485" valign="top"><div align="center">
<p><font color="#FFFFFF" face="Dracula" size="5"><i><b>R</b></i></font><font size="5"><i><b><font color="#FFFFFF" face="Dracula">AGING
MOB&nbsp; </font></b></i></font> </p>
</div>
<p align="center"><font size="5"><i><b><font color="#FFFFFF" face="Dracula">&nbsp;&nbsp;</font></b></i></font>
<font size="4">For bookings and interviews:
<font color="#FFFFFF">Yu Yang </font>&nbsp;<a href="mailto:yang@rockinchina.com" style="text-decoration: none">yang@rockinchina.com</a>
<font color="#FFFFFF">13701029421</font></font>
<p align="center"><font size="4"> Website info:&nbsp;
<font color="#FFFFFF">Dave<a href="mailto:usa_man_bj@hotmail.com" style="text-decoration: none">usa_man_bj@hotmail.com</a>
</font>
<table width="67%" height="327" border="0" align="center" background="file:///C|/BP Websites/P/Philip Thursby/warpics2.jpg">
<tr>
<td width="100%" height="323" valign="top"><div align="center"></div></td>
</tr>
</table>
</tr>
</table>
</center>
</div>
</center>

That should sort out the positioning for you, although you should try as much as possible to do all your styling in css!

Hope it helps :)
bj_guitarist
06-25-2007, 10:48 AM
will do. thanks
bj_guitarist
06-25-2007, 11:26 AM
i tried that code but it pushed the table down to low part of the page in all browsers...argh!!
Fang
06-25-2007, 11:44 AM
What is the complete document?
bj_guitarist
06-25-2007, 11:55 AM
here it is. i ran it through validator. and it says its not a valid 4.01 strict.
ok i admit i don't know what im doing. and i think some of the errors generated are just related to this doctype entry i made.

i first created this in frontpage but, was adviced to drop that and get into dreamweaver.

I really would not like to redo this whole website again. you can view it yourself at.

http://mob.rockinchina.com

we are a metal band in beijing. thanks so much. if you are ever in china let me know!!!


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


<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Contact us!</title>
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
</head>

<body bgcolor="#000000" text="#990033" link="#990033" vlink="#FF0000" alink="#FFFFFF" onLoad="dynAnimation()">

<table border="0" width="100%" height="224">
<tr>
<td width="100%" height="220" valign="top"> <p align="center"><img src="logo3.jpg" width="359" height="85">
<hr size="1" color="#990033">
<table border="0" width="100%">
<tr>
<td width="16%" bgcolor="#000000" align="center" valign="middle">
<p align="center" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-family: Bloody; color: #FFFFFF" onClick="clickSwapStyle(this)" language="Javascript1.2">
<a href="mp3.htm" style="text-decoration:none" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="color: #FFFFFF; font-family: Bloody" onMouseOver="rollIn(this)" onMouseOut="rollOut(this)" language="Javascript1.2"><font face="Bloody" size="4">MP3</font></a>
</td>
<td width="16%" align="center" bgcolor="#000000" valign="middle"><a href="main1.htm" style="text-decoration:none" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="color: #FFFFFF; font-family: Bloody" onMouseOver="rollIn(this)" onMouseOut="rollOut(this)" language="Javascript1.2"><font face="Bloody" size="4">BIO</font></a></td>
<td width="17%" align="center" bgcolor="#000000" valign="middle"><a href="contact.htm" style="text-decoration:none" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="color: #FFFFFF; font-family: Bloody" onMouseOver="rollIn(this)" onMouseOut="rollOut(this)" language="Javascript1.2"><font face="Bloody">CONTACT</font></a></td>
<td width="17%" align="center" bgcolor="#000000" valign="middle"><a href="pics.htm" style="text-decoration:none" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="color: #FFFFFF; font-family: Bloody" onMouseOver="rollIn(this)" onMouseOut="rollOut(this)" language="Javascript1.2"><font face="Bloody">PICS</font></a></td>
<td width="17%" align="center" bgcolor="#000000" valign="middle">
<p align="center"><a style="text-decoration: none" href="links.htm" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="color: #FFFFFF; font-family: Bloody" onMouseOver="rollIn(this)" onMouseOut="rollOut(this)" language="Javascript1.2"><font face="Bloody">LINKS</font></a></td>
<td width="17%" align="center" bgcolor="#000000" valign="middle"><a href="news.htm" style="text-decoration:none" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-family: Bloody; color: #FFFFFF" onMouseOver="rollIn(this)" onMouseOut="rollOut(this)" language="Javascript1.2"><font face="Bloody">NEWS</font></a></td>
</tr>
</table>
<hr size="1" color="#990033">
<table border="0" width="100%">
<tr>
<td width="100%">
<p class="MsoNormal" align="center"></td>
</tr>
</table>
<table border="0" width="100%" height="1658">
<tr>
<td width="100%" height="526">
<table border="0" width="100%" height="1596">
<tr>
<td width="9%" valign="top" height="1592">
<table width="75%" border="0">
<tr>
<td><iframe src="nav.htm" align="middle" style="bgcolor="#000000" width=100 height=300 frameborder="0" scrolling="no"></iframe></td>
</tr>
</table>
</td>
<td width="113%" height="1592">
<div align="center" style="width: 681; height: 248">
<center>
<div align="center" >
<table width="74%" border="0">
<tr>
<td height="1485" valign="top"><div align="center">
<p><font color="#FFFFFF" face="Dracula" size="5"><i><b>R</b></i></font><font color="#FFFFFF" size="5" face="Dracula"><i><b>AGING
MOB&nbsp; </b></i></font> </p>
</div>
<p align="center"><font color="#FFFFFF" size="5" face="Dracula"><i><b>&nbsp;&nbsp;</b></i></font>
<font size="4">For bookings and interviews: <font color="#FFFFFF">Yu
Yang </font>&nbsp;<a href="mailto:yang@rockinchina.com" style="text-decoration: none">yang@rockinchina.com</a>
<font color="#FFFFFF">13701029421</font></font>
<p align="center"><font size="4"> Website info:&nbsp;
<font color="#FFFFFF">Dave&nbsp;&nbsp; <a href="mailto:usa_man_bj@hotmail.com" style="text-decoration: none">usa_man_bj@hotmail.com</a>
13520817936</font></font>
<table width="67%" height="327" border="0" align="center" background="warpics2.jpg">
<tr>
<td width="100%" height="323" valign="top">&nbsp;</td>
</tr>
</table>
</tr>
</table>
</div>
<p>&nbsp;</p>
</center>
<p>&nbsp;</div>
</td>
<td width="9%" valign="top" height="1592">
<table width="100%" border="0" bgcolor="#000000" >

<iframe src="weekpic.htm" align="middle" style="bgcolor="#000000" width= 200 height=300 frameborder="0" scrolling="no"></iframe>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr size="1" color="#990033" width="90%">
<div align="center">
<center>
<table border="0" width="50%">
<tr>
<td width="12%" rowspan="2"><img src="Fantasy-02-june.gif" width="45" height="62"></td>
<td width="68%" height="40"> <table width="50%" border="0" align="center">
<tr valign="middle">
<td width="16%" align="center" valign="middle"><div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif"><i><a href="MP3.htm"style="text-decoration:none" >MP3</a>&nbsp;</i></font></strong></div></td>
<td width="16%" align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif"><i><a href="main1.htm" style="text-decoration:none">
BIO</a>&nbsp;&nbsp;</i></font></strong></td>
<td width="17%" align="center"><div align="center"><strong><font face="Arial, Helvetica, sans-serif"><a href="contact.htm" style="text-decoration:none"><i><font size="2">CONTACT</font></i>
</a></font></strong></div></td>
<td width="17%" align="center"><div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif"><i>&nbsp;<a href="pics.htm" style="text-decoration:none">PICS
</a></i></font></strong></div></td>
<td width="17%" align="right"><div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif"><i><a href="links.htm" style="text-decoration:none">LINKS&nbsp;</a></i></font></strong></div></td>
<td width="17%" align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif"><i>&nbsp;<a href="news.htm" style="text-decoration:none">NEWS</a></i></font></strong></td>
</tr>
</table>
</td>
<td width="20%" rowspan="2"><div align="center"><img src="Fantasy-03-june.gif" width="47" height="69"></div></td>
</tr>
<tr>
<td><div align="center"><font size="3">It's always quiet before the
storm.</font></div></td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>

<p></p>

</center>
</div>
<hr size="1" color="#990033" width="90%">
</td>
</tr>
</table>
</body>
</html>
bj_guitarist
06-25-2007, 12:11 PM
i found that there are some unclosed tags according to the color scheme. but i didnt notice this before. i havent found them yet.
docpepper
06-25-2007, 05:06 PM
Ok not wanting to add more annoyance to your situation but your code fails w3c validation quite badly...

I want to say (re write it) ....in fact...Im gonna say re write it...You got a lot goin on that can cause issues.

Here is a 'Mockup' of a bit of code modelled from your mass of current code..

It is by no were near finished and has quite a lot to do for presentation wise but coding wise its a bit better. Not perfect but hey! Your choice if u use it :)

All the best!

(oh and remember this isnt just a cut n paste it will require a fair bit of work still and check your links!!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Contact Us</title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html,body{
background-color: #000;
font: "Times New Roman", Times, serif;
color: #ff0000;
font-size: 14px;
margin: 0;
padding: 0;
border: 0;
}
h1{
text-align: center;
color: #fff;
}
#header{
width: 100%;
height: 200px;
margin: auto;
}
#nav_Wrap{
width: 100%;
height: 30px;
border-top: #ff0000 1px solid;
border-bottom: #ff0000 1px solid;
margin: auto;
}
#wrapper{
width: 100%;
height: auto;
}
#left_Nav{
float: left;
width: 10%;
height: auto;
margin: 0;
}
#content{
float: right;
width: 89%;
height: auto;
margin: 0;
}
#footer{
clear:both;
width: 100%;
height: 100px;
border-top: #ff0000 1px solid;
border-bottom: #ff0000 1px solid;
}
.footer_Wrap{
width: 500px;
margin: auto;
text-align: center;
}
a:link{
color:#ff0000;
}
a:visited{
color:#fff;
border-bottom: 1px solid;
}
a:hover{
color: #fff;
}
a:active{
color: #ff0000;
}
a.global_Nav{
float: left;
display: block;
font-size: 17px;
font-weight: 500;
height: 30px;
width: 16%;
color: #ff0000;
text-align: center;
padding: 5px auto auto auto;
text-decoration: none;
}
a.global_Nav:link{
}
a.global_Nav:visited{
}
a.global_Nav:hover{
background-color: #ff0000;
color: #fff;
}
a.global_Nav:active{
}
.weirdiframe{
float: right;
}
#warpic{
height: 300px;
width: 300px;
margin: auto;
background: #fff url(images/warpic2.jpg) no-repeat 0 0; /*change to your pictures path */
display: block;
}
</style>

<body>
<div id="header">
<img src="logo3.jpg" width="359" height="85" align="center">
</div>

<div id="nav_Wrap"><a href="#" class="global_Nav">MP3</a>
<a href="main1.htm" class="global_Nav">BIO</a><a href="contact.htm" class="global_Nav">CONTACT</a><a href="pics.htm" class="global_Nav">PICS</a><a href="#" class="global_Nav">LINKS</a><a href="news.htm" class="global_Nav">NEWS</a>
</div>

<div id="wrapper">
<div id="content"><div class="weirdiframe"><iframe src="weekpic.htm" align="middle" width="200px" height="300px" frameborder="0" scrolling="no"></iframe></div><p><h1>RAGING MOB</h1></p>
<p align="center">For bookings and interviews: Yu Yang <a href="mailto:yang@rockinchina.com" style="text-decoration: none">yang@rockinchina.com</a><br>
Website info: Dave <a href="mailto:usa_man_bj@hotmail.com" style="text-decoration: none">usa_man_bj@hotmail.com</a> 13520817936 </p>
<div id="warpic"></div>
</div>
<div id="left_Nav"><iframe src="nav.htm" align="middle" width="100px" height="300px" frameborder="0" scrolling="no"></iframe></div>
</div>

<div id="footer">
<div class="footer_Wrap"><img src="Fantasy-02-june.gif" width="45" height="62" align="left"><a href="MP3.htm" class="footer_Nav">MP3</a> | <a href="main1.htm" class="footer_Nav">BIO</a> | <a href="contact.htm" class="footer_Nav">CONTACT</a> | <a href="pics.htm" class="footer_Nav">PICS</a> | <a href="links.htm" class="footer_Nav">LINKS</a> | <a href="news.htm" class="footer_Nav">NEWS</a>
<img src="Fantasy-03-june.gif" width="47" height="69" align="right"></div>
</div>
</body>
</html>
bj_guitarist
06-25-2007, 09:08 PM
only for the weak. i accepted the fact last night before i went to bed that i cant do this well. im giong to try again and will just do a rewrite. ugh. a lot of work. but, thats ok. i learned a lot from everyone so far.

thanks for your template. i think its good and gives me a base for what i need.

after i do some work on it. i will post again with it.

i used to get pissed off all the time at things but now ive changed my attitude and turn anger into useful feelings like determination, willingness to listen to others, attempt to be more resourceful etc.

i have much to learn about coding.

:)
ghippleh
06-25-2007, 09:24 PM
try opening the page up in dreamweaver. It has a built in filter that will throw up flags in the code when it isn't compatible with different browsers.