Paul
Have a look a this article and the follow on:
http://www.alistapart.com/articles/slidingdoors/
HTH
Paul Melia wrote:
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/
--
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers
emotionalize.conceptualize.visualize.realize
Landlines
Tel: +27125468436
Fax: +27125468436
Web
email:[EMAIL PROTECTED]
Global: www.volume4.com
Messenger
Yahoo!: v_olume4
AOL: v0lume4
MSN: [EMAIL PROTECTED]
We support OpenSource
Get Firefox!- The browser reloaded - http://www.mozilla.org/products/firefox/
This message contains information that is considered to be sensitive or
confidential and may not be forwarded or disclosed to any other party without
the permission of the sender. If you received this message in error, please
notify me immediately so that I can correct and delete the original email.
Thank you.
______________________________________________________________________
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/
