Need some CSS help Please!

[jfrovich]

For the life of me i cant get the grey area to line up with the white
So when i add more content to one both will go deeper.

Hope that make sense
see
http://www.neilfriesen.com/category/exempt-securities/

Thanks for your help..

[SEFL]

You need a faux column (http://www.alistapart.com/articles/fauxcolumns/).

[WebSavvy]

You also have some code errors.


<div id="wrapper2"><div >
<tr>
<td><div id="wrapper">


There is NO opening <table> tag found in the content prior to <tr> & <td>

Also, when using XHTML <br> is coded as <br />

There's also this:


<div background-color:#000000>


Corrected:

<div style="background-color:#000000">

[jfrovich]

You need a faux column (http://www.alistapart.com/articles/fauxcolumns/).

You also have some code errors.


<div id="wrapper2"><div >
<tr>
<td><div id="wrapper">


There is NO opening <table> tag found in the content prior to <tr> & <td>

Also, when using XHTML <br> is coded as <br />

There's also this:


<div background-color:#000000>


Corrected:

<div style="background-color:#000000">


Thanks & thanks
So Glad I paid someone to do this for me..poop:

[WebSavvy]

Jason, you paid someone to do this for you and this is what they gave you?
I'd be asking for my money back. If you've paid someone to code a site for you it should at least be valid.

Have you ran it through the HTML validator yet?
If you haven't -- do. Then post the error messages to this thread. I can help you clean those up w/o any problems.

[WebSavvy]

Jas, you also have some text that's breaking up too, and a position issue with the heading (in ****) falling between the text section.

I've outlined the broken text section in red -- screencap below.
There's a validator that will let you grab screencaps using different browsers here (http://www.totalvalidator.com/) and it's free.

I'm using FF and the screencap below is what I see.

[SEFL]

Wow...I didn't even look at the code, since it looked like a question with a common answer, but...wow.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.neilfriesen.com%2Fcategory%2Fexempt-securities%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Most of those are because the javascript isn't in an external file, but there are still some beauts in there. My personal favorite is this one:

<li><a class="item_link" <li class="page_item page-item-4"><a hre

The so-called coder you hired deserves a severe beating with a large, blunt object...either that, or a pound of butter to cure the advanced case of Cranial-Rectal Syndrome. This kind of crap is what leads to link exchanges and paid link scams and all the other associated BS.

[jfrovich]

ya the entire process has been a sham
a 2 day css site, turned into almost 2 weeks and this is the code i get.

ill have to fix that later, my main focus is to fix the grey side bar, then at least the site look ok.
Also if you look at the page in IE, the top menu items are different colors.. slightly different goldish..

I will attempt to correct this..

[WebSavvy]

Wow. Sorry to hear you got ripped off like that, Jas.

I don't have a whole lot of free time right now because I'm fixing some browser issues with my own new design, but will have some free time by Monday. Once I do, if you need any help at all please send me a PM. I'd be more than happy to help and it won't cost you a penny. :)

The form on the page isn't valid either. I can help you fix that too.
Is this a site for a client of yours or is this your own site?
Do you have access to a CPanel or FTP login -- something where I'd be able to fix some problems for you?

[WebSavvy]

If you take the JS out of the page and put it into an external file,
fix this error:
<li><a class="item_link" ><li class="page_item page-item-4"><a href="http://www.neilfriesen.com" title="Home">Home</a></li>
Corrected:
<li class="page_item page-item-4"><a href="http://www.neilfriesen.com" title="Home">Home</a></li>
Remove: <tr> & <td> AND </td> & </tr>
(because they're not HELPING)

It'll allow you to narrow down display issues within the CSS file.
If the code is invalid markup, that alone will cause display issues.

Once those small areas are addressed it'll be easier to pinpoint what's causing the dropping section error.

Usually, it's because if there's a container width of 100% and two/three columns (which may or may not be using float) if they each have a width assigned and the combined width is equal to 100% also, IE will drop one or two of the columns because it automatically adds padding.

You can remove padding from elements by adding a CSS rule to the top of your file like this:

p, div, ul, li {padding:0;}

Of course, change the element blocks to apply to your situation.

Also, you can adjust the width of the columns to where their combined width equals 98% and IE should allow those columns to display properly without dropping any of them.

In your CSS file you can have specific rules for IE and Mozilla inside one file.
The first rule will be followed by IE and the second rule will be followed by Mozilla.

Example of how this is accomplished:

p.text {width:90%; font-size:0.9em;}
html>body p.text {font-size:0.8em;}


In the example above we've used a class called .text applied to a paragraph and have told IE to display the text using font-size 0.9em and we've told Mozilla to display it using font-size 0.8em

Anything that you want to be different for IE (because it's a backwards PIA-browser) set the rule for it FIRST and then follow with a second rule using html>body for Mozilla browsers.

However, IE7 will throw a monkeybar into that for you because IE7 follows BOTH rules. Yep, it doesn't know what it wants!

Danny, Irina, and I discovered this little goodie when we were trying to fix some display issues with websavvy's new design because IE7 had some problems. After digging deeper, and pulling the code apart line by line we found out IE7 followed it's own rules and everyone else's specific rules too.

I did a workaround for it using PHP, but something like that may be a little more than you're willing to get into.

hope this helps ...

[jfrovich]

I am trying to fix this, the css doesn't reference the grey image properly, its pulling from some color reference.

Now im a css hack, but my page that has 4 colors, black background, white content, **** for header & footer & text plus a grey side bar.

Do i need all these colors in the css files?
Im sure im off on some of the colors names.
but come on..

C5921A ****
C79115 off ****

e5e5e5 light grey
f0f0f0 lighter grey
4A5861 off grey
4A5861 dark grey
CDCDCD grey
d0d0d0 grey

FFFFFF white
f5f5f5 off white
eeeeee off white

779900 green
999999 darkgrey
009977 green/blue
303030 charcol
191919 black
OOOOOO not valid WTH, its listed twice.
000000 black
7A97DF light blue
666666 light brown

This is more of a mess than i thought, and i still have to deal with the IE css file that was created..

[jfrovich]

also do i need a css file for IE, i renamed it the site looks exactly the same

[g1smd]

Make sure the HTML code is 100% valid.

You're wasting your time until the HTML code is fixed.

[jfrovich]

Make sure the HTML code is 100% valid.

You're wasting your time until the HTML code is fixed.


I see will switch my focus to that.

this is turning out to be very complicated.
as im working with several php files that make up one page
and searching the php files to fix the errors is not that easy..

this is WAY over my head..

[jfrovich]

im staring to validate the css, will attempt the html in a while.

[SEFL]

Dr*amw*v*r FIXED coding errors, as opposed to creating them?

Return the software to the manufacturer. It must be defective.

[jfrovich]

Dr*amw*v*r FIXED coding errors, as opposed to creating them?

Return the software to the manufacturer. It must be defective.

ya i thought dream weaver fixed the errors, but it broke the template.:cry:

[Connie]

I'm not a CSS expert, but most web pages do not need a different CSS file for IE. There are exceptions, but there rare in my experience.

I hate PHP, but it is similar to SSI which is what I normally use. I don't think your PHP files are the problem. They are all using the same CSS file.

All PHP files do is put the HTML on the Page. The html displayed on each page is called from different PHP file. This is the same as calling html to be put on a page using SSI. Either way each one of those files is going to use the same CSS file.

[jfrovich]

Removed the IE css
Found a free tool http://www.blumentals.net/csstool/
that made it easy to understand how to validate the css

Got it all validated except this, it not working, its like something is limiting the height
background-image: url(images/bg1.PNG) repeat-y;

but i have 155 warnings..

[SEFL]

ya i thought dream weaver fixed the errors, but it broke the template.:cry:

That's more like DW. Seriously, dude, I'd say that's your first problem...WYSIWYG dependence. The sooner you take the learning curve and learn how to do things by hand, the better off you'll be. The number of people who can even code a basic web page by hand (and I mean code it correctly, tableless layout, cross-browser compatible, etc.) is surprisingly low.

[SEFL]

What does this validator (http://jigsaw.w3.org/css-validator/) say, Jason? It's usually a lot better at catching errors and sometimes better at explaining them.

[Blue]

Dreamweaver is not the problem. Just use DW's code view.

I've done hundreds of sites with DW without ever a hitch.

I can hand code with the best of them but don't need nor want to.

My personal productivity level is much higher with the tools I use.

If you think DW is at fault it just means you haven't learned how to use it correctly. One just needs to learn to use tools to their fullest capability.

Again, DW is not the problem.

[SEFL]

Sorry, John...DW is the problem, has been the problem for many years, and as Adobe and Macromedia form the real unholy alliance (one that no one seems to want to acknowledge), it will continue to be the problem. The tool is awkward, buggy, bloated, and continually creates things that take longer to fix than it would just to do them properly, by hand, in the first place. I've used it, I've used it properly, and this is what I've found.

DW is a lot like the SEO tools out there. It "guesses", and usually guesses wrong. I don't want anything guessing for me. I'll tell you what I want. Jason's learning this right now, so he can attest to that. And if you're going to use the code view, then you may as well remove the bloat MM created and just use a text editor.

What's really sad is that the best web editor out there is about 10 years old and was killed by the same Macromedia dumbasses when they bought out Allaire. Get a copy of HomeSite sometime (it will still run in most cases), learn how it works, and watch your development time slashed by about 3/4.

All MM has done is spawned a legion of braindead sheep Macrowhores who create websites resembling dog's breakfasts (especially from the coding point of view) and then go around talking to their other stupid little Macrowhore friends about the pretty pictures they just painted.

MM = crap. And now that Adobe bought them out, MM = really bloated, resource-hogging crap.

Seriously, John, try creating a tableless layout simetime in Dr*amw*av*r. Ideally, a 3-column layout with a header and a footer (or as some people like to refer to it, the Holy Grail of CSS layouts). Make sure it has no errors and works in at least IE (both 6 and 7) and Firefox. When you're bald from ripping your hair out, come back and say what you just said.

[Blue]

Been there, done that. No problems.

DW is not the problem.

:)

[Connie]

Seems to me like we've had this disagreement before. There are valid points to both sides of the argument.

Where your both wrong is that the average webmaster will never acquire the coding knowledge to the degree that you have Adam. At the same time the average webmaster will never master DW. At least that's MHO.

I don't think there is a right or wrong to this disagreement. It all boils down to how much time each individual is willing to put into learning code, and how DW works.

I will agree with Blue that if you have a good working knowledge of the code and are willing to spend the time to fully understand DW, DW could be a good time saver.

Disclaimer. I don't use DW. I do all my pages by hand.

[WebSavvy]

Disclaimer. I don't use DW. I do all my pages by hand.
Same here. I code each page, one by one, by hand. I use editPad.

[Blue]

Seems to me like we've had this disagreement before. There are valid points to both sides of the argument. We have, but IMO Adams main point about the software (or the company behind it) being at fault is simply neither logical nor valid.

Can DW put out bloated sloppy code? Sure. But so can notepad. It all depends on how knowledgeable one is in coding and how well one has learned to utilize the program.

And just because you put a powerful program in the hands of a novice resulting in them putting up a sloppily coded and bloated site doesn't put either the software company nor the software itself at fault. The fault lies squarely with the person using the tool incorrectly. The resources are there for them to be able to make the best damn site out there. If they don't learn the tool nor take the time to gain the right coding knowledge it's their own damn fault for whatever results.

DW is a full featured, complicated, many levels deep tool just like many other tools out there.

Give a guy a hammer and he can pound a nail (or his thumb). Give a guy a set of blueprints and all the tools and materials necessary to build a house and I guarantee he will be in over his head. He must learn many things first before being able to build a house.

Give a guy a tricycle and he'll happily ride up and down the block. Give the same guy a Nascar vehicle and I guarantee he'll hit the wall. He must learn first how to harness the power of the machine.

Give a guy a butter knife and he'll spread PB&J quite nicely on his sandwich. But give him a scalpel and I guarantee he'll kill the heart patient he's performing surgery on. Again, one needs to learn first. It isn't the scalpels fault his patient died.

Give a guy notepad and he can write some text to print out and send to his girlfriend. But without coding knowledge he'll never put up a decent website.

It goes on and on. Just because a piece of software has the capability to put out bloated sloppy code doesn't mean that it always will. It is the responsibility of the end user to learn the necessary elements to make it work right.

[g1smd]

*** DW ***

I don't use any of that stuff. I have my toolbox of HTML code segments, include files, and stylesheets to build pages from.

Once the main page layout is done, the content just needs to be dropped in. That content is always marked up in a semantic way.

[jfrovich]

ya this is a pain
just going to have to pay someone to fix it
ive been working on this for a week, hacking away.
usually i learn from this, but i think i don't have the best base to start with.

[WebSavvy]

Jason, don't have the same guy as before, do it. It'll just end up worse than it is now. Contact Blue and ask him for a quote. He's really good at this kind of thing and has tons of experience with WordPress, DreamWeaver, and valid markup.

I can vouch for his capabilities because I've seen his work firsthand.
You know my work is good, because you've seen mine from previous custom work for you.

[jfrovich]

so i had an idea
remove all the css and start over..
now if i knew css better it would be easy..

So i added one piece back at a time
and eliminated 400 lines of code.

Now from what i could figure out this is messed up

if i remove #wrapper i can see why the gray section is not working as its not contained properly see 1st image, if i change the width to say 502, see 2nd image.

#wrapper {
clear: both;
float: left;
width: 780px;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #000000;
}

The more i play with it, i think part of the issue is float: left;


If i remove #content, then i get a stretched version of image #2.

#content {
float: left;
width: 400px;
padding: 0 0px 10px 30px;
display: inline;
}

any ideas..

And now to see what the other 400 lines of css did..

[jfrovich]

Float css

Floating is often used to push an image to one side or another, while having the text of a paragraph wrap around it. This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes.

WTH, this isnt what i need.

also in my sidebar

float right

#sidebar-wrapper {
width: 275px;
display: inline;
height: 100%;
float: right;
margin-top: 0px;
color: #FFFFFF;
background: #4A5861 url(/images/bg1.PNG) repeat-y;

}

#sidebar{
float: right;
padding: 0px 0px 10px 10px;
width: 250px;
margin-left: 10px;
margin-top: 10px;
color: #FFFFFF;
background-color: #4A5861;

}

[WebSavvy]

Jas, let me try and show you what it means by example.

:)

If you're using a <table> you're able to have two columns right next to one another side-by-side by doing this:

<table>
<tr>
<td>Left Side</td> <td>Right Side</td>
</tr>
</table>


However, when using a table-less design (<div>'s) that's not possible. A <div> is a block element and is displayed at 100% width by default unless it's given specific rules in CSS.

So, to get two <div>'s next to one another side-by-side, you have to use float: and it'll place the <div> next to the other one providing the width isn't too wide.

So, we'd end up with this:

<div>
<div id="left">Left Side</div> <div id="right">Right Side</div>
</div>


We'd need to use CSS rules like this:

div#left {
width:30%; float:left;
}

div#right {
width:69%; float:right;
}

I never set the total width of the two <div> combined to equal 100% exactly, because this way it allows for screen res at 800x600 without one column dropping below the other.

hope this helps