Lack of alignment

Get Started
1

Hi everyone

I wonder if anyone can help me with a positioning problem. I have three DIVs on a page, side by side, containing CD cover pictures and purchase information. There are 7 CDs, arranged in three rows: 2 in the first two and one in the third. Have a look for yourself at: http://fuzzymoonrecords.co.uk.

The third CD in the last row doesn’t line up - except on Chrome and Safari for Windows. In Internet Explorer (and, I believe by reports, Safari for Mac, it’s little low. Because the page uses ASP and VBScript, it’s very difficult to line them up in Dreamweaver, but I can’t see any reason for the misalignment.

Can anyone help? Please feel free to look at the page source and the CSS.

Many thanks

Paul

2

All of this is pushing the 3rd column content down:

<img width="200" height="152" border="0" src="images/block.png">
<img width="200" height="152" border="0" src="images/block.png">
[COLOR="#FF0000"]<br>
<br>[/COLOR]

If you remove those two <br> elements it seems to line up better. If you need spacing, it’s better to use top margin or padding. Then you can get pixel-perfect spacing.

3

Thanks, Ralph. Unfortunately, when I remove the <br /> tags and the spacers and use either margin or padding, I get different results from Chrome, IE and Safari for Windows. I’m surely missing something elementary about spacing here. Any ideas?

Thanks again.

Paul

4

You might want to check your CSS in the W3C validator, as you have several errors.

For example, you have

#cdcontent {
	position: absolute;
	overflow: auto;
	[COLOR="#FF0000"]margins: 10 10 10 10;[/COLOR]
	left: 30px;
	top: 162px;
	height: 610px;
	width: 740px;
	padding-right: 10px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: .7em;
	color: #CCFFFF;
}

“margins” should read “margin” (without the s), and you need to specify a unit for your measurements e.g 10px. (The exception is 0, which doesn’t require a unit.)

Try fixing the errors and give ralph.m’s solution another go. Let us know if you’re still having problems.

5

Thanks for the tip, TechnoBear. I should have done that as a matter of course.

As Ralph suggested, I have now used margin to position my third column CD and it’s perfect on Chrome 14, Safari for Windows 5.1 and Firefox 5, but (surprise, surprise!) slightly out in IE9. Actually it is a bit of a surprise, as I thought Microsoft was finally up to date on CSS/HTML standards.

Incidentally, I had to gauge the margin by trial and error. Since my first two DIVs have a height of 660px, it seemed reasonable to set the margin at 440px for the third. This was too much, though - I ended up using 310px.

If either of you (or anyone else) have suggestions for sorting out the alignment in IE, I’d be grateful.

Cheers

Paul

6

I think the lack of alignment in IE may be to do with the way it is rendering the fonts. If you increase or decrease the font size, the images in the first two columns move down or up in response to the changing font size. The image in the third column is positioned with a large top margin and doesn’t move when the font size is adjusted. As there are variations in the way different browsers and operating systems render fonts, I don’t think you’re going to be able to align this image perfectly.

I would try to use three rows, rather than three columns, for the CDs, but there may be better ways to do it.

7

I’m with technobear that rows instead of columns is probably the way to go with that, as then you at least have a CHANCE to let flow do it’s job – you’ve built the ENTIRE layout with absolute positioning which as a rule, is a miserable failure at making a layout… though that goes hand in hand with the auto-playing music with no control to turn it off (oh yeah, thanks for that BTW now I need new eardrums) and that they do NOT actually line-up here because you used dynamic heights on them – so for me much of your text is larger and wrapping taller than the images, improper/invalid/inaccessible form structures, the lack of semantic markup (semantics is NOT just slapping P around everything), resets or margin/padding nulling on elements, pretty well shtups any chances at it appearing the same cross browser…

… and that’s before we talk the mm_ scripting nonsense (basically JS to do CSS’ job) or the presence of HTML 3.2 elements that have no business being on a website after 1998… to go with the tranny doctype; nothing like being in transition from 1997 to 1998.

Though you mention ASP/VBScript… you talk about editing it with Dreamweaver… and yet there’s this:
<meta name=“GENERATOR” content=“Microsoft FrontPage 4.0” />

“Well there’s your problem”… not just trying to edit something with frontpage (ouch) you’ve got too many tools in the toolshed, not leaving you enough room to work in there.

Gimme a bit, I’ll toss together a rewrite to show you how a layout like that probably should be done. (gotta reboot first – stupid updates :smiley: )

8

… and here it is:

http://www.cutcodedown.com/for_others/dresden/template.html

as with all my examples the directory:

http://www.cutcodedown.com/for_others/dresden

is unlocked for easy access to the gooey bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a few proprietary values thrown in to make IE sit up and beg. Tested working IE 5.5 through 9, and the latest versions of everything else.

I redid the logo image file so as to remove all the unnecessary black around it, narrowed the width so it’s actually 1024 friendly (I’d consider shrinking the logo to right column width and just floating all the products – you have what I like to call a “non-viable for web deployment” layout), and reformulated it to allow for the 2/2/3 you were trying for using rows instead of columns.

I also made the player visible and APO’d it at the top so people can actually turn it off and/or control it… and dragged the code for it’s being in there into this century… and I took a few stylistic liberties with it too like adding simple hover effects on those cover images and highlighting the titles.

I would give serious consideration to turning the titles of those products into H2…

In any case, hope this helps.

9

My grateful thanks to TechnoBear and deathshadow - I’m obviously going to learn a lot from your input, not least about dragging myself into the 21st century!

And particular thanks for the rewrite, deathshadow - I’ll study it in detail and be a god boy in future…

10