Hello,
I am attempting to make my first CSS website.
I have created a very simple page. It renders properly in Safari,
Netscape and Firefox.
Using the Web Developer extension in Firefox, I have confirmed that
the page is valid HTML and has valid CSS.
As I am a complete newbie to CSS layout, I truly appreciate any
guidance.
Thank you,
Paul Melia
The Issues:
#1) I have an unordered list that I am styling into a tab navigation.
In Firefox, Netscape and Safari, the nav positions properly but in IE
6 it lands below where it should reside.
#2) My design is a one-column centered layout. The column's width is
set to 600 pixels. Within the column, I have an image which is 701
pixels wide and is set to float so that part of the image can appear
outside of the column. This works fine in the three previously
mentioned browsers but causes IE 6 to expand the column to match the
width of the image.
The web page:
http://www.propagatedesign.com/cssindex.lasso
HTML:
<body id="home">
<div id="header">
</div>
<div id="frame">
<ul id="tabnav">
<li class="home"><a href="/cssindex.lasso">Home</a></li>
<li class="services"><a href="/public/
services.lasso">Services</a></li>
<li class="portfolio"><a href="/public/
portfolio.lasso">Portfolio</a></li>
<li class="about"><a href="/public/about.lasso">About
Us</a></li>
<li class="contact"><a href="/public/
contact.lasso">Contact Us</a></li>
<li class="client"><a href="/client/login.lasso">Client
Area</a></li>
</ul>
<br>
<br>
<div id="splashimage">
<img src="/images/prop_butterflies.png" alt="Conceptual
image of man with ideas" width="701" height="337">
</div>
<div id="serviceline">
text
</div>
<p>
text
</p>
</div>
</body>
CSS:
/* Propgate Design LLC CSS Style Sheet V1.0 */
/* July 18, 2005 */
/* General Styles */
html, body {
margin: 0;
padding: 0;
background-color: #933;
text-align: center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;
vertical-align: baseline;
line-height: 16pt;
white-space: normal;
padding: 0 35px 0 35px;
}
#header {
background-color: white;
border-bottom: #330000;
width: 100%;
height: 30px;
display: block;
border-width: 0 0 1px 0;
border-style: none none solid none;
}
#frame
{
/* set thw width of the column */
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-right: #330000;
border-left: #330000;
border-bottom: #330000;
border-width: 0 1px 1px 1px;
border-style: none solid none solid;
padding: 0 0 50px 0;
}
/* Nav Styles */
ul#tabnav
{
list-style-type: none;
margin: 0;
font: bold 11px verdana, arial, sans-serif;
position: relative;
top: -25px;
left: -25px;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #999999;
color: #FFFFFF;
margin: 2px 2px 0 2px;
border: 1px solid #000000;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
ul#tabnav a:hover {
background-color: #CCCCCC;
color: #FFFFFF;
}
body#home li.home, body#contact li.contact, body#about li.about,
body#portfolio li.portfolio, body#client li.client, body#services
li.services {
border-bottom: 1px solid #fff;
color: #000000;
background-color: #FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited,
body#contact li.contact a:link, body#contact li.contact a:visited,
body#about li.about a:link, body#about li.about a:visited,
body#portfolio li.portfolio a:link, body#portfolio li.portfolio
a:visited,
body#client li.client a:link, body#client li.client a:visited,
body#services li.services a:link, body#services li.services a:visited {
color: #000000;
background-color: #FFFFFF;
}
/* Specific Styles */
#serviceline
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
font-size: 11pt;
line-height: 24pt;
position: relative;
text-align: center;
text-transform: inherit;
}
#splashimage
{
width: 701px;
height: 337px;
position: relative;
top: -30px;
left: -101px;
background-color: transparent;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
