CSS - Good Advanced Book Recommendation?

I've been messing around with CSS for a little over a month now. I've seen a lot of sites created with CSS and I'm convinced it is the correct way to design web sites.

Although there is a vast amount of resources out on the web, I've become somewhat frustrated with trying to implement CSS. Mainly, it seems that getting CSS to work in both Firefox and IE requires you to sell your soul to Lucifer and devote your life to the black arts.

So, I want to just stop trying to write pages and get a good book on CSS. There are tons of them out there which is making it hard for me to decide. I usually go with the O'Reilly book's but the CSS one has bad reviews on Amazon.

I'm just looking for some input on what books you guys would suggest.

Thanks in advance.

Can anyone recommend a reference book. I have the Jeffrey Zelman book but would like something that covers a bit more detail. Is the Eric Meyer on CSS any good?


cheers,
steven.

I've been designing web pages for 7 years now, using layout tables. I realize that it's time to let go with them now.

Do you recommend any good book about this? I've red Ben Henick's article on Alistapart (http://alistapart.com/articles/12lessonsCSSandstandards). Do you know if he has written any books about the topic too?

Hi everyone. I'm looking for some help rendering a list using css. Basically I have a list in this format:

Code:

<ul>
  <li>shirts</li>
  <li>jackets
    <ul>
      <li>casual jackets</li>
      <li>formal jackets</li>
    </ul>
  </li>
  <li>suits</li>
</ul>

And I would like to render it something like:

Code:

shirts jackets > casual jackets formal jackets suits

All the text needs to be floated left so it will wrap to the next line.

I'm able to float the top level list items correctly i.e. "shirts jackets suits" using:

Code:

<ul id="menu">
	<li>shirts</li>
	<li>jackets</li>
	<li>suits</li>
</ul>

#menu, #menu ul {
	list-style:none;
}

#menu li {
	float: left;
	width:5em;
}

the problem I have is getting the nested lists to appear alongside the parent items instead of below. When I add the nested lists I see something like:

Code:

shirts        jackets        suits
                  casual jackets
                  formal jackets

Maybe this just isn't possible but if anyone could help me I'd sure appreciate it!

Thanks!

Toby

I want to style something based on what comes after it. If a div is the last to have the class "combinedyes" I want to make the text red for example. I've experimented with:

#EditMedHistoryDisplay div.cmMed.combinedyes + div.cmMed.combinedno

But that styles the combinedno element...

Any ideas?






Code:

<div id="EditMedHistoryDisplay">
	<div class="cmMed odd combinedyes">Testosterone 2 mg <span class="medicationDelMethod">Cream-Transdermal</span> 		<div class="cmNotes ecmInstructions" id="cmnotes_21158" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>
	
	<div class="cmMed even combinedyes">DHEA 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21194" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>

	<div class="cmMed even combinedyes">Test 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21184" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>


	<div class="cmMed even combinedno">Testosterone 2 mg <span class="medicationDelMethod"> Patch-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21038" title="Click to edit">It's a patch...</div>
	</div>
</div>

Ok here is my layout
http://codingcore.com/template.html


there are no tables at all its all css floats but the only problem is that the left and right menus go over the copyright bar on the bottom the middle box doesnt the copyright stays 45px from the middle box but i want it to be under all the boxs because right now the menus go over the copyright i want its copyright to be below the boxs on the right and left ive tried many things but I cant seem to get it to work i dont want to use tables ither

Thanks
Matt

Hi!

1/ Is display:table; supported in IE6? In IE7? Searched the web but found contradictory answers.

2/ In Opera 9.02, when declaring a div display:table; and then applying padding to it (the div), there is a bug: the padding is contained in the width of the div (making the "content" or "room" available in the div smaller) rather than added tp the width of the div. Is there a fix for this?

Thanks

html code:

Code:

<div id="sidebar">
	<h2>South Winds Park Info</h2>
		<ul>
			<li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li>
			<li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li>
			<li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li>
			<li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li>
			<li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li>
		</ul>
		
	<h2>South Winds Resources</h2>
		<ul>
			<li><a href="calendar" title="Calendar">Calendar</a></li>
			<li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a>
				<ul>
					<li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li>
					<li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li>
					<li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li>
				</ul>
			</li>
			<li><a href="resources/special-events" title="Special Events">Special Events</a></li>
			<li><a href="resources/maintenance" title="Maintenance">Maintenance</a>
				<ul>
					<li><a href="resources/maintenance/fees" title="Fees">Fees</a></li>
					<li><a href="resources/maintenance/trash" title="Trash">Trash</a></li>
				</ul>
			</li>
			<li><a href="resources/faq" title="FAQ">FAQ</a></li>
		</ul>
</div>

CSS Code:

Code:

#sidebar ul{
	margin:10px 0 30px 0; padding: 0;
	text-align:right;
}
#sidebar li a, #nav li {
	display:block;
}
#sidebar li {
 list-style: none;
 position: relative;
}
#sidebar li a {
 padding: 1em 2em;
 text-decoration: none;
 color: white;
	background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

/* Submenu */
.hasChildren {
	position: absolute;
	width: 5px; height: 5px;
	background: black;
	right : 0;
	bottom: 0;
}
#sidebar li ul {
 display: none;
 position: absolute;
 left: 100%;
 top: 0px;
 padding: 0; margin: 0;
 z-index:100;
}
#sidebar li:hover > ul {
 display: block;
}
#sidebar li ul li, #nav li ul li a {
 float: none;
  z-index:1000;
}
#sidebar li ul li {
 _display: inline; /* for IE6 */
}
#sidebar li ul li a {
 width: 150px;
 display: block;
	background-color:#2c9091;
	
}

This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

I have searched the internet for a solution:

using csshover.htc (doesn't work)

The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed.

The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index.

I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser.

What else could it be? Since the code should work. What else around this menu could be my problem?

Thank you so much for your help (ready to pull my hair out)

I am trying to create a completely non-uniform layout for one of my clients using only CSS. I would like to accomplish this using only floats that are cross-browser supported.

The layout is split up into 9 different panels that need to be positioned correctly.

Is this achieved simply by using float and clear? I have been experimenting and have been failing. What about positioning? Would kind of positioning would I use to arrange something inside of a parent div?

See attached file for layout.

P.S. I know I can get this exact layout done using tables, but I would much rather do this with some "simple" CSS.

I am attempting to construct a layout that is a bit more styled than the typical. I have seen it multiple times and would love it for my main page. It has a
left column

and a right column

In the right column, I would like to split that into two equal columns, width-wise

and then underneath that I would like to have three equal columns under the top two which can span as far down as possible.

I attempted it using code that I have laying around, and of course, it works in IE (more or less) but absolutely dies miserable in Netscape and Firefox.

the link to the test page is http://www.test.angrybrownman.com

and the css sheet would be www.test.angrybrownman.com/style_test.css

The css for the site (since I am not sure the link will link) is as follows:

#container
{
width:775px;
margin:0px auto;
background-color:transparent;
border:1px solid #424242;
line-height: 100%;
background-image:url(cont_bg.jpg);
background-repeat:repeat-y;

}

#top
{
padding:0px;
height:100px;
background-image:url(header.jpg);
background-repeat:no-repeat;
background-position:top left;
background-color:#FFFFFF;

}

#main
{
padding:0px;
height:200px;
background-image:url(main.jpg);
background-repeat:no-repeat;
background-position:top left;
background-color:#fff;

}

#mid_box
{
padding:0px;
height:200px;
background-color:transparent;
margin:0px 0px 0px 258px;
/*background-image:url(mid_spacer.jpg);
background-repeat:no-repeat;
background-position:top left;*/
}

#leftnav
{
float: left;
width: 259px;
margin-top:0px;
padding:0px;


}

#rightnav
{
float: right;
width: 150px;
margin-top:0px;
padding:0px;
background-color:transparent;
border-left:1px solid red;
/*border-right:1px solid green;*/
border-top:2px solid #003366;
}

#center
{
margin-left: 259px;
margin-right: 0px;
margin-top:0px;
padding:0px 0px 10px 0px;
background-color:#fff/*#649DD8*/;
border-top:2px solid #003366;
}

#leftbox {
width: 168px;
float: left;
background-color:transparent;

}

#rightbox {
width:167px;
float: right;
background-color:transparent;

}

#middle
{
margin-left: 169px;
margin-right:168px;
margin-top:0px;
padding:0px 0px 0px 0px;
background-color:transparent;
}
#left_top {
width: 250px;
float: left;
background-color:transparent;
}

#right_top {
width:250px;
float: right;
background-color:transparent;


}

I know it is a heavy duty question. The test page at that link has the css placed in each div af what I am trying to do. I am close...I think...I am just not understanding the model somehow to keep it together in the other 2 big browsers. Any help would be appreciated very, very much.

Thanks a million.

Jon

I was looking over the www.csszengarden.com page and the way CSS was used there, but now I'm puzzled about the way the p element & p class is used in that document.

In the stylesheet, the p element is specified but then in the html code, this type of code is used: <p class="p1"> <p class="p2"> <p class="p3">
For each new paragraph the class p is incremented by 1.
However, the classes p1, p2, p3 etc. are not specified anywhere in the stylesheet.

Is it a correct use of CSS & html code, or are the 'missing' classes perhaps an omission?
Can anybody explain to me how this affects those paragraphs?

Firefox works, IE doesn't Help with CSS pls :-)


Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg

Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg

Here is that part of css i believe is affecting it:

Code:

div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}

div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}

div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}

div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}

div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}

div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}

==================

I have seen this code in some index files

Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use?

Code:

<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->

Hello,

This one looks good on IE7/FF but not with IE6

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#picture {
	position:relative;
	float:left;
	left:6px;
	color:#ff0000;
	top:15px;
}
.name_txt {
	position:relative;
	margin-bottom:4px;
	float:left;
	font-size:10px;
	width:235px
}	
</style>
</head>

<body>
<div id="picture">
<p class="name_txt" style="float:left; width:100%"><img src="Blue hills.jpg" alt="" width="112" height="85"/></p>
<p class="name_txt" style="float:left; width:100%"><img src="Sunset.jpg" alt="" width="112" height="85"/></p>
</div>
</body>
</html>

I've mucked up my css a bit. Works great in IE but not in FireFox.

Submenus are not under their main menu item. and I can't seem to get it centered. Here is the site.

Causeway Lighitng

And here is the css (it the nav2 portion that controls the top menu)

Code:

#nav, #nav ul  {
	margin: auto; /* centres the nav */
	padding: 0;
	list-style: none; /* removes the bullets */
	width: 100%; 
	} 

#nav2, #nav2 ul  {
	margin: auto; /* centres the nav */
	padding: 0;
	list-style: none; /* removes the bullets */
	width: 135px; 
	}
	
#nav li, #nav {
margin:0;
padding:0;
}

#nav2 li, #nav2 {
margin:auto;
padding:0;
}

#nav ul li {
   position: relative;
   width:130px;
   line-height:14px;
   padding:0;
    margin:0;
   }
   
 #nav li ul {
 position: absolute;
 margin-left:134px;
 margin-top:-24px;
 display: none; 
 }
#nav li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
#nav li a {
	
	display: block;
	text-decoration: none; /* removes the underline */
	color: #777;
	background: #fff; /* necessary to fix an IE6 Bug */
	padding: 0px;
	border: 1px solid #ccc;
	}
	
#nav2 li a {
	display: block;
	text-decoration: none;
	/* removes the underline */
	color: #777;
	background: #FFCC00;
	/* necessary to fix an IE6 Bug */
	padding: 0px;
	border: 1px solid #ccc;
	text-align : center;
	}	

/* Fix IE. Hide from IE Mac \*/
* html #nav li, * html #nav2 li { float: left; height: 1%; }
* html #nav li a, * html #nav2 li a {
	height: 1%;
	margin-left : auto;
}
/* End */

#nav li a:hover, #nav2 li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
#nav li ul li a, #nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
#nav li:hover ul, #nav li.sfhover ul,
#nav2 li:hover ul, #nav2 li.sfhover ul { display: block; } /* The magic */ 

#nav2, #nav2 ul {
	width: 100%;
}

#nav2 li {
	float:left; /* makes the main nav horizontal */
	width:80px; /* Width of Menu Items */
	margin:0;
	}
	
#nav2 li ul {
	position: absolute; /* positions and sets width of submenus */
	display: none;
	float:left;
	margin:0;
	}
#nav2 li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */

		 

Hello,

This one doesn't look good on FF

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
	font-size:10px;
	top:3px;
	width:100%;
}
#layer ul {
	float:left;
	list-style-type:none;
	height:12px	
}
#layer li {
	display:inline;	
	height:12px	
}
#layer a {
	text-decoration:none;
	border:1px 1px solid #990000;
	color:#990000;	
	background-color:#CCCCCC;
	padding:20px;
	height:12px	
}
</style>
</head>

<body>
		  <div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>