I checked this code in Firefox, safari, IE6 and IE7. It works fine in Firefox and Safari but not in IE 6 or 7. The box it too big.

Any thoughts or hits to why this is and how I can fix it.

Also, any suggestions on my css would be great. Still learning all the techniques.

Design (http://psyberhosting.com/new/index.php)

I don't know if this will fix your problem, but
id="feature_box_outer"
id="feature_box_inner"
id="feature_box_header"
id="feature_box_txt"

Should be
class="feature_box_outer"
class="feature_box_inner"
class="feature_box_header"
class="feature_box_txt"

And in the styles, they will be defined as:
.feature_box_inner
.feature_box_header
etc.

Basicly, id should be used as a unique identifier for an object. If you want some style definitions shared by multiple items, use class.
:)

You have a float based layout...but I don't see any <div style="clear:both;></div> anywhere on the page after the float divs.

You have a float based layout...but I don't see any <div style="clear:both;></div> anywhere on the page after the float divs.Empty clearing divs are so 2004 :P

Try this - it handles clearing in all modern browsers, triggers HasLayout in IE7 and is properly ignored in IE6:

/* CLEAR STUFF */
#object1, #object2 { overflow:hidden }
* html #object1, * html #object2 { height:1% ; overflow:visible }Just add the name of every object you wish to clear to the list. It makes your code much more elegant, while managing clearing from a single document. And the markup is pretty darned lean (much leaner than the old .clearfix method, the first piece of code written to replace empty divs on positioniseverything.com). :)

Alright, first off it "really" does not matter if you use class or id. Yes, class is suppose to be for general use and id for unique but just like .com, .net, and .org; no one follows the rules.

Also, I tried the clear both and looked up the command and do not see how it would be useful.

Thank you both for your comments and I appreciate the thought.

Still needing help

The actual problem is in IE6 and IE7 the boxes that are floating are bigger so they do not "float" in the correct location and push the boxes into the next line.

Can you post a screen shot of what the site is supposed to look like, perhaps from the original layout documents? There are a number of things I'm seeing that could be wrong, but it's impossible to know without knowing your intentions for how the layout should look. For instance, the boxes are lined up like steps, instead of being in a straight line at the top. Is that intentional, or are we trying to fix it?

There shouldn't be any need for positioning either. Let's see what end result you want, and rework the markup from scratch.

Ahh, I just noticed the page doesn't have a DOCTYPE, which means browsers are rendering the page in quirks mode. That would account for some of the layout unpredictability.

I'm doing a little recode for you now. I have a phone call to handle as well, but I'll post the recode as soon as I'm off the phone.

All right, in lieu of a screenshot of what the final product should look like, I took a wild guess and put this together.

http://ex.paulhirsch.com/syphic

When you look at the markup, you'll notice that the menu at the top looks very strange, with the </li> tags broken into two pieces, the second piece shoved onto the next line. This is on-purpose. It's a clever little device that allows you to center a list of items with the right CSS. It's perfectly "legal" by any validator's standards.

All positioning is removed and all extraneous markup has been stripped away. I think you'll have a hard time making this any leaner than it already is.

Enjoy :)

Actually, it really does matter. ;)

If you don't follow the current coding Rules / Standards then how can you complain it things don't work out right?

Also, one cannot "make up" code as they go.
style="top:-40" << not any code I'm aware of


If the Staircase effect is desired you need to put the packages within a DIV then use margin-top to get the desired effect. You could alternatively use the z-index directive but that gets more complicated.


the_pm, although your knowledge of coding is very good and I admire your efforts in helping people, why would you still be promoting hacks?

As you know, tis better use seperate Stylesheets for IE Browsers rather than the quicky hacks we used to use; such as * html or html>body.


As to the clearing issue, why not create a class - .clear { clear:both } - then use it where desired?
<br class="clear" />

the_pm, although your knowledge of coding is very good and I admire your efforts in helping people, why would you still be promoting hacks?The "star hack" is misnamed. It is perfectly valid markup. People call it a hack because it is used to circumvent a single browser, but it's nothing less than acceptable markup.

You can always just throw that code into its own stylesheet and use a conditional statement to call it, but that would just give you superfluous markup. Ditto on throwing objects into a page just for the sake of clearing. <br class="clear" /> is much more hacky, if only because it is similarly superfluous.

More info: http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html

Important bit:In valid HTML and XHMTL documents html is always the root element and body is always a child of the root element, and never a grandchild (or great grandchild). Therefore, the first 3 CSS selectors above should not match any element. Nonetheless, they are valid selectors.I used to feel the same way about the star hack too, Rob. I used to avoid it like the plague. I changed my mind after I came to understand it better, and realized how it could be used to make markup even leaner :)

Appreciate the feedback and research but I have found that usually if CSS needs special attention for IE in one case, there will probably be more instances required. I also used to use the * directive but now find it is "cleaner and leaner" for me as coder, to know the IE specific CSS is in a separate file. We know how Microsoft thinks and in future, if they come out with their Browser requiring massaging of code to work properly, easier to deal with one file using a small amount of code rather than looking through a large file; with IE specific directives all over the place. ;)

To each their own though.

Appreciate the feedback and research but I have found that usually if CSS needs special attention for IE in one case, there will probably be more instances required. I also used to use the * directive but now find it is "cleaner and leaner" for me as coder, to know the IE specific CSS is in a separate file. We know how Microsoft thinks and in future, if they come out with their Browser requiring massaging of code to work properly, easier to deal with one file using a small amount of code rather than looking through a large file; with IE specific directives all over the place. ;)

To each their own though.Actually, '* html' is only misread in IE6. IE7+ do not misread it. This is one technique that is just as legitimate as using a separate style sheet, and actually makes it easier because you can keep all your markup in one document, separate out your IE6 stuff with a simple comment, and maintain less documents, import less documents and not load up your markup with conditional statements. Not that they take up a whole lot of room :), but one byte more than necessary is still one byte more than necessary.

I actually do know how Microsoft thinks in the future, because I'm part of the IE8 beta testing group. So far, it's looking like IE8 is going to be more standards compliant than Firefox - not a stretch really - Fx is very flawed in its implementation of a number of things (Opera still rules ;) )

But in all practical terms, there is no difference between '* html' and '<!-->'. They function identically. I chose the one that uses 1/2 the markup and one less document. If you like keeping IE markup in a separate document, go to town! That's a matter of inidvidual preference. But...As you know, tis better use seperate Stylesheets for IE Browsers^^ [i]in this instance, I do not subscribe to your statement that one is better than another, just because using one is a personal preference.

Edit: Here's another little something to think about. If you want to apply Firefox-only directives, you use '-moz' syntax. This is consistent with using certain syntax to implement IE6-only markup, and is NOT consistent with maintaining separate stylesheets. Seems to me like you risk needing to maintain two separate systems of browser-specific markup. Why fight it? :)

Coding used to be simpler before the popularity of a lot of scripts. As I now work a lot with some of them I find some habits I had before do not work so well anymore. And since I choose to have a Web page look pretty much the same in any OS, Browser & version, I try to avoid Browser specific coding in any form.

Complexity of has gotten to the point where, for CSS purposes and easier use, it is not uncommon to have multiple CSS files; Content, Navigation, IE specific, etc. Otherwise, a CSS file can be so large it is very difficult to work with.

Custom designing code and/or CSS just needs to be better these days and personal preference will always apply; after coding to Standards of course. ;)

We may differ on Browser specific coding but in the main, but I believe we both follow the concept of Coding to Standards which is the most important of all.

use tables. you wont have such problems.

use tables. you wont have such problems.

Just when I thought this debate was coming to a mutually respectful conclusion.?:rolleyes:

use tables. you wont have such problems.We're debating two perfectly good ways to achieve the same objective without tables. That's certainly not what I would call a problem. I suppose I could have used tables in the recode I did, but why would I bother writing all that extra markup to achieve the same thing? Doesn't make sense.

If unity100 was referring to putting the information for the Plans within a Table, they do have a justifiable argument. IMHO, that would be an area that falls into "personal coding" choices.

You say "toe-mott-o"
I say "toe-matt-o"


Hopefully we'll hear back from the OP on comments to date, otherwise, we'll end up with having a thread discussing personal coding choices. But then again, isn't that what Forums are all about; helping each other and discussing opinions? ;)

If unity100 was referring to putting the information for the Plans within a Table, they do have a justifiable argument. IMHO, that would be an area that falls into "personal coding" choices.Actually, since that data are not technically tabular (there's no tabular relationship when the plan info is separated in that manner), I think the best method would have been to make those list items. Though it would make sense to tie that information together into a comparison, which would make it necessary to introduce a table. Yeah, personal preference does play a hand in that one. The main reason I didn't bother marking up those plans any more than I did was because I was coding that for the sake of the page structure. I just slapped the plans into the boxes for the sake of speed. It was the weekend, and I had already spent hours on the phone with some weekend-warrior clients. I just wanted to get it posted :)

But just to be clear, that's an issue of proper content treatment, not layout - I think, or at least I hope we're in agreement on that part :)