PDA

View Full Version : Table Problems


oni3350
07-02-2009, 08:27 AM
Hey I have a WP theme that has 2 widgets below the header. http://muscle-mass-weight-gain.com/

I'm using Dreamweaver to place my images and opt-in form inside tables and then place that code inside the widget section.

In IE it seems to line up correctly. But in Firefox and Opera they are way off. Even inside Dreamweaver they are not lining up the way they show in IE.

I was wondering if here was something wrong with my code. Here is the code for the "top left" widget. <table width="200" border="0">
<tr>
<td><img class="aligncenter" title="muscle mass weight gain" src="http://muscle-mass-weight-gain.com/offers.jpg" alt="" width="457" height="188" /></td>
</tr>
</table>
<table width="467" border="0">
<tr>
<td width="234"><form id="frmSS2" action="http://muscle-mass-weight-gain.com/iem/form.php?form=2" method="post">
<table class="myForm" border="0" cellpadding="2" align="left">
<tbody>
<tr>
<td><span style="color: #ffffff;">Name:</span></td>
<td><input id="CustomFields_2_2" name="CustomFields[2]" size="20" type="text" /></td>
</tr>
<tr>
<td><span style="color: #ffffff;">Email:</span></td>
<td><input name="email" type="text" /></td>
</tr>
<input name="format" type="hidden" value="h" />
<tr>
<td></td>
<td><input type="submit" value="Send My Free Gifts!" /></td>
</tr>
</tbody></table>
</form>
</td>
<td width="217"><p><strong> Simply fill out your first name and email address and you'll be immediately enrolled to receive these three information-packed FREE gifts. You can opt out at any time!</strong></p></td>
</tr>
</table>
<table width="467" border="0">
<tr>
<td><em>I will never ever give your email address to anyone for any reason. I hate spam and will never be apart of it!</em></td>
</tr>
</table>

And here is the code for the "top right" widget. <table width="400" border="0" align="right">
<tr>
<td><img align="right" title="muscle mass weight gain" src="http://muscle-mass-weight-gain.com/vinny.jpg" alt="muscle mass weight gain" width="400" height="65" /></td>
</tr>
<tr>
<td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="400" height="270" id="Untitled-5" align="right">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Untitled-5.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Untitled-5.swf" quality="high" bgcolor="#ffffff" width="400" height="270" name="Untitled-5" align="right" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
</table>

If you happen to have all the browsers you will see how they are different in all, and i do not understand why!

Corrosive
07-02-2009, 09:07 AM
Hey I have a WP theme that has 2 widgets below the header. http://muscle-mass-weight-gain.com/

I'm using Dreamweaver to place my images and opt-in form inside tables and then place that code inside the widget section.

In IE it seems to line up correctly. But in Firefox and Opera they are way off. Even inside Dreamweaver they are not lining up the way they show in IE.

I was wondering if here was something wrong with my code. Here is the code for the "top left" widget. <table width="200" border="0">
<tr>
<td><img class="aligncenter" title="muscle mass weight gain" src="http://muscle-mass-weight-gain.com/offers.jpg" alt="" width="457" height="188" /></td>
</tr>
</table>
<table width="467" border="0">
<tr>
<td width="234"><form id="frmSS2" action="http://muscle-mass-weight-gain.com/iem/form.php?form=2" method="post">
<table class="myForm" border="0" cellpadding="2" align="left">
<tbody>
<tr>
<td><span style="color: #ffffff;">Name:</span></td>
<td><input id="CustomFields_2_2" name="CustomFields[2]" size="20" type="text" /></td>
</tr>
<tr>
<td><span style="color: #ffffff;">Email:</span></td>
<td><input name="email" type="text" /></td>
</tr>
<input name="format" type="hidden" value="h" />
<tr>
<td></td>
<td><input type="submit" value="Send My Free Gifts!" /></td>
</tr>
</tbody></table>
</form>
</td>
<td width="217"><p><strong> Simply fill out your first name and email address and you'll be immediately enrolled to receive these three information-packed FREE gifts. You can opt out at any time!</strong></p></td>
</tr>
</table>
<table width="467" border="0">
<tr>
<td><em>I will never ever give your email address to anyone for any reason. I hate spam and will never be apart of it!</em></td>
</tr>
</table>

And here is the code for the "top right" widget. <table width="400" border="0" align="right">
<tr>
<td><img align="right" title="muscle mass weight gain" src="http://muscle-mass-weight-gain.com/vinny.jpg" alt="muscle mass weight gain" width="400" height="65" /></td>
</tr>
<tr>
<td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="400" height="270" id="Untitled-5" align="right">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Untitled-5.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Untitled-5.swf" quality="high" bgcolor="#ffffff" width="400" height="270" name="Untitled-5" align="right" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
</table>

If you happen to have all the browsers you will see how they are different in all, and i do not understand why!

I have just been setting up a WP site for a friend and have found much better results using divs and CSS. Try ditching the tables. Divs are easier to get consistent cross-browser.

oni3350
07-02-2009, 01:19 PM
in the widgets im using the "text" widget which as you would know, allows html,php ect.

But if i include the css, even maybe the WHOLE webpage document like with the "DOCTYPE html PUBLIC" tag thing up the top. Will the widget still read this correctly?

I think i tried that before, but it was still with the tables... not divs or anything.

tiwo4xcel
07-02-2009, 01:28 PM
hello,
am new to this forumand new to dreamweaver as well. I want to know how to insert both horizontal and vertical lines and also how to change the location of an image..............

Corrosive
07-02-2009, 01:40 PM
hello,
am new to this forumand new to dreamweaver as well. I want to know how to insert both horizontal and vertical lines and also how to change the location of an image..............

Please start a new thread. Don't hijack others!

Corrosive
07-02-2009, 01:49 PM
in the widgets im using the "text" widget which as you would know, allows html,php ect.

But if i include the css, even maybe the WHOLE webpage document like with the "DOCTYPE html PUBLIC" tag thing up the top. Will the widget still read this correctly?

I think i tried that before, but it was still with the tables... not divs or anything.

The way I approached changing the template I used (and bear in mind I have only done one so am no expert) was to add divs where I wanted them and then added any further CSS styles to either the default or styles CSS file. That way they are already linked in and I was able to apply these styles to the divs. The only bit I found slightly hard to fathom out was when a div was required to start at the top...so the opening div went in the 'header.php' code and then close at the bottom...so the closing div tag went in the index.php or single.php code.

Basically, if the styles are 'called in' then you can place divs wherever you want in the code structure to achieve what you want. Tables with inline styles tend to cause display issues are they were never designed for 'complicated' site structure.

Here is the site I helped out with...

http://themacfeed.com/

The graphics were done by the owner but the bits I added for him were the wider 'wrapper' which makes the shadow appear down the page, the inner wrapper which makes the side bar appear as if it stretches all the way down and the adverts 'widget' at under the menu bar on each page. Took a while but we got there.

oni3350
07-02-2009, 02:41 PM
cool, that sounds like it should work.

I will give it a shot a little later on and maybe reply back here and let you know how i went either way.

Corrosive
07-02-2009, 02:46 PM
cool, that sounds like it should work.

I will give it a shot a little later on and maybe reply back here and let you know how i went either way.

OK, sounds good to me. Keep us posted.

oni3350
07-03-2009, 08:30 AM
This is hard.

I thought i could use divs and css really easy. I guess not.

I normally just use AP divs and then wrap another div around that like this:
<div style="width:1000px; margin:0 auto;position:relative;"> </div>

Which makes it move with screen size!

So in dreamweaver i use the insert div tag option. Then i put in my top image. Then i use another tag which goes in below that and then i put in my opt-in form code in there.

So that looks fine. But to the right of the opt-in form i need some text and i dont know how to get another div to show to the right of the box. When i use another div tag it just goes to the bottom of every thing else.

I dont know how to code the div so that it appears to the right of the opt-in form.

I need like a crash course in it or something. Isint there like an easier way to do it without coding. Is it possible to just draw AP divs and then change the "absolute" to "relative" ?

oni3350
07-03-2009, 09:06 AM
ok i know ive done this a really really weird way.

Me, i eventually figure stuff out, but generally its always the WRONG way!

Take another look at my site, and then take a close look at this code and see what ive done.

http://muscle-mass-weight-gain.com/

With the code i have used 2 normal divs (under each other) and 2 AP divs (to place on the right and bottom of the form)

<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:224px;
top:245px;
width:226px;
height:90px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:1px;
top:341px;
width:470px;
height:59px;
z-index:1;
}
-->
</style>
</head>

<body>
<div style="width:1000px; margin:0 auto;position:relative;">
<div id="apDiv1"><strong>Simply fill out your first name and email address and you'll be immediately enrolled to receive these three information-packed FREE gifts. You can opt out at any time!</strong></div>
<div id="apDiv2"><em>I will never ever give your email address to anyone for any reason. I hate spam and will never be apart of it!</em></div>
</div>
<div class="form"><img class="aligncenter" title="muscle mass weight gain" src="http://muscle-mass-weight-gain.com/offers.jpg" alt="" width="457" height="188" />
<div class="form"><form method="post" action="http://muscle-mass-weight-gain.com/iem/form.php?form=2" id="frmSS2" onsubmit="return CheckForm2(this);">
<table border="0" cellpadding="2" class="myForm">
<tr>
<td height="26"> Name:</td>
<td><input type="text" name="CustomFields[2]" id="CustomFields_2_2" value="" size='20'></td>
</tr><tr>
<td>Email:</td>
<td><input type="text" name="email" value="" /></td>
</tr><input type="hidden" name="format" value="h" />
<tr>
<td></td>
<td>
<input type="submit" value="Subscribe" />
<br/>
</td>
</tr>
</table>
</form>

<script type="text/javascript">
// <![CDATA[

function CheckMultiple2(frm, name) {
for (var i=0; i < frm.length; i++)
{
fldObj = frm.elements[i];
fldId = fldObj.id;
if (fldId) {
var fieldnamecheck=fldObj.id.indexOf(name);
if (fieldnamecheck != -1) {
if (fldObj.checked) {
return true;
}
}
}
}
return false;
}
function CheckForm2(f) {
var email_re = /[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
if (!email_re.test(f.email.value)) {
alert("Please enter your email address.");
f.email.focus();
return false;
}

return true;
}

// ]]>
</script></div>
</div>Thats exactly what i have put inside the "text" widget. Now this works fine for all browsers i own. But in IE when you change the screen size the WHOLE layout no longer adjusts with screen size and i first thought that it was all because of the <div style="width:1000px; margin:0 auto;position:relative;"> </div>

But i removed that, then i removed everything from the text widget box and i must have changed something because the whole layout no longer moves with screen size in IE.

Where do i look in the code to fix this?

So what can i do about this? Do things the proper way? hmmm well i don't know how lol.

Corrosive
07-03-2009, 12:39 PM
ok i know ive done this a really really weird way.

Me, i eventually figure stuff out, but generally its always the WRONG way!

Take another look at my site, and then take a close look at this code and see what ive done.

http://muscle-mass-weight-gain.com/

With the code i have used 2 normal divs (under each other) and 2 AP divs (to place on the right and bottom of the form)

<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:224px;
top:245px;
width:226px;
height:90px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:1px;
top:341px;
width:470px;
height:59px;
z-index:1;
}
-->
</style>
</head>

<body>
<div style="width:1000px; margin:0 auto;position:relative;">
<div id="apDiv1"><strong>Simply fill out your first name and email address and you'll be immediately enrolled to receive these three information-packed FREE gifts. You can opt out at any time!</strong></div>
<div id="apDiv2"><em>I will never ever give your email address to anyone for any reason. I hate spam and will never be apart of it!</em></div>
</div>
<div class="form"><img class="aligncenter" title="muscle mass weight gain" src="http://muscle-mass-weight-gain.com/offers.jpg" alt="" width="457" height="188" />
<div class="form"><form method="post" action="http://muscle-mass-weight-gain.com/iem/form.php?form=2" id="frmSS2" onsubmit="return CheckForm2(this);">
<table border="0" cellpadding="2" class="myForm">
<tr>
<td height="26"> Name:</td>
<td><input type="text" name="CustomFields[2]" id="CustomFields_2_2" value="" size='20'></td>
</tr><tr>
<td>Email:</td>
<td><input type="text" name="email" value="" /></td>
</tr><input type="hidden" name="format" value="h" />
<tr>
<td></td>
<td>
<input type="submit" value="Subscribe" />
<br/>
</td>
</tr>
</table>
</form>

<script type="text/javascript">
// <![CDATA[

function CheckMultiple2(frm, name) {
for (var i=0; i < frm.length; i++)
{
fldObj = frm.elements[i];
fldId = fldObj.id;
if (fldId) {
var fieldnamecheck=fldObj.id.indexOf(name);
if (fieldnamecheck != -1) {
if (fldObj.checked) {
return true;
}
}
}
}
return false;
}
function CheckForm2(f) {
var email_re = /[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
if (!email_re.test(f.email.value)) {
alert("Please enter your email address.");
f.email.focus();
return false;
}

return true;
}

// ]]>
</script></div>
</div>Thats exactly what i have put inside the "text" widget. Now this works fine for all browsers i own. But in IE when you change the screen size the WHOLE layout no longer adjusts with screen size and i first thought that it was all because of the <div style="width:1000px; margin:0 auto;position:relative;"> </div>

But i removed that, then i removed everything from the text widget box and i must have changed something because the whole layout no longer moves with screen size in IE.

Where do i look in the code to fix this?

So what can i do about this? Do things the proper way? hmmm well i don't know how lol.

The issue with apdivs is that they will not resize or influence the rest of the site if the person viewing your website chooses to increase text sizes. They may be visually impaired for instance. To get two relative divs to sit side by side, I would wrap them in a larger div to contain them and then float both of the divs inside left.

I agree that it isn't all that easy to get your head around but I'm not sure anyone ever said web design was meant to be easy!

That is why we are able to charge for our skills. You have also chosen something which is quite tricky to modify IMO. It took me a while to get my head around modifying macfeed and I have been doing it a while.

Keep plugging away at it though, the rewards far outweigh the pain.

oni3350
07-03-2009, 02:27 PM
What code actually tells the browser to adjust the layout with screen size?
Maybe i can find it and fix it, before i started messing with this in IE the layout adjusted fine.

would it be somewhere in the header.php , index.php ?

Corrosive
07-03-2009, 02:31 PM
What code actually tells the browser to adjust the layout with screen size?
Maybe i can find it and fix it, before i started messing with this in IE the layout adjusted fine.

would it be somewhere in the header.php , index.php ?

Controlling styles is done though the CSS files. Try the #page style in the default CSS for starters