Cross Browser CSS Issues?

[Cyberlore]

Banging out the new design for my flagship website. It looks beautiful in IE6 but loading it in the latest version of MozillaFirebird, the CSS doesn't seem to be handled properly. My main concern is that it only shows the first half of the top news post in the middle of the page, and then stops with the content section. The footer and such load just fine (load fine but aren't displayed as i would like...but that's a different story).

I'm wondering if anyone has any solutions to this problem. Why would it break in the middle of the paragraph? There are no tags near where it stops or anything, i'm rather stumped. If you pull up the source, it's all there, it just wont display.

address: http://www.wors.org/indexphp.php

note: most of the links will be down..this is not a problem..this page is simply for design development...

Thanks in advance to any insight.

[the jester]

hey there

I've just looked at your page from my linux box with the following browsers:

- Mozilla 1.5

- Opera 7.23 (build 518)

- Konqueror 3.14

- Epiphany 1.06 (Mozilla based Gnome browser)

and I'm happy to say I didn't see any of the problems you mentioned - looked fine in all of them

Maybe something up with your Mozilla?

a glimpse of your page under epiphany just in case I missed something

[Cyberlore]

Thanks a bunch, jester. *Almost* glad to hear it appeared the same for you in your browsers. The major news display problem I mentioned seems non-existant so perhaps my copy of Firebird is just borked.

In the screenshot, the headers of the module boxes on the righthand side should span the width of the box, not just the width of the text.

Also notice how the header image is split drastically between the subaru and wors logos. This should appear as one seamless image (and does in IE).

Anyone with insight into what CSS tags I should be using to get the correct effects in both IE and non/IE browsers?

EDIT: I took the content portion out so it's just the bare layout. I wont be able to look at in in Mozilla til I get home tonight, so for all I know it's the content that's stretching the table. I figured if any of you would care to look at the source, it would be easier to look at w/o the content in the middle:
http://www.wors.org/indexphp_blank.php

[the jester]

I see it now ...

apologies - been down with the 'flu for the last couple of days so I guess my wits were not quite at their sharpest

as a suggestion, how about posting screenies of what you get under ie and mozilla

I'm no html/css wiz myself, but it may move someone better qualified to help

best of luck getting it fixed

[rpertusio]

Quote:

Originally posted by Cyberlore
In the screenshot, the headers of the module boxes on the righthand side should span the width of the box, not just the width of the text.

I'm not sure what you mean... can you explain more, or take a screenshot and circle the part you're talking about?

Quote:

Also notice how the header image is split drastically between the subaru and wors logos. This should appear as one seamless image (and does in IE).

[Cyberlore]

Thanks a bunch for your efforts jester and rpertusio. I really do appreciate it.

rpertusio: I can't just make the image 30px wider, as it distorts the image and it puts me over the 780px width constraint.

I fixed the modules on the right hand side (that no one knows what I'm talking about! ) These 'modules' are the boxes on the right side of the website...the site search, news headlines, sponsors, etc. Using <DIV> instead of <SPAN> and changing the doctype to "-//W3C//DTD HTML 4.0 Transitional//EN" the black header for each module now spans the entire width in both IE and MozillaFirebird. (These are the two I have installed at the moment for testing).

And I'm 99% sure I've pinpointed the problem with the gap in the header: the 'padding' attribute. To illustrate the problem, imagine a simple one cell table:

Ok, so you have a table. You set the width of the table to 500 pixels (keep in mind we're using a style sheet). Now you want some padding in the cell so the contents are not touching the border of the table. Let's make it 10 pixels on each side.
-In IE, the padding is layed around the inside of the table and the actual area inside the table is decreased (real world example: putting insulation inside of a room, decreases the area of the room by the width of the insulation). So now the area inside the table where stuff can go is now 480 pixels wide (10 px taken off each side). THIS IS HOW IT SHOULD WORK!
-In Mozilla, the padding is still layed around the inside of the table, but Mozilla says "Wait a sec! I've lost area inside the table! (remember the insulating example?)." So to combat this, Mozilla widens the table until the area inside is equal to the set width. In the real world example, this is like tearing down the walls and building new ones, leaving enough space for the insulation so you still have the same amount of floor space.

<Cyberlore wipes the sweat from his brow>

Now, I'm looking for a solution. The padding problems occur in my <DIV>'s. So with my website, Mozilla is making the modules 10px wider than that should be (turns them into 160 pixel wide boxes) due to a 5px padding on each side. The break in the header occurs because the content portion of the site (the middle) is set for 7px padding on each side (in the case of the content section, i'm just using the style id in the <TD> tag, no <DIV> is used).

Wow, I realize that's a ton to read through, but I just want to make sure I get the point across. I'm really baffled as to my Mozilla seems to handle it this way. If anyone can help me out with my dilema, it would be very appreciated!

(LINK: http://www.wors.org/indexphp.php. If that is dead, I've launched the site, in which case, just visit http://www.wors.org)

[Cyberlore]

I did a little research and found some info that I think will be benificial to everyone.

The W3C specifies the assigned width and height of a box refers to the content area of a box only. This means that all padding, borders, and margins are added to this value.

EX:

div {
width: 500px;
height: 500px;
padding: 20px;
border: 5px;
}

The divs will now be 525 pixels wide following the standards as Mozilla does.

I absolutely hate this, it really does not make sense to me. I guess CSS3 will probably have a setting to choose which way you want your boxes handled, but until then, I need a good workaround! Any thoughts?