6 replies [Last post]
TravelTech
TravelTech's picture
Offline
newbie
Michigan
Last seen: 12 years 21 weeks ago
Michigan
Joined: 2008-05-31
Posts: 8
Points: 0

I'd appreciate it if someone could enlighten me about why this navbar is about 10px off in IE 7 and Safari 3.1.1. It aligns correctly in FF 2.0.0.14 and Opera 9.27. I'm new to css and have researched inheritance issues and possible browser bugs and can't find anything about this issue. I've tried absolute positioning too. I'm working on this locally so I've removed the images from the code and left the shell. I'd appreciate any help. The name of the element is #navbar1 Thanks in advance.





XHTML Template

#home {
background:#fff url();
background-attachment:fixed;
font-family:"courier new", georgia, serif;
font-size:1em;
margin:0;
padding:0;
border:0;
color:#022c21;
}
h1 {
font-size:1.5em;
font-weight:bold
}
a {
color:#043059;
}
a:visited, a:hover {
color:#043059;
}
#container {
position:relative;
width:750px;
padding-top:250px;
margin-left:auto;
margin-right:auto;
}
#pageheader {
position:relative;
background:transparent url() no-repeat;
height:202px;
margin-left:-25px;
width:800px;
border:1px solid red;
}
#pageheader h1 {
visibility:hidden;
}
#intro h2 {
display:none;
}
/******Notes to self**positioning here is important given that it is a container for about and services*/
/* absolute positioning works with both IE and Firefox test more******/
/*also notice the background of the services div has two different shades. This is an issue with the background img*/
#intro {
position:relative;
background:transparent url() no-repeat;
margin:0 0 0 65px;
width:450px;
border:5px groove #41646c;
}
#about {
width:440px;
border:5px groove #41646c;
}
#about h1 {
margin:15px 0 10px 25px;
width:300px;
font-size:1.0em;
font-weight:bold;
text-align:left;
color:#000;
border-bottom:1px dotted #000094;
}
/*this styles the about paragraph on the home page*/
#about .cssabout {
width:350px;
padding:0 25px 15px 25px;
font-size:0.8em;
text-align:left;
color:#000;
}
/*this styles the about paragraph on the about page*/
#about .idabout {
margin:110px 0 5px 0;
width:440px;
padding:5px 25px 5px 25px;
font-size:0.75em;
text-align:left;
color:#000;
}
#about ul {
margin:10px 0 10px 35px;
padding:0;
}
#about li {
width:300px;
line-height:20px;
font-size:0.7em;
color:#000;
}
#services{
background:transparent url() no-repeat;
width:440px;
color:#000;
border:5px groove #41646c;
}
#services h1 {
width:250px;
margin-left:25px;
font-size:1.0em;
font-weight:bold;
text-align:left;
color:#000;
border-bottom:1px dotted #000094
}
#services .dservice {
padding:3px 25px 0 25px;
font-size:0.75em;
text-align:left;
color:#000;
}
#services ul {
margin:5px 0 0 35px;
padding:0;
}
#services li {
line-height:20px;
width:225px;
font-weight:bold;
font-size:0.7em;
color:#000;
}
/*************************************** Here is where the problem is on the page **********************************************************/
/*********************** this navbar should be touching the bottom border of the pageheader img. ****/

#navbar1 {
position:relative;
margin-top:-590px;
margin-left:525px;
padding:0;
background:transparent url() no-repeat;
width:150px;
border:5px groove #41646c;
}
#navbar1 ul {
margin:0;
padding:0;
}
#navbar1 li {
margin:15px;
height:15px;
padding:8px 10px 3px 5px;
background:transparent url() no-repeat;
list-style-type:none;
font-size:0.6em;
text-align:center;
color:#000;
}
#navbar1 a {
color:#000;
}
#navbar1 a:visited {
color:#a99806;
}
#navbar1 li:hover {
background:transparent url() no-repeat;
color:#123725;
}
#home .nav_home,
#aboutus .nav_about li,
#web .nav_web_services li,
#other .nav_other_services li,
#contact .nav_contact li {
background:transparent url() no-repeat;
}

#footer {
position:relative;
margin-top:400px;
background-color:#fff;
margin-left:65px;
width:609px;
border:5px double #fff;
}
#footer p {
text-align:center;
font-size:0.7em;
color:#000;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ligula. Vivamus ut quam. Quisque rutrum, nisl vitae cursus mollis, ligula risus cursus massa, vel vestibulum lacus tellus ut nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean mauris. Sed scelerisque, nibh ut tempor tincidunt, arcu purus iaculis est, ut vulputate risus nulla eu sem. Fusce dapibus ante non nibh tincidunt accumsan. Aliquam erat volutpat. Mauris non ligula sit amet nisi tempus gravida. Sed leo. Integer luctus bibendum erat. w3.org.

Aliquam erat volutpat.


  • Aliquam erat volutpat.

  • Aliquam erat volutpat.

  • Aliquam erat volutpat.

  • Aliquam erat volutpat.



Aliquam erat volutpat.

  • Aliquam erat volutpat

  • Aliquam erat volutpat

  • Aliquam erat volutpat

  • Aliquam erat volutpat

  • Aliquam erat volutpat












Copyright © 2008 Phillip Ballew Sr. All rights reserved.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You'll never be able to

You'll never be able to position the nav with negative margins and static positioning. It's final position is too dependent on the size of the content proceeding it. If you increase/decrease the text size you'll see the nav move accordingly. Probably the simplest solution here is to float the #intro and nav left and remove the margins from nav.

TravelTech
TravelTech's picture
Offline
newbie
Michigan
Last seen: 12 years 21 weeks ago
Michigan
Joined: 2008-05-31
Posts: 8
Points: 0

Worked Like a charm

Man that worked great! I guess I've stayed away from floats for too long. I really appreciate your suggestion. I actually floated all the main elements and removed the margins from the nav as suggested. Now I can try to find an article I read about how to make independent elements stretch as the content in other elements change.

Thanks again wolfcry911

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

if you mean making he nav as

if you mean making the nav as long as the main content, then have a read of this:

http://www.alistapart.com/articles/fauxcolumns/

TravelTech
TravelTech's picture
Offline
newbie
Michigan
Last seen: 12 years 21 weeks ago
Michigan
Joined: 2008-05-31
Posts: 8
Points: 0

Great Resource

That is exactly what I meant! A list apart is a great resource. Thank you. I had a couple articles in mind and this was one of them. Thanks again wolfcry911. By-the-way. How do you mark a post as closed so others aren't bothered with checking in only to find the issue has been resolved?

Triumph (not verified)
Anonymous's picture
Guru

TravelTech wrote:...

TravelTech wrote:
... By-the-way. How do you mark a post as closed so others aren't bothered with checking in only to find the issue has been resolved?

You could edit the original post and add [SOLVED] to the title.

TravelTech
TravelTech's picture
Offline
newbie
Michigan
Last seen: 12 years 21 weeks ago
Michigan
Joined: 2008-05-31
Posts: 8
Points: 0

Thank You

I really appreciate it. Looks like someone has taken care if it already.