12 replies [Last post]
johnathonwright
johnathonwright's picture
Offline
Regular
Last seen: 16 years 46 weeks ago
Joined: 2005-11-17
Posts: 11
Points: 0

http://www.famfab.com/categories/Game-Room/406/1

So, I'm starting to learn and play with CSS, and it's making me miss tables. I have validated HTML, validated CSS, and it still doesn't work.

The menu on the left is in a <div style="float:left;"></div> tag, along with the text below it.

So why does a div right below it also occupy the same space? Why is that green area using the same area as the menu?

I want the green div to just occupy all the space to the right of the menu. That way, I can put a <div style="clear:both"> below the category description and above the three child categories so those won't cause problems. AHHH! I know exactly how to do this in tables.

Here's the CSS:

	#header {
	background: #455372 url(/public_templates/simplex/images/banner.background.png) repeat-x left bottom;
	position: relative;
	height: 5em;
	padding: 5px;
	text-align: left;
	vertical-align: top;
	} #ignored {}
	
	#area {
	display: block;
	}
	
	#header-cart {
	float:right;
	font-family: Arial, Helvetica, sans-serif;
	color:#ffffff; 
	font-size:12px;
	margin:5px;
	}

	#header-cart a{
	color:#ffffff;
	}

	#header h1 {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.2em;
	font-weight: bolder;
	color: #FFFFFF;
	vertical-align: top;
	}

	#header ul {
	width: auto;
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0 15px 0 0;
	list-style: none;
	display: block;
	}

	#header li {
	float: right;
	background: transparent url("/public_templates/simplex/images/header_tab.gif") 100% -600px no-repeat;
	padding: 0 6px 0 0;
	margin: 0 2px 0 0;
	font-family: verdana, sans-serif;
	font-size: small;
	border-bottom: 1px solid #515358;
	}
	
	#header ul a {
		float: left;
		display: block;
		padding: 4px 4px 4px 10px;
		background: transparent url("/public_templates/simplex/images/header_tab.gif") 0% -600px no-repeat;
		font-weight: bold;
		color: #fff;
		text-decoration: none;
	}
	


	#header ul li:hover a { background-position: 0% -400px; }
	#header ul li:hover { background-position: 100% -400px; }
	
	
	
	/* =-=-=-=-=-=-=-[Menu Four]-=-=-=-=-=-=-=- */
	
#left-side {
	float:left;
	max-width: 202px;
	padding: 0px 5px;
	margin-right:10px;
	}

#menu4 {
	width: 200px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bolder;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #D76100;
	}
	
#menu4 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}	

#menu4 li {
	overflow: hidden;
	line-height: 1.5em;
	}	

#menu4 li a {
  	height: 24px;
	text-decoration: none;
	}
	
#menu4 li a:link, #menu4 li a:visited {
	color: #9E3C02;
	display: block;
	background: url(/public_templates/simplex/images/menu4.gif);
	padding: 8px 0 0 30px;
	}
	
#menu4 li a:hover {
	color: #fff;
	background: url(/public_templates/simplex/images/menu4.gif) 0 -32px;
	padding: 8px 0 0 30px;
	}
	
#menu4 li a:active {
	color: #fff;
	background: url(public_templates/simplex/images/menu4.gif) 0 -64px;
	padding: 8px 0 0 30px;
	}

/* the above menu is from http://e-lusion.com/design/menu/ */

.category-choice {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5em;
	font-weight: bold;
	color: #EBB030;
	float: left;
	width: 153px;
	padding: 5px;
	margin: 5px;
	text-align: center;
	text-decoration: none;
}

.category-choice b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	color: #2C3955;
	text-align: center;
	display: block;
	width: 100%;
	margin-top: 5px;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #455372;
	font-weight: bold;
	margin:5px;
}


#category-image {
	 padding:7px; 
	 margin-right:7px; 
	 border-style:solid; 
	 border-color:#455372; 
	 border-width:1px; 
}

#main-content h1 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #D76100;
	margin-top:10px;
	margin-bottom:0px;
}

Any suggestions?
Johnathon

larmyia
Offline
Elder
London
Last seen: 14 years 3 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

I Miss Tables

you seriously need to validate. have you checked out your design in more than one browser because there are some differences b/w IE and FF to mention but two.

and what's with all the <br>???

and your HTML is difficult to read...

johnathonwright
johnathonwright's picture
Offline
Regular
Last seen: 16 years 46 weeks ago
Joined: 2005-11-17
Posts: 11
Points: 0

I Miss Tables

Yeah, woops. this site is dynamically generated using XML / XSLT / PHP and all that stuff you saw below was the "testing" information... ie the XML that was populating it and the event log.

I've turned that off. It validates now.

johnathonwright
johnathonwright's picture
Offline
Regular
Last seen: 16 years 46 weeks ago
Joined: 2005-11-17
Posts: 11
Points: 0

darn doctypes

I really want to do a good job of having this render properly in all / most browsers... but I'm just getting started with the design and already IE and FireFox are so different...

I am using this doctype:

-//W3C//DTD HTML 4.01 Transitional//EN

but Mozilla is still rendering it in quirks mode. It looks like I have to include a URL in there but given the complex XSLT format I'm using to generate these pages, I am having a hard time figuring out how to do that. Sad

Oh, does IE 6 have a quirks mode vs. standard mode? If so, where can you see which one it is using?

I'm concerned that the text below the orange menu isn't wrapping,

johnathonwright
johnathonwright's picture
Offline
Regular
Last seen: 16 years 46 weeks ago
Joined: 2005-11-17
Posts: 11
Points: 0

the answer

OK after much unhappieness I've discovered the answer.

Given a table with two columns and a designated table width, you can set a width for one column and the other will stretch to match the table width.

According to http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/, you can't do that.

You have to left float the left column and give it a width, and right float the right column with a width.

Maybe I will use tables. Why is CSS better again?[/url]

jlhaslip
Offline
Enthusiast
Last seen: 13 years 20 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

I Miss Tables

Check back on the Forum Index page for the "start here" sub-forum and the "how-to's" has a good read on the doc-types. I think the concensus would be to target for a 'strict' doc-type of xhtml and then the page will be better for forward compatabilty.

Css is better because it allows you to style an entire site from the one css file and removes the styling from the html page for easier reading.

Tables are okay (allowed) for "tabular data" but it is not designed to perform the layout of a page. Div's, p's, span's, ul's and all the rest should be used for the layout.

Hang in there, you'll catch-on. It isn't Rocket Science. Just uses the same number of brain cells...

I'm having a good day...so far.

drhowarddrfine
Offline
Leader
Last seen: 12 years 44 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

I Miss Tables

You need a proper and complete doctype. See my link below. Use html4 strict.

IE is in quirks mode.

In almost all cases, Firefox displays your markup as you wrote it while IE will stumble and falter. Just get it working right in Firefox and then adjust for IE.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Re: darn doctypes

johnathonwright wrote:

but Mozilla is still rendering it in quirks mode. It looks like I have to include a URL in there but given the complex XSLT format I'm using to generate these pages, I am having a hard time figuring out how to do that. Sad

Oh, does IE 6 have a quirks mode vs. standard mode? If so, where can you see which one it is using?

Mozilla doesn't render in Quirks Mode (don't hit me Hugo) IE does. You need a complete DTD for IE to do anything even half-properly.

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: the answer

johnathonwright wrote:
Given a table with two columns and a designated table width, you can set a width for one column and the other will stretch to match the table width.

According to http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/, you can't do that.

You have to left float the left column and give it a width, and right float the right column with a width.

I couldn't find where it says that - I'd also be surprised if it did say that, as its not true.

#wrap { width: 1000px; }
#col1 { width: 250px; float: left; }
#col2 { margin-left: 255px; }
/* \*/ * html #col2 { height: 1px; } /* trigger hasLayout for IE */

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I Miss Tables

Quote:
Mozilla doesn't render in Quirks Mode (don't hit me Hugo)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I Miss Tables

Is that a Mozilla Quirks mode table you're hitting TPH with? Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I Miss Tables

Wink you just made that up didn't you Chris

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 16 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Re: darn doctypes

thepineapplehead wrote:
Mozilla doesn't render in Quirks Mode (don't hit me Hugo) IE does. You need a complete DTD for IE to do anything even half-properly.

This is patently not true, there is a little icon telling me it's rendering in quirks mode Tongue

http://www.mozilla.org/docs/web-developer/faq.html#layoutmode