Jump to content
Stef's Coding Community
Sign in to follow this  
emily01

CSS...browser headache?

Recommended Posts

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;

}

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;

}

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...