CSS Column problem

When I try to do a 2-columns layout within the main content
of the page, the 2nd column is dropping about 12pixels down in
Firefox2/pc (IE, oddly enough, is working).
Any ideas?
http://www.davidkerrdesign.com/new/index.html
here's the relevant css:
#mainContent .column1 {
width: 224px;
padding-right: 30px;
float: left;
margin-top: 0;
padding-top: 0;
#mainContent .column2 {
width: 224px;
margin-left: 256px;
margin-top: 0;
padding-top: 0;
}

DavidKerr wrote:
> When I try to do a 2-columns layout within the main
content of the page, the
> 2nd column is dropping about 12pixels down in
Firefox2/pc (IE, oddly enough, is
> working).
>
> Any ideas?
>
>
http://www.davidkerrdesign.com/new/index.html
>
> here's the relevant css:
>
> #mainContent .column1 {
> width: 224px;
> padding-right: 30px;
> float: left;
> margin-top: 0;
> padding-top: 0;
> }
>
> #mainContent .column2 {
> width: 224px;
> margin-left: 256px;
> margin-top: 0;
> padding-top: 0;
> }
>
#mainContent .column2 h2, #mainContent .column1 h2{
margin-top: 0;
padding-top: 0;
HTH
chin chin
Sinclair

Similar Messages

Column Problems Between Explorer and Firefox

First, I apologize if this is something that has been posted.
The search function doesn't seem to be working, so I've been unable
to check for previous posts on-point.
I am having trouble with the columns in a table layout on a
site I am designing. It's located at
www.staggsmarketing.com/fleishell.html. The columns render properly
in firefox, but not at all so in Explorer. If you view the Explorer
version, the problem is quite obvious, so I won't explain further.
If anyone can take a look at the site and suggest what I've
done wrong, I would appreciate it. It was designed in CS3, and I've
run all the standard dreamweaver tests (from the results tab) to no
avail.
Thanks in advance!

> As to Walt's apparent suggestion that it's a total
mistake to rely on DW
> without extensive HTML/CSS knowledge, I hope nobody else
is scared away
> from DW
> after reading it.
Walt's suggestion was right on target. Using DW with no
knowledge of HTML
will always produce sub-optimal results.
> I've designed maybe 4 to 5 dozen sites with DW and only
a
> scintilla of coding knowledge compared to many of the
folks on these
> forums,
> and I really have only had to deal with three or four of
Walt's blind
> alleys
> (including this one).
You are in blind alleys you do not yet know about. This
philosophy is
short-changing you AND your paying customers.
> Web design is a hobby for me
And your output will always reflect this.
> I recommend it to anyone with an
> "HTML and CSS for Dummies" level of knowledge.
I don't. It will be a continual frustration for them,
especially if they
want to rise above the 'hobby' level.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"testaggs" <[email protected]> wrote in
message
news:[email protected]...
> Alan, thanks -- I took a look at the path you were
talking about, and it's
> a
> leftover from something before I put the site online. I
am able to remove
> it
> without issue. Still doesn't fix the column problem; I
may take Walt's
> advice
> and start over on the columns if I don't get any
more-helpful posts on the
> problem, but I'll wait a few days to see what others
might suggest. The
> few
> times I've run into real problems before in DW, it's
always been a simple
> fix
> that was just outside my skillset. I'm hoping someone
sees that here and
> says,
> "You idiot, it's the ???? tag."
>
> As to Walt's apparent suggestion that it's a total
mistake to rely on DW
> without extensive HTML/CSS knowledge, I hope nobody else
is scared away
> from DW
> after reading it. I've designed maybe 4 to 5 dozen sites
with DW and only
> a
> scintilla of coding knowledge compared to many of the
folks on these
> forums,
> and I really have only had to deal with three or four of
Walt's blind
> alleys
> (including this one). I agree it's a great tool for
those with good
> coding
> knowledge; but even with only an introductory level of
coding knowledge,
> I've
> found it to be a fantastic program. Would I be better if
I had that
> knowledge?
> Yes, loads. Would I be able to design anything with my
current coding
> skills
> but WITHOUT DW? Not even a one-line blank page (that's
an exaggeration,
> but
> you see the point). Web design is a hobby for me, and DW
has been a
> great
> vehicle to help me make it a useful one. I recommend it
to anyone with an
> "HTML and CSS for Dummies" level of knowledge.
>

CSS Float Problem

Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me. I have checked everything but can't find the problem. Thanks in advance;
example of problem here http://davidbrown.ipower.com/template/template.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Our Jewelry Retail Secrets - Thank You</title>
<link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="wrapperfix">
    <div id="toporange_bg">login</div>
</div>
   <div id="wrapperfix_top_grey">
    <div id="top_grey_content_wrapper">
      <div id="big_logo"></div>
      <div id="welcome_user">Welcome "username here"</div>
    </div>
</div>
</div>
    <div id="main_content">
      <p>
        
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
</div>
    <div id="footer_container">
      <div id="footer">
        <div id="footer_left">Footer Left</div>
        <div id="footer_centre">Footer Centre</div>
      <div id="footer_right">Footer Right</div></div>
    </div>
</body>
</html>
#footer_container {
background-color: #333333;
width: 100%;
top: 0px;
margin: 0px;
padding: 0px;
#footer {
background-color: #666666;
min-width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 1000px;
height: 150px;
overflow: hidden;
clear: both;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
#footer_left {
float: left;
width: 33%;
margin: 0px;
padding: 0px;
height: 150px;
#footer_centre {
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;
float: left;
#footer_right {
float: left;
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;

I still don't see the #footer_left rule in the CSS in the online example at
http://davidbrown.ipower.com/template/template.htm

CSS Display Problems

Hi everyone, I hope someone can help me out with this
problem.
My website displays fine in all the browser that I've tested,
but I've restenly noticed that areas are rendered wrong in the
Google Cache snapshot?
Example:
My Site:
www.dcypher.co.uk
Click
to view Google Cache Snapshot
This is the CSS code I have for the 2 column's in the body
that are displaying incorrectly:
#main {
background-image: url(images/mainBackground.gif);
background-repeat:repeat-y;
background-color: #666666;
width: 700px;
height: 100%;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
overflow: auto;
#mainText {
width: 434px;
margin: 0px;
padding-top: 40px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
float:left;
#mainNav {
width: 156px;
margin: 0px;
padding-top: 40px;
padding-right: 25px;
padding-bottom: 40px;
padding-left: 25px;
float:left;
I hope someone can shed some light on this for me as i'm
completely stumped.
Thanks in advance.
Webbo

Yes...the pages from the book display perfectly in dw8, but
not in DWcs3.
I found that by commenting out the "clear:left;" under "#nav"
the page displays properly in DWcs3, too. That leaves open the
question of "why".
Thanks.

Fluid column problem

I'm new to CSS but have opted to go for a 2 col fluid site.
One page is causing the background to repeat - I've made it "no-repeat" so now just have a black bg at the bottom.
I believe the thumbnails are pushing the page down but I don't know how to sort it out.
CSS & HTML code below.
Many thanks for any advice.
Paul
        COLUMNS
#col1
    float: left;
    margin-left:8%;
    margin-right:1%;
    margin-top:25px;
    border-top:1px solid #999999;
    padding-top:10px;
    width:35%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:17px;
    color:#333333;
#col2
    float:left;
    margin-left:1%;
    width: 45%;
    margin-top:25px;
    border-top:1px solid #999999;
    padding-top:10px;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:18px;
    color:#333333;
    text-align:center;
        FOOTER
#footer
    width:50%;
    float:left;
    margin-left:8%;
    margin-right:2%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:16px;
    text-align:left;
    color:#ffffff;
    margin-top:20px;
#subfooter
    width:32%;
    float:right;
    margin-left:1%;
    margin-right:1%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:12px;
    text-align:center;
    color:#ffffff;
    margin-top:20px;
        DYNAMIC DRIVE images
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
float:right;
.thumbnail:hover{
background-color: transparent;
.thumbnail:hover img{
border: 1px solid #AFB3B4;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
border: 2px solid #AFB3B4;
visibility: hidden;
color: black;
text-decoration: none;
margin-top:175px;
margin-left:2px;
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;
</style>
HTML
<div id="col1">
<p><span class="style10">A well trained dog brings so much more enjoyment to the owner than one who constantly pulls on the lead or who refuses to return when let off it.<br>
<p>While an obediant dog doesn't "just happen", there is no purpose in giving timelines for this stage or that. Every dog is different.</p>
I always train on a "one to one" basis and the training is tailored to suit your needs. Training is structered and will require time and commitment from and you.
<p><strong>But the results are well worth your hard work.</strong></p>All training ??etc etc etc TO CONTINUE...<br>
The early training commences the better - even a young puppy can be taught basic manners! <br><br>
Having been surrounded by a variety of breeds as diverse as Rottweilers and Border Terriers, my love of dogs has, over the past 25 years,
introduced me to all types of issues. <br>
<br>
This experiance I have gained has proven invaluable to many owners and their dogs - from the smallest puppy requiring basic training to an Akita with a real attitude problem.
<p><strong><a href="Training.htm">Training</a></strong> and correcting <strong><a href="Behaviour.htm">behaviour</a></strong> is carried out on a "one to one" basis. Just me and you - and your dog!</p>
<p>This personal service is retained for <strong><a href="Boarding.htm">boarding</a>.</strong> No draughty kennels for my guests, but the warmth and security of my own home. One of the family!
And I mean personal. Never any more than two dogs at a time.</p>
</span></p></div>
<div id="col2"><br>
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="images/JANET1.jpg" width="250px" height="165px" border="0" /><span><img src="images/JANET1a.jpg" /><br />She's the one!</span></a>
<a class="thumbnail" href="#thumb"><img src="images/PUPPIES1.jpg" width="250px" height="165px" border="0" /><span><img src="images/PUPPIES1a.jpg" /><br />Do you think they've seen us?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="images/SLEEPIN1.jpg" width="250px" height="165px" border="0" /><span><img src="images/SLEEPIN1a.jpg" /><br />ZZZzzzzZZZZZZzzzzz....</span></a>
<a class="thumbnail" href="#thumb"><img src="images/FRAN1.jpg"    width="250px" height="165px" border="0" /><span><img src="images/FRAN1a.jpg"/><br />Have you got my left profile?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="images/JANET1.jpg" width="250px" height="165px" border="0" /><span><img src="images/JANET1a.jpg" /><br />She's the one!</span></a>
<a class="thumbnail" href="#thumb"><img src="images/PUPPIES1.jpg" width="250px" height="165px" border="0" /><span><img src="images/PUPPIES1a.jpg" /><br />Do you think they've seen us?</span></a>
</div>
</div>
<div id="footer">Bolton <strong>·</strong> Appleby in Westmorland <strong>· </strong>Cumbria <strong>· ;</strong><strong>·</strong> </div>
<div id="subfooter">© The Magic 6 2010</div>
</body>
</html>

Hi Paul,
I could not reproduce the black bottom background with your source code. What I could see is this (Both images refer to the same line, I only was cutting them because of the Adobe width upload limit. You could them put together again :-))):
and:
Perhaps it's possible that you tell me the link to this page. If not already done, load the page on your server, no matter whether you are satisfied with it or not.
In any case, I recommend Nancy O. 's self-explanatory templates on this issue. Here is one of the links:
http://alt-web.com/Image-slices-in-a-CSS-based-layout.html
Dont fear this comment: "The page you seek cannot be found, but countless more exist..." and look at the right side "Free templates aso...
Hans-G.

Weird CSS + Browser Problem

Here is my code : <h:dataTable id = "brandTable"
var="brand" value="#{statisticsController.breakdownForBrand}"
width="500"
headerClass="headers"
columnClasses="statsColMain"
rowClasses="rows"
style="display:none;">
                         <h:column>
                              <f:facet name = "header">
                                   <h:outputText value="Brand" />
                              </f:facet>
                              <h:outputText value = "#{brand.attributeValue}" />
                         </h:column>
                         <h:column>
                              <f:facet name = "header">
                                   <h:outputText value="All Searches" />
                              </f:facet>
                              <h:outputText value = "#{brand.allSearches}" />
                         </h:column>
                                   <h:column>
                              <f:facet name = "header">
                                   <h:outputText value="Unique Searches" />
                              </f:facet>
                              <h:outputText value = "#{brand.uniqueSearches}" />
                         </h:column>
                    </h:dataTable>Here is the css:
.headers{
text-align: center;
font-style: italic;
background: #90BAE2;
white-space: no-wrap;
.rows{
white-space: no-wrap;
text-align: center;
.statsColMain{
width: 100px;
text-align: center;
My problem is whenever I use IE my data table is not using any css, but when I used Firefox everything is OK. Take note that it is only in the data table that I'm having problems (using IE) with regard to css, other parts of the screen are working ok vis a vis with css even when using IE. What seems to be the problem?

Everytime when you change the CSS, and if the browser caching is enabled, then do a hard reload to get the changes reflected. A hard reload in IE, FF and Opera can be done with CTRL+F5.

CSS columns sooooo close

I have been noodling around with a new web design, and have come up to three problems:
1. Currently I have laid out the main body (seen here: http://www.chartoonz.com/test/index.html) but the CSS isn't perfect. I want the two columns underneath the main div=BodyWrapper to line up on the left precisely with the left-side border of the BodyWrapper div and I want to push the columns all the way to match up with the right side. But I am getting weird padding and am not sure what's causing it. I have played with the marigins of all peritenent styles but I'm getting nowhere...
2. Additionally when I load the icons at the bottom of the page they work fine but once I've pressed them the purple link border shows. Blech! I tried getting rid of it on every psuedo selector: a:hover, a link etc... but it's still there. Any way I can kill this off?
3. When I view the page at full monitor height and width I still get a horizonatl scroll despite the fact that the page is epanded as much as possible. I assume this is due to the css input image at the top right which slides a little off screen. How can I kill this?
Any help woudl be appreciated
Thanks,
Aharon

Hello Aharon,
Playing with firebug here is what I did to make this work.
#columnContainer - make width 76.8%
#HalfBodyWrapper should be a class, shouldn't use an ID more than once on a page
on the second HalfBodyWrapper give a second class like hbw-right and float right with 0 margin
Make the width of the HalfBodyWrapper 46%
The purple border is an outline. give these a property - outline:none; Though I didn't see a border. I'm was using Chrome/FireFox.
The horizontal scroll is from your navigation. You can remove the width on #navWrapper.
Hope this helps.
Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

Column Problems Between Explorer and Firefox - Repost

First, I apologize if this is something that has been posted.
The search function doesn't seem to be working, so I've been unable
to check for previous posts on-point.
I am having trouble with the columns in a table layout on a
site I am designing.
It's located at www.staggsmarketing.com/fleishell.html.
The columns render properly in firefox, but not at all so in
Explorer. If you view the Explorer version, the problem is quite
obvious, so I won't explain further.
If anyone can take a look at the site and suggest what I've
done wrong, I would appreciate it. It was designed in CS3, and I've
run all the standard dreamweaver tests (from the results tab) to no
avail.
Thanks in advance!

Sorry to say that I´ve looked at the code and I
can´t find the issue. I´m more of a solve by fiddling
type. But if you´re using CSS, why not just go for a table
layout to make sure you get it right? The page is not that complex
and it shouldn´t be much of an issue.
There´s several other issues with the page though, like
lack of title tag, and an image menu- For SEO purposes you should
really make a CSS menu with text links.

Faux Columns - Problems Understanding and Implementing

Here's my site. It's not functional yet, so clicking on links won't do you any good. You can if you really want to, though:
http://www.ladyhawkslair.com/index04.html
The layout content consists of
A header (left; position absolute)
mainContent (floated right)
mainNav (floated left)
sidebar (floated left)
footer (cleared: both)
wrapper (contains everything and provides stone texture background)
I've read a little about faux columns, but
1) I'm not entirely sure I understand the concept. I'm really new to CSS.
2) I want to apply a fix to my current site and not re-do everything. Because I am new to CSS, it's taken me forever!
The examples cited on the pages I read dealt with columns of the same length. On my page, the "main content" starts at the top and the sidebar starts further down. I could cheat and add more height to the sidebar and main content, but it might not look very good if someone is using a font-size of 30 or something. Also, my footer would get lost. (Would this be an adequate if nothing else works?
Here's my code : http://www.ladyhawkslair.com/code.txt
If you can help me apply a column fix to my current design, please explain it to me like I'm five years old.
If I have to redo everything, I could put the header, mainNav and sidebar into a single column, since they are the same size. In that case, still explain it to me like I'm five.

I've messed around with a wrapper similar to the one you made for me (very nice by the way), but I don't think the faux column approach will work for me without a major page design overhaul. The repeating structure is interrupted at various points by a 15 px border of the stone texture, which I would like to keep, especially around the header. The wrapper background is then out of sync with the rest of the page. (The tear pattern doesn't match between the background for the sidebar and the background for the wrapper.) I tried setting top padding. I can get the two to sync, but then the top of the page looks ridiculous.
I could re-design the header, mainNav and the sidebar into a single column, but sync between the wrapper and the images on the sidebar would still be a problem because I would like to keep the 15px border around the logo on the left and (if possible) between "main nav" and the sidebar.
I've read about a javascript solution, but there are some issues:
1) I know nothing about javascript
2) I'm wondering if the two columns must start at the same place on the page. My "sidebar" div starts way below the "main content" div. I'd like both to extend to the end of the "main content" div.
3) If I created a two-column page (each column starts at the same distance from the top of the page, would the javascript work? Will it work with the page layout as it is?
My last resort would be to set the height to "auto" on the main content and match the height of the sidebar according to default font size. It may not look as pretty as it could for some people, but it's better than nothing, I suppose.
If you can think of a better option for me, let me know, especially if someone could help me with the javascript.
P.S. Here is the "last resort" solution: http://www.ladyhawkslair.com
P.P.S It turns out it's not much of a solution because it doesn't look the same in live view, Firefox and IE. Each is different.

Xml and css display problem

I have 1 small problem I have created a CSS file to display the title elements of an xml file but the titles appears to right on top of each other.
IE the titles symbol name last sales and net change % change and volume are all aligned on top of each other.
Below is my code.
quotes                                        {width: 750px; font-size: 12pt; margin: 20px}
dateTime                              {display: block; position: absolute; top: 0px; left: 600px; font-size: 8pt}
heading                              {display: block; font-size: 32pt; font-family: Arial, Helvetica, sans-serif; text-align: center; font-weight: bold}
subHeading                         {display: block; font-size: 14pt; top: -10px; font-family: Arial, Helvetica, sans-serif; text-align: center;                               font-weight: bold}
titles                                   {display: block; margin-bottom: 20px}
column                              {display: inline; font-size: 8pt; text-decoration: underline; font-family: "Courier New", Courier, monospace}
stock                               {display: block; border-bottom: 1px solid #000000; font-size: 10pt; font-family: "Courier New", Courier, monospace}
symbol                                        {position: relative; left: 40px}
#c1, column                         {position: absolute; left: 40px}
#c2 , company                     {position: absolute; left: 130px}
#c3, lastSale                         {position: absolute; left: 430px; width: 70px; text-align: right}
#c4, netChange                         {position: absolute; left: 510px; width: 80px; text-align: right}
#c5, pChange                         {position: absolute; left: 590px; width: 80px; text-align: right}
#c6, volume                              {position: absolute; left: 640px; width: 100px; text-align: right}Edited by: user9311551 on Jan 16, 2012 5:20 PM

FWIW, there were significant rendering improvements made in
DW8, so it
may be worth the upgrade if you're creating layouts in DW.
In the meantime, try adding some content to the bannerlarge
container. I
think DW may be incorrectly collapsing that tag since it's
empty.
HTH,
Randy
> Dreamwaever MX 2004 for the mac

CSS columns - Please Help!

I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css
The "sponsors" div will not align with the top of "headlines"
and "content" divs. Thanks so much for any help.
Mark

Hi Mark --
Rather than using such huge margins (536 px for #sponsors!)
try this layout.
It's basically the same structure as your page.
Hope this helps.
John
<style type="text/css">
body {
font-family: verdana, "Trebuchet MS", Arial;
margin-top: 30px;
text-align: center;
font-size: 100%;
margin-bottom: 20px;
background-color: #97895e;
h1 {
font: bold normal 15px Arial, Helvetica, sans-serif;
color: #b3060c;
text-align: left;
margin: 0px;
padding: 0px;
h2 {
color: #b3060c;
text-align: left;
margin-bottom: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
h3 {
color: #b3060c;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
margin-top: 5px;
margin-bottom: 2px;
padding-top: 3px;
h4 {
color: #b3060c;
text-align: left;
font-size: 80%;
margin-top: 7px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
padding: 0px;
p {
color: #000000;
text-align: left;
margin: 0px 0px 0px 1px;
padding: 5px 0px 0px;
font-size: 80%;
#wrapper {
position: relative;
padding: 0px;
width: 760px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
text-align: left;
background-repeat: no-repeat;
background-position: left top;
#header {
background-image: url(../assets/page_elements/header.gif);
background-repeat: no-repeat;
height: 106px;
background-position: right;
#content {
float: right;
width: 350px;
margin-left: 32px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
padding-right: 5px;
margin-top: 15px;
#leftsidebar {
float: left;
width: 182px;
margin-top: 15px;
#leftsidebar h2 {
font: bolder 10pt Arial, Helvetica, sans-serif;
color: #b3060c;
text-align: left;
padding-left: 20px;
#rightsidebar {
float: right;
width: 172px;
margin-top: 15px;
margin-left: 10px;
padding-right: 5px;
#rightsidebar p {
font-size: 70%;
#rightsidebar h2 {
color: #b3060c;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
.clearer {
clear:both;
height: 1px;
overflow: hidden;
line-height: 1px;
margin-top:-1px;
background-color: #97895e;
#footer {
background-color: #FFFFFF;
background-image:
url(../assets/page_elements/arch_bottom.gif);
background-repeat: no-repeat;
height: 30px;
#bottomnav {
background: #97895e;
color: #544324;
text-align: center;
font-size: 70%;
padding: 15px;
#bottomnav p {
color: #544324;
text-align: center;
font-size: 85%;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>

<div id="leftsidebar">
<h2>#leftsidebar DIV </h2>
</div>
<div id="rightsidebar"style="padding-bottom: 20px;">
<h2>#rightsidebar DIV </h2>
</div>

<div id="content">
<h2>#content DIV </h2>
</div>

<br style="clear:both;"/>
<div id="footer"></div>
<div id="bottomnav"><p>Bottom navigation and
copyright notice</p>
</div>
</div>
</body>
</html>

Help with CSS column display

I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css.
The absolut wierdest thing just happened. After I uploaded it
for you to see, it seems to display correctly! However, inside DW8,
it still shows the sponsors div being pushed down below content.
I'm very confused now! Can anyone give me a hand? Thanks.
Mark

quote:
Originally posted by:
mlundy
I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css
The absolut wierdest thing just happened. After I uploaded it
for you to see, it seems to display correctly! However, inside DW8,
it still shows the sponsors div being pushed down below content.
I'm very confused now! Can anyone give me a hand? Thanks.
Mark
Actually, it still does not work correctly. Because I have
already applied a background image to the containing div, it
appears correct. The sponsors div content actually still falls
below the center, content div, instead of being top-aligned with
the headlines and content divs.

Comp. Primary key class-field mapping to DB columns problem.(EJB 2.0 CMP)

Hi!
I have deal with EJB 2.0 CMP bean.
I have a composite PK so use the java class to store it. And there is a corresponding field in the Entity Bean with its primary key class type.
The problem is: when deployment tool creates sql query for the findByPrimaryKey(PKClass ck)
where ck is an object with 3 fielde : a_id, b_id, c_id.
it says:
<sql>SELECT "ck" FROM "MyTable" WHERE "ck" = ? </sql>
And it means by the "ck" simple a column in DB but NOT the composite key which has to be splited into 3 different fields. So the container can't do the proper mapping.
Does anyone know solutions?

I was wrong about primary key class fields, take a look at Ejb2.0 Specification (10.8.2):
The primary key class must be public, and must have a public constructor with no parameters.
All fields in the primary key class must be declared as public.
The names of the fields in the primary key class must be a subset of the names of the container-managed
fields. (This allows the container to extract the primary key fields from an instance�s container-managed
fields, and vice versa.)
Right now I'm using BMP and I don't have this problems. Primary keys, calculated fields and types not supported by the DB can be easily achieved. But I understand your interest on CMP, is clearly evolving!

Span columns problem with Table of Contents order

Hello,
I'm having a strange issue with headings that span columns and Table of contents order. My document has a heading paragraph in a coloured box, which is then inserted in-line into a 2-column text box. The paragraph style for the box (set to in-line) is set to span all columns, so that the 2-columned text doesn't get messed up.
When I create a table of contents, the Heading style that is inside the coloured box is being picked up fine, but even though it is inserted before the headings below it, it is showing up after the level 2 headings, instead of before.
I have confirmed that the insertion of the blue bar is before the text below it, as when I remove the span columns option, the TOC works as it is supposed to. Is this a bug?

Hi there, thanks for the reply.
The only way I could move the inline box to the left was to make a custom anchor and change the X value, this did not affect the TOC unfortunately. I also checked the location of the invisible marker indicating the location of the inline text box, and it is definitely before the heading that follows. I confirmed this by removing the span columns option for that paragraph, and the TOC displayed properly after doing that, meaning there is likely some problem with the span columns option not properly recognizing the order of content.
Regards,

Is this Cf or CSS causing problem?

I am on the home stretch on this job. I have this one irritating problem and I am not sure if the prob is being caused by a <cfinput> tag or a style sheet
problem. Maybe someone out there can help identify what's happening. My guess is that it is in the CSS, but pulling my hair out to find it.
You will have to go to this page: http://www.renobowls.com/leagues/leagueRegSelect.cfm and click on "Individual Reg" button.
Look at the radio buttons underneath "Step One: Individual Registration"
I cannot get these suckers to line up in a single line. Here is the code:
<div class="box2">
<table>
<tr>
<td width="100%">
    Are you a returning Reno Bowls league player?
</td>
<td width="50%">
<strong>NO</strong> <cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no">
</td>
<td>
    <strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes">
</td>
</tr>
</table>
</div>
Here is the CSS:
/*box2*/
.box2{ background:#e8e8e7; width:100%;}
.box2 .indent-box-1{ padding:35px 0 0 0; }
Inherited CSS: (going backwards)
div.container { overflow:hidden; width: 100%}
then:
/*box*/
.box{ background:#fdfdfd; width:100%;}
.box .border-top {background:url(images/border_top.gif) repeat-x top;}
.box .border-bottom {background:url(images/border_bottom.gif) repeat-x bottom;}
.box .border-left {background:url(images/border_left.gif) repeat-y left;}
.box .border-right {background:url(images/border_right.gif) repeat-y right;}
.box .corner-top-left {background:url(images/corner_top_left.gif) no-repeat left top;}
.box .corner-top-right {background:url(images/corner_top_right.gif) no-repeat right top;}
.box .corner-bottom-left {background:url(images/corner_bottom_left.gif) no-repeat left bottom;}
.box .corner-bottom-right {background:url(images/corner_bottom_right.gif) no-repeat right bottom; width:100%; }
.box .indent-box{ padding:35px 35px 17px 35px; }
then:
/*T-Reg*/
#tReg { font-size:0.75em; width:100%; text-align:left;}
#tReg .indent-main{padding:0 67px 0 67px}
#tReg .title{ background:url(images/bg_title.gif) repeat-x top; text-align:center}
#tReg .title h2{ margin-bottom:5px}
#tReg .img-left{ float:left; margin:0 20px 16px 0}
#tReg .img-left1{ float:left; margin:0 20px 0 0}
#tReg .img-indent{ margin:0 0 16px 0}
#tReg .img-indent1{ margin:0 12px 6px 0}
#tReg p{ margin:0 0 17px 0}
#tReg .p{ margin:0}
#tReg .p1{ margin:0 0 17px 0; width:100%}
#tReg .p2{ margin:0 0 7px 0}
#tReg h4{color:#6d6d6d; font-size:1em; }
#tReg h5{color:#2a88d8; font-size:.916em; text-transform:uppercase; margin-bottom:5px }
#tReg h2{color:#3b3e40; font-size:1.66em; text-transform:uppercase; margin-bottom:15px; line-height:1.2em }
#tReg .h2{color:#0f2f55; font-size:1.66em; text-transform:uppercase; margin-bottom:5px }
#tReg .h2 span{color:#1e5597; text-transform:none; font-weight:normal}
#tReg .tail{ background:url(images/tail.gif) repeat-x bottom; padding-bottom:17px; margin-bottom:17px}
#tReg ul{margin:0; padding:0; list-style:none;}
#tReg ul li{background:url(images/marker.gif) center left no-repeat; background-position:1 1px; margin:0; padding-left:18px; }
#tReg ul li a{color:#6d6d6d; text-decoration:none ; line-height:2em; font-weight:bold}
#tReg ul li a:hover { text-decoration:underline; }
#tReg .indent{padding:28px 0 0 0}
#tReg .indent-1{padding:0 0 0 128px}
.txt1{ color:#6d6d6d; font-weight:bold}
.txt2{ color:#b72723; font-weight:bold}
finally:
body {font-size:100%; line-height:1em; background:url(images/bg.gif) repeat-x #03162a; position:relative;}

try this:
<div class="box2">
<table>
<tr>
<td width="100%">
    <table style="width:100%">
      <tr>
        <td><nobr>Are you a returning Reno Bowls league player?</nobr></td>
        <td><strong>NO</strong></td>
        <td><cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no"></td>
        <td><strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes"></td>
     </tr>
    </table>
</td>
</tr>
</table>
</div>

CSS Column problem

Similar Messages

Maybe you are looking for