30 replies [Last post]
lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

I recently began to convert this page, which I originally implemented using tables, to CSS. It seems I'm lacking some fundamental understanding of layouts. I included only the very beginning of my code to illustrate the first couple of things I don't understand.

Box Test


Call
Jack Harrison, Attorney at Law
Aggressive Legal Counsel
937-461-4060
Photo of Jack Harrison, Attorney

/* graphic block rules */ div#graphics { color: #ffd700; background-color: #3c4c4f; }

div#graphicsimage {
position: absolute;
top: 0px;
right: 0px;
}
Looking at this code in both Firefox and Opera, there's a 10px margin around my "graphics" box that I don't specify. Setting margin: 0; border: 0; and padding 0; has no effect. If I set top: 0; left: 0; then the "graphics" box appears where it's supposed to. What is this bizarre margin, and why does it move my box by 10px when I haven't specified that?

Another problem is that even though I specify the "graphicsimage" as absolute, the "graphicsimage" box appears outside the "graphics" box. The "graphicsimage" box displays as if I specified position: fixed; but I didn't. Based on my reading of w3 CSS1 rules, a box specified with position: absolute; unless it has negative offsets, must be fully surrounded by the parent box. But the "graphics" box does not fully surround the "graphicsimage" box on either the top or the bottom.

At first I thought this must be a browser problem, but Firefox and Opera display this identically, so I don't understand some fundamental concept. I appreciate if somebody could explain it to me.

Thanks in advance.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 50 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

lostinwilderness wrote:I

lostinwilderness wrote:
I recently began to convert this page, which I originally implemented using tables, to CSS.

That's a mistake, in my opinion. You can't just convert old table based designs to modern CSS methods. Well you can, but it takes forever and is pointless if the old site worked.

What you need to do instead is to take the time to learn the basic concepts of semantic html and how CSS relates properly to it. To be successfull at the new methods you have to in effect forget all you know now (temporarily) because what you know now will be an obstacle to learning the new methods.

There are plenty of messages on how to do this here on the forum so I won't repeat it all here. But I just wanted to let you know that I think it's a big mistake to just try to redesign old pages. Leave the old pages alone and learn the new methods and then design new pages the new way. You'll save yourself tons of problems in the long run, in my opinion.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Can we see all of the CSS?

Can we see all of the CSS?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

That is all of the CSS for

That is all of the CSS for this example.

As for learning the new methods, I think one of the great strengths of web pages is elasticity. It allows pages to look good on small and large monitors. But apparently CSS isn't designed to make elasticity easy. I did find this page by an author who understands what I'm talking about. I haven't digested it yet for the broader lessons.

But can anybody explain that 10px offset and why my "graphicsimage" box is not contained in my "graphics" box?

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

lostinwilderness wrote:But

lostinwilderness wrote:
But apparently CSS isn't designed to make elasticity easy. I did find this page by an author who understands what I'm talking about.

Apparently you haven't done enough reading about CSS and its capabilities because CSS handles elastic layouts just fine. That example at CSS Tricks also isn't the best as it uses pixels instead of ems for its max-width value (as I pointed out in the comments of the article). There are plenty of other examples/tutorials etc on the web that follow a similar technique.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

There's other examples, but

There's other examples, but I have to get past this very first problem first. Why is my box offset by 10px, and why doesn't my outer box contain my inner box? Until I understand that, I can't move forward.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Probably because you're

Probably because you're relying on absolute positioning, which is generally a bad thing.

If you could post an annotated image of what you want to achieve, then we can suggest better ways of laying it out.

Verschwindende wrote:
  • CSS doesn't make pies

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

I'm using the image in the

I'm using the image in the original webpage. The reason I'm using absolute positioning is when I originally used float: right; the picture didn't float to the top of the page as it should (from my reading of the CSS rules). The picture isn't included in the parent box in that case either. It floats to the right but sits below the parent box. This seems to me like a clear violation of this rule, but both Firefox and Opera display it the same way. I would prefer to let it float, but that doesn't seem to work right for me either.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

Sorry for the double post,

Sorry for the double post, but I have new info.

I just revised my code and I found a discrepancy between Firefox and Opera. The new CSS is:
/* graphic block rules */
#graphics {
color: #ffd700;
background-color: #3c4c4f;
}

#graphicstext {
display: inline-block;
}

#boxinggloves {
float: right;
}
The new HTML is:

Box Test


Call
Jack Harrison, Attorney at Law
Aggressive Legal Counsel
937-461-4060
Photo of Jack Harrison, Attorney

Firefox displays the image to the right, with the top edge aligned with the bottom edge of the parent, which is the bottom edge of the last child div. Opera displays the image with the top edge aligned with the top edge of the parent, as I think it should. However, the bottom edge of the parent still does not come down and include the entire image, even in Opera.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Floated content has to come

Floated content has to come first in the source.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

Thanks. When I change that,

Thanks. When I change that, Firefox and Opera both do the same thing, but the parent box still doesn't expand to include the image. If I have no style rule for the img, the parent box includes it. But when I float it, or position it absolutely, it doesn't. Why?

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to clear your

You need to clear your floats.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

Thanks again. After looking

Thanks again. After looking at that page, I tried the FNE method for my graphics and my navbar.
/* global rules */
a:link {color: #ffcc33}
a:visited {color: #daa520}
/* a:hover {font-weight: bold;} */
span.phonenumber {color: #339900}
span.disclaimerlabel {color: #ff0000}

body {
background-color: red;
}

/* graphic block rules */
div#graphics {
color: #ffd700;
background-color: #3c4c4f;
float: left;
}
div#graphicstext {
display: inline-block;
}
div#ttcall {
position: absolute;
top: 20px;
left: 30px;
font-size: large;
}
div#ttjack {
position: absolute;
top: 45px;
left: 70px;
font-size: xx-large;
font-style: italic;
font-weight: bold;
}
div#ttaggressive {
position: absolute;
top: 90px;
left: 120px;
font-size: xx-large;
font-style: italic;
font-weight: bold;
}
div#ttphone {
position: absolute;
top: 130px;
left: 420px;
font-size: large;
}
div#graphics img {
float: right;
}

/* Top navbar rules */
div#navbar {
height: 30px;
width: 100%;
background-color: #852a2a;
float: left;
}
div#navbar ul {
margin: 0px;
padding: 0px;
line-height: 30px;
white-space: nowrap;
}
div#navbar li {
list-style-type: none;
display: inline;
}
div#navbar li a {
text-decoration: none;
padding: 7px 10px;
}
div#navbar li a:hover {
font-weight: bold;
background-color: #a90017;
}

Box Test


Photo of Jack Harrison, Attorney
Call
Jack Harrison, Attorney at Law
Aggressive Legal Counsel
937-461-4060

It looks great in Firefox, but not Opera. In Opera, my boxingloves image is at the upper left instead of the upper right, and the background color (which I'm using only for reference during development) of the body overrides the background color of the graphics block, but it does not override the background color of the navbar.

ETA: IE displays it the same as Firefox.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

When using floats to contain

When using floats to contain other floats, you should give them a width, so in this case give #graphics a width of 100%.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

That fixed the problem in

That fixed the problem in Opera. I sure appreciate all your help, but how would a new person know this stuff? Who would have guessed that adding a width property to the outside box with make the background color appear and the floated image to move to the correct side of the block? I read and reference HTML for the world wide web, 5th edition, by Elizabeth Castro, and it never mentions this. I look at the rules on w3. Is there one place to go to learn this stuff, or is it trial and error and help from more experienced people to learn it?

Do I need to get the O'Reilly books? Something else?

(I'm very nostalgic for my old Kerningham and Richie original C book right now. I never needed another reference for C coding until they changed the language to ANSI C. Wink )

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 10 years 14 weeks ago
Kansas City Metro
Joined: 2007-10-18
Posts: 188
Points: 0

A new person wouldn't know

A new person wouldn't know this stuff. They would study! And then study some more. And then some more. And...

http://www.alistapart.com/articles/12lessonsCSSandstandards

I've found the O'Reilly book "CSS; The Definitive Guide" helpful as a resource.

Peace.

~Soundscape
www.kenlange.com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

lostinwilderness wrote:Is

lostinwilderness wrote:
Is there one place to go to learn this stuff

There probably is, but...

lostinwilderness wrote:
or is it trial and error and help from more experienced people to learn it?

...that's the way I did it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

lostinwilderness wrote:or is

Quote:
lostinwilderness wrote:
or is it trial and error and help from more experienced people to learn it?

...that's the way I did it.

Glad I found you guys then. Wink

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

So I implemented the columns

So I implemented the columns as shown on this page. It was pretty simple and somewhat intuitive. I added the fix for IE6. It works in Firefox and Opera, but unfortunately the page didn't include a fix for IE7. Does anybody know of a fix for IE7?

Box Test


Photo of Jack Harrison, Attorney
Call
Jack Harrison, Attorney at Law
Aggressive Legal Counsel
937-461-4060


Jack Harrison Knows How To Win


Jack Harrison earned his reputation as a fighter with courtroom victories in all the courts in the greater Dayton, Ohio region. Whatever your legal problem, you want Jack Harrison on your side. Call Jack Harrison and put his experience and reputation for success to work for you.


Jack Harrison has fought over 300 jury trials and has 30 years experience as an attorney in the southwestern Ohio region. In criminal, civil and family law cases, Mr. Harrison has a proven track record of success for his clients. If you're in trouble with the law or need the legal assistance of an attorney, you want Jack Harrison on your side.


You need the best lawyer you can get to resolve your legal problems. If you've been arrested, you need a successful criminal lawyer who will aggressively defend your rights. If you've been sued or you need to sue, you need an experienced civil lawyer to litigate for you. If you have family law problems, you need a knowledgable family lawyer who will fight to get you the best resolution possible.


Legal problems don't end at the state line. In many cases, legal problems from other states impact your case in Ohio, or vice versa. Military service can also have an impact on your legal problems. If you have legal problems in another state, if you are from out of state and have legal problems in Ohio, or if you are in the military, Jack Harrison has the experience, including military service, to help you resolve those issues as well.


Call Jack Harrison, Attorney at 937-461-4060 or send an email today.

Services

  • Criminal Defense
    • Traffic
    • License
    • DUI / OVI
    • Drug Crimes
    • Theft & Burglary
    • Domestic Violence
    • Violent Crimes
    • Sex Crimes

  • Civil Law
    • Personal Injury
    • Probate
    • Contract Disputes
    • Medical Malpractice

  • Family Law
    • Divorce
    • Child Custody

  • Juvenile Law

Quick Contact


Name:

Email:

Phone:

Message:
Your Message
Select Contact Preference:
Phone Email





/* global rules */ a:link {color: #ffcc33} a:visited {color: #daa520} /* a:hover {font-weight: bold;} */ span.phonenumber {color: #339900} span.disclaimerlabel {color: #ff0000}

body {
min-width: 775px;
background-color: red;
}

/* graphic block rules */
div#graphics {
color: #ffd700;
background-color: #3c4c4f;
float: left;
width: 100%;
}
div#graphicstext {
display: inline-block;
}
div#ttcall {
position: absolute;
top: 20px;
left: 30px;
font-size: large;
}
div#ttjack {
position: absolute;
top: 45px;
left: 70px;
font-size: xx-large;
font-style: italic;
font-weight: bold;
}
div#ttaggressive {
position: absolute;
top: 90px;
left: 120px;
font-size: xx-large;
font-style: italic;
font-weight: bold;
}
div#ttphone {
position: absolute;
top: 130px;
left: 420px;
font-size: large;
}
div#graphics img {
float: right;
}

/* Top navbar rules */
div#navbar {
height: 30px;
width: 100%;
background-color: #852a2a;
float: left;
}
div#navbar ul {
margin: 0px;
padding: 0px;
line-height: 30px;
white-space: nowrap;
}
div#navbar li {
list-style-type: none;
display: inline;
}
div#navbar li a {
text-decoration: none;
padding: 7px 10px;
}
div#navbar li a:hover {
font-weight: bold;
background-color: #a90017;
}

/* middle of the page - services, main content, contact columns */
div#middle {
padding-left: 130px;
padding-right: 195px;
background-color:#ecf4f7;
}
div#middle .column {
position: relative;
float: left;
}
/* Centered main content block */
div#main {
width: 100%;
}
div#main h2 {
position: relative;
top: -15px;
left: 5px;
}
div#main p {
position: relative;
top: -30px;
padding: 5px;
}

/* Left hand services column rules */
div#services {
width: 130px;
margin-left: -100%;
right: 130px;
background-color:#6c7c7f;
}
div#services h2 {
position: relative;
top: -15px;
left: 5px;
}
div#services ul {
margin: 0px;
padding: 0px;
}
ul#servicelist {
position: relative;
top: -25px;
left: 5px;
}
div#services ul li {
list-style-type: none;
font-weight: bold;
}
div#services ul li a {
text-decoration: none;
}
div#services ul li a:hover {
color: #cc9900;
font-weight: bold;
}
div#services ul ul li {
position: relative;
left: 5px;
font-size: small;
font-weight: normal;
}
* html #services { /* to fix an IE6 bug */
left: 130px; /* RC width */
}
/* Right hand quick contact form rules */
div#quickcontact {
width: 195px;
margin-right: -195px;
background-color:#6c7c7f;
}
div#quickcontact h2 {
position: relative;
top: -15px;
left: 5px;
}
div#quickcontact form {
position: relative;
top: -45px;
left: 5px;
}
div#quickcontact p {
position: relative;
top: -45px;
left: 5px;
}

/* footer */
div#footer {
clear: both;
}

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

This:

This:

* html #services { /* to fix an IE6 bug */ left: 130px; /* RC width */ }

should be this:

#services { left: 195px }

because IE7 needs to see it too (not just IE6; also 195 seems to be the correct value for IE7). But because only IE browsers should get this rule, you'll need to move it out of your main stylesheet into an IE-only one served with conditional comments.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

Tyssen wrote:because IE7

Tyssen wrote:
because IE7 needs to see it too (not just IE6; also 195 seems to be the correct value for IE7). But because only IE browsers should get this rule, you'll need to move it out of your main stylesheet into an IE-only one served with conditional comments.

Thanks. That worked for IE7. I don't have IE6 to test. I figured that was the end of the hard stuff, but when I went to add my footer, it was all messed up. I tried several different implementations, and all looked like crap and were different in different browsers. So I set up a stand alone footer test to post here, and after I went back to my original layout, it looked pretty good in each browser. I must have learned something during all my testing. But there are still a couple of issues.
/* global rules */
a:link {color: #ffcc33}
a:visited {color: #daa520}
/* a:hover {font-weight: bold;} */
span.phonenumber {color: #339900}
span.disclaimerlabel {color: #ff0000}

body {
min-width: 775px;
background-color: red; /* just for debug */
}

/* footer */
div#footer {
float: left;
clear: both;
width: 100%;
background-color:#8c9c9f;
}
div#footer hr {
float: left;
width: 90%;
size: 2px;
color: #852a2a;
text-align: center;
margin-left: 5%;
margin-right: 5%;
margin-top: 2px;
margin-bottom: 2px;
}
div#addressphone {
float: left;
width: 100%;
}
div#addressphone p {
margin-top: 4px;
margin-bottom: 4px;
}
div#address {
display: inline-block;
margin-left: 15%;
}
div#phone {
display: inline-block;
float: right;
margin-right: 15%;
}
div#disclaimer {
float: left;
margin-left: 5%;
width: 90%;
}
div#disclaimer p {
text-align: center;
font-size: small;
}
div#locations {
float: left;
margin-left: 5%;
width: 90%;
}
div#locations p {
text-align: center;
font-size: small;
}

Footer Test






Phone: 937-461-4060

Fax: 937-461-4061

Email: [email protected]




Jack Harrison, Attorney

One First National Plaza

130 W. 2nd St., Suite 604

Dayton, Ohio 45402





Disclaimer: The information in this website is not considered legal advice and communication with attorneys using this website does not invoke attorney-client priviledge. Consult your lawyer personally for legal advice.




Serving the southwestern Ohio region including but not limited to:
Montgomery, Greene, Clark, Warren, Butler, Preble, Miami, Darke, Clinton, Fayette, Logan, Shelby and more counties...
Dayton, Kettering, Centerville, Oakwood, Beavercreek, Fairborn, Vandalia, Springfield, Xenia, Miamisburg, Lebanon, and more cities...
Copyright © 2007 Jack Harrison. All rights reserved. Back to top






_uacct = "UA-2172947-1";
urchinTracker();

The margin-right: 15%; is a lot less than 15% in FireFox, but works fine in Opera and IE. The margin-left: 15% works fine in all 3 browsers.

The horizontal rule doesn't display the color or size in FireFox or Opera, but it displays fine in IE. If I use height instead of size, Opera displays the correct height, but not FireFox. I added redundant rules to take care of the widths and margins for IE and the other browsers because they behave differently.

None of these things are show stoppers. The margin-right in Firefox is the worst. Has anybody else seen these problems?

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

I continued with this

I continued with this implementation, adding the even columns. Placing the overflow: hidden in the container didn't work in Firefox, Opera or IE, but I moved it to my page-wrapper, and it worked in Firefox and Opera, but it still doesn't work in IE. Does anybody know I can get the overflow to hide in IE? I would also like to fix the couple of issues with the footer I mentioned in the last post.

Box Test




Photo of Jack Harrison, Attorney
Call
Jack Harrison, Attorney at Law
Aggressive Legal Counsel
937-461-4060


Jack Harrison Knows How To Win


Jack Harrison earned his reputation as a fighter with courtroom victories in all the courts in the greater Dayton, Ohio region. Whatever your legal problem, you want Jack Harrison on your side. Call Jack Harrison and put his experience and reputation for success to work for you.


Jack Harrison has fought over 300 jury trials and has 30 years experience as an attorney in the southwestern Ohio region. In criminal, civil and family law cases, Mr. Harrison has a proven track record of success for his clients. If you're in trouble with the law or need the legal assistance of an attorney, you want Jack Harrison on your side.


You need the best lawyer you can get to resolve your legal problems. If you've been arrested, you need a successful criminal lawyer who will aggressively defend your rights. If you've been sued or you need to sue, you need an experienced civil lawyer to litigate for you. If you have family law problems, you need a knowledgable family lawyer who will fight to get you the best resolution possible.


Legal problems don't end at the state line. In many cases, legal problems from other states impact your case in Ohio, or vice versa. Military service can also have an impact on your legal problems. If you have legal problems in another state, if you are from out of state and have legal problems in Ohio, or if you are in the military, Jack Harrison has the experience, including military service, to help you resolve those issues as well.


Call Jack Harrison, Attorney at 937-461-4060 or send an email today.

Services

  • Criminal Defense
    • Traffic
    • License
    • DUI / OVI
    • Drug Crimes
    • Theft & Burglary
    • Domestic Violence
    • Violent Crimes
    • Sex Crimes

  • Civil Law
    • Personal Injury
    • Probate
    • Contract Disputes
    • Medical Malpractice

  • Family Law
    • Divorce
    • Child Custody

  • Juvenile Law

Quick Contact


Name:

Email:

Phone:

Message:
Your Message
Select Contact Preference:
Phone Email







Phone: 937-461-4060

Fax: 937-461-4061

Email: [email protected]




Jack Harrison, Attorney

One First National Plaza

130 W. 2nd St., Suite 604

Dayton, Ohio 45402





Disclaimer: The information in this website is not considered legal advice and communication with attorneys using this website does not invoke attorney-client priviledge. Consult your lawyer personally for legal advice.




Serving the southwestern Ohio region including but not limited to:
Montgomery, Greene, Clark, Warren, Butler, Preble, Miami, Darke, Clinton, Fayette, Logan, Shelby and more counties...
Dayton, Kettering, Centerville, Oakwood, Beavercreek, Fairborn, Vandalia, Springfield, Xenia, Miamisburg, Lebanon, and more cities...
Copyright © 2007 Jack Harrison. All rights reserved. Back to top






_uacct = "UA-2172947-1";
urchinTracker();

/* global rules */ a:link {color: #ffcc33} a:visited {color: #daa520} /* a:hover {font-weight: bold;} */ span.phonenumber {color: #339900} span.disclaimerlabel {color: #ff0000}

body {
min-width: 775px;
/* background-color: red; debug only */
}
div#page-wrap {
overflow: hidden;
}
/* graphic block rules */
div#graphics {
color: #ffd700;
background-color: #3c4c4f;
float: left;
width: 100%;
}
div#graphicstext {
display: inline-block;
}
div#ttcall {
position: absolute;
top: 20px;
left: 30px;
font-size: large;
}
div#ttjack {
position: absolute;
top: 45px;
left: 70px;
font-size: xx-large;
font-style: italic;
font-weight: bold;
}
div#ttaggressive {
position: absolute;
top: 90px;
left: 120px;
font-size: xx-large;
font-style: italic;
font-weight: bold;
}
div#ttphone {
position: absolute;
top: 130px;
left: 420px;
font-size: large;
}
div#graphics img {
float: right;
}

/* Top navbar rules */
div#navbar {
height: 30px;
width: 100%;
background-color: #852a2a;
float: left;
}
div#navbar ul {
margin: 0px;
padding: 0px;
line-height: 30px;
white-space: nowrap;
}
div#navbar li {
list-style-type: none;
display: inline;
}
div#navbar li a {
text-decoration: none;
padding: 7px 10px;
}
div#navbar li a:hover {
font-weight: bold;
background-color: #a90017;
}

/* middle of the page - services, main content, contact columns */
div#middle {
padding-left: 130px;
padding-right: 195px;
}
div#middle .column {
position: relative;
float: left;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
/* Centered main content block */
div#main {
width: 100%;
background-color: #ecf4f7;
}
div#main h2 {
position: relative;
top: -15px;
left: 5px;
}
div#main p {
position: relative;
top: -30px;
padding: 5px;
}

/* Left hand services column rules */
div#services {
width: 130px;
margin-left: -100%;
right: 130px;
background-color:#6c7c7f;
}
div#services h2 {
position: relative;
top: -15px;
left: 5px;
}
div#services ul {
margin: 0px;
padding: 0px;
}
ul#servicelist {
position: relative;
top: -25px;
left: 5px;
}
div#services ul li {
list-style-type: none;
font-weight: bold;
}
div#services ul li a {
text-decoration: none;
}
div#services ul li a:hover {
font-weight: bold;
background-color: #3c4c4f;
}
div#services ul ul li {
position: relative;
left: 5px;
font-size: small;
font-weight: normal;
}

/* Right hand quick contact form rules */
div#quickcontact {
width: 195px;
margin-right: -195px;
background-color:#6c7c7f;
}
div#quickcontact h2 {
position: relative;
top: -15px;
left: 5px;
}
div#quickcontact form {
position: relative;
top: -45px;
left: 5px;
}
div#quickcontact p {
position: relative;
top: -45px;
left: 5px;
}

/* footer */
div#footer {
float: left;
clear: both;
width: 100%;
background-color:#8c9c9f;
position: relative;
}
div#footer hr {
float: left;
width: 90%;
height: 2px;
color: #852a2a;
text-align: center;
margin-left: 5%;
margin-right: 5%;
margin-top: 2px;
margin-bottom: 2px;
}
div#addressphone {
float: left;
width: 100%;
}
div#addressphone p {
margin-top: 4px;
margin-bottom: 4px;
}
div#address {
display: inline-block;
margin-left: 20%;
}
div#phone {
display: inline-block;
float: right;
margin-right: 20%;
}
div#disclaimer {
float: left;
margin-left: 5%;
width: 90%;
}
div#disclaimer p {
text-align: center;
font-size: small;
margin-top: 4px;
margin-bottom: 4px;
}
div#locations {
float: left;
margin-left: 5%;
width: 90%;
}
div#locations p {
text-align: center;
font-size: small;
margin-top: 4px;
margin-bottom: 4px;
}

IE specific CSS
#services { /* to fix an IE bug */
left: 195px;
}

div#main h2 {
position: relative;
top: 5px;
left: 5px;
}
div#main p {
position: relative;
top: -10px;
padding: 5px;
}

div#services h2 {
position: relative;
top: 5px;
left: 5px;
}
ul#servicelist {
position: relative;
top: -5px;
left: 5px;
}

div#quickcontact h2 {
position: relative;
top: 5px;
left: 5px;
}
div#quickcontact form {
position: relative;
top: -25px;
left: 5px;
}
div#quickcontact p {
position: relative;
top: -25px;
left: 5px;
}
div#footer hr {
margin-bottom: -10px;
}

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 10 years 14 weeks ago
Kansas City Metro
Joined: 2007-10-18
Posts: 188
Points: 0

Footer Margin:

Footer Margin:
Use padding property instead:

div#phone {
display: inline-block;
float: right;
padding-right: 15%;
background-color:#999;
}

HR
HR styling is pretty spotty. I use css to create the same effect, like this:

.line {
padding: 0;
border-style: solid;
border-color: #ccc;
border-width: 0 0 1px 0;
margin: 6px 11px 6px 10px;
}



For Testing IE6 and other versions of IE:
http://tredosoft.com/Multiple_IE

For Testing Safari on a PC:
http://www.apple.com/safari/download/

FYI
In the div#footer hr, the following is not a valid property. Run it through the validator.
size: 2px;

~Soundscape
www.kenlange.com

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

Thanks.

Thanks.

The padding-right worked, but why didn't the margin-right work in Firefox?

I wasn't able to get the paragraph element to show up in the right place. Since I'm suing float almost everything, I floated it left, but it just disappeared unlike the horizontal rule.

Does anybody had any ideas to get rid of the excess columns in IE? If I can't get that fixed, this design is hosed.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

Nobody can help with the

Nobody can help with the column overflow problem in IE? It seems like somebody would have encountered this before.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 8 years 34 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Link? I skimmed the thread

Link? I skimmed the thread and could not find the link to your work, which is what I'd like to look at, rather than copying the code and losing all your images.

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

I put the test case up in a

I put the test case up in a development area on the site for you to look at.

http://www.jackharrisonattorney.com/dev/box.html

Thanks.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

Can everybody see the

Can everybody see the website and the IE 7 overflow problem?

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

.

I don't have IE7 right now to look in, but in general, it does okay with overflow:hidden cause it's a bit more compliant. Unlike the other browsers though it has this Haslayout thingie, and sometimes IE doesn't do what it should until you trigger it (by setting a height, or a width, or floating something, or saying position: relative; etc). You should google Haslayout as it's something you're going to run into a lot anyway.

But I started writing cause I wanted to say, I started out at zero, and googling HTML and CSS got me to a forum (not this one) where there were these crusty old guys who knew stuff, and one of them was really pounding on this book:
Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. He starts you right out with semantic XHTML (though I don't know why he didn't just use HTML4 but whatever) and basic CSS. He only gently covers different types of positioning, so that was my weak point when I was done with that book, and did more learning on the forums (any forum with Crusty Old Guys Who Know Stuff will teach you stuff-- but you've got to read lots of threads), and ran across another book, HTML Utopia by Rachel Andrew and Dan Shafer. It starts with an HTML document and various .psd's (or whatever) with various layouts. The books shows quite well the basis of stuff like absolute positioning (and its pitfalls), floats (though it really only touches on those... they could have their own books), and a few bugs.

There are a lot of sites that deal with specific issues, but they don't always make a lot of sense unless you have a basis already. A List Apart, HTMLdog, Mezzoblue, Position Is Everything, 456BereaStreet... there are so many with good articles, and you'll start bookmarking the ones you go back to a lot. But you need to know the basis first. You need to see why

<div id="something">
<div id="somethinelse">
<div>Something</div>
<div id="link"><a href="blah" rel="nofollow">A link</a></div>
<div>Another thing</div>
</div>
</div>

is really really wrong. It's got the nickname of "divitis" (obviously medical people didn't invent the term or it would be "divosis"), meaning you've got too many divs! It's hard to deal with CSS when your HTML is, as Tyssen said, bloated. And you only learn with time, persistance, and some good books or Gurus (or both).

I won't be at a windows machine til monday but I can take a look then if someone (or you) doesn't fix it first.

I'm no expert, but I fake one on teh Internets

lostinwilderness
Offline
Regular
Last seen: 11 years 34 weeks ago
Timezone: GMT-5
Joined: 2008-01-03
Posts: 17
Points: 0

Thanks for the reply.

Thanks for the reply.

When I first started, I had a lot fewer divs, but nothing appeared where it should have. I ended up having to group lots of things in divs, especially in the footer, to get to it behave right.

Somebody provided a link showing me how to run multiple versions of IE. I found a site on the web, you guys might already know it, that provides screenshots of a website in all different kinds of browsers. It looks like a super development tool to me.

http://browsershots.org/

I'll check out Haslayout, but I can't imagine this overflow problem in IE is hard to solve. I would think somebody would have the solution at their fingertips, and I would appreciate the help.

"A good reputation is one of many tiny annoyances to which I have never been subjected." -- Oscar Wilde via Keith Wyenberg

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 3 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Browsershots.org is cute,

Browsershots.org is cute, but I don't recommend it for someone who's seriously developing a site, becuase first you submit a site, wait a half hour, find that your session expired and you didn't get pictures, or you do finally see the picture and think, ooh, I'd better change that thing... then you resubmit... eh. Plus you can't test things like hovers, Javascript, different screen resolutions or play with the browser window widths... you really need a real IE6 and 7. Tredosoft has them, and they're easy to download so long as you don't have Vista (XP works but there's a thingie you need to add, a MIME type, becuase of some security update or something... eh, it's on the site).

Anyway, I've looked at the site in IE7 and Opera, and see zero difference between the two... what was the problem again? You might have fixed it; I see that :hover doesn't make the text bold anymore (the secret to that is to move your fontsize down by one when you BOLD so that the now-thicker letters don't force everything to expand).

Good luck.

I'm no expert, but I fake one on teh Internets