Sign Up! Login: Password: New User? Forgot? Support
Forums : General Discussion > Content Box discrepancies with FF/IE
ArestorV (Applicant) 9/28/2009 6:49 AM EST : Content Box discrepancies with FF/IE
Posts: 470



Hey Mottie!

As you've already noticed, I used your instructions to customize the title bar of all of my content boxes.  However, the width of the new title bars and the content boxes don't seem to match.  I've fiddled with the CSS codes, resizing the images, etc. but the only solution I could find was changing the width attribute.  The only problem is that it doesnt seem to take effect in IE.

Firefox Example:
#box_information .ContentBoxTitle{font-weight:700;background-color:#302d28;width:190px;}
#box_information .ContentBox{margin-bottom:0px;width:190px;}
#box_information .ContentBoxBody{background-color:#fcf7e8;text-align:left;color:#000;padding:2px;width:190px;}

Do you have any idea what might be causing this discrepancy?  In case it helps, the link to the site again is here.  (The Information box looks fine in FF but does not align properly in IE).

Thanks for any enlightenment as always!

Mottie (SuperAdmin) 9/28/2009 12:25 PM EST : RE: Content Box discrepancies with FF/IE
Posts: 3883



Hi ArestorV!

Your site looks very nice btw. And yes, sadly I know that IE likes to follow their own set of rules - M$ thinks they are right and everyone else is wrong.

I mess around with this a bit. I noticed you added those three lines for every content box on your site... you're doing too much work!

Since the stuff inside the title, box and body are pretty much all the same, except the width that you changed for some reason. You can just make general classes that have all this information and get rid of the specific content box CSS

So get rid of ALL of the specific box CSS (unless the style of that one box is completely different than the others)
#box_... .ContentBoxTitle {...}
#box_... .ContentBox {...}
#box_... .ContentBoxBody {...}
And replace all of those with just one copy of this:
.ContentBoxTitle { background-color: #302d28; color:#fcf7e8; border: 0px; padding: 0 0 5px 0; font-weight: 700; }
.ContentBoxBody { border: 0px; text-align: left; color: #000; background-color:#fcf7e8; }
I had to make a few modifications to the .ContentBox CSS, I'll explain what it all means in below it
.ContentRow .ContentBox { margin-bottom: 5px; border: 0px; background-color: #302d28; }
.ContentRow .ContentBox > table { width: 100%; border-collapse: collapse; }
  • The first line has the general information. The ContentRow contains all three columns, I had to add that because it was making the top bar (control panel) have a dark background. I made this background dark instead of having the border around the title and boxbody... this essentially makes an edge around the box making it appear to have a border. I removed the border mostly because of the inconsistencies between browsers (you can read about it if you click that link above)
  • The second line targets the tables within the content box. The ">" means look for tables that are direct children of the content box - I don't know if you understand the parent/child description, but basically it means the table is inside (or a child of) the content box (the parent).
And one more little bit of CSS that is specific for IE... this is called a conditional comment and only works for IE. Add this to your Banner or Footer HTML.
<!--[if IE]>
<style type="text/css">
.LeftContentZone .ContentBox table, .RightContentZone .ContentBox table { padding: 0; border: 0; width: 190px; }
.ContentBoxTitle { width: 100%; padding-left: 0; }
I also noticed that you wanted to add a rounded bottom to your content boxes. Note you only had it set for Firefox and it doesn't work at all in IE. I added two additional border definitions, the border-radius will be the new standard rounded border in the next version of the CSS (which hopefully will get supported by all browsers when it is implemented *cough* IE). The moz one is for FF and the webkit is for the other browsers like Safari and Chrome. Here is that CSS - I bumped it up to 5px so you can see it better:
.ContentBox .blkContent, .ForumCategoryHeader {
 border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 -webkit-border-radius: 0 0 5px 5px;
Oh, and you may now see a thick dark grey bar below your content boxes after adding all this CSS... you need to remove the &nsbp; in your bottom tile of your Left, Center and Right custom content box HTML
<td class="bottomtile">&nbsp;</td>

Lastly, I can't get that &#$*% Information box to cooperate... it looks ok in IE now, but it's not the same size at the content below in FF and Chrome now.. just that box!! But it's aligned to the right (for some reason) and doesn't appear that obvious *blink*
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

ArestorV (Applicant) 9/29/2009 1:16 AM EST : RE: Content Box discrepancies with FF/IE
Posts: 470



Whew, that was alot of info, but it worked like a charm clap.  Thanks! 
I do have a few other questions which I hope will be my final ones (at least for awhile, hehe) but I'll post them in another thread so others with the same questions can more easily reference it in the future.

PS. I wasn't trying for rounded bottom corners.. that was just a bonus from my jury-rigged code

New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
Who's Online 
There are   members online.
So-and-so has logged on!