CSS - Font Size And Screen Resolution

Hi There.. I am still learning CSS/Xhtml so please be patient and understanding, . Anyway, I am making a site for my business and wanted to try some new idea. Everything looks good except for my navigation bar in IE. Whenever I change resolution the navigation bar moves out of position and I have to refresh to get it to snap into place. In Firefox and Chrome I do not have this issue.

I have been googling trying to find the solution but have come up empty. Could someone look at my code and tell me when I did wrong so I don't make the same mistake again? Thanks for your help.


Here is the CSS:

<style type="text/css">
<!--
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:920px;
height: 100%;
background: url(desk.jpg) white center no-repeat;
background-repeat:no-repeat;
margin: 0 auto;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
}
#container {
width: 900px; height:840px;
background-image: url(bg1.png);
margin: 0 auto;
text-align: left;
}
#mainContent {
padding: 3px 60px;
margin-top: 0px ;
}

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

#navigation {
float:right;
display:block;
width: 400px;
margin-top: 15px ;
font-family:Trebuchet MS, Helvetica, sans-serif;
overflow:hidden;
}
#navigation ul {
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

#navigation ul li a {
display:block;
margin:0;
padding:.4em .8em;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#navigation ul li a span {
display:block;
}
#navigation ul li.active a {
color: #fff;
font-weight:bold;
}
#navigation ul li a:hover {
color: #fff;
font-weight: bold;
}

.guy {
float: right;
margin-top: -70px;
}

.yell {
float: left;
margin-top: 20px;
padding-bottom: 0px;
margin-right: 30px;
margin-left: 20px;
}

.second {
margin-top:45px;
}

#footer {
font-size: 11px;
margin-bottom: 10px;
}
-->

So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0,


How do you get a simple tag like

body {
font-size:small;
}

to be equal in all browsers?

Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way?

By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it.

It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering.

B

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

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

Well, the title might be a little oversimplified, but I guess it caught your attention

In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable.

Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately.

Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this?
Any help/suggestions/ideas are appreciated...

Whats the best way to fix font size?

I use CSS. The font size seems to stay fix on IE but not on Mozilla and Netscape.

Also I notice when I use adgui font it stay fix no matter in what browser and no matter at what text view. Why is that. Are there more of this kinda fonts?

Bottom line, whats the best way to fix the size of fonts regardless of browser and at what text view.

Thanks for you help
Liz

People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly.
I'm using "em" instead of pixels when setting font sizes in CSS.
The site has fixed length and width, do I HAVE to allow it to resize itself?

Hello,

I have something has follows:

<div>
...
<table>
...
</table>

</div>

My document font size is 1em.

My div font size is 1.4em.

What should be the font-size in my table to get back to the 1em of the document?

Thanks,
Miguel

hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like: Code:

body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; 
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }

a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }

form { margin: 0px; padding: 0px; }

any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller


here is a preview with that css file in use : http://www.dbznetwork.net/

Hi

When you resize the window to a smaller window the css formatted page contracts and it looks bad. How can you make it add scrollbars so the content doesn't squish as it stays where it is but scrollbars are added to view the whole page.

Can it be done as this has a bad effect on my webpage with a few containers when resized to a smaller size.


<style type="text/css">

body{margin:0%;padding:0%;min-width:700px;overflow:auto;}

I use %positioning for the containers so I guess that also resizes in smaller window mode.
If I was to use pixel length and SR is 800X600 is that the actual size i use or would it be smaller?

I know this topic has been discussed a number of times in the past and I have read some of them. Kravittz I do appreciate all your knowledge in this area as you have answered a lot of my questions already.

But I do have a few problems yet.

I am switching now to set the font size in body as
Code:

body {
	font-family:Verdana, Tahoma, Arial; 
	font-size: 85%;
	color: #000000;
	background-color: #FFFFFF;
}

(actually not sure if I like Verdana or the good ol' Arial first. that is a different question)
Anyway, I set the font to 85% for body.
then for <p>
Code:

p {
	font-size: .8em;
}

That seems to look fine. but first question is for links <a>. I have some links that are just be themselves or sometimes in a <div> tag. Those ones are very large. So I set the size like this.
Code:

a:link {
	text-decoration: underline;
	color: #000000;
	font-size: .8em;
}

that works fine but them for the few links that are inside of a <p> tag it seems to adjust the size twice, once for <p> tag and then again for <a> tag. Thus making it twice as small as I really want.

How do I fix that? Do I need to make a whole bunch of psuedo classes for all those instances? Seems like there should be an easier way.

Any suggestions? Thanks!

What is the best way to make compatble text size between browser?

I have a div with a width of 300px, I pasted some text in it, it appears identical with firefox, chrome and safari (the letters are the exact same place), but when it comes to IE 8 (probably 6/7 too), the text is not displayed at the same place.

I have set up a test for several basic CSS-layouts, like 3-column layout, frame-like layout/behaviour etc. and I noticed some strange behaviour in IE.

Here is a number of layouts that I have created:
http://www.duwgati.nl/csstest

In layout samples 1 - 4 the fonts show up smaller than in the samples 5 -7, even though the font-size declaration is identical in all 7 samples. This only happens in IE, in Mozilla/Firefox, the fontsizes are correct in all 7 samples.

Anybody got a clue why this is happening?

I need to shrink the fonts for the following classes on blogspot:
post-body
date-header

but for some reason it refuses to shrink below 100% or 1em

Even in firebug, adding properties to element.style, the font refuses to shrink below 100%. Even when i switch off all inherited values for font values it refuses. It does however grow to any size larger than 100%.

Other elements' fonts do shrink to any value, it is only these (and possibly others) that do not shrink.

blogspot in question is http://secretfarts.blogspot.com

Any ideas?