6 replies [Last post]
markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 48 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

The only thing going wrong is that the container <div class="content"> seems to split apart horizontally as seen in the provided screenshot at the bottom of the page. This is not a problem in IE, just in FB 0.7. Is there something blatently obvious I'm missing or put in the wrong place? If you solve this you're seriously my new best friend...

Sorry for this being extremely long, I cannot provide links or passwords due to security issues.

HTML:

  <div class="content">
    <h2>Step 4. Edit Location {$smpl_layouts.spots.current} on {$smpl_layouts.pages.current.page_name}</h2>
    <p>Select one or more widgets from the Widgets list and/or one or more static fields from the Static Fields list.  Click on the arrow button and your selected objects will be added to the page.  Once you have made your additions, re-order or remove objects as is necessary. To select multiple objects, hold down the control key while making your selections.  To deselect an object, hold down the control key and reselect the object.</p>
			<div style="float:left">
   			<form id="AddObjects" method="post" action="_layouts.php" onsubmit="return transform_lists(getElementById('widget_listing'),getElementById('static_listing'),getElementById('add_widgets'),getElementById('add_statics'))">
   			<input type="hidden" name="mode" value="addobjs" />
   			<input type="hidden" name="p" value="{$smpl_layouts.pages.current.page_id}" />
   			<input type="hidden" name="s" value="{$smpl_layouts.spots.current}" />			
   						<div class="locationedit">
   						<h2>Widgets:</h2><p>
   						<input type="hidden" name="add_widgets" id="add_widgets" value="" />
   						<select style="width:200px" id="widget_listing" multiple="multiple" size="10">
   						{section name=i loop=$smpl_layouts.objects.widgets}
   						<option value="{$smpl_layouts.objects.widgets[i].w_id}">{$smpl_layouts.objects.widgets[i].w_name}</option>
   						{/section}
   						</select>
   						</p>
   						<h2>Static Fields:</h2><p>
   						<input type="hidden" name="add_statics" id="add_statics" value="" />
   						<select style="width:200px" id="static_listing" multiple="multiple" size="10">
   						{section name=i loop=$smpl_layouts.objects.statics}
   						<option value="{$smpl_layouts.objects.statics[i].sf_id}">{$smpl_layouts.objects.statics[i].sf_name}</option>
   						{/section}
   						</select>
   						</p>
   						</div><input style="margin-left:10px" type="submit" value="-&gt;" />
   			</form>
   			</div>

   	{if $smpl_layouts.objects.placed}
   			<form method="post" action="_layouts.php">
   			
   			<input type="hidden" name="mode" id="node_mode" value="addobjs" />
   			<input type="hidden" name="p" value="{$smpl_layouts.pages.current.page_id}" />
   			<input type="hidden" name="s" value="{$smpl_layouts.spots.current}" />
   			
   		      <div style="margin-left:270px;">
   			<table class="locationedit" border="0" cellpadding="0" cellspacing="0">
   				<tr>
   					<td class="tabletitle">Object</td>
   					<td class="tabletitle">Name</td>
   					<td class="tabletitle">Encapsulation</td>
   					<td class="tabletitle"><input type="image" src="/img/up.gif" style="border:0px" name="Up" value="Up" onclick="document.getElementById('node_mode').value = 'move_up'" alt="Move Selected Items Up" />
   								     <input type="image" src="/img/down.gif" style="border:0px" name="Down" value="Down" onclick="document.getElementById('node_mode').value = 'move_down'" alt="Move Selected Items Down" />
   								     <input type="image" src="/img/remove.gif" style="border:0px" name="Remove" value="Remove" onclick="document.getElementById('node_mode').value = 'delobjs'" alt="Remove Selected Items" /></td>     
   				</tr>			
   	{section name=i loop=$smpl_layouts.objects.placed}
   				<tr>
   					<td>{$smpl_layouts.objects.placed[i].node_source_type}</td>
   					<td>{$smpl_layouts.objects.placed[i].node_name}</td>
   					<td>
   	{if $smpl_layouts.encapsulation}
   						<select name="encap_{$smpl_layouts.objects.placed[i].node_id}">
   							<option value="0">-- Choose --</option>
   	{section name=t loop=$smpl_layouts.encapsulation}
   							<option value="{$smpl_layouts.encapsulation[t].c_id}" {if $smpl_layouts.objects.placed[i].encapsulation_id == $smpl_layouts.encapsulation[t].c_id}selected="selected"{/if}>{$smpl_layouts.encapsulation[t].c_name}</option>
   	{/section}
   						</select>
   	{else}
    	 define encapsulations!
   	{/if}
   					</td>
   					<td><input type="checkbox" name="sel_{$smpl_layouts.objects.placed[i].node_id}" /></td>
   				</tr>
   	{/section}
   			</table>
   			
   			<input type="submit" name="UpdateEncap" value="Update" onclick="document.getElementById('node_mode').value = 'update_encap'" />	
   			</div>
   			</form>
   	{else}
    	 <p><em>There are currently no objects added to this spot.</em></p>
   	{/if}
   <hr class="stopfloat" />
   </div>

CSS:

/* ---------- Layout ---------- */

body {
	padding: 0; 
 	margin-left: 10px;
	margin-right: 10px;
	background-color: #DDDDDD;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt; 
	color: #666666;
	text-decoration: none;
	font-weight: normal
}

div.content {
	border: 1px solid #666666;
	background-color: #FFFFFF;
	text-align: left;
	vertical-align: text-top;
	padding: 10px;
	margin-bottom: 15px;
}

div.topbar {
	margin-bottom: 5px;
}

div.locationedit {
	float:left; 
	background-color:#EFEFEF; 
	padding:10px
}

table.locationedit {
	margin:1px; 
	margin-top:0px
}

table.locationedit td {
	padding: 2px;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF
}

td.tabletitle {
	font-family: Arial, sans-serif;
	background-color: #EFEFEF;
	font-size: 10pt;
	color: #336699
}

td.text {
	font-family: Arial, sans-serif;
	color: #336699;
}

/* ---------- Element Styles ---------- */

img {
	border: 0px none;
}

h1	{ 
	margin-top: 0px;
	text-align: right;
	border-bottom: 1px solid #AAAAAA;
	font-family: arial, sans-serif; 
	font-size: 14px; 
	font-weight: bold;
	color: #AAAAAA
}

h2 {   
	font-size: 10pt;
	color: #336699
}

h3 {  
	font-size: 10pt;
	font-weight: bold; 
	color: #000000
}

h4 {
	font-size: 10pt;
	color: #000000
}

p { 
	font-size: 10pt; 
	font-style: normal
}

td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt; 
	font-style: normal
}

input, textarea, select{
	background-color: #F8F8F8;
	border: 1px solid #666666;
}

hr.stopfloat {
	display: block; 
	clear: left; 
	margin: 0px;
	padding: 0px;
  	visibility: hidden;
}

/* ---------- Links ---------- */

a:link, a:active, a:visited {
	font-size: 10pt; 
	color: #336699;
}

/* ---------- Menu ---------- */


div.navlist {
	padding: 0px;
	margin-bottom: 10px;
}

div.navlist li {
	display: inline;
	list-style-type: none
}

div.navlist ul {
	margin: 0;
	white-space: nowrap;
	padding: 0
}

div.navlist a {
	text-decoration: none;
	padding: 2px 5px 2px 5px;
	border: 1px solid #666666;
	background-color: #EBEBEB;
	font-family: arial, sans-serif;
	font-weight: bold;
	font-size: 8pt; 
	color: #666666;
}

div.navlist a:hover {
	background-color: #FFFFFF;
	color: #000000;
}

div.navlist a:active {
	background-color: #FFFFFF;
	color: #000000;
}

div.navlist a:visited {
	font-weight: bold;
	font-size: 8pt; 
	color: #666666;
}

div.navlist2 {
	padding: 0px;
	margin-bottom: 10px;
}

div.navlist2 li {
	display: inline;
	list-style-type: none
}

div.navlist2 ul {
	margin: 0;
	white-space: nowrap;
	padding: 0
}

img.selected {
	border: 1px solid #666666;
	background-color: #EBEBEB;
	padding: 2px;
}

span.selected {
	padding: 2px 5px 2px 5px;
	border: 1px solid #666666;
	background-color: #EBEBEB;
	font-size: 8pt;
	font-weight: bold;
}

/* ---------- Tabs ---------- */

#tabs {
	margin-bottom: 2px;
}

#tabs ul {
	margin-left: 0px;
	padding-left: 0px;
	display: inline;
	} 

#tabs ul li {
	margin-left: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	padding: 2px 10px 2px;
	border: 1px solid #666666;
	background-color: #EBEBEB;
   	list-style: none;
	display: inline;
	
	font-family: Arial, sans-serif;
	/* font-weight: bold; */
	font-size: 8pt; 
	color: #000000;
	}
	
		
#tabs ul li.here {
	border-bottom: 1px solid #FFF;
	background-color: #FFF;
	list-style: none;
	display: inline;
	}
	
#tabs a {
	text-decoration: none;
	font-family: Arial, sans-serif;
	/* font-weight: bold; */
	font-size: 8pt; 
	color: #666666;
}

#tabs a:hover {
	color: #000000;
}

http//mark.axsysdesign.com

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Rendering Issues?

Mark

Sorry I can not see what you are talking about because the image is obviously showing a much larger section of the page and therefore the code.

I quickly chucked all the above code in my html editor, but can't determine what you mean either. It looks nothing like the picture, just a mess.

Can you provide all the code as a attachment? or have a link that won't break your security problems.

Regards
Day

The only way to learn is to do it yourself

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 48 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Rendering Issues?

I attatched the whole html file...but because I'm using smarty I dont know how far you are going to get. If you absolutely need the link (which im sure you will) then I will work something out...

http//mark.axsysdesign.com

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Rendering Issues?

and the CSS?

The only way to learn is to do it yourself

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 48 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Rendering Issues?

All the CSS is in my first post.

http//mark.axsysdesign.com

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Rendering Issues?

Ok I could not even get close to the image you supplied, even with all the code, but I think there were some includes missing.

Also in IE I was getting a strange Grey bar or half a gap out to the right which would dissapear after scrolling down. At least that grey bar was similar to your problem in FB, because in FB I could not even get a similar layout.

Anyway I deleted the first table you had and it went away. I think the problem was something to do with the table and floated div. Because of that I thought it may be a position problem and the gap is caused by something that thinks it should be somewhere else. I add position: relative; to the content div and yo the grey bar went away. I am not sure if this is the solution but give it a go.

Otherwise it is too difficult as I can not test to see the cause. If that does not work, try deleting a few things to see waht makes it dissapear. It will help identify what is causing the problem.

Regards
Day

The only way to learn is to do it yourself

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 48 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Rendering Issues?

Ok...I added position:relative to the "content" div and it seems to be working well. I think that did the trick, Thanks for the help Smile

http//mark.axsysdesign.com