CSS and Firefox

[mdeluise]

Hello,

I am new to CSS and I've created a page using Adobe Image Ready. I chose the CSS route instead of having it (Image Ready) create everything in tables. The problem I'm having in shown when viewed in Mozilla Firefox v 0.9.2 (see html link below). The text runs off the page. In I.E, it looks fine. I've given the link to the CSS file below so hopefully someone can tell me what I'm doing wrong. Should I not use Image Ready in the future? Does it write the CSS cleanly?

Thank you for your help.
mdeluise

HTML: http://www.deluisedesigns.com/mike3/about/index.html
CSS: http://www.deluisedesigns.com/mike3/index.css

[stymiee]

Looks fine in fireFox 1.0PR

[codyrockx]

looks fine on this end of the island also, same settings

[Paul O'B]

Hi,

The only thing I can see in direfox 0.9 is that one of the words is getting cut off in the main block of text. It seems that your border image is being placed on top.

You should try and set those decorative border images into the backgrounds of elements anyway and not have them clutter up your html.

For your main text and the right border you could do this.

div.md-about-body {
position:absolute;
left:156px;
top:75px;
width:602px;
height:299px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
padding-top: 2px;
padding-right: 25px;
padding-bottom: 1px;
padding-left: 2px;
margin: 0px;
overflow: auto;
background:#04584B url(http://www.deluisedesigns.com/mike3/about/images/md_about_right.gif) repeat-y right top;
}

You can then completely remove the "md-about-right" styles and the associated div. This cuts about 10 lines of code in one swoop. You can also then reduce that border image to about 5pixels high and just let it repeat and save on bandwidth also.

You could do similar things with your other images bearing in mind of course that you can only have one background image per element.

You will also need to look into the broken box model of ie5 and ie5.5. as you have included padding/borders at the same times as specifying width (see the FAQ on the broken box model for a full explanation).

I also note that you main text is a paragraph but you have separated each paragraph using 2 break tags. This is bad practice and a paragraph is either a paragraph or its not. You should finish each section of text with a closing </p>, the margins of which can be precisely controlled through your css.
Hope that helps.

Paul

[mdeluise]

Thanks Paul.

It sounds like I have much work ahead of me. I did change the <br>'s to <p>.

I tried using the code you included in your reply, but I could not get the md_about_right.gif to go all the way to the right. I'll play around with it a little more tonight.

Question: Would it be better, in the future, to not use ImageReady to generate the CSS?

Thank you.

mdeluise

[Paul O'B]

Question: Would it be better, in the future, to not use ImageReady to generate the CSS?

I don't have any experience with image ready but I hand code all my css. I use DW as an editor and occasionally let it enter things like lists of fonts that saves me typing but as a general rule I find my coding is much more precise by hand.

It also makes it easier to understand when you can get your hands dirty as you know what you have done and why you have done it (even if it doesn;t always work lol).

Its ok to use css editors but they are just something else that gets in your way most of the time as far as I'm concerned.

I had the code above working perfectly locally so it will work but you may have changed something since I posted. I did change some dimensions to make it all line up.

If you still can't get it to work then post again and I'll take another look.

Paul