[SOLVED] Resolution problem (positioning)

[Andy17]

Hey guys,

 

 

I am making this website and I made it in a high resolution, so when I went back to 1024x768 to test it, there were a few things wrong. Please take a look at the following website in 1024x768 and you will see that my menu is misplaced:

 

http://test.jokeheaven.eu

 

 

The menu image: http://test.jokeheaven.eu/images/double.png

 

 

The menu's HTML code:

 

<ul id="menu">  
<li id="home"><a href="/" rel="nofollow"><span>Home</span></a></li>
<li id="about"><a href="about.php" rel="nofollow"><span>About</span></a></li>
<li id="portfolio"><a href="portfolio.php" rel="nofollow"><span>Portfolio</span></a></li>
<li id="prices"><a href="prices.php" rel="nofollow"><span>Prices</span></a></li>
<li id="order"><a href="order.php" rel="nofollow"><span>Order</span></a></li>
<li id="contact"><a href="contact.php" rel="nofollow"><span>Contact</span></a></li>
</ul>

 

 

The menu's CSS code:

 

/* +++++ Menu settings begin +++++ */


#menu {  
background:url("images/double.png") 0 0 no-repeat;
width:720px;
height:35px;
margin-left:20px;
margin-top:0px;
padding:0;
float:left;
}

#menu li span {
display: none;
}
   
#menu li {
float:left;
list-style:none;
position:relative;
}
  
#menu li, #menu a {  
height:34px;    /* Button height */  
display:block;  
margin:0;  
padding:0;  
}  
   
li#home {
width:95px;
}

li#about {
width:100px;
}

li#portfolio {
width:160px;
}

li#prices {
width:110px;
}

li#order {
width:110px;
}

li#contact {
width:132px;
}


/* ----- Menu settings end ----- */



/* +++++ Menu hovers begin +++++ */


#home a:hover {
background:url("images/double.png") -0px  -36px no-repeat;
}

#about a:hover {
background:url("images/double.png") -95px  -36px no-repeat;
}

#portfolio a:hover {
background:url("images/double.png") -195px  -36px no-repeat;
}

#prices a:hover {
background:url("images/double.png") -355px  -36px no-repeat;
}

#order a:hover {
background:url("images/double.png") -465px -36px no-repeat;
}

#contact a:hover {
background:url("images/double.png") -575px -35px no-repeat;
}


/* ----- Menu hovers end ----- */

 

The thing is that I want it to stay at the top, to the right of the logo. It does just that in 1280x1024, but I need it to stay there for 1024x768. I tried just making the menu image smaller, but for some reason it didn't seem to help. If you have any ideas, please let me know.

 

Thank you in advance!

[Andy17]

For those who don't want to change resolution (probably all of you), here are two screenshots:

1280x1024

1024x768

 

Notice the positioning of the menu.

[haku]

Give 'menucarrier' a min-width. 1010px worked for me:

 

#menucarrier
{
  min-width: 1010px;
}

[Andy17]

Thank you for your reply. While testing the website on my laptop (widescreen), I noticed an error; it appears that the menu does the exact same thing as explained in 1280x800, but only in Internet Explorer ( - it works perfectly in Firefox (2).

 

Any ideas?

[haku]

I'm guessing IE6? It doesn't recognize min-width. But if you google around, you can find hacks that fake the same functionality in IE6.

[Andy17]

I'm guessing IE6? It doesn't recognize min-width. But if you google around, you can find hacks that fake the same functionality in IE6.

 

Sorry, I didn't realize that the forum automatically made 8+) a smiley. It was meant to say Internet Explorer 8.

[Andy17]

Actually it was IE7 (I assume the problem is the same in IE6 too). I was/am very tired so I forgot which version I tested with. I apologize.

 

Thanks a lot in advance!

[haku]

IE7 does recognize min-width, so there must be another problem. Do you have a link to the page?

[Andy17]

It happened on http://test.jokeheaven.eu and any sub pages. The CSS is located at http://test.jokeheaven.eu/style.css (messy, I know, but I am still fairly new to CSS).

 

Here is the image used for the menu: http://test.jokeheaven.eu/images/double.png

 

Hope that helps.

[Andy17]

Bump. Really can't figure this one out and desperately need help!