4 replies [Last post]
readtseliot
Offline
newbie
Last seen: 13 years 15 weeks ago
Joined: 2007-05-25
Posts: 3
Points: 0

Hello - I am trying to create a "table-free" template. This is something I've never done before, and I'm having CSS layout trouble (I think...) It might be something in the index.php (which I have included below)

I'm trying to get the "left" module and the "content" or mosmainbody to display side by side within a white rounded corner content box. http://www.doctordoctorstudio.com/acroprint

so far I have both modules within the white box, and they do display side by side, but the "menu" on the left bleeds out over my "4-cornered white content box" :

Thanks in advance. :thumbsup: This is my first posting on this forum. Below is my index.php file and css:

Best
Skip

index.php

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );

?>

<?php if ( $my->id ) { initEditor(); } ?>

<?php mosShowHead(); ?>

/templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css">

/templates/<?php echo $cur_template; ?>/images/favicon.ico">

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

/templates/<?php echo $cur_template; ?>/images/header-narrow-bg.jpg" alt="" width="800" height="110" border="0">

/templates/<?php echo $cur_template; ?>/images/menu-prods-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/menu-prods.gif" alt="INSERT ALT TEXT HERE" name="INSERT products title" width="97" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-separator.gif" alt="" width="2" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-res-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/menu-res.gif" alt="INSERT ALT TEXT HERE" name="INSERT resources title" width="113" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-separator.gif" alt="" width="2" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-supp-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/menu-supp.gif" alt="INSERT ALT TEXT HERE" name="INSERT support title" width="95" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-separator.gif" alt="" width="2" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-warranty-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/menu-warranty.gif" alt="INSERT ALT TEXT HERE" name="INSERT warranty title" width="106" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-separator.gif" alt="" width="2" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-finddlr-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/menu-finddlr.gif" alt="INSERT ALT TEXT HERE" >/templates/<?php echo $cur_template; ?>/images/menu-separator.gif" alt="" width="2" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-press-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/menu-press.gif" alt="INSERT ALT TEXT HERE" >/templates/<?php echo $cur_template; ?>/images/menu-separator.gif" alt="" width="2" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-about-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/menu-about.gif" alt="INSERT ALT TEXT HERE" >/templates/<?php echo $cur_template; ?>/images/menu-separator.gif" alt="" width="2" height="33" border="0">/templates/<?php echo $cur_template; ?>/images/menu-home-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/menu-home.gif" alt="INSERT ALT TEXT HERE" >

<?php if ( !(mosCountModules( 'left' )) ) { ?>
<? } else { ?>
<?php mosLoadModules ( 'left', -2 ); ?>
<? } ?>
<?php mosMainBody(); ?>

Copyright © 2003-2007 Acroprint Time Recorder Company. All Rights Reserved
5460 Departure Drive | Raleigh NC | 27616 | 919-872-5800 | 800-334-7190 (Toll Free)

&nbsp /templates/<?php echo $cur_template; ?>/images/footer-sitemap-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/footer-sitemap.gif" alt="INSERT alt text here">/templates/<?php echo $cur_template; ?>/images/footer-separator.gif" alt="" width="3" height="24" border="0">/templates/<?php echo $cur_template; ?>/images/footer-privacy-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/footer-privacy.gif" alt="INSERT alt text here">/templates/<?php echo $cur_template; ?>/images/footer-separator.gif" alt="" width="3" height="24" border="0">/templates/<?php echo $cur_template; ?>/images/footer-shipping-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/footer-shipping.gif" alt="INSERT alt text here">/templates/<?php echo $cur_template; ?>/images/footer-separator.gif" alt="" width="3" height="24" border="0">/templates/<?php echo $cur_template; ?>/images/footer-returns-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/footer-returns.gif" alt="INSERT alt text here">/templates/<?php echo $cur_template; ?>/images/footer-separator.gif" alt="" width="3" height="24" border="0">/templates/<?php echo $cur_template; ?>/images/footer-contact-lt2.gif',1)">/templates/<?php echo $cur_template; ?>/images/footer-contact.gif" alt="INSERT alt text here">

here's my css:

BODY {

margin : 0px 0px 0px 0px;

background-color : #cccccc;

color : #000000;

background-color: #cccccc;

scrollbar-base-color: #778899;

}

td, tr, p, div {

font-family : Arial, Verdana, Helvetica, sans-serif;

font-size : 11px;

overflow :hidden;

color : #333333;


}

div.moduletable {overflow:hidden;}

ul {

margin : 0px 0px 0px 0px;

}

hr {

background : #CCCCCC;

height : 1px;

width : 100%;

}

#centralbox {

margin: 0 auto;

text-align:center;

}

#centralbox p {

text-align:left;

}

.title {

font-family: sans-serif;

font-size: 24px;

font-weight: bold;

color : #7B8DA1;

}

.pathway {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #000000;

}

a.pathway:link, a.pathway:visited {

color : #000000;

font-weight : normal;

}

a.pathway:hover {

color : #000000;

font-weight : normal;

text-decoration : underline;

}

/* --Default Class Settings-- */

a.mainlevel:link, a.mainlevel:visited {

color: #666666;

background-position: left;

text-align: left;

font-weight: normal;

overflow: hidden;

}

a.mainlevel:hover {

color: #cccccc;

background-position: left;

text-align: left;

}

a.mainmenu:link, a.mainmenu:visited {

color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;

font-weight: normal;

}

a.mainmenu:hover, {

color: #000000; text-decoration: none;

}

a.sublevel:hover {

color: #cccccc; text-decoration: none;

}

a.sublevel:link, a.sublevel:visited {

color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;

font-weight: normal;

}

table.moduletable {

margin: 0px 0px 0px 0px;

width: 20%;

border-left: solid 0px #000000;

border-right: solid 0px #000000;

border-top: solid 0px #000000;

border-bottom: solid 0px #000000;

margin-left: 5px;

overflow: hidden;

}

table.moduletable th {

font-size : 11px;

font-weight : bold;

color : #000000;

text-align : left;

width : 100%;

padding: 10px 10px 10px 10px;

margin: 20px 5px 20px 5px;

}

table.moduletable td {

font-size: 10px;

font-weight: normal;

border: 1px solid #333;

padding: 10px 10px 10px 10px;

margin: 20px 5px 20px 5px;

background-color: #F8F8FF;

overflow: hidden;
}

.poll {

font-family : Arial, Helvetica, sans-serif;

font-size : 10px;

color : #666666;

line-height : 14px;

}

.sectiontableheader {

background-color : #CCCCCC;

color : #7B8DA1;

font-weight : bold;

}

.sectiontableentry1 {

background-color : #F0F0F0;

}

.sectiontableentry2 {

background-color : #E0E0E0;

}

.small {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 10px;

color : #3366C0;

text-decoration : none;

font-weight : medium;

}

.smalldark {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 10px;

color : #000000;

text-decoration : none;

font-weight : normal;

}

.contentpane {

background : #FFFFFF;

}

.contentpaneopen {

background : #FFFFFF;

}

.contentheading, .componentheading {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 14px;

font-weight : bold;

color : #7B8DA1;

text-align : left;

}

.createdate {

font-family : Arial, Helvetica, sans-serif;

font-size : 10px;

color : #999999;

text-align : left;

}

.button {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-style : normal;

font-size : 10px;

font-weight : bold;

background-color : #F0F0F0;

color : #000000;

border : 1px solid #CCCCCC;

}

.inputbox {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 10px;

color : #000000;

background-color : #F0F0F0;

border : 1px solid #CCCCCC;

}

a:link, a:visited {

font-size : 11px;

color : #000000;

text-decoration : none;

font-family : Verdana, Arial, Helvetica, sans-serif;

}

a:hover {

color : #000000;

text-decoration : underline;

}

/* For content item titles that are hyperlink instead of Read On */

a.contentpagetitle:link, a.contentpagetitle:visited {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

color: #000000;

text-align:left;

}

a.contentpagetitle:hover {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

text-align:left;

color: #7B8DA1;

text-decoration: underline;

font-weight: bold;

}

a.category:link, a.category:visited {

color : #333333;

font-weight : bold;

}

a.category:hover {

color : #7B8DA1;

}

/* Styles for dhtml tabbed-pages */

.ontab {

background-color: #ffae00;

border-left: outset 2px #ff9900;

border-right: outset 2px #808080;

border-top: outset 2px #ff9900;

border-bottom: solid 1px #d5d5d5;

text-align: center;

cursor: hand;

font-weight: bold;

color: #FFFFFF;

}

.offtab {

background-color : #e5e5e5;

border-left: outset 2px #E0E0E0;

border-right: outset 2px #E0E0E0;

border-top: outset 2px #E0E0E0;

border-bottom: solid 1px #d5d5d5;

text-align: center;

cursor: hand;

font-weight: normal;

}

.tabpadding {

}

.tabheading {

background-color: #ffae00;

text-align: left;

}

.pagetext {

visibility: hidden;

display: none;

position: relative;

top: 0;

}

/* for modifying {moscode} output. Dont set the colour! */

.moscode {

background-color: #f0f0f0;

}

/* Text passed with mosmsg url parameter */

.message {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size : 10pt;

color : #ff6600;

text-align: center;

}

/* custom stuff */

.container

{

border: solid;

border-width: 1px;

border-color: #efefef;

background-color: White;

}

.boxes {

border: solid;

border-color: #efefef;

border-width: 1px;
}

/* acro custom styles */

body#bd {

/*background: url(../images/body-bg.jpg) repeat-x #cccccc; */

color: #cccccc;
}

#ac-wrapper {

width: 800px;

margin: 0 auto;

text-align: center;

}

#ac-wrapper-inner {

text-align: left;

margin:auto;
height:auto

}

#ac-masthead {

position: relative;

width: 800px;

height: 110px;

margin: 0;

margin-top: 10px;

align: center;

border: 0;

font-weight: normal;

display: block;

}

#ac-content {

position: relative;

width: 800px;

margin: 0;

margin-top: 10px;

border: 0;

font-weight: normal;

background-color: #fff;

overflow: hidden;
}

#ac-mainnav {

position: relative;

width: 800px;

height: 37px;

/* height of image is 33 px */

margin: 0;

margin-top: 0px;

border: 0;

font-weight: normal;

text-align: center;

background: url(../images/mainnav-narrow-bg.gif) no-repeat top right;
}

span.left_outer {
position:relative;
float:left;
width: 19%;
display:inline;
overflow: hidden;
}

#left_outer {

padding: 0px;
margin-top: 0px;
margin-left: 0px;
width: 19%;

}

/*#left_inner {
padding: 0px;
margin-top: 0px;
margin-left: 0px;
width: 100%;
display:inline;
float:right;*/

#content_outer2 {
padding: 0px;
margin-top: 0px;
margin-left: 0px;
/** border: 1px solid #cccccc; **/
float: left;
width: 100%;

}

#content_outer {
position: relative;
float:right;
width: 80%;
}

span.content {
display:inline;
overflow: hidden;
}

span.content_outer {
position: relative;
float:right;
width: 80%;
display:inline;
}

span.content_outer2 {
padding: 0px;
margin-top: 0px;
margin-left: 0px;
/** border: 1px solid #cccccc; **/
float: left;
width: 100%;
display:inline;
}

span.ac-footer {

position: relative;

float: left;

width: 454px;

margin: 0;

margin-top: 0px;

border: 0;

font-weight: normal;

background-color: #ccc;
}

div.ac-footermenu {

/*position: relative;

width: 346px;

height: 29px;

margin: 0;

padding-left:454px;

margin-top: 0px;

border: 0;

text-align:left;

font-weight: normal;*/

background: url(../images/mainnav-narrow2-bg.gif) no-repeat top right;
}

div.wrap1,
div.wrap2,
div.wrap3,
div.wrap4 {
margin: 0;
padding: 0;

}

div.wrap4 {

padding: 20px;

}

div.wrap1 {
background: url(../images/c-tl.gif) no-repeat top left;
}

div.wrap2 {
background: url(../images/c-tr.gif) no-repeat top right;
}

div.wrap3 {
background: url(../images/c-bl.gif) no-repeat bottom left;
}

div.wrap4 {
background: url(../images/c-br.gif) no-repeat bottom right;

}

div.container {
border: 0px;
display:inline;
}

div.spacer {
clear: both;
}

/*div.footer {

float: left;*/


div.float p {

text-align: left;

}

/* end acro custom styles */

div.module {

margin-bottom: 10px;

padding: 0;

float: left;

clear: both;

width: 20%;

background: url(../images/box2-br.gif) no-repeat bottom right;

}

div.module div {

padding: 0;

background: url(../images/box2-bl.gif) no-repeat bottom left;

}

div.module div div {

padding: 0;

background: url(../images/box2-tr.gif) no-repeat top right;

}

div.module div div div {

padding: 10px;

background: url(../images/box2-tl.gif) no-repeat top left;

}

div.module div div div div {

margin: 0;

padding: 0;

background: none;

}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

A) Since you provided us

A) Since you provided us with a live link, we don't necessarily need your code.

B) You need the HTML after it is parsed by PHP

C) Please include your CSS in the <code> tag as well

D) I don't see any issue with anything bleeding over anywhere. Please include a screen shot or try to explain in more detail what you are trying to do.

E) is for EDIT -- VALIDATE YOUR CODE BEFORE YOU COMPLAIN!

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

readtseliot
Offline
newbie
Last seen: 13 years 15 weeks ago
Joined: 2007-05-25
Posts: 3
Points: 0

thanks

Thanks so much Deuce - Sorry for the clumsy post. Will get it right next time. By the way, you;re right about it not bleeding over now. The problem (after literally 20 hours of trying to figure it out) was solved by changing the doctype. I read and tried it, immediately after posting. http://csscreator.com/node/18216.

Thanks again for your reply.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Awesome, I'm glad at least

Awesome, I'm glad at least some people read my messages Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

readtseliot
Offline
newbie
Last seen: 13 years 15 weeks ago
Joined: 2007-05-25
Posts: 3
Points: 0

Seriously thanks - I had

Seriously thanks - I had been creating a joomla template and using a doctype they used on their official template tutorial. http://dev.joomla.org/content/view/1136/79/. I had NO idea why IE was looking SO drastically weird compared ot firefox, and I had run out of ideas on how to try and repair it.

Thanks again!
Skip :thumbsup: