[roflberryfarms]

So im digging up an old project I had for this ebook website. But theres a problem with the CSS. The drop down menu looks fine on my laptop but its way off on my desktop. Heres what it looks like on my laptop.

Spoiler

But the whole menu shifts to the right on my desktop. Im sure you will see what I mean
http://emoneyebooks.com/
heres the CSS

html, html body{
    margin:0;
	padding:0;
    height:100%;
	background:url(images/background_02.png) fixed;

}
#Wrapper {
	height:90%;
	width:100%;
}
#Header {
	height: 0 auto;
	width: 100%;
	margin-left:22.5%;
	margin-right:22.5%;
}
#DropdownNav {
	height:auto;
	width:auto;
	margin-left:22.5%;
	margin-right:22.5%;
}
#Nav2{
	height:auto;
	width:auto;
	margin-left:22.5%;
	margin-right:22.5%;
}
#Content{
	width:500;
	height: 0 auto;
	margin-left:22.5%;
	margin-right:22.5%;
	background-color:#FFF;
}
#feat1{
}
p.description{
font-family:Arial,Helvetica,sans-serif;
}
#varolo{
float:left;
margin-right:1em;
}
#money{
float:right;
margin-left:2em;
}
#price{
color:red;
}
#rprice{
color:green;
}

Thanks in advance

[KuroTsuto]

I'm sorry, I've opened your link in Internet Explorer 8, Mozilla Firefox 4, and Google Chrome 16, and they all look pretty much identical to the picture from your laptop.

- What browser are you using on your desktop?
- Are you saying that the main navigation menu appears to be shifted to the right on your desktop?

[roflberryfarms]

KuroTsuto, on 20 January 2012 - 02:28 PM, said:

I'm sorry, I've opened your link in Internet Explorer 8, Mozilla Firefox 4, and Google Chrome 16, and they all look pretty much identical to the picture from your laptop.

- What browser are you using on your desktop?
- Are you saying that the main navigation menu appears to be shifted to the right on your desktop?

Well thats good news I suppose.
On my desktop I used Internet explorer 9 and the newest firefox. I think it may be the size of my desktop monitor. I made a crude example of what it looks like

Spoiler

sorry the picture didn't appear properly heres a link http://i.imgur.com/SgYhE.png

[Shane Hudson]

Well I have been able to replicate the problem by dragging it over to my second monitor, works fine on my laptop. It is something to do with the way you have laid out the sizes and positioning, the code is a bit messy and I have not yet been able to fix it. But it is defintely something to do with sizes or floats or perhaps the weird way you are centering with 22.5% margins?

Edit:

Right okay, I have hacked together a way. The image is your main problem, as it is small on a big width window as your content is set to margin-left and margin-right 22.5% for some reason.

Presuming you wanted this I have changed it around in Chrome Inspector so that..

#Wrapper {
   height: 90%; // Not sure why you have it, but it didn't need changing
   margin: 0 auto; // Centres it
   width: 55%; // I got rid of the 22.5% on each side, 100-(22.5*2) = 55
}

#Header {}

#Content {
   background-color: white;
}

I think that is all I changed, it might be worth practising to write neat css and html though. I have seen much worse, but when it comes to tracking down problems like this, it doesn't help!

Edit 2: You could always add a background to the #Header that matches the background in image, currently large screens see the image in the middle.

This post has been edited by Shane Hudson: 20 January 2012 - 05:45 PM

[roflberryfarms]

Ok il work on organizing my CSS, thanks a lot Shane