pixel width

[nortski]

Hi everyone,

This is my first post. I would like to ask if there is a difference in the pixel width between 4:3 monitors and widescreen monitors?

My reason for asking is that I am having a display issue with my menu bars. I am using CSS to swap the background images on my menu links. I have spent hours getting the positioning and padding widths to display correctly on various browsers and finally managed to achieve this. However; to my horror, I viewed the webpage on my mom's computer which has a widescreen monitor and there are gaps between my menu items!

The webpage can be viewed here http://www.hitchedflix.co.uk/rentapa...y_escorts.html Please excuse the subject matter, a gig is a gig!

	<div id="navbarAbout">
		<div id="logo">
		<h1><a href="http://www.eliteescorting.co.uk">Elite Escorting</a></h1>
		</div>
		<div id="divider"><img src="images/divider24h.gif" alt="" /></div>
		<div id="logo2"><h2>1987Jason</h2></div>
		<div id="button1about"><a href="about_escort_manchester.html">about me</a></div>
		<div id="button2about"><a href="pictures_gay_escort_manchester.html">gallery</a></div>
		<div id="button3about"><a href="manchester_escort_rates.html">rates</a></div>
		<div id="button4about"><a href="#">blog</a></div>
		<div id="button5about"><a href="contact_gay_escort_manchester.html">contact me</a></div>
	</div>

#button1about {
	margin: 0;
	position: absolute;
	top: -3px;
	left: 387px;
	width: 90px;
	height: 60px;
	z-index: 200;
	text-align: center;
}

#button1about a {
	margin: 0;
	padding-right: 19px;
	padding-left: 19px;
	padding-top: 19px;
	padding-bottom: 30px;
	line-height: 60px;
	border: none;
	font-family: "Times New Roman", Times, serif;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: normal;
	text-decoration: none;
}

#button1about a:hover {
	margin: 0;
	padding-right: 19px;
	padding-left: 19px;
	padding-top: 19px;
	padding-bottom: 13px;
	line-height: 60px;
	border: none;
	color: #ffccff;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: normal;
	text-decoration: none;
	background: url(images/nav2Over1.jpg) repeat 0px 1px;
}

The CSS is reapeated for each button.

Any pointers would be greatly appreciated!
Mark.

[chrishirst]

"Pixel size" is the PHYSICAL size of each element. EVERY monitor make is going to be different.

[nortski]

Hi chrishirst

Call me naive but I though 1 pixel was 1 pixel? When styling my page I'm using absolute positioning so the size of my elements and the positioning of them them would just be relative to each screen size wouldn't they?

I don't understand why gaps would start appearing between elements. BTW this only happens on my menus, must be something to do with the padding settings.

My padding settings are in pixels, what if I changed them to % instead?

Thx,
nortski.

[chrishirst]

correct 1 pixel is 1 pixel

HOWEVER the PHYSICAL size and layout of the screen elements determine how big a pixel actually is.

AND is the monitor is not running at it's maximum resolution, not all pixel elements may be used AND the hardware may be "clustering" a group of pixel elements together to act as a single element.

16:9 (widescreen) monitors have a different PHYSICAL arrangement of pixel elements to what a 4:3 monitor has.

LCD monitors have different physical pixel sizes to TFT monitors.
TFT monitors have different physical pixel sizes to Plasma monitors

Trying (or hoping) to get everything to be identical over ALL resolutions, browsers and hardware is a mugs game. It simply is NOT going to happen.

Use ems or percentages for sizing and let the hardware dirivers calculate what configuration of pixel elements need to be used.

Unless of course you know beforehand the EXACT configuration of hardware and software that will be in use THEN you can be pixel perfect.

[nortski]

hmmm might be changing the menu to roll over images, really didnt want to do this for SEO reasons

oh well, thx for the info

[chrishirst]

what have rollover images got to do with SEO?

[nortski]

the links themselves are keywords, images are not.

[chrishirst]

So you haven't heard about the alt attribute then and the fact that it is used as the anchor text for linked images?

[nortski]

Yep, nowhere near as powerful as hypertext though.

[rkrause]

Not completely true. Use both. Depending on the specificity of the link being placed you may not get as much play on the hyper-linked text as you think.

Ryan.