Ok, I’m a little sick of asking all my CSS questions here (and I’m sure you all are sick of answering them), so first I’ll ask, is there a good board somewhere to ask these sorts of CSS troubleshooting questions?
Secondly, I’ll ask my question here.
I’m working roughly on a site for my mom’s family, here.
Sadly enough, it looks just as I expect it to in IE, but in Firefox there are a few issues:
The photo inset on the right doesn’t float all the way to the right.
The main text wraps under where the menu is, as opposed to staying in its own column (which it does in IE).
The caption under the photo in the header should be directly under the picture, not overlapping it.
The width for the footer extends across the whole browser window, while I want it to be constrained to 750px.
I put my style sheet on in a page here. Thanks for the input and suggestions. Usually I have a hard time getting things looking right in IE, so this is doubly frustrating.
With just a quick look at your HTML source, it seems like you’re missing a </DIV> close-tag. You have <div id=“columnright”><div id=“inset”><table>, but only </table></div>.
just to get you started. Build according to standards first, using Firefox, Mozzie or Opera. Then go back and put in your CSS hacks so IE renders the page.
Which is usually how tihngs work out; I’ve never had to adjust to get something to work in Firefox that already works in IE. I’m sure I’m forgetting something stupid. Thanks for the links.
OK, first of all I’d like to give you a tip: Design for Firefox and bug-fix for IE not the other way around. Thing is, Firefox is more standards-compatible than IE, so if you design clean HTML and CSS the chances are higher that it will look better “out of the box” so to speak. Then you can add fixes for IE afterwards if necessary using one of the known hacks, or conditional formatting.
Now to your page. I found the following things that were causing problems in Firefox:
Move the “maincaption” out from the “header” div and add the border-styling directly to maincaption (remove it from the header styling plus decrease the height of #header):
2.Removing the “padding-left” command from the #footer, and add a “text-align:center” instead. When you add the padding, it adds to the total width of the div, thus making it swell to 950 px.
Add a “float:left” to #columnright as well
Remove all paddings and margins from both #columnright and #columnleft
I think that should do it. You might have to define a width for the #maincaption too, for it to look OK in IE.
I’d like to add a few more links there that may be of help. listmatic has a bunch of menu lists. Very cool even if you only use it to learn. Actually the main site (maxdesing.com.au) has a bunch of resources that are pretty good.
CSS vault This one also has links to tutorials and reference guides. Be sure to also check out the gallery for inspiration.
