emily01 Posted April 13, 2011 Report Share Posted April 13, 2011 Hi all, I'm hoping someone could help me out with this problem as I've created quite a headache trying to figure this out. Here it is: I'd like to know if someone could tell me why my navbar alignment continues to show up differently on different monitors and/or browsers. I use different monitors to work. On my laptop screen which is a about a 12" and i use another widescreen monitor which is about 1080px. The laptop shows alignment is ok. when I go to the widerscreen monitor, nav alignment is off. How can i fix so that it shows up the same no matter which monitor? I've done 100% on both background and nav alignment. Please help. Below is the format; *|* { margin:0pt; padding:0pt; } body { background: url(oldpaperrev.jpg); background-color:#9E5F27; font-family:georgia,serif; font-weight: bold; font-size:18px; color:#000000; margin:0; padding:0; width: 80%; } p { line-height:1.5; padding-bottom:12px; } ul { list-style-type:none; margin:0; padding:0; } h1 { font-size:20px; font-weight:bold; color:#000000; line-height:1.5; } h2 { font-size:14px; font-weight:bold; color:#000000; line-height:1.5; } #wrapper { width:960px; margin:0pt auto; } #sitename { height:55px; width:960px; font-size:30px; color:#gggggg; font-weight:normal; padding-top:32px; text-align:right; font-style:italic; } #content-wrapper { float:center; width:960px; } #header-image { } #image { width:952px; height:221px; align: center; } #contents-body { float:left; width:960px; padding:0 20px 10px 15px; color:#000000; } #navigation { float:left; width:300px; margin-bottom:9px; font-size:12px; color:#000000; position: absolute; top:250px; left:400px; height: 100%; width: 100%; } #navigation-links ul { margin:8px; padding:; display: inline; height: 100%; width: 100%; } #navigation-links li { font-size:13px; list-style-type:none; padding:5px 5px 8px 5px; display: inline; } #active { color:#636563; } #navigation-links a:link { display:inline; color:#000; font-weight: bold; font-size: 16px; text-decoration:none; } #navigation-links a:hover { color:#EAB988; text-decoration:none; } #navigation-links a:visited { color:#EAB988; text-decoration:none; } #active a:link { color:#EAB988; text-decoration:none; } #active a:hover { color:#EAB988; text-decoration:none; } #active a:visited { color:#EAB988; text-decoration:none; } a:link, a:hover, a:visited { color:#EAB988; font-weight:normal; text-decoration:none; } #contents { float:left; width:704px; padding:20px 0 0 20px; } #footer { float:left; background-color:#9E5F27; width:960px; height:39px; margin-bottom:30px; } #footer-contents { float:left; color:#7F3D17; font-family:palatino,"times new roman",serif; padding:12px 10px 0 12px; } input { background-color:#fff; border:1px solid #999; font-size:12px; } textarea { background-color:#fff; border:1px solid #999; font-size:12px; } Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 13, 2011 Report Share Posted April 13, 2011 I'm not necessarily noticing any issues with the code at first glance. Do you have a link to the site? Quote Link to comment Share on other sites More sharing options...
newseed Posted April 13, 2011 Report Share Posted April 13, 2011 I'm seeing that you are using positioning to place your menu which could be the problem because (assuming) the container div does not have position: relative; to keep the nav div position within it. Also noticed float: center; .... no such animal. Quote Link to comment Share on other sites More sharing options...
emily01 Posted April 14, 2011 Author Report Share Posted April 14, 2011 I'm seeing that you are using positioning to place your menu which could be the problem because (assuming) the container div does not have position: relative; to keep the nav div position within it. Also noticed float: center; .... no such animal. Thanks, of course! You're right about the div. Ah yes, the float center should have been removed. lol. Thanks much. Quote Link to comment Share on other sites More sharing options...
emily01 Posted April 16, 2011 Author Report Share Posted April 16, 2011 Hi there, Ok so tried it and it did not work, and now the body alignment is acting screwy showing to the right when it is positioned to the left. Any other ideas? Quote Link to comment Share on other sites More sharing options...
emily01 Posted April 16, 2011 Author Report Share Posted April 16, 2011 ps I should also mentioned when I cleared the navposition, the menu disappeared. Quote Link to comment Share on other sites More sharing options...
Andrea Posted April 17, 2011 Report Share Posted April 17, 2011 It would really be helpful to see the entire thing. Can you give us a link? Also, I've never seen this before *|* { margin:0pt; padding:0pt; } It's not your issue, but what's this: *|* ? And, in your #navigation is floated AND absolute. Not totally sure, but I don't think you can have both. And lastly - when something is zero, there's not unit of measure required. Quote Link to comment Share on other sites More sharing options...
grabenair Posted April 17, 2011 Report Share Posted April 17, 2011 I am not sure what you are trying to do without a link but here is some code I use for links and adapt for use in different sites. #main_nav { height: 50px; width: 960px; clear: both; border-top: thin solid #000; background-color: #F5F5F5; } #main_nav ul { list-style: none; margin-top: 0px; padding-top: 0px; float: left; text-align: center; } #main_nav li { float: left; margin-top: 10px; padding-left: 5px; text-transform: capitalize; margin-left: 33px; } #main_nav ul li a { text-decoration: none; font-size: 1em; font-family: Verdana, Geneva, sans-serif; text-transform: capitalize; color: #FFF; display:block; margin-right:0.5em; background: url(../imgs/blue_nav_bkgd.jpg) no-repeat; width: 123px; padding-top: 0.2em; padding-bottom: 0.2em; line-height: 1.2em; font-weight: bold; } #main_nav ul li a:hover { color: #CCC; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.