What is the site URL?
Richard Baldwin wrote:
Hi all,
This is my first attempt at web design and I am having some trouble
with differences between IE 6 and FireFox. There seems to be a large
gap between the header div and the contentwrap div in FireFox and a
smaller one in IE 6. I don't want any gap at all, you will see there
is a one pixel white border which was supposed to simulate a gap. I'm
not sure why there is a space between the two divs. In FireFox the
content div seems to be a few pixels shorter in width than the header
and footer divs as well.
Styles
----------
/* Main Style Sheet */
* {
margin: 0;
padding: 0;
}
body {
background-image: url(images/dith_bg.jpg);
}
h2 {
background-color: #5C78A8;
height: 23px;
padding: 3px;
color: white;
font-size: 12pt;
font-weight: bold;
font-family: Times;
text-align: center;
}
#container {
/* fix width and center */
width: 769px;
margin: 0 auto;
}
/* Rollover states for the navbar */
a img {
height: 30px;
width: 118px;
border-width: 0;
}
a#home img {
background: url(images/home_up.gif) top left no-repeat;
}
a#account img {
background: url(images/account_up.gif) top left no-repeat;
}
a#services img {
background: url(images/services_up.gif) top left no-repeat;
}
a#company img {
background: url(images/company_up.gif) top left no-repeat;
}
a#contact img {
background: url(images/contact_up.gif) top left no-repeat;
}
a#support img {
background: url(images/support_up.gif) top left no-repeat;
}
a#home:hover img {
background: url(images/home_over.gif) top left no-repeat;
}
a#account:hover img {
background: url(images/account_over.gif) top left no-repeat;
}
a#services:hover img {
background: url(images/services_over.gif) top left no-repeat;
}
a#company:hover img {
background: url(images/company_over.gif) top left no-repeat;
}
a#contact:hover img {
background: url(images/contact_over.gif) top left no-repeat;
}
a#support:hover img {
background: url(images/support_over.gif) top left no-repeat;
}
a#home:active img {
background: url(images/home_down.gif) top left no-repeat;
}
a#account:active img {
background: url(images/account_down.gif) top left no-repeat;
}
a#services:active img {
background: url(images/services_down.gif) top left no-repeat;
}
a#company:active img {
background: url(images/company_down.gif) top left no-repeat;
}
a#contact:active img {
background: url(images/contact_down.gif) top left no-repeat;
}
a#support:active img {
background: url(images/support_down.gif) top left no-repeat;
}
/* End rollover states for the navbar */
a.footnav {
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
#header {
height: 68px;
background-image: url(images/top_bg.gif);
background-repeat: repeat-x;
clear: both;
}
#title {
float: left;
}
#logimage {
float: right;
clear: right;
position: relative;
top: 1px;
}
#userinfo {
width: 180px;
padding: 3px;
font-size: 0.8em;
font-weight: bold;
color: yellow;
float: right;
clear: right;
}
#headnav {
height: 32px;
width: 100%;
background-image: url(images/nav_bg.gif);
background-repeat: repeat-x;
border-top: 1px white solid;
/*border-bottom: 1px white solid;*/
text-align: center;
}
#navwrap {
width: 757px;
text-align: center;
float: left;
}
#contentwrap {
text-align: left;
background-color: #A9D8DE;
float: left;
}
#contentwrap a {
color: #398E64;
}
#content {
background-color: #E6EFF4;
margin-left: 150px;
padding: 10px;
}
#accountnav {
height: 100%;
background-color: #A9D8DE;
float: left;
}
/* Rollover states for account navbar */
#accountbutton a {
color: #000000;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration: none;
border:4px outset #A9D8DE;
background-color: #A9D8DE;
display: block;
width: 130px;
padding: 3px 5px;
margin: 1px;
}
#accountbutton a:hover {
background-color: #FFCB5E;
color:#000000;
padding-left:4px;
border:4px inset #FFCB5E;
}
/* End account rollover states */
#footer {
height: 19px;
padding: 15px;
border-top: 1px white solid;
background-color: #5C78A8;
color: #FFFFFF;
font-weight: bold;
text-align: center;
clear: both;
}
#copyright {
height: 21px;
padding: 10px;
background-color: #FFFFFF;
color: #333399;
font-weight: bold;
text-align: right;
clear: both;
}
#right_end {
float: right;
}
#left_end {
float: left;
}
HTML
---------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html>
<head>
<title>SMS South Africa</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"><img id="title" src="images/top_head.gif" alt="SMS
South Africa" /><img id="logimage" src="images/top_bar_login.gif"
alt="Login/Logout Help Sitemap" /><div
id="userinfo">User:<br>Credit:</div></div>
<div id="headnav"><img id="left_end" src="images/left_end.gif" /><div
id="navwrap"><img src="images/right_end.gif" /><a id="home"
href="index.php"><img src="images/blank.gif" alt="Home Page"></a><a
id="account" href="account.php"><img src="images/blank.gif"
alt="Account"></a><a id="services" href="services.php"><img
src="images/blank.gif" alt="Services"></a><a id="company"
href="company.php"><img src="images/blank.gif" alt="Company"></a><a
id="contact" href="contact.php"><img src="images/blank.gif"
alt="Contact"></a><a id="support" href="support.php"><img
src="images/blank.gif" alt="Support"></a><img
src="images/left_end.gif" /></div><img id="right_end"
src="images/right_end.gif" /></div>
<div id="contentwrap">
<h2>Account</h2>
<div id="accountnav">
<div id="accountbutton">
<div>
<a href="./account.php">Compose Message</a>
</div>
<div>
<a href="./contacts.php">Manage Contacts</a>
</div>
<div>
<a href="./groups.php">Manage Groups</a>
</div>
<div>
<a href="#">Message Reports</a>
</div>
<div>
<a href="#">Account Summary</a>
</div>
</div>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div id="footer">
<a class="footnav" href="home.php" accesskey="h">Home Page</a> |
<a class="footnav" href="account.php" accesskey="a">Account</a>
|
<a class="footnav" href="services.php"
accesskey="s">Services</a> |
<a class="footnav" href="company.php" accesskey="c">Company</a>
|
<a class="footnav" href="contact.php" accesskey="t">Contact</a>
|
<a class="footnav" href="support.php" accesskey="p">Support</a>
</div>
<div id="copyright">
Copyright (c) 2004 SMS. All Rights Reserved.
</div>
</div>
</body>
</html>
If anyone can spot errors which will break the site in other browsers
plz let me know, I only have IE and FireFox in which to test it at the
moment.
Thanx in advance,
Rich
______________________________________________________________________
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/
