Web design layout issue

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Neighbor

Thread Starter
Joined
Sep 18, 2008
Messages
5
I am designing a website and have a layout issue - when my website is viewed in Safari and certain versions of Firefox, the layout is exactly as I intended (the URL is www.nwnw.org/new/Home.html).

When I view the site on a PC with Internet Explorer or the most recent version of Firefox, the top banner is slightly misaligned (just eschew to the left by about one pixel) - it appears that it would be aligned properly until the side scroller bar loads and then it becomes misaligned.

Any thoughts on how to get around this issue? I'm just using a basic CSS div tag layout - would it help to see my CSS code?

Thanks!
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
I'm not seeing the misalignment. Attached are screenshots of the home page as viewed in Firefox 3.0.1, Opera 9.52, Safari 3.0.1, and Avant (w/ an IE7 rendering engine) all on Windows XP Pro (SP2).

They all look the same to me.

Peace...
 

Attachments

Joined
Apr 30, 2005
Messages
3,012
Also looks the same to me (same as in pictures attached above). Using Firefox 3.0.1 on Linux
 
Joined
Sep 20, 2008
Messages
5
i have website and when i open it in firefox2, the layout is not correct, when i download firefox3, the page is opened correctly. try firefox3 and your site will be ok
 

Neighbor

Thread Starter
Joined
Sep 18, 2008
Messages
5
I've found that the problem is a result of the size of the browser - if it is maximized, the error occurs. If the size of the browser is large but not taking up the whole screen, it works fine.

Any suggestions? Is this a CSS layout issue?
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
Ok, I see the misbehavior now. I think it's due to the background image that you use for the shading effect. Here is a minor mod you can make to your CSS styling for the "container" DIV which seems to hide the problem a bit:

Code:
#container {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
[b][color=red]  background-color: white;[/color][/b]
}
Add the rule above. That makes the browsers behave consistently, at least.

Peace...
 

Neighbor

Thread Starter
Joined
Sep 18, 2008
Messages
5
Thanks for your reply - that definitely solves the problem on the right side. Let me know if anyone has any suggestions for solving the issue on the left.

Thanks
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
Could you upload the updated stylesheet so I can see how it's behaving now?

Peace...
 

tomdkat

Retired Trusted Advisor
Joined
May 6, 2006
Messages
7,148
Look at the "submit" button in this screen shot
Which browser (and version) did you use to view page? I used Firefox 3.0.3 and Opera 9.6b to view the page and I didn't get the behavior.

Peace...
 

Neighbor

Thread Starter
Joined
Sep 18, 2008
Messages
5
Here is my CSS code:

#container {
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: white;
}


#TextNeighborhood {
height: auto;
width: 500px;
float: right;
margin-right: 30px;
}

#Text {
height: auto;
width: 315px;
float: right;
margin-right: 25px;
}
#Banner {
height: 192px;
width: 800px;
}


#left {
width: 100px;
height: auto;
margin-top: 33px;
margin-left: 20px;
text-align: left;
}

body {
background-image: url(Background1.gif);
background-repeat: repeat-y;
background-position: center;
background-color: #cccccc;
margin-top: 0px;
}

#map {
float: right;
height: auto;
width: 200px;
margin-right: 30px;
}

#textRight {
height: auto;
width: 170px;
float: right;
margin-right: 20px;
margin-top: 2px;
}

#TextTop {
height: 50px;
width: 400px;
float: right;
}

.style23 {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}

.style2 {
color: #333333;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

#navbar {
margin: 0px;
padding: 0px;
background: url(IntroOneBoth.gif) repeat-x;
height: 0px;
list-style: none;
}

#navbar li {
float: left;
}

#navbar a {
text-decoration: none;
display: block;
}

#navbar #neighborhoods {
background-image: url(IntroOneBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 232px;
height: 71px;
}

#navbar #neighborhoods:hover {
background-position: 0 -71px;
}

#navbar #arlington {
background-image: url(IntroTwoBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 33px;
}

#navbar #arlington:hover {
background-position: 0 -33px;
}

#navbar #forestpark {
background-image: url(IntroThreeBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 15px;
}

#navbar #forestpark:hover {
background-position: 0 -15px;
}

#navbar #goosehollow {
background-image: url(IntroFourBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 16px;
}

#navbar #goosehollow:hover {
background-position: 0 -16px;
}

#navbar #hillside {
background-image: url(IntroFiveBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 16px;
}

#navbar #hillside:hover {
background-position: 0 -16px;
}

#navbar #linnton {
background-image: url(IntroSixBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 16px;
}

#navbar #linnton:hover {
background-position: 0 -16px;
}

#navbar #nina {
background-image: url(IntroSevenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 18px;
}

#navbar #nina:hover {
background-position: 0 -18px;
}

#navbar #nwda {
background-image: url(IntroEightBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 15px;
}

#navbar #nwda:hover {
background-position: 0 -15px;
}

#navbar #northwestheights {
background-image: url(IntroNineBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 16px;
}

#navbar #northwestheights:hover {
background-position: 0 -16px;
}

#navbar #oldtownchinatown {
background-image: url(IntroTenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 16px;
}

#navbar #oldtownchinatown:hover {
background-position: 0 -16px;
}

#navbar #pearldistrict {
background-image: url(IntroElevenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 16px;
}

#navbar #pearldistrict:hover {
background-position: 0 -16px;
}

#navbar #portlanddowntown {
background-image: url(IntroTwelveBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 18px;
}

#navbar #portlanddowntown:hover {
background-position: 0 -18px;
}

#navbar #sylvanhighlands {
background-image: url(IntroThirteenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 204px;
height: 30px;
}

#navbar #sylvanhighlands:hover {
background-position: 0 -30px;
}

#navbar #visit {
background-image: url(OfficeFrontBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 202px;
height: 146px;
}

#navbar #visit:hover {
background-position: 0 -146px;
}

#navbar #discussiongroup {
background-image: url(YahooTextBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 193px;
height: 32px;
}

#navbar #discussiongroup:hover {
background-position: 0 -32px;
}

#navbar #whoweare {
background-image: url(MenuHomeOneBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 31px;
}

#navbar #whoweare:hover {
background-position: 0 -31px;
}

#navbar #calendar {
background-image: url(MenuHomeTwoBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 23px;
}

#navbar #calendar:hover {
background-position: 0 -23px;
}

#navbar #donate {
background-image: url(MenuHomeThreeBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 28px;
}

#navbar #donate:hover {
background-position: 0 -28px;
}

#navbar #getinvolved {
background-image: url(MenuHomeFourBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 26px;
}

#navbar #getinvolved:hover {
background-position: 0 -26px;
}

#navbar #newsletter {
background-image: url(MenuHomeFiveBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 31px;
}

#navbar #newsletter:hover {
background-position: 0 -31px;
}

#navbar #nwnwstaff {
background-image: url(MenuContactFourBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 32px;
}

#navbar #nwnwstaff:hover {
background-position: 0 -32px;
}

#navbar #nwnwboard {
background-image: url(MenuContactSixBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 36px;
}

#navbar #nwnwboard:hover {
background-position: 0 -36px;
}

#navbar #joinnow {
background-image: url(MenuGetInvolvedFourBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 30px;
}

#navbar #joinnow:hover {
background-position: 0 -30px;
}

#navbar #volunteer {
background-image: url(MenuGetInvolvedSevenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 27px;
}

#navbar #volunteer:hover {
background-position: 0 -27px;
}

#navbar #communitypartnerships {
background-image: url(MenuGetInvolvedEightBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 39px;
}

#navbar #communitypartnerships:hover {
background-position: 0 -39px;
}

#navbar #landuse {
background-image: url(MenuResourcesFourBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 34px;
}

#navbar #landuse:hover {
background-position: 0 -34px;
}

#navbar #grantprogram {
background-image: url(MenuResourcesSixBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 40px;
}

#navbar #grantprogram:hover {
background-position: 0 -40px;
}

#navbar #communityprojects {
background-image: url(MenuResourcesEightBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 27px;
}

#navbar #communityprojects:hover {
background-position: 0 -27px;
}

#navbar #neighborhoodcleanups {
background-image: url(MenuResourcesNineBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 28px;
}

#navbar #neighborhoodcleanups:hover {
background-position: 0 -28px;
}

#navbar #neighborhoodcleanups {
background-image: url(MenuResourcesNineBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 28px;
}

#navbar #neighborhoodcleanups:hover {
background-position: 0 -28px;
}

#navbar #goodsamparking {
background-image: url(MenuResourcesSixteenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 26px;
}

#navbar #goodsamparking:hover {
background-position: 0 -26px;
}

#navbar #northwestcleansweep {
background-image: url(MenuResourcesEighteenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 26px;
}

#navbar #goodsamparking:hover {
background-position: 0 -26px;
}

#navbar #acronymdecoder {
background-image: url(MenuResourcesFourteenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 27px;
}

#navbar #acronymdecoder:hover {
background-position: 0 -27px;
}

#navbar #volunteertools {
background-image: url(MenuResourcesTwelveBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 34px;
}

#navbar #volunteertools:hover {
background-position: 0 -34px;
}

#navbar #cityofportland {
background-image: url(MenuResourcesElevenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 26px;
}

#navbar #cityofportland:hover {
background-position: 0 -26px;
}

#navbar #coalitionareamaps {
background-image: url(MenuResourcesTenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 26px;
}

#navbar #coalitionareamaps:hover {
background-position: 0 -26px;
}

#navbar #citycouncillive {
background-image: url(MenuResourcesFiveBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 27px;
}

#navbar #citycouncillive:hover {
background-position: 0 -27px;
}

#navbar #crimemapper {
background-image: url(MenuResourcesThirteenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 27px;
}

#navbar #crimemapper:hover {
background-position: 0 -27px;
}

#navbar #crimeprevention {
background-image: url(MenuResourcesSeventeenBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 26px;
}

#navbar #crimeprevention:hover {
background-position: 0 -26px;
}

#navbar #currentactivist {
background-image: url(MenuNewsletterFourBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 34px;
}

#navbar #currentactivist:hover {
background-position: 0 -34px;
}

#navbar #newsletterarchives {
background-image: url(MenuNewsletterFiveBoth.gif);
background-repeat: no-repeat;
background-position: 0 0;
width: 223px;
height: 33px;
}

#navbar #newsletterarchives:hover {
background-position: 0 -33px;
}
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top