QuickDraw MacGraw Style

Disclaimer: I would have posted this on PVII Newsgroups, but I can't from work - plus someone here may learn from it.

I have tried to duplicate Al's Sparber's QuickDraw MacGraw page -- with a couple of minor alterations. But... for some reason my 'content' Division is wrapping around my 'sidebar' Division. What gives?

http://www.williamlatimer.com/csstest3.htm

Here's my css:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
padding: 0px;
margin: 0px;
}

#header {

margin: 0 0;
border: 1px solid #000000;
padding: 10px;
background-color:#ccc;
/*/*/line-height: 1.5em; /* */
}

#holder {

margin: 0 0;
background-color:#fff;

}

#maincontent {
p margin: 0 0 12px 160; text-align: justify;
border-left: 2px dotted #333;
padding: 20px;/*Pads each table cell in modern browsers*/
font-size: 10px; /*/*/font-size: 100%; /* */
/*/*/line-height: 1.5em; /* */
}

#sidebar {
position: static;
float: left;
font-size: 10px; /*/*/font-size: 100%; /* */
padding: 10 px;
padding-top: 20px;
background-color: #ebe9e9;

}

#sidebar p {margin: 0 0 12px 0;}


#sidebar a {
/*/*/padding: 3px;
display: block;
border: 2px dotted #CCC;
text-decoration: none;
line-height: 1em;
width: 160px; /* */
}

#sidebar a:link, #sidebar a:visited {
color: #666;

}

#sidebar a:hover, #sidebar a:active {
color: #4a4949;
background-color: #06f92e;
border: 2px solid #000;
}

#sidebar ul {
/*/*/padding-left: 1em;
margin-left: 1em;
list-style-type: none; /* */
}

#sidebar li {
/*/*/margin: 0px 0px 6px 0px; /* */
}

#current a {
color: #FFFFFF !important;
/*/*/background-color: #999999!important;
border: 2px dotted #999 !important; /* */
}

Assign the margin to maincontent div not the p margin. try this:

#maincontent {
margin: 0 0 12 160;
text-align: justify;
border-left: 2px dotted #333;
padding: 20px;/*Pads each table cell in modern browsers*/
font-size: 10px; /*/*/font-size: 100%; /* */
/*/*/line-height: 1.5em; /* */
}


--
Bryan Ashcraft (remove brain to reply)
Paragon Visuals :: http://www.paragonvisuals.com
TMM Volunteer (DW) :: http://www.macromedia.com/go/team
----------------------------------------------------------------
Got Questions? Get Answers!
Extending Knowledge - Daily
http://www.CommunityMX.com
--

"Bryan Ashcraft" <bryan (AT) paragonvisualsBrain (DOT) com> wrote

Assign the margin to maincontent div not the p margin. try this:

#maincontent {
margin: 0 0 12 160;
text-align: justify;
border-left: 2px dotted #333;
padding: 20px;/*Pads each table cell in modern browsers*/
font-size: 10px; /*/*/font-size: 100%; /* */
/*/*/line-height: 1.5em; /* */
}

Hi Bryan,

We need to state the unit of measure when it's other than 0:
margin: 0 0 12px 160px;

Otherwise, spot on!

Thanks


--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Extensions - DesignPacks - Tutorials - Books
---------------------------------------------------------------------
The PVII Newsgroup | news://forums.projectseven.com/pviiwebdev
The CSS Newsgroup | news://forums.projectseven.com/css
---------------------------------------------------------------------

We need to state the unit of measure when it's other than 0:
margin: 0 0 12px 160px;

Otherwise, spot on!

Oops! ;^)


--
Bryan Ashcraft (remove brain to reply)
Paragon Visuals :: http://www.paragonvisuals.com
TMM Volunteer (DW) :: http://www.macromedia.com/go/team
----------------------------------------------------------------
Got Questions? Get Answers!
Extending Knowledge - Daily
http://www.CommunityMX.com
--

Well - I did as Bryan suggested, and also realized I had left off the 'px' at the end of the left margin declaration for 'maincontent'. I also needed 190 px instead of 170 px for the left margin of 'maincontent'. Now, it's good in IE but not quite there for NN. I think it might have something to do with my ul or li #rules. I've been trying to get rid of the indent on the ul.


#sidebar ul {

margin: 0;
list-style-type: none; /* */
}

#sidebar li {
/*/*/margin: 0px 0px 6px 0px; /* */
}