In my infinite free time after work this evening I wanted to settle in to touching up the style for the web component in my initial page (index.a5w). Over lunch I watched all of the V11 Web Component Style Builder videos, so I was confident that in an hour I could create a copy of the GrGray style locally, named 2XCRGrGray, and touch up the horizontal navigation menu buttons so they are more aethetically pleasing.
Well, 90 minutes later and I am not even off the block. As it seems is so often the case I spent the majority of the time trying to figure out why Alpha Five (A5) behaved in an unexpected way. Sometimes it is my fault (simply newbie errors) and I learn from them. This one is beyond my understanding, however.
Following the videos precisely (and within my project, incidentally) when I create a local copy of the GrGray style many of the properties associated with it are missing from the preview. This behavior is repeated each time I attempt the copy process and it does not show correctly in IE9 or FF.
Just out of curiousity I closed the project and created a new database and repeated the process and lo and behold the properties were all there.
So...why would there be a problem creating a local copy of an existing style sheet with all its associated properties within my project? Does the fact that I created a style sheet for the page wen I initially developed it in Dreamweaver play a part in this issue?
You can see my page at www.2xcr.com, with its horribly formatted navigaton bar. I will post my CSS code below.
Thank you for your help.
CSS Code:
* { margin: 0; padding: 0; border: 0; }
#logo_bar {
float: left;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
background-color: #000000;
}
#business_bar {
height: 29px;
background-color: #000000;
}
#login_bar {
color: #FFFFFF;
float: right;
padding: 3px;
height: 15px;
background-color: #000000;
}
#nav_bar {
background-color: #000000;
height: 28px;
}
#breadcrumb_bar {
background-color: #FFCC00;
color: #000000;
clear: left;
height: 27px;
padding-top: 3px;
padding-left: 4px;
}
#slide_show {
margin-left: auto;
margin-right: auto;
clear: left;
}
#breadcrumb {
float: left;
}
#email_page {
float: right;
padding-right: 4px;
padding-top: 6px;
}
#print_page {
float: right;
padding-right: 4px;
padding-top: 5px;
}
#footer {
font-size: small;
color: #000000;
background-color: #FFCC00;
text-align: right;
padding-right: 5px;
height: 30px;
}
#quote_bar {
font-style: italic;
color: #FFFFFF;
height: 20px;
background-color: #000000;
}
#click_cris_logo {
clear: left;
}
#narrative {
font-size: medium;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#section_bottom {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#cris_logo {
float: left;
width: 92px;
}
#section_bottom #why_not_itrs_logo {
float: left;
width: 96px;
}
#why_not_itrs_text {
width: 304px;
float: right;
font-size: medium;
}
#why_cris_text {
float: left;
width: 308px;
font-size: medium;
}
#footnotes {
width: 800px;
margin-right: auto;
margin-left: auto;
font-size: x-small;
clear: left;
}
body {
font-family: 'Didact Gothic', sans-serif;
font-size : medium;
background-repeat: repeat-x;
background-image: url(/Images/page_bg.jpg);
background-attachment: scroll;
background-position: center bottom;
color: #000000;
}
Well, 90 minutes later and I am not even off the block. As it seems is so often the case I spent the majority of the time trying to figure out why Alpha Five (A5) behaved in an unexpected way. Sometimes it is my fault (simply newbie errors) and I learn from them. This one is beyond my understanding, however.
Following the videos precisely (and within my project, incidentally) when I create a local copy of the GrGray style many of the properties associated with it are missing from the preview. This behavior is repeated each time I attempt the copy process and it does not show correctly in IE9 or FF.
Just out of curiousity I closed the project and created a new database and repeated the process and lo and behold the properties were all there.
So...why would there be a problem creating a local copy of an existing style sheet with all its associated properties within my project? Does the fact that I created a style sheet for the page wen I initially developed it in Dreamweaver play a part in this issue?
You can see my page at www.2xcr.com, with its horribly formatted navigaton bar. I will post my CSS code below.
Thank you for your help.
CSS Code:
* { margin: 0; padding: 0; border: 0; }
#logo_bar {
float: left;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
background-color: #000000;
}
#business_bar {
height: 29px;
background-color: #000000;
}
#login_bar {
color: #FFFFFF;
float: right;
padding: 3px;
height: 15px;
background-color: #000000;
}
#nav_bar {
background-color: #000000;
height: 28px;
}
#breadcrumb_bar {
background-color: #FFCC00;
color: #000000;
clear: left;
height: 27px;
padding-top: 3px;
padding-left: 4px;
}
#slide_show {
margin-left: auto;
margin-right: auto;
clear: left;
}
#breadcrumb {
float: left;
}
#email_page {
float: right;
padding-right: 4px;
padding-top: 6px;
}
#print_page {
float: right;
padding-right: 4px;
padding-top: 5px;
}
#footer {
font-size: small;
color: #000000;
background-color: #FFCC00;
text-align: right;
padding-right: 5px;
height: 30px;
}
#quote_bar {
font-style: italic;
color: #FFFFFF;
height: 20px;
background-color: #000000;
}
#click_cris_logo {
clear: left;
}
#narrative {
font-size: medium;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#section_bottom {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#cris_logo {
float: left;
width: 92px;
}
#section_bottom #why_not_itrs_logo {
float: left;
width: 96px;
}
#why_not_itrs_text {
width: 304px;
float: right;
font-size: medium;
}
#why_cris_text {
float: left;
width: 308px;
font-size: medium;
}
#footnotes {
width: 800px;
margin-right: auto;
margin-left: auto;
font-size: x-small;
clear: left;
}
body {
font-family: 'Didact Gothic', sans-serif;
font-size : medium;
background-repeat: repeat-x;
background-image: url(/Images/page_bg.jpg);
background-attachment: scroll;
background-position: center bottom;
color: #000000;
}
Comment