Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font-size:80%;
font-family:Georgia, Verdana, Arial;
line-height: 1.2em;
}
#wrapper {
position: relative;
background-image:url(colorsb.jpg);
background-repeat: repeat;
}
#colorbar {
background-color: #878941;
width: 100%;
height: 100px;
margin: 0;
padding:0;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #fff;
}
#colorbar h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #c3c18d;
}
#col1 {
float:left;
width:40%;
}
#col2 {
float:left;
width:56%;
background-color: #e9b97f;
margin-top: -80px;
}
#content {
margin:12px 24px 0 24px;
}
#logo {
float: left;
margin: 24px 0 0 24px;
padding: 0;
}
#orange {
float: right;
width: 130px;
background-color: #d98927;
margin: 0;
padding: 0;
}
#notext {
float: right;
width: 130px;
margin: 0;
padding: 0;
}
#orange img {
padding: 0 0 10px 10px;
}
#footer {
background: #898741;
clear:both;
text-align:right;
margin-top: -40px;
padding: 0 0 30px 0;
}
#topnav {
background: #898741;
font-size:0.8em;
text-align:left;
padding-top: 14px;
margin: 0;
}
#topnav ul {
text-align:left;
margin:0;
padding:10px;
}
#topnav ul li {
list-style-type:none;
display:inline;
}
#topnav ul li a {
color:#fff;
padding:3px 10px 3px 10px;
text-decoration:none;
text-transform:uppercase;
letter-spacing: .1em;
}
#topnav ul li a.this {
color:#000;
padding:3px 10px 3px 10px;
}
#topnav ul li a:hover {
padding:3px 10px 3px 10px;
text-decoration:none;
}
#content p {
color:#333;
}
h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin-bottom: 0;
line-height: 1.2em;
}
#orange a:hover {
text-decoration: none;
border-bottom: none;
}
.italicgreen {
font-style: italic;
color: #333300;
}
a:link {
text-decoration: none;
color: #333300;
}
a:visited {
color: #333300;
text-decoration: none;
}
a:hover {
border-bottom: 1px dotted #fff;
font-weight: bold;
text-decoration: none;
color: #fff;
}
.sidenav {
background-color: #676900;
font-size:0.8em;
text-align:left;
margin-left: 40%;
padding-top: 10px;
clear: both;
width: 56%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #fff;
}
.sidenav ul {
text-align:left;
margin:0;
padding:10px;
}
.sidenav ul li {
list-style-type:none;
display:inline;
}
.sidenav ul li a {
color:#fff;
padding:3px 10px;
text-decoration:none;
text-transform:uppercase;
}
.sidenav ul li a.this {
color:#000;
padding:3px 10px;
}
.sidenav ul li a:hover {
padding:3px 10px;
text-decoration:none;
}
-->
</style>
</head>
<body>
<div id="wrapper"><!-- keep layout tidy -->
<div id="topnav">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="colorbar">
</div>
<div id="col1">
<!-- to the left -->
<div id="logo"><a href="#"><img src="it.gif" width="121" height="77" border="0" /></a>
</div><!-- logo -->
<div id="orange"> <img src="shot.jpg" width="110" height="148" /><br />
</div><!-- orange -->
</div><!-- col1 -->
<div id="col2">
<div id="content">
<p>content</p><br />
</div><!-- content -->
</div><!-- col2 -->
<div id="footer">
<div class="sidenav"> <ul><li>secondary link 1</li> <li>secondary 2</li><li>secondary link 3</li></ul></div>
<p> </p>
<p> </p>
</div><!-- footer -->
</div><!-- wrapper -->
</body>
</html>
It looks fine in ie mac (I know that's wrong, but was trying to hurry and now look where I am). What it does:
--the navigation is on top, and the green is directly beneath, so nav looks like is part of background.
--the sidenav div (on the bottom) butts directly against the bottom of the orangish col2 box with a white line separating.
Mac ff: looks good except there is a gap of 12px or so between nav and green color, where background image is showing through.
pc ie: my client tells me the sidenav bottom box overlaps the text on col2, and occasionally the background image disappears.
and also, apparently, sometimes creates an awful gap, according to the post?
I realize I'm doing something really wrong here, but can't see where. Thank you so much for your help and guidance!
It looks like you have your sidenav within your footer div. Is that right? Do you want your navigation at the foot of your page?
Another thing would be to try and code it so it looks correct in Firefox first. Then use Safari as your secondary browser and IE5Mac as your last resort.
When you get it right in Firefox it will be 99% right in Safari and 60% right in IE5Mac.
Then you use your workarounds for IE5Mac and WinIE (if you need them.)
there really is a lot of code there to debug..
I've got it looking nothing like you describe in either FF or IE PC :o
but some quick points..
>>12px gap in FF:
My guess would be that something you've removed has a default margin any <ul>'s <hx> <p> <form> elements, and that one (or more) of these margins is collapsing through the top of a div creating a gap.. one way to do a quick (temporary) check for this is to put:
* {border: 1px solid #000;}
at the very end of your existing styles
Note: it will cause a lot of other things to go weird but does it remove that gap between the top two divs?
Aside:
colorbar's code color is slightly different that the other greens is it a typo?
background-color: #898741; (you have colorbar as 878941)
Tip: try to recolor all the divs differently so you can describe in colors where things should be, it's easier especially if you're carrying on 3-way confabs ;)
Suzy
OKAY, I think I got it. I hadn't noticed that the sidenav div didn't have a top margin of 40px to bring it back down to the right area (the footer is -40px to bring the color under the content area).
Then, I changed the colorbar h1 to margin:0, padding:0 and in ff the gap is gone!
Thanks for your help, trying to explain it to someone else forced me to see what I had been missing.
