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=homea href=/cssindex.lassoHome/a/li
li class=servicesa href=/public/
services.lassoServices/a/li
li class=portfolioa href=/public/
portfolio.lassoPortfolio/a/li
li class=abouta href=/public/about.lassoAbout
Us/a/li
li class=contacta href=/public/
contact.lassoContact Us/a/li
li class=clienta href=/client/login.lassoClient
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: #00;
text-align: justify;
vertical-align: baseline;
line-height: 16pt;
white-space: normal;
padding: 0 35px 0 35px;
}
#header {
background-color: white;
border-bottom: #33;
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: #33;
border-left: #33;
border-bottom: #33;
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: #99;
color: #FF;
margin: 2px 2px 0 2px;
border: 1px solid #00;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #FF;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
ul#tabnav a:hover {
background-color: #CC;
color: #FF;
}
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: #00;
background-color: #FF;
}
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: #00;
background-color: #FF;
}
/* 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/
