Need help with div spacing and IE [Archive]

jucestain

10-15-2005, 06:31 PM

Ok, I finally constructed the basic layout. But, I've encountered yet another problem. There seems to be a space for some odd reason between one of my images in the content div and one of the images in my news div. I want them to sit flush. Here's an image to show what my problem is:

http://www.octavewebdesign.com/csshelp/spaceproblem.gif

Here is the actual website:

http://www.octavewebdesign.com/chilesxc/index.html

The css can be found here:

http://www.octavewebdesign.com/chilesxc/style.css

Any tips would be great. Please view in FF, as IE seems to mess it up... which is another problem for another day. Thanks.

-Justin

(but, if anyone has any solutions for the IE problem then that would be great to add it. For some reason IE makes the margins larger than they're supposed to be. The margin is set to 39 px, but it acts like a 50px margin for some weird reason. This causes the menu div to drop down below the content div.)

mwinter

10-17-2005, 08:58 PM

http://www.octavewebdesign.com/chilesxc/index.htmlYou seem to have corrected your immediate problems, as I don't see any gaps when adding borders (to show where the edges lie). However, I do see issues that haven't been addressed.

By using an incomplete Transitional DOCTYPE (a 'complete' one would include a URL), you will throw many browsers into Quirks mode, causing them to emulate past bugs. I see no reason for you not to be authoring to a Strict DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

You don't seem to have grasped the point of alternative text in the context of images. The text is meant to be used if the images cannot be rendered for some reason, so the value of the alt attribute should be capable of serving in place of that image. The first image should have "Chiles XC" as its alternative text. The images in the navigation bar should use their text ("Home", "Information", etc.). The same with the 'Main' header, and 'Menu' title. The CSS and HTML images shouldn't exist at all, in my opinion. All of the other images should have empty alternative text (alt="") as they have no content, and are of no interest when not rendered.

The navigation bar (both of them) should be marked up as a styled list of links. If you choose not to do that, then you'll need to add white space into the alt attribute values of the images in the first so they won't be rendered as one long string.

Don't use pixels to specify font size. IE cannot resize this. Use percentages instead. In addition, don't use microfonts. Body text should be 100% of default, and no text should be lower than 85% of default.

Using pixels to set the dimensions of your 'menu' cause text to spill out of it at large font sizes. Use ems, instead.

Remove that spacer image and the forced line break at the end of your main content. Spacer images should have died off long ago. Use margins.

Mike