Horizontal CSS - Chris Coyier model

HTML & CSS
1

Page I’m troubleshooting is being staged at: http://www.beaconnected.com/mm/?page_id=45

Using Chris Coyier’s horizontal HTML/CSS model, I’m having trouble limiting the height of the table produced by the script which transforms the container into a table and the post into a td. The content is being held inside of WP on a new page which will feature the content seen on the site listed above. Images (placeholders now) and video seem to be in the right positions (vertically-centered), but the text falls down to the bottom, expanding the height to the point where a vertical scroll bar is necessary. This is not optimal. I’d like the site to be restricted to horizontal scrolling.

I’m using Wordpress to manage all of the content, and once I brought the content from my MAMP server onto my hosting server, and translated the content into WP’s PHP files, things went awry. CSS doesn’t seem to communicate well with the script’s conversions, if that makes any sense.

Can anyone share some ideas? Anything is GREATLY appreciated. I’m stumped.

2

Could you give us a sense (via a screen shot) of what the page is meant to look like? I’m afraid I’m not sure what to look for here.

PS: could you post a link to Coyier’s code?

3

Sorry. Meant to include Coyier’s page describing the method: http://css-tricks.com/166-how-to-create-a-horizontally-scrolling-site/

I’ve attached two images for reference. Notice how, in the image with text before floated images, the text is seated at the bottom of the table, while in the other image, the video is centered with the floated images?

Thanks for your swift response!

4

Hmm, I don’t know exactly why that’s behaving like that, but I think it’s something to do with the floated images in the second cell.

You could try adding these rules to your style sheet:

table tr {vertical-align: top;}
td {vertical-align: top;}
#photo p {display: inline-block;}

That fixes it for me in firefox, but you may need to do some damage control for IE7 and under (if you care).

That might include a special rule for IE such as

* html #photo p {display: inline;} /*hack for IE6*/
*+html #photo p {display: inline;} /*hack for IE7*/

Hope that helps.

5

ralph.m, you’re my hero. Thank you, brother. A very close friend of mine is from Melbourne. I was screaming STRUTH inside for a few hours.

Your swift response is most helpful.

6

Fantastic. I’m glad that helped. ‘Struth’, eh? :slight_smile: That word isn’t so common any more, which is a pity. I must use it more!

7

Glad Ralph sorted you out OK but I’m surprised that Javascript was needed for what is a very simple effect.

You can create an endless horizontal scroller with a simple float and a negative margin. No need for a table or Javacscript.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0}
h1{position:fixed;left:180px}
#sidebar {
	width:150px;
	position:fixed;
	top:0;
	bottom:0;
	overflow:auto;
	background:#fcf;
	box-shadow:5px 5px 5px #999;
}
.wrap {
	float:left;
	margin:100px -999em 0 180px;
	display:inline;
}
.inner {
	float:left;
	width:600px;
	height:400px;
	margin:10px;
	background:red
}
</style>
</head>
<body>
<h1>Horizontal slider test</h1>
<div id="sidebar">Side column</div>
<div class="wrap">
		<div class="inner">test</div>
		<div class="inner">test</div>
		<div class="inner">test</div>
</div>
</body>
</html>

I realise it’s too late now but just in case anyone else is looking for similar :slight_smile:

8

Paul, you should post a comment on Mr Coyier’s page. :slight_smile:

9

I would have done but the article was about 3 years old so it’s not fair to comment this late in the game :slight_smile:

10