# Web design layout issue



## Neighbor (Sep 18, 2008)

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 (May 6, 2006)

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


----------



## namenotfound (Apr 30, 2005)

Also looks the same to me (same as in pictures attached above). Using Firefox 3.0.1 on Linux


----------



## sleepingbeauty (Sep 20, 2008)

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 (Sep 18, 2008)

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 (May 6, 2006)

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:


```
#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 (Sep 18, 2008)

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 (May 6, 2006)

Could you upload the updated stylesheet so I can see how it's behaving now?

Peace...


----------



## namenotfound (Apr 30, 2005)

Look at the "submit" button in this screen shot


----------



## tomdkat (May 6, 2006)

namenotfound said:


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


----------



## namenotfound (Apr 30, 2005)

tomdkat said:


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


ff 3.0.3


----------



## Neighbor (Sep 18, 2008)

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;
}


----------



## tomdkat (May 6, 2006)

namenotfound said:


> ff 3.0.3


Strange. This is what I get usnig Firefox 3.0.3 on Windows XP. What resolution are you running at and what size is your browser window? Is it maximized or windowed? If windowed, is the window narrow?

Peace...


----------



## namenotfound (Apr 30, 2005)

1280x800 - browser is maximized.


----------



## tomdkat (May 6, 2006)

namenotfound said:


> 1280x800 - browser is maximized.


Strange. Must be a Linux specific issue. I'm running at 1680x1050 on Windows XP and Firefox looks like my screenshot regardless of the window size.

Peace...


----------



## tomdkat (May 6, 2006)

Neighbor said:


> 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


Can you post a screenshot of what you're seeing with the CSS change I suggested?

Peace...


----------

