New to css

Hello-
I am new to all of this. I have noticed from other forms Internet Explorer does not play nice with css. I have also found this out first hand. When working on my site, content looks great in chrome but not Internet Explorer. The formatting is all over the place in Internet Explorer. I am currently using Dreamweaver 5. I have pasted a source code page and my css.
This is my first post ever and if I didn’t do something correctly sorry and please let me know so I can correct this in the future. Any help would be great.
Thanks
Source Code
<!DOCTYPE HTML>
<html>
<head>
          <script type="text/javascript" src="js/jquery.js"></script>
          <script type="text/javascript" src="js/timothy.js"></script>
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
          <link href="css/print.css" rel="stylesheet" type="text/css" media="print">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta http-equiv="Content-Type" content="cache" />
          <meta name="robots" content="INDEX,FOLLOW" />
          <meta name="keywords" content="Enter Keywords" />
          <meta name="description" content="Description Here" />
          <title>Center for Public Health and Health Policy</title>
    
    
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="logo"><img src="logo.png" /></div>
<div id="social-media-icons">
<ul>
                      <li><a href="https://www.facebook.com/cphhp"><img src="images/icons/icons/facebook_32.png" /></a></li>
                <li><a href="#"><img src="images/icons/icons/rss_32.png" /></a></li>
                <li><a href="http://www.twitter.com"><img src="images/icons/icons/twitter_32.png" /></a></li>
                <li><a href="http://www.youtube.com"><img src="images/icons/icons/youtube_32.png" /></a></li>
          </ul>
                    </div>
                    <div id="topnav">
                  <ul>
                      <li><a href="index.html">Home</a></li>
                <li><a href="academics.html">Academics</a></li>
                <li><a href="research.html">Research</a></li>
                <li><a href="community-practice.html">Community Practice</a></li>
                <li><a href="staff.html">Staff</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
                    </div>
                    <div id="banner">
                              <img src="bike-nh-banner.jpg" />
                    </div>
<div id="content">
            <h1>Welcome to the Center for Public Health and Health Policy</h1>
            <p>The Center for Public Health and Health Policy (CPHHP) is a programmatic, research, and policy center. It is organized as a cross-campus, interdepartmental center reporting equally to the Provost through the Vice-Provost for Research and Graduate Education and to the Vice President for Health Affairs.</p>
               <img class="image-frame" src="publichealth.jpg" />
      <img class="image-frame" src="ptoday_aug06-008.jpg" />
<p>Need info</p>
        </div>
<div id="rightside">
                  <h2>Latest News</h2>
            <p class="date">September 26, 2012</p>
            <h3>Sample Hideline</h3>
            <p>On Thursday, June 7, 2012 The Boys and Girls Clubs of Hartford (BGCH) presented Community Excellence Awards for their newly established Community Partner Hall of Fame. The Husky Nutrition program, which is administered by the UConn Center</p>
            <p class="date" >September 26, 2012</p>
            <h3>Another Sample Hideline</h3>
            <p>On Thursday, June 7, 2012 The Boys and Girls Clubs of Hartford (BGCH) presented Community Excellence Awards for their newly established Community Partner Hall of Fame. The Husky Nutrition program, which is administered by the UConn Center</p>
            <p class="date" >September 26, 2012</p>
            <h3>Another Sample Hideline</h3>
            <p>On Thursday, June 7, 2012 The Boys and Girls Clubs of Hartford (BGCH) presented Community Excellence Awards for their newly established Community Partner Hall of Fame. The Husky Nutrition program, which is administered by the UConn Center</p>
        </div>
                    <div id="footer">
                  <p class="footer-text">Copyright 2012</p>
                    </div>
</div>
   </
</body>
</html>
CSS
/* Color Legend */
/* Reset */
html, body { margin: 0; padding: 0; border: 0;
                                        background: transparent; font-size:10px; }
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
          margin: 0;
          padding: 0;
          border: 0;
          vertical-align: baseline;
          background: transparent;
img           { margin:0; padding:0; border:0; }
table, tr, th, td, tbody, tfoot, thead {
          margin: 0; padding: 0; border: 0;
          vertical-align: baseline;
          background: transparent;
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea, form, fieldset {
          margin: 0; padding: 0; border: 0;
article, aside, dialog, figure, footer, header, hgroup, nav, section {
          display:block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
          font-family: Arial, Helvetica, sans-serif;
          font-size:100%;
          font-weight: normal;
          font-style: normal;
          line-height: 100%;
          text-indent: 0;
          text-decoration: none;
          text-align: left;
          color: #000;
ol, ul { list-style: none; }
/* Global */
html           {          }
body          { background-color:#C0C0C0          }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size:20px; color:#000;
                    padding-top:15px ; padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px; }
h2 { font-size:20px; }
h3 { font-size:16px; margin-bottom"5px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
/* Text Elements */
p                     { color:#000; font-size:12px; line-height:150%;
                                                            margin:15px 0; }
p .left                              { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right                     { margin: 1.5em 0 1.5em 1.5em; padding: 0; }
a                     {   }
a:link                              { color: #00f; }
a:visited                    { color: #0f0; }
a:active                    { color: #000; }
a:focus                              { color: #666; }
a:hover               { color: #f00; }
blockquote            { color:#000; font-size:12px; }
strong                { font-weight: bold; }
em                                    { font-style: italic; }
/* Images */
.image-frame          { padding:10px; border:1px #ccc solid; margin:10px; }
/* Lists */
ul                    { }
ol                    { list-style-type:decimal; }
ul li                        { color:#000; font-size:12px; }
ol li                         { color:#000; font-size:12px; }
dl                    {            }
dt           {            }
dd                    {           }
/* Tables */
table                 { width:100%; }
tr                                        {          }
.odd                              { background-color:#eee; }
.even                              { background-color:#fff; }
th                    { font-weight: bold; }
thead, th              { background: #ccc; }
tbody                              {   }
th,td,caption           {           }
caption                     {           }
tfoot                 {          }
.tfooter                    { background-color:#ccc; text-align:center; font-style:italic; }
caption               { background: #efefef; }
/* Miscellaneous */
sup, sub              { line-height: 0; }
abbr, acronym   { border-bottom: 1px dotted #666; }
address               {            }
del                   { background:#FFCECE; color:#f00; }
code, pre                    { background-color:#FF9; padding:2px 0px; margin:4px 25px;
                                                  font-family:"Courier New", Courier, monospace; font-size:12px; font-weight:normal; line-height:150%;          }
/* Containers */
#outer                                         { width:960px; margin:0 auto; background-color:#FFF;   }
#wrapper                               { width:900px; margin:0 auto; background-color:#FFF;   }
#logo                                         { margin:30px 0px; float:left; }
#social-media-icons                     { float:right;          }
#social-media-icons ul li   {display:inline; }
#social-media-icons ul                    { margin-top:40px; }
#topnav                               { clear:both; }
#topnav ul                              { border-top:1px #000 solid; border-bottom:1px #000 solid;
                                                            margin:20px 0px; padding:10px 0px;          }
#topnav ul li                    { display:inline;          }
#topnav ul li a                    {          padding:0 15px; }
#topnav a:link                              { color: #000; }
#topnav a:visited                    { color: #000; }
#topnav a:active                    { color: #000; }
#topnav a:focus                              { color: #666; }
#topnav a:hover               { color: #F60; }
#banner                               { margin-bottm:30px; }
#slider                                        { margin-bottom:30px; }
#content1                               { width:650px; float:left;    }
#content2                              { width:900px; float:left;    }
#rightside                               { width:200px; float:right; margin-top:15px; }
#footer                               { clear:both; margin-bottom:20px; border-top:1px #ccc solid; padding-bottom:20px; }
#box1huskyreads { width:200px; height:300px; float:left; margin:10px; border-top:10px #000 solid; background-color: #eee;   }
#box2huskynutrition1 { width:200px; height:300px; float:left; margin:10px; border-top:10px #000 solid; background-color: #eee; }
#box3huskynutrition2 {          width:200px; height:300px; float:left; margin:10px; border-top:10px #000 solid; background-color: #eee; }
#box4healthyaging {          width:200px; height:300px; float:left; margin:10px; border-top:10px #000 solid; background-color: #eee;}
#box1huskyreads h3, #box2huskynutrition1 h3, #box3huskynutrition2 h3, #box4healthyaging h3 { margin:5px 10px 10px 10px ; }
#box1huskyreads p                     { margin:5px 10px 10px 10px; }
#box2huskynutrition1 p { margin:5px 10px 10px 10px; }
#box3huskynutrition2 p { margin:5px 10px 16px 10px; }
#box4healthyaging p { margin:5px 10px 10px 10px; }
#box5 {   }
#box6 {   }
#box1 { width:200px; height:300px; float:left; margin:10px; border-top:10px #000 solid; background-color: #eee;    }
#box2 { width:200px; height:300px; float:left; margin:10px; border-top:10px #000 solid; background-color: #eee; }
#box3 {          width:200px; height:300px; float:left; margin:10px; border-top:10px #000 solid; background-color: #eee; }
#box4 {          width:200px; height:300px; float:left; margin:10px; border-top:10px #000 solid; background-color: #eee;}
#box1 h3   { margin:5px 10px 10px 10px; #000 }
#box2 h3   { margin:5px 10px 10px 10px; #000 }
#box3 h3   { margin:5px 10px 10px 10px; #000 }
#box4 h3   { margin:5px 10px 10px 10px; #000 }
#box1 p    { margin:5px 10px 10px 10px; #000 }
#box2 p    { margin:5px 10px 10px 10px; #000 }
#box3 p    { margin:5px 10px 10px 10px; #000 }
#box4 p    { margin:5px 10px 10px 10px; #000 }
#box5 {   }
#box6 {   }
/* Layout Extra */
/* Navigation Extra */
/* Forms */
form ol { list-style-type:none; }
form           { text-align:left; margin:20px;          }
label           {
                    float: left; width: 150px; margin-top:5px;
                    text-align:right; display:block; background:none; font-weight:bold;
submit          { background:none;           }
input           {
                    width: 280px; margin:0 0 16px 10px;
                    border:1px #bbb solid; padding:5px; background:none;
input:focus, textarea:focus          { background-color:#BFEBFF; }
textarea {
                    width: 280px; height: 150px; margin:0 0 16px 10px;
                    border:1px #bbb solid; padding:5px; background:none;
select { margin-bottom:20px;          }
.month { margin-left:155px;          }
.submit {
                    width:90px; height:50px;
                    margin-left:160px;
                    font-size:12px;
br                    { clear: left;           }
.clear          { clear:both; }
/* Miscellaneous */
.font                              { font-style:normal; font-size:12px; }
.firstLabel     { margin-right: 50px; }
.ul                                        {list-style-type: circle; margin-left:40px;          }
.pop-link        { font-size:12px; margin:10px 10px 0px 10px; color:#03F; }
.pop-link1       { font-size:12px; margin:10px; }
.pop-link2       { font-size:12px; margin:10px; float:left; }
.pop-link3                      { font-size:12px; margin:5px 5px 0px 0px; }
.date                              { font-weight:bold; color:#03F; margin-bottom:3px; }
.copyright-text          { font-size:80%; font-style:italic; color:#333; }
.footer-text          { font-size:100%; font-style:normal; color:#000; text-align:center; }
.title                              { font-size:18px; font-weight:bold; color:#333; }
.subtitle                    { font-size:14px; font-style:italic; color:#333; }
.artist                              { font-size:16px; font-weight:bold; color:#333; }
.author                              { font-size:14px font-weight:bold; color:#555; }
.editor                              { font-size:14px font-style:italic; color:#555; }
.pub-date                    { font-size:10px font-style:italic; color:#555; }
.article-date          { font-size:10px font-style:italic; color:#555; }
.location                    { font-size:10px font-style:italic; color:#555; }
.float-right          { float:right; }
.float-left                    { float:left; }
.clear                              { clear:both; }
.hide                              { display:none; }
.block                              { display:block; }
.inline                              { display:inline; }
.first                              { font-weight:bold; }
.last                              { font-weight:bold; }
.left                              { font-weight:bold; text-align:left; }
.right                              { font-weight:bold; text-align:right; }
.added                { background:#D7D7FF; }
.removed              { background:#FFCECE; color:#f00; }
.changed                    { background:#FFB; }
/* Success, info, notice and error/alert boxes - from Blueprint CSS Framework */
.error, .alert, .notice, .success, .info {
          padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error, .alert           { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice                              { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success                       { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info                               { background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a           { color: #8a1f11; }
.alert a           { color: #8a1f11; }
.notice a   { color: #514721; }
.success a { color: #264409; }
.info a                    { color: #205791; }

Run your pages through these validators:
CSS: http://jigsaw.w3.org/css-validator/
HTML: http://validator.w3.org/
Errors in your html can cause display problems pretty quickly, especially in IE. I do see one problem off the bat if you copy/pasted your exact code above, a stray </ near the end (just before your </body> tag) could be throwing IE into Quirks Mode (bad for display)
Could you create a test folder on your server to place a page in it that we could see? That way, once the issue is found, you can delete the folder and the test file.

Similar Messages

New SpryWidget .CSS for a New Page

I have the whole spry arsenal of files on a website in a separate folder. I am already using several widgets and functions from that and among others also a "spry collapsible panel" widget on one of the pages.
Now, I would like to use it once again on a new page (on the same site), but when I insert the widget it gives me the same SpryCollapsiblePanel.css as the one already used for the previous widget. But I want to give the panel a different look and feel as it has some other purpose on the new page.
What is the correct procedure to get a fresh untampered "SpryCollapsiblePanel.css" for the new widget on a new page?
Thank you!

I notice (finally got the page!) that the lowest element in the 'drop up' menu overlays the main menu title...a byproduct of needing perhaps one more item's height in margin-top negative pixels!
I suppose it is a small consolation, but IE 8 seems to be rendering the menus accurately, with the sub-submenus flying out relative to their own submenus.
The only workaround that comes to mind (for all the other browsers out there) is to set up new classes to apply to subsubmenus:
ul.MenuBarHorizontal ul    /*this is the usual markup; you can leave this in */
    margin-top:-177px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 160px;
    position: absolute;
    left: -1000em;
/*add the following, to offset the top margin by multiples of the height of a single item */
ul.MenuBarHorizontal ul ul.three {margin-top: 90px;}
ul.MenuBarHorizontal ul ul.two {margin-top: 60px;}
ul.MenuBarHorizontal ul ul.one {margin-top: 30px;}
For instance, the Ladakh Treks subitems want to offset from the top 30px to align with their parent, Ladakh Treks, so I use the <ul class="one"> to drop that sublist 30px down from the top of the container.
<li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/treks.html" target="_blank" class="MenuBarItemSubmenu">Ladakh Treks</a>
      <ul class="one">
             <li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/stok_kangri_exp.html" target="_blank">Stok Kangri Expedition</a></li>
             <li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/markha1.html" target="_blank">Markha Valley</a></li>
        </ul>
</li>
This solution does not work in IE8, which had already worked the way you intended without monkeying around with the top margin. I don't know how it works in IE7.
I have not used conditional markup (I know there are people out there who have, and you could research it!), but one could attempt to put a conditional markup around those class definitions in the stylesheet that would not call on them when your site encounters IE8.
Beth

New to CSS, text-align and line-height ok in 'Design', but not in browsers (IE 10 & Chrome) on Win8

[DREAMWEAVER CC]
I'm now learning CSS, and find that where I specify in an external style sheet
h1 {
          font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
          text-align:center;
          color: black;
          font-size: 1em;
          font-weight: normal;
          font-style: normal;
          line-height: 3.0;
          letter-spacing: 0px;
          word-spacing: 10px;
text-shadow: 3px 3px 5px #333;
text-decoration: none ;
text-transform: none;
That, in DW Design, they look fine, but in Windows 8, IE 11 and ChromeVersion 31.0.1650.63 m   that the text-align: center; and the line-height: 3.0; are ignored.
I work around by specifying <tr align="center" height = "77">   shouldn't the text-align: center; and the line-height: 3.0; be specifiable in my CSS??
Thanks for any help!
<tr height="77" align="center">
        <h1>
            <td bgcolor="CornSilk">1/28/2014</td>
            <td>the Sky</td>
            <td>Fate is the Hunter</td>
          <td >Ernest Gann</td>
            <td >John</td>
            <td >Jessica</td>
          <td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1_1?s=books&ie=UTF8&q id=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
        </h1>
    </tr>

hemmi1 wrote:
[DREAMWEAVER CC]
I'm now learning CSS, and find that where I specify in an external style sheet
Not sure what it is you are trying to do but what you have at the moment is invalid code which is most likely why it doesn't work cross browser. (of cousre this css does not help - line-height: 3.0; - 3.0 what? - px, ems?)
Here's an example below of how you could do it. Give your table a class (below it is called .myTable) then you can start styling the <td> cell, and anything inside it by appending the element like an <h2> tag to the class name - .myTable h2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.myTable {
    width: 900px;
    margin: 0 auto;
.myTable td {
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
width: 150px;
.myTable h2 {
    margin: 0;
    padding: 0;
text-align:center;
color: black;
font-size: 1em;
line-height: 50px;
word-spacing: 10px;
text-shadow: 3px 3px 5px #333;
.myTable a {
    display: block;
    text-align: center;
</style>
</head>
<body>
<table class="myTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><h2>1/28/2014</h2></td>
<td><h2>the Sky</h2></td>
<td ><h2>Ernest Gann</h2></td>
<td ><h2>John</h2></td>
<td ><h2>Jessica</h2></td>
<td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1 _1?s=books&ie=UTF8&qid=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
</tr>
</table>
</body>
</html>

New layout, CSS errors and Firefox problems

Hi
Could it be that some of the Firefox problems are caused by:
1) The wrong mime type for the CSS files? Currently it appears to be:
application/x-css
shouldn't it be
text/css
2) Errors in the CSS files and inline CSS of.
http://forums.oracle.com/forums/categoryHome.jspa?categoryID=84
Can recommend using:
http://jigsaw.w3.org/css-validator/
==== New layout ======
The border error on the download button has been fixed, but the alt attribute of the upper right search icon is still "faq", shouldn't it be "Search"
<img src="images/search-16x16.gif" width="16" height="16" border="0" alt="Search">
Axel

There are a number of fixes still to be made, but most of them will wait until our upgrade (still a few months out).

New Page CSS - Halo Left Nav

I am creating a new page using DW's built-in page designs.
The page that I am working with is the Halo Left Nav - which some
with the CSS and other files.
I created a menu in flash that want to use throughout my
site. I also want to use the template menu. When I insert the flash
menu at the top of the page and move the MastHead down below 52px,
the global links bring up the subglobal links for an instance and
then it loses focus. If I move the masthead up then it goes back to
working fine.
The problem is that I want the flash to be at 0px Top and the
masthead section at 53px top since the flash is 52px in length.
If I drag and drop the Masthead down then it automatically
writes to the CSS the new px locations.
I'm sure it is something simple. Please help.

Test server is down at the moment. I am attaching the HTML
and CSS. When I mouseover the Global Links the first time the
sublinks stay with focus until the mouse is moved. After the first
time, I mouseover the Global Links, the submenu almost does a type
of a blink on the screen and then it is gone.
Thanks for the help.

New to CSS and DW CS3

Hi I can see how to attach a CSS style sheet for colour,
background, text etc but is there a way to have actual text as part
of the style.
I have a web site with a lot of pages, problem is with items
such as the footer and the navigation links. If any alter I have to
change each page. Can these items be part of the syle sheet so one
alteration will alter all the pages.
Or is there a better way. When I used to use Frames you just
altered one embeded frame and all changed now with CS3 Frames are
redundant.
Any help please

You cannot add editable regions to the head of a page using
DW's UI. You
would have to add it manually. Look at the code around the
<title> tag in
the blank page you saved as a Template. Make your page's
title tag look
that way.
Missing these editable regions in the head of the Template
page is a dead
giveaway for a Template that has been improperly created.
Create your
templates properly and you won't have this problem.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"fuggle" <[email protected]> wrote in
message
news:ghor5s$5o3$[email protected]..
> Okay I give up. How do I make the head/title editable.
> I have selected the title as editable and it keeps going
into the body
>
> Quote
>
> <!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=utf-8" />
> <title>Untitled Document</title>
> </head>
>
> <body>
> 

> </body>
> </html>
>
> End quote
>
> So I cannot alter it. I am doing Insert, template
objects, editable
> region.
>
> Why?
>

New to CSS! Attach a Style sheet to exsisting website

Hi
Im self taught so I need help in a really basic style please!!
Ive got a website which Ive made my self, learning via youtube etc!! Im trying to figure out the css business! After ALOT of trial and error I think im slowly getting to grips but I could do with a little help!
Basically what I THINK Ive been doing is adding styles to a single page, and Ive found that I can now carry on the styles via copy and pasting the css code from the top of each page and pasting in the next page individually.. BUT I suspect the proper way of doing this would actually be to set up a separate style sheet which applies to the whole website, However, A) im not sure how to do this, and B) My site is working OK at the mo, so will this mess up the site if its added AFTER the site is already working?
Idiot proof answers please! x

Hi Every one,
I just want to say a really really really big thank you! with your help I have now got the basics of css! It seems so simple now, but when I first tried is was REALLY daunting and I couldnt figure it out, I just needed a little point in the right direction,!
I dont know if you get paid for the help for if you just to do it to be nice, but I just wanted to say a great big thanks to every one above! Your help and patience is very much appriciated!
THANK YOU!

OT-ANNC: Curvitude - A new PVII CSS Page Pack

*An automated interface from which to select and create
complete pages
*Up to 12 page layouts to choose from
*Integrates with Pop Menu Magic to create curved and
semi-transparent
sub-menus
*Robust and efficient cross-browser CSS layouts
*Search engine friendly
*Editable Fireworks images
*PDF User Guide
*Free Technical Support.
$60
http://www.projectseven.com/products/templates/pagepacks/curvitude/index.htm
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators

Well I had the same thought when I tried your demos (very
nice looking
BTW) but I guess it's not a problem for the majority of
people. Anyway
since you announce it on this NG I guess you're also
interested in
feedback too.
Kim
http://www.geekministry.com
Al skrev:
> On Tue, 05 Dec 2006 15:34:38 -0500, Thierry |
www.TJKDesign.com
> <[email protected]> wrote:
>
>> Al Sparber- PVII wrote:
>>> It's kind of like having a CSS guardian angel
hovering over you you.
>>
>>>
http://www.projectseven.com/products/templates/pagepacks/bpotter/demo.htm
>>>
>>
>> Al,
>> I know you didn't ask, but I thought I'd give you a
heads-up regarding
>> the
>> menu in this template:
>> I find it difficult (impossible?) for keyboard-users
to "get rid of" that
>> flyout menu once it is opened.
>>
>
>
>
http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm
>
>
> We deliver our pages in a default configuration. It's
different from
> your opinion so let's just agree to disagree. We've had
this discussion
> before and a rehash would serve no constructive purpose.
Feel free to
> email me if you have any further questions.
>
>
> Cheers
> --Al

ANNC: A New PVII CSS Page Pack Released

Announcing: Il Libro
Major features include:
Comprehensive, Tutorial-Based User Guide.
6 CSS-P layouts, each one has its own graphical look.
An automated single-click Page-Creation interface
Support for non-JavaScript browsers.
Passes automated Section 508 accessibility checks.
$60.
http://www.projectseven.com/products/templates/pagepacks/pmm/libro/libro_01.htm
Enjoy.
The PVII Team
http://www.projectseven.com
"Designing with CSS is sometimes like barreling down a
crumbling
mountain road at 90 miles per hour secure in the knowledge
that repairs
are scheduled for next Tuesday... Other times it can be
downright cool."

Well I had the same thought when I tried your demos (very
nice looking
BTW) but I guess it's not a problem for the majority of
people. Anyway
since you announce it on this NG I guess you're also
interested in
feedback too.
Kim
http://www.geekministry.com
Al skrev:
> On Tue, 05 Dec 2006 15:34:38 -0500, Thierry |
www.TJKDesign.com
> <[email protected]> wrote:
>
>> Al Sparber- PVII wrote:
>>> It's kind of like having a CSS guardian angel
hovering over you you.
>>
>>>
http://www.projectseven.com/products/templates/pagepacks/bpotter/demo.htm
>>>
>>
>> Al,
>> I know you didn't ask, but I thought I'd give you a
heads-up regarding
>> the
>> menu in this template:
>> I find it difficult (impossible?) for keyboard-users
to "get rid of" that
>> flyout menu once it is opened.
>>
>
>
>
http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm
>
>
> We deliver our pages in a default configuration. It's
different from
> your opinion so let's just agree to disagree. We've had
this discussion
> before and a rehash would serve no constructive purpose.
Feel free to
> email me if you have any further questions.
>
>
> Cheers
> --Al

New at CSS

I have been learning about CSS and brushing up on my HTML.
However, I can’t work out if the main visual areas of my page
should be in the style sheet or HTML doc?
My site consists of several images I have created that, when
placed accurately, would make up the visual page (pretty usual on
most sites, I think). I want this page layout to be the same across
my site and would think that the easiest way to do this is to
create it in the SS along with styles for links, fonts, etc, but I
can’t figure out how to achieve this. I expect it has to do
with positioning, but all I can find is how to style the fonts,
etc. Any help out there?
Thanks

I try to use as few images as possible to create the look I
am after.
Here is a link that went a long way in helping me understand
CSS layout.
http://css.maxdesign.com.au/floatutorial/index.htm
alex
datsomset wrote:
> I have been learning about CSS and brushing up on my
HTML. However, I can?t
> work out if the main visual areas of my page should be
in the style sheet or
> HTML doc?
>
> My site consists of several images I have created that,
when placed
> accurately, would make up the visual page (pretty usual
on most sites, I
> think). I want this page layout to be the same across my
site and would think
> that the easiest way to do this is to create it in the
SS along with styles for
> links, fonts, etc, but I can?t figure out how to achieve
this. I expect it has
> to do with positioning, but all I can find is how to
style the fonts, etc. Any
> help out there?
>
> Thanks
>
>

My JQuery/CSS is not working properly in Firefox on the first load. After hitting refresh, it works fine.

I am a very amateur web designer, who is also very new to CSS, so please be gentle…
I am having a very frustrating issue with Firefox. My website is designed so that when my main menu navigation bar is too long for the screen, it automatically converts into a drop down menu. Naturally, this function is to better serve mobile and tablet devices.
This feature works perfectly on every browser except for Firefox. With Firefox, my main navigation menu bar is converted to a drop down menu, even though I am viewing it on a standard laptop, not a tablet or mobile device.
AND, as soon as I refresh the page, it displays just fine. And, as long as I don’t clear my history or cache, it will continue to display just fine.
Not a “huge” deal, but super annoying that new visitors to my site who are using Firefox get this experience as their first experience.
I have studied my CSS code for hours, searched through countless numbers of CSS forums for help, tweaked every bit of code I thought was relevant, and I am completely baffled.
I do realize that a simple JQuery is what tests the menu size, so it's probably something wrong there? Or maybe there is some sort of overstack issue occurring? Maybe not. Who knows – as I say, I am an amateur.
If anyone could look at my code and give me some help, I would be very appreciative.
My website is http://mikerylander.com
Thanks!
PS: This is the first time I’ve not been able to solve a CSS or HTML problem on my own, so hopefully the answer isn’t something ridiculously easy.

I see the menu when the browser window is wider than about 1180px.<br />
If the window is smaller than I get the menu button.<br />
In Google Chrome this works the same.
A good place to ask advice about web development is at the mozillaZine "Web Development/Standards Evangelism" forum.
*http://forums.mozillazine.org/viewforum.php?f=25
The helpers at that forum are more knowledgeable about web development issues.<br>
You need to register at the mozillaZine forum site in order to post at that forum.

CSS (some, not all) not showing up in browser, but fine in DW. Plus other desperate issues....

I would really appreciate any and all help I can get to solve these problems as I'm new to CSS/HTML (completely new) and have been attempting to code my design just well enough to get it uploaded and working as a site. Once I can atleast achieve this feat, I plan on completely converting to CSS. But for now, I need to get the site working and I really didn't want to come and bother all of you on here with my problems and have been procrastinating posting on here for absolutely ages now....but since I can't figure all of the messy-uppy ness going on on my own, I beg forgiveness for any of your time wasted on my problems .
Okay, so the "main" issue here is that I can see some(some, not all) CSS on DW, but I see NONE whatsoever when I go to preview in browser, same after uploading. I do have all of the files uploaded and placed in the correct directories, including the stylesheet, and images folder. But, nope, nada. Now, I did think this was a root/directory problem, maybe the url's weren't pointing to the right directories. I checked and attempted to fix this several times and any changes made no difference. Also, uploaded to the root of my site, where all files and folders are where they should be, yet no change. I am utterly clueless as to what is going on here....
Second: Padding, or margins added through CSS for the divs is simply not working in DW or otherwise. I have padding placed on all of the content type areas with writing/content in them and despite the fact that the changes to the font/text formatting I've made show up, the padding does not. This is only in DW since no CSS whatsoever is showing out of DW anyways. I would like to know how to get the padding and the formatting, just all of the CSS in general to actually show up in browser/when uploaded.
Third: The next issue is also confusing, and this only occured after I made the page into a template and uploaded the home.htm page I created from it to my site. For some reason, the image called "../images/aurora2_14_content_marg.gif". Is appearing at the very top of the page for no reason at all. I don't understand why it is there, or how it even got up there in the first place.
Fourth: This was actually next on my list of things to figure out once I've gotten all of the above issues taken care of but since I'm still drawing a blank after 2+ weeks on how to get this done in a way that will work I guess it couldn't hurt to ask on here and get some expertise on the matter. The issue is that I have a repeating background (images/bg.png) that I want stretching downwards as I add content to the page. I have this placed as the main background for the entire site as you will be able to see in a moment through my code/site. Now, the place I want this to start is from where the aforementioned image (../images/aurora2_14_content_marg.gif) stops. However, I want the content to actually start from 20 pixels or so from the top of that very image. I want to try and achieve this through the use of margins but since the margins and padding are not showing up I hve been unable to experiment with it enough to figure out any other way to achieve this. Any suggestions on how to achieve this would be much appreciated.
Fifth (yes, unfortunately we're still going): As you may be able to see through the design I have two seperate areas for the main content and the navigation and other such items to be placed. To clarify, the content will be placed(through the use of expandable content boxes, once I figure out how to work that) beginning at the aforementioned image/td/div (../images/aurora2_14_content_marg.gif) with a bit of padding or margin from the top and sides (too pull the content towardsthe center of the site rather than all over from left to right like it is appearing now). The navigation etc will be placed where the long cyan area is under the search bar. For both of these, I cannot figure out how to split my one background image and also the content_marg.gif image into the two divs/or whatever else would work to split their contents from eachother. I think that seperating them into 2 divs with padding from the sides and eachother and seperate top paddings (I want the navigation to begin more near the top of the page than the content). The issue here is, I cannot figure out how to do this.
Any and all suggestions would be greatly appreciated. Also, any tips on how to achieve the code for the solutions provided would also be very much appreciated, as I am only just starting out coding.
The site/page:
http://aurora.comeze.com/home.htm
The stylesheet (style.css):
http://aurora.comeze.com/style.css
Like I mentioned above, all of this except the padding shows up in DW. Whereas, none of this shows up at all in browser view, or through the site.

Summary of issues #1 through #5:
Code errors galore:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Faurora.comeze.com%2Fhome.htm
Photoshop generated HTML.
20th century table based layout with endless spacer gifs.
START OVER
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
=========================
DW Starter Pages (CSS Layouts)
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
=========================
Taking a Fireworks (or Photoshop) comp to a CSS Layout in DW
Part 1 - Initial Design
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Part 2 - Markup preparation
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Part 3 - Layout and CSS
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
========================
HTML & CSS Tutorials - http://w3schools.com/
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
========================
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Best of luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

The meaning of CSS life...

The one good thing: I finished my first fee-for-service CSS website done in Dreamweaver CS5. It is only four pages and is ugly beyong words and displays wildly in various browsers. The customers are naive enough to have settled for it but their check hasn't arrived yet. We shall see.
Now the test...I am a school webmaster and my behemoth, changes every week, 50 page sites are coming due. Oh dear! Just a word to you Adobe folks: You are really nice but you do know, don't you, that educators all over the country have begun cursing you every day since the advent of CS5 that offered us few legacy options? NO ONE in my county school webmaster group can work CSS or CS5. Deciding that this is an undertaking for the young, we convened our brightest tech students, the ones who understand everything. They couldn't work the new CS5/CSS editor either. I've been told that every school in the county has dropped web design from tech classes because of this. Just thought Adobe would like to know. Microsoft Word is the industry standard in its category, just like Dreamweaver. I have a master user's certificate in Word and can make it do great things. But my 75 year-old father can use it straight of the box, too.
Us all being partners in crime and whatnot, I asked repeatedly on this forum for a usable alternative to CS5, which is no longer a viable tool for the "casual user," as one recent poster pointed out. That's okay. I'm happy not to be a pro. But only AFTER my people saw no option other than dropping $800 on the education version of Creative Suite am I told about Adobe Contribute. Can that really simplify web design? Maybe I need to return this spanking new copy of CS5. More information would be helpful. Until I read Nancy's posts earlier, I had never heard of Contribute.
That said, damned straight on learning the only game in town, I still continue to struggle with CS5/CSS and will post my questions....
Question 1 - I uploaded the first five pages of my large site. Four of them did not work.
Please view: http://www.alex.k12.ok.us/pto/ptoindex.html. The content div on this page has suddenly gone black. I have studiously reviewed the code and have no idea what's wrong. I rebuilt the page from template three times with the same result. Funny, Adobe Browser labs shows the site without the black.
Question 2 - Take a look at this page: http://www.alex.k12.ok.us/board/boardindex.html. I have begun finding ways to convince myself that I am working with tabular data in order to justify using a table. CS5 still allows that, you know. The buttons are just harder to get to. At any rate, the sixth paragraph in the table displays centered in a much larger, bolded font. It does not display this way in Firefox. Again, I reviewed the code with a microscope. I can see no difference between this paragraph and others. But there are secrets in this CSS life that I do not understand.
Question 3 - A much more generic question only posed because I am using CS5 to create my pages. I routinely validate my pages using the W3C html and CSS validators. My CSS has validated 100% of the time. The HTML validator, however, returns errors, warnings and weather forecasts (a joke) that I cannot reference in my CS5 code. The line numbers are incorrect and, when I finally find the alleged error, it's NOT THERE. The most common error I get notes that I have failed to close a paragraph thingy. You know....</p>. But when I inspect the code, I find all the necessary structure present. Deciding I wasn't consuming sufficient mind-altering substances, I tried doing more with the same result. What does this mean?
Question 4 - I have enough experience with CSS now to know that inserting text in my template causes huge problems secondary only to inserting images. But i have to have both, and often. Is is best to just drop an image into, say, the content div, or should I put the pic in a div of its own? Most of my pictures have captions, so I am thinking the only way I can make a caption under a photo is to create a div to hold the picture and the caption. Is there some big secret about this as well?
Thanks for your time.

Wow..
And posted 1 hour ago, 9 viewers and no one concurring except me. Well, I have to congratulate you (I think), you're farther along the CSS road than me, and I started in 1995 with MS Frontpage, back around the time Macromedia owned DW. Does anyone remember going to their site/forums?
I know Cascading is the way to go, I just have no clue, and it seems a near code fiasco, but then I don't know anything about coding so it's all alien. If anyone can believe, I'm still laying a page or two out with tables. I just purely don't have the time to learn CSS. But maybe it's not all that difficult? Well, I haven't started it yet to know I suppose, just seems that it is. Now you say a legacy CSS is somehow not supported, seems that would imply all of those methods/tricks would then no longer be applicable? Wow, just makes me think of MS operating systems. I first started with DOS 3.1, then loaded up what was it, 14 or so 1.44 floppy disks when Win95 came around, then there was NT, I actually have the joke Vista64 running on a machine too.
I understand things move on in software, but if my interpretation is that previous CSS is no longer applicable, for us/those where learning any of it is a challenge, can see the futility in it.. For those of you 13, eating Oreos with milk and already making or about to bring in 10K (or 100K+) a year, good for you. I don't see the majority of people being so determined. And as people get older, they have other responsibilities to attend to. Perhaps software is the next frontier as far as personal computing and the Internet are concerned. AI (artificial intelligence) could greatly assist with this, so as hardware (memory) increases in performance, achieving near parity with the CPU getting cored out, and in the not so distant future when we all have little supercomputers as a result, with Berkeley helping to solve the multicore programming/application issue (that MS awarded 20M to solve, for the future of the OS), then we can most likely look forward to having greater assistance with these types of processes.
Coding.. For us that don't devote so much time to it, it is rather limiting (to our agenda). And the thing is, we really would use these programs more if it was easier, I think I speak for many of us. But if the learning curve goes from slope to vertical, or a series of plateaus, it seems nearly insurmountable at times. And then the browser compatibility issue on top of it all.
Wow. I can say I'm back for one last shot at it now, but if I don't get it this time, I'm outsourcing it. It's been nice, but I simply don't have hours to weeks to invest on a few web pages. And to master it all, I simply don't see it happening, I'm realistic about it. And may I add, I'm not one that is confused by the TV remote or a digital watch, I'm actually very technically oriented, extremely - just haven't been that interested in conquering code (obviously no CS degree, but apparently even those students are cutting corners).
I hear you, and at least I, concur.
Lastly, I'd like to add. Recently while at a bookstore, I picked up one of the computer "Web" editing magazines (I'll read nearly anything, except this - knowing..), mostly because I'm back for another swing at the plate, but also because promimently on the cover was something to the effect "so many tricks explained" etc.. I looked at nearly every article, and don't think I could have done one, they even provided a CD, really? It just seems like a puzzle, and the people that write the articles all looked undernourished, just an observation. Is that really what it takes, so much time and devotion? I wonder if one of them actually comes here and would care to comment on the required time investment (we seem to have time-to-complete figures for SATs etc., why not for articles on this subject matter too? I'd like to know what I'm getting into and how long until I'm up to speed, instead of staring into a void, which is what it nearly seems like. I guess I need to have a conversation with an East Indian Java Guru. Has anyone ever heard an EI programmer even say the word "Java", you just know they get it - I'm in Silicon Valley, happens all the time. Also pass by Adobe HQ all the time and before they even had the buildings (cool power wind vanes too btw, interesting little crosswalk between the buildings, always look for someone in there, like a hamster tunnel thing, funny never see anyone, there was relevance to me stating this) {think I need another parenthesis here, see - wouldn't be good at code}, moving/running on.) Oh, and if anyone needs programming answers, at least here anyway, visit a local Mediterranean restaurant with good falafels, easily find a programmer to answer your questions, no joke). I thought, well, it's good they have their email addresses, maybe I'll contact them and contribute to their 100K a year, but then I thought (seriously), could I even copy and paste the code correctly? Wow.. Is there not a better way, I wonder if Ray Kurtzweil could project out when web editing programs (and the Creators) will benefit from the Singularity theory.
(spell checker would be nice here)
Thx

Can CSS route based on cookie info in HTTP request

Hi
I am new to CSS and am interested as it might be able to provide a solution to a problem I have seen.
We currently have 3 Windows Servers running an ASP-based web application with a clustered SQL Server backend. The front end uses windows load balancing to distribute the load. All 3 servers are configured the same and there is only one application.
The problem lies with the way an the application maintains session state. I am told it uses a non-persistant cookie on the client which corresponds to a session object on the server. This is opposed to maintaining state in central location such as the database. Obviously this means the client needs to be stuck to a particular server for that session. This is currently achieved by setting the Windows NLB to single affinity which places traffic from a particular IP address to the same server. This does work but the clients source IP is changed by a downstream firewall to a NAT overload address meaning all clients appear with the same IP address (different port) and hence always end up on just one server.
The obvious next step in my mind would be to change the way NAT is done but this is not possible. The next obvious idea would be to change the application so that it maintains state in the database so the affinity of the Windows NLB could be disabled meaning requests would be dealt with using the source IP and port and hence distributed evenly. I am told this cannot be done either :) Joy!
So I have begain to look at other possible solutions. Apologies for my very limited knowledge on the CSS as I am trying to get my head around how it can be configured. I am thinking that it may be able to help me if I used it instead of Windows NLB. I am interested in the way you can use Layer 5 stickiness. Would it be able to examine the cookie in the HTTP request and route the traffic to the correct server?
I am aware that this will not alleviate the failover issue. If one of the servers were to fall over then the client would have to login again, however I am under the impression that this is acceptable behaviour. The main driver here is to provide load balancing to improve application performance by using all resources opposed to just one.
Many many thanks to anyone who can give me advise on this.

Hi Gilles
Thanks for the info. Sounds like we are on the right path. Unfortunately I am unable to get much information from the developers. Long story. I did logon to the system whilst doing a network trace. The following is what I found in the HTTP header:
Hypertext Transfer Protocol
GET /XXXXX/Includes/style.asp HTTP/1.1\r\n
Accept: */*\r\n
Referer:
http://xxx.xxxxx.xxx/xxxxx/login.asp\r\n
Accept-Language: en-gb\r\n
Accept-Encoding: gzip, deflate\r\n
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)\r\n
Host: xxxx.xxxxx.xxxxx\r\n
Connection: Keep-Alive\r\n
Cookie: ASPSESSIONIDQCBCDSCR=AEHBCJEDDGMMCCBHBICLELGD\r\n
\r\n
Why do you configure 2 services? How would I go about this given the cookie in the HTTP request?
Many thanks
Gary

CSS Comments in DW CS3

rally like the new preset css configurations that DW3
provides and the css comments are nice as well. However, they
bloats the code and many of the comments are not necessary unless
you are a beginner.
Does anyone know if there is a setting somewhere that will
generate the css without the comments?

Use a find/replace to delete them:
Find:
\/\*[\s\S]*?\*\/
Make sure regular expression is checked.
Tom Muck
co-author Dreamweaver MX 2004: The Complete Reference
http://www.tom-muck.com/
Cartweaver Development Team
http://www.cartweaver.com
Extending Knowledge Daily
http://www.communitymx.com/
"htown" <[email protected]> wrote in message
news:f2iagd$okr$[email protected]..
> rally like the new preset css configurations that DW3
provides and the css
> comments are nice as well. However, they bloats the code
and many of the
> comments are not necessary unless you are a beginner.
>
> Does anyone know if there is a setting somewhere that
will generate the
> css
> without the comments?
>

New to css

Similar Messages

Maybe you are looking for