Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml 1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
width:760px;
background-image:url(images/tile_tile2.jpg);
border-right:thin solid #ccc;
}
#header {
background: #f00;
height: 95px;
position: absolute;
top: 0;
width:760px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
}
#nav_main ul li {
color:#FFFFFF;
display:inline;
list-style-type:none;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:2px;
margin:0 10px 0 0;
font-size: 10px;
font-weight: bold;
}
#nav_main ul li a:hover {
color:#9EA300;
}
#nav_main ul li a {
color:white;
text-decoration:none;
}
#nav_main {
position:absolute;
left:170px;
top:62px;
}
#main {
left: 0;
position: absolute;
right: 0;
top: 95px;
background-image:url(images/gr_white_bg.jpg);
width:760px;
}
#sidenav {
height: 100%;
float: left;
width: 135px;
}
#content {
height: 100%;
overflow: auto;
padding:0px 20px 10px 20px;
}
.body_copy {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
line-height: 20px;
letter-spacing:1px;
padding:10;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
html {
padding: 50px 0 20px;
}
#main {
bottom: auto; left: auto; right: auto; top: auto;
height: 100%;
position: static;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="nav_main">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">TESTIMONIALS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">LINKS</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="sidenav"><img src="images/sidebar_shower1.jpg" width="136" height="555" /></div>
<div id="content">
<img src="images/header_links.jpg" width="578" height="48" />
<div class="body_copy"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pretium, leo eget porttitor vehicula, dui mauris accumsan magna, sed lacinia arcu est ut turpis. Sed vestibulum diam quis nibh. Curabitur vitae sapien at mauris faucibus rhoncus. Pellentesque congue sem quis dui. Donec elit eros, </p>
</div></div>
</div>
</body>
</html>
#main {
[b]bottom: auto; left: auto; right: auto; top: auto;[/b]
height: 100%;
position: static;
}Your coding of bottom: auto; etc... What exactly are you doing with this? Is it a margin? or padding?
I haven't seen any code like this before, so if you could explain what it is that you are doing, it would be appreciated.
I can't help you with safari, however in firefox I could.
Aside from the questionable code, you can sometimes use a negative margin to accomplish things.
After looking at your html code, it appears that you might have one extra closing div. You might wish to check that out.
Just a little thing that I do, which helps tons is that when I close a div I always put a comment on which div I am closing.
</div><!--close main div-->
This helps when I am not sure if I have an extra closing div, or it also lets me know that they are all closed.
4css edit:
edit to add more information
As I was thinking about the code that you are using, I see that you are using absolute positioning.
I"m wondering if the way that you have this positioned with auto, if this could be interfering with your nav div?
I apologize for not realizing what the code was as I don't work with absolute positioning. I use a fixed width and float inside of that. :)
I hope that someone can help you solve this. I'm going to be curious to see the resolution that arrives for you.
~4css
cprescott1972
Firefox has the positioning about 4 or 5 pixels higher than in Safari.
I believe that he is looking for a resolution for trying to resolve the pixel problem in Firefox.
It turns out that the reason that the UL in the nav DIV wasn't working was because it was rendering different heights above and below the content. I believe this was fixed by making the list INLINE and it flattened the extra space out which was creating the positioning problem.
By the way, everyones' ideas were great and I have since started commenting the closed DIV tags as suggested. Very helpful indeed!
If you would like a list of books that might help you out, let me know via sticky and I can recommend a few for you.
I'm glad that you found commenting the divs helpful. I tend to also comment the opening divs as well, but most don't do that. It is just something that I got used to doing when I started learning and just kept on doing it.
Keep posting as you need help. Someone will always be here to help you out.
4~css!
