CSS - Text Moves In Ie With Screen Resolution

This one has probably been beaten to death by now, but I can't seem to find a specific answer.

I develop on a monitor 1024x768, and use a standard font size (for general text) of 11px. When using a 800x600 resolution monitor, the text seems oversized - which is what one would expect with a px setting.

Or looking at it from the other side of the fence, if I develop on the 800x600 and get a decent text size, it looks too small on the higher resolution.

I can use 2 .css files with different font size settings and javascript to direct to the relevant css file. As far as I can tell, that is the only way I can get a 'similar' look on both screen resolutions. Is there another way where I can get away with using only 1 css file? What do others do to get around this problem?

Hi everyone,

In high resolution settings (like 1600x900) this layout looks great. But, on 1280 x 720 the layout gets all screwed up.

Can someone look at the CSS below and let me know where I'm screwing up? Thanks!

The site is romanceplaybook dot com and here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

I have a web page with three columns. The column on the right is the menu column which i want to keep in a certain position even when the user scrolls down. I know how to do this using css, but the problem is that if the resolution changes so does the position of the column.

Is there a way to fix the position only from the top of the browser window and use the center column (or container that holds the 3 columns) for the horizontal alignment?

Thanks in advance

Hi I am designing a page in which I want to include a background image that is anchored to the bottom right of the screen. I have managed to do this, the only problem I am having is that due to the image being a big one (dimensions) when the user's screen is of a lower resolution such as 800 x 600, the image takes over most of the page's background which is distracting from the main content. My idea is to have the image resize based on the user's screen resolution. Is this a feasible solution and if yes, how can it be achieved? Thanks

Hi,

I am at a loss. I have a basic css webpage at websitehosting1.com/Tutorials.html when you go to the tutorials page that I created for my friends, the footer adds white space above it when I add text to the body. I want the left nav right nav and footer to be blue, but I can't figure this out.

All help is appreciated. Thanks.

E.

I'm at a loss because I'm not very familiar with css...

this page www.centerpointpilates.com/index.html has pricing formatted by line 42 of the code at the very bottom of this post, printed out here by itself:

Code:

#main #plans {
	position: relative;
	float: right;
	width: 220px;
	background-color: transparent;
	border: 1px solid #6B9D98;
	margin: 0px 0px 10px 10px;
	left: 428px;
	top: 29px;
}

I've done something but I'm unaware of what! The text within the div using this now goes off the screen, all the way to the right! Can anyone tell me why? I'm printing the whole css sheet below, the above code is line 42. If I can't figure this out tonight I'm going to just redo the page using tables until I can find what is wrong.

Code:

body {
	background-color: #F6EEC2;
	margin: 10px;
	padding: 0px;
}
#bannerBox {
	background-color: transparent;
	background-image: url(gfx/cpp_banner2.jpg);
	background-repeat: no-repeat;
	border: none;
	padding-left: 5px;
	height: 80px;
	margin: 0px;
}
#leftNav {
	position: absolute; left: 10px; top: 100px;
	width: 130px;
	background-color: transparent;
}
#navBlock {
	position: relative; left: 7px;
	width: 110px;
	background-color: transparent;
	border: 1px solid #6B9D98;
}
#main {
	background-color: transparent;
	position: relative;
	margin-top: 5px;
	margin-left: 138px;
	margin-right: 0px;
	border-left: 1px solid #6B9D98;
	voice-family: "\"}\"";
	voice-family: inherit;
	margin-left: 137px;
	margin-right: 0px;
}
html>body #main {
	margin-left: 139px;
	margin-right: 0px;
}
#main #plans {
	position: relative;
	float: right;
	width: 220px;
	background-color: transparent;
	border: 1px solid #6B9D98;
	margin: 0px 0px 10px 10px;
	left: 428px;
	top: 29px;
}
#tagLine {
	background-color: transparent;
	border: none;
	margin: 0px;
	padding-top: 10px;
	padding-bottom: 50px;
}
IMG {
	position: relative;
	float: right;
	border: 0px;
	padding-left: 20px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
}	
P,H1,H2 {
	margin: 0px 10px 0px 10px;
}
H1 {
	font: bold 16px "arial";
	color: #6B9D98;
	letter-spacing: 0px;
	padding-left: 5px;
	padding-top: 3px;
	padding-bottom: 10px;
}
H2 {
	font: bold 14px "arial";
	color: #6B9D98;
	letter-spacing: 0px;
	padding-top: 10px;
	padding-bottom: 13px;
}
#leftNav P {
	padding-top: 6px;
	margin: 0px 10px 0px 10px;
}
#leftNav P.spacer {
	padding-bottom: 15px;
}
#navBlock P {
	font: bold 11px arial;
	color: #6B9D98;
	padding-top: 1px;
	padding-bottom: 1px;
}
#main P {
	text-align: justify;
	font: 11px arial;
	color: #6B9D98;
	line-height: 17px;
	padding-left: 10px;
	padding-bottom: 10px;
}
#main P.head {
	font: bold 12px arial;
	color: #6B9D98;
	padding-left: 10px;
	padding-bottom: 3px;
}
#plans P {
	font: 12px "arial";
	color: #6B9D98;
	padding-left: 10px;
	padding-bottom: 3px;
}
#plans P.list {
	text-align: justify;
	font: bold 10px arial;
	color: #6B9D98;
	width: 150px;
	padding-left: 15px;
	padding-bottom: 5px;
}
#plans P.list2 {
	text-align: justify;
	font: bold 10px arial;
	color: #6B9D98;
	width: 180px;
	padding-left: 15px;
	padding-bottom: 5px;
}
#plans P.price {
	font: 11px arial;
	color: #6B9D98;
	padding-left: 15px;
	padding-bottom: 1px;
}
#tagLine P {
	font: italic 11px arial;
	color: #6B9D98;
	padding-bottom: 3px;
}
#tagLine P.copy {
	font:11px "lucida console";
	color: #6B9D98;
	padding-top: 5px;
}
A.nav:link {
	text-decoration: none;
	background-color: transparent;
	color: #6B9D98;
	font: bold 11px arial;
}
A.nav:visited {
	text-decoration: none;
	background color: transparent;
	color: #6B9D98;
	font: bold 11px arial;
}
A.nav:hover {
	text-decoration: none;
	background-color: transparent;
	color: #6B9D98;
	font: bold 11px arial;
}
A.reg:link {
	text-decoration: none;
	background-color: transparent;
	color: #6B9D98;
	border-bottom: 1px solid #8DBFBA;
}
A.reg:visited {
	text-decoration: none;
	background-color: transparent;
	color: #8DBFBA;
	border-bottom: 1px solid #8DBFBA;
}
A.reg:hover {
	text-decoration: none;
	background-color: transparent;
	color: #8DBFBA;
	border-bottom: none;
}

Hi,

I am a wannabe css compiler...

Have the following problem.

wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen.

I cannot figure out how to compensate the (top/left) position to cover both type screens...

Anyone help me?

Hey, I know this is my first post here and it's code support, but this forum's been recommended to me, so here goes:

Right, so I want two little 'mini buttons' that when hovered over, they will expand. I have the concept pretty much figured out; I have a div called 'logo' that everything header-side goes in, I have a div called 'minibuttons' (outlined in blue on the screenshot), and, a div called 'login' which is outlined in green.

Screenshot:



And when minibuttons is hovered over:



But as you can see, it moves the login div too.

Appropriate CSS:

Code:

div.logo
{
	background-image: url("/images/logo.gif");
	border: solid 1px #808080;
	border-bottom: none;
	border-top: none;
	height: 85px;
	margin-left: auto;
	margin-right: auto;
	width: 775px
}

div.login
{
	border: solid 1px #00ff00;
	height: 75px;
	left: 625px;
	position: relative;
	top: -18px;
	width: 145px
}

div.minibuttons
{
	border: solid 1px #0000ff;
	left: 570px;
	position: relative;
	top: 70px;
	width: 48px
}

div.minibuttons:hover
{
	left: 570px;
	position: relative;
	top: 1px;
	width: 48px
}

Appropriate HTML:

Code:

		<div class="logo">
			<div class="minibuttons">
				<a href="http://www.conquerhosting.com"><img src="images/mini/hosting2.gif" alt="H" id="hosting2" onmouseover="over(8)" onmouseout="out(8)" /></a>
				&nbsp;<a href="http://www.conquerdesigning.com"><img src="images/mini/designing.gif" alt="D" id="designing" onmouseover="over(9)" onmouseout="out(9)" /></a>
			</div>
			<div class="login">
				<form id="login" method="post" action="http://<?=$_SERVER["HTTP_HOST"]?>:2082/login" onsubmit="disable()">
					<fieldset class="login">
				  		<input type="text" name="user" value="username" class="login" onfocus="clearbox(this)" /><br />
			  			<input type="password" name="pass" value="password" class="login" onfocus="clearbox(this)" /><br />
						<select class="service" name="service">
							<option value="2082">cPanel</option>
						</select>
			  			<input type="submit" name="login" value="Login" class="button" />
					</fieldset>
				</form>
			</div>
		</div>

Appropriate JS:

Code:

if (document.images)
{
	var flipped = new Array();
	for(i=0; i< inames.length; i++)
	{
    	flipped[i] = new Image();
		if(i <= 7)
	    flipped[i].src = "/images/roll/"+inames[i]+".gif";
		if(i > 7 && i <= 9)
	    flipped[i].src = "/images/full/"+inames[i]+".gif";
	}
}

function over(num)
{
	if(document.images)
	{
    	revert[num] = document.images[inames[num]].src;
		document.images[inames[num]].src = flipped[num].src;
	}
}
function out(num)
{
	if(document.images)
	document.images[inames[num]].src = revert[num];
}

Any ideas people?

Thanks,
Danny.

i have strange problem with IE 8 where an element is incorrectly placed when i open an Iframe, but if the iFrame is closed and reopened the element in question is correctly placed. I don' know if this is a code problem or if it's an IE 8 issue??

i see i cannot post a url. any help without seeing the problem?

Here is the code snippet from the iframe:
Code:

<div style="margin: 0px;" id="votes">
<ul style="margin: 0px;" id="xvotes-0" class="star-rating-noh">								                            	           <li id="xvote-0" style="width: 81.25px;" class="current-rating"></>
<span id="mnmc-0">															                   <li class="one-star-noh"></li>											                     		                             <li class="two-stars-noh"></li>
<li class="three-stars-noh"></li>													                                           <li class="four-stars-noh"></li>
<li class="five-stars-noh"></li>
</li>
</ul>
</div>

I've been adding local styles to try and zero any potential problems.

i can post all css styles if noone has any ideas.

Any help would be much appreciated.

Thanks.

I want products listed horizontally first, then move to next line if there is to many. But instead, each product listed on a new line.

http://www.refinethetaste.com/html/default.asp?Section=products&CATEGORYID=4

PHP Code:
/* products.css */
#products {    float: left; }
#products .productbox    {    background-color: #ececec; width: 150px; padding: 10px;    margin-top: 10px;    }
#products .productfooter {    background: url(../images/arrow.gif) 20px 0 no-repeat; padding-left: 58px; margin-bottom: 10px;}
#products img#product {    width:150px; height:150px; border: 0px;    } 

Hey, as always it seems to work normal with FF. But IE starts moving images when you go over it.

link:
http://www.net-force.com/hotest/a1.html

any suggestions how to fix it so it displays properly in IE? thx!

Hi,

I have spend 2 days trying to figure out why this happens, and i just cant figure it out...

My links in my main menu moves 1 - 3px to the right in IE explorer at mouse-over....but only when i set a: hoover to change background color.... if i only change text color with a : hoover its fine.

Anyway i just realized that this was a complete waste of time since i'm not allowed to give my URL for people to see the problem...

Cheers,

Bukit1

I swear, its just one of those days. I'm pretty good with CSS/HTML, but I had not touch it in a while. I sat down, and for the life of me I can solve even the simple problems...

I know I solved this a buch of times, but now I cant remember how, looking back on my old code/sites dosent tell me much.

So I have a div in the header. When I put margin-top (org just margin: x 0 0 0;) the whole page moves down because of the margin. Its like child div is influencing parrent div.

I tried positioning every parrent div to relative but no luck... I cant get this child to behave.

I know this is an easy question, I'm just not myself today.

I have a table with 5 columns. I only want the table to cross about 70% of the screen. Whenever I try to re-size it either via css or just 'width = 70%' the table stays the same width and just jumps towards the right of the page.

It doesn't matter if I put a width on my body, a div wrapper, or the table.. same results.

I've never had these resizing issues before but I admit i haven't coded anything in 6 months

Thanks for any help.

**Edit** Oh, I forgot to mention the table is initially wider than the screen and its seems to be staying that wide because each column will stay as wide as it's longest entry.

I fixed this issue ages ago on another template and now I can't remember what sorted it.

My footer sits at the bottom (or drops down if the page is longer). When the page is maximised it looks fine but when the browser (IE) is not maximised it moves up 1px and you can see the background behind it. Any ideas?

Thanks.