CSS - Changing Browser Text Size For Html's With Css

i have this in my style.css file

BODY {
color: #003366;
background-color: #CBD5E2;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;




}



A {
color: #FFFFFF;
text-decoration: underline;
}

A:HOVER {
color: #FFFFFF;
text-decoration: none;
}


when i change the color: #003366;
it reflects on the site
but when change the "font-size: 12px;" to another size
the text remains the same... ?

i tried including with both
<style type="text/css" title="currentStyle">
@import "../style.css";
</style>

and
<link rel=stylesheet type="text/css" href="../style.css">

no difference....

p.s. the path ../style.css is correct

hello guys,,

I was wondering how to make a webpage take the full browser size and not over flow or be smaller than the browser window also atleast 800 x 600


thnx for ur time..

HMV

In my web docs, in FF, the text size can be adjusted in the browser, but not in IE. Why would this be? I'm using points to define font size by the way.

So I've got a page on which a menu exists (or will) that is a certain width, I believe 854px. Now I know that this isn't the best idea, but I'm following someone's specific orders so meh. Now, my problem is that I want the page to resize according to the browser size and fill the page, so if the browser size is 1054 then I want the background image at the top to run the entire width of the page, and the menu, I'd want to center. Now if the browser is 854px or wider, then the page looks fine, but when the browser is anything less, then the menu, because it is a specific width, expands as it should as well as centers itself forcing a horizontal scroll bar, but the rest of the page is acting like it is ONLY 854px and therefore it cuts off and is now no longer centered with the menu.

It must be possible to do, right?
Here's a link to the page I'm using for debugging purposes
http://www.agentjeff.com/headerv10.html

Hi,

Here's the site I'm working with:
http://www.cjfusion.com

I want to get that image centered on the browser window and then depending on how big the viewers screen is, the browser will cover up the left and the right. I hope that makes sense. I almost want it to be fluid, but I'm unsure how to do that.

Ask questions if this doesnt make sense. Its hard to explain.

-CJ

Hello,

I'm using jquery and the cycle plugin to cycle through a few images on my homepage inside a container.When i load the website at any browser size, it seems to do the proper thing. The problems arise when i try to make the browser bigger or smaller after that, it does funky things to the images. If you begin to scale the browser when the first image is displayed, it also seems to scale properly for that first image, but goes haywire after that. It pretty much does it in all browsers and i can't seem to figure out if it's something im not setting properly within css or if it have something to do with jquery and the cycle plugin.

here's the website thus far:

www.beaucoupla.com

this is my first time writing code so please any help would be appreciated!

Code:

@charset "utf-8";
/* CSS Document */

#mainWrapper {
	/*
	background:#000 right top no-repeat; 
	min-width:1000px;
	min-height:775px;
	border:0px;
	background-color:#000; */
	padding: 0 0 0 1px;
	margin:0;
	top:0;
	left:0;
	width:100%;
}

.mainbar { 
	position:absolute;
	top:0px;
	left:0px;
	display:none;
	visibility:hidden;
	width:78%;
	min-height:100%;
	height:auto;
	/*This works for IE7
	min-height:775px;
	height:775px;*/ 
	border-right: #FFF solid medium;
}

#imagelist {
	left:0;
	position:absolute;
	display:block;
	visibility:visible;
	/* width:auto; static size */
}

#imagelist img {
	display:block;
}

#imagelist img.first {
	display:block;
}

.theimage {
	position:absolute;
	left:0;
	width:100%;
	/* Adding this works for IE7 */
	/* height:775px; */
	border-right: solid #FFF medium;
}


#podcast {
	/*right:303px; */
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
}


.about_info p {
	font-size:1.1em;
		
}

.contact_info, .about_info, .news_info {
	position:relative;
	margin-top:4em;
	margin-left:10%;
	width:78%;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:1.3em;
	color:#FFF;
	height:100%;
}

.contact_info #title, .about_info #title, .news_info #title {
	font-size:1.75em;
	padding-bottom:1.5em;
	color:#1ac089;
	color:#03c5d1;
}
.contact_info .heading {
	color:#c04141;
	font-size:1.2em;
}

.contact_info .mail {
	text-decoration:underline;
}

.contact_info a:hover {
	color:blue;
	text-decoration:underline;
}

.news_info .heading {
	color:#c04141;
}



body {
	/*width:1400px;
	height:775px;*/
	padding:0;	
	margin:0;
	border:0;
	background-color:#000;
}



#share td {
	padding-left:0.5em;
}


#share {
	margin-left:1.4em;
	margin-top:0;
	border-top:0;
	/* padding-top:5; */
	font-size:0.65em;	
}

.sidebar {
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-left:78%;
	margin-top:1em;
	font-size:2em;
	color:#FFF;
}


ul {
	border:0;
	margin:2px;
	text-decoration:none;
}

li {
	list-style:none;
}

a {
	text-decoration:none;
	color:#FFF;
}

a.home:hover {
	color:#bc7bd4;
}

a.news:hover {
	color:#7bd488
}

a.podcast:hover {
	color:#d47b88;
}

a.blog:hover {
	color:#d4cb7b;
}

a.about:hover {
	color:#7bd4c6;
}

a.contact:hover {
	color:#d4a37b;
}

a.twitter:hover {
	color:#33ccff;
}

a.myspace:hover {
	color:#999;
}

a.facebook:hover {
	color:#5b61d5;
}

Hi

I am trying to learn how to design and develop a website that has consistent behavior across browsers, browser window size and screen resolution.

What are the industry best practices for designing and developing such websites.

Your help is appreciated

Thanks

Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked.

Is there a way to get this to happen with out changing the size of the cell?

I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table.

I'm in need of help in this CSS coding. I used class to divine different font styles in the same page. But my question is how to set a standard or force a fix font size to the browser.

HEre is an example of a website whereby when I use the IE's View -> Text Size -> Largest or Smallest option, it doesn't change the font size!
http://www.htmlite.com

I've looked at its css file and I still can't find a clue to which code which makes the font size stays as it is.

Anyone can help, please??

I have a website created with absolute positioning. So when someone increases the font of the text on the page (with the view menu for the browser), some of my text may run outside of the images that they are placed over. I had this problem with IE as well as firefox, but set all of the text with font-size in my CSS file. Now IE works perfectly, but in firefox, the size of the text can still be increased, thus, making the text expand outside of the images. How can I prevent this in firefox?

Second question... is there a way to set the size of the actual bullets themselves to a set size so they dont increase/decrease? I'm referring to the bullets, and not the text beside the bullets... I may go with images for the bullets, but was trying to prevent that. Any help would be appreciated. Thanks.

Hi

I'm working ona site at the moment: (URL address blocked: See forum rules)

The site is fine up to now, however when I change the size of the text in my browser settings to larger in firefox it ruins the look of the page, ie it puts everything out. Is there a way I can design the page elements so that they can accommodate larger text size and expand? At the moment all of the elements use jpeg images created in photoshop.

Thanks for any help!

Hi all,
Just an opinion I would like to get from the folks here. For example: Let say you create a navigation bar thats contained within a div. You make a background image that is gradient from top to middle to bottom - dark/light/dark. You add your text links and align them over the middle lighter area of the div background, looks great. Now do you compensate for someone using a different text size? Maybe creating 3 different DIVS - two to fade from dark to light both ways, and the middle one being the light color of the gradient to hold the text? Or do you just forget about it and let the background repeat if the font size changes?

This is one of those pet peave things of mine, where I'd create images for links and have the peace of mind that my design won't be broken. I made a new site design in pure css, that in my opinion looks sweet, but I'm ready to trash it and go back to a table/image heavy design because I can't have absolute control of how it will look with all the variables considered.

Would love to hear opinions!

I've been using a 3 column fluid layout and so far so good - works in all browsers and resolutions with some standard hacks...

Except with huge text sizes in Firefox.

I've used ems all the way and was wondering what the majority of people do when considering how much work to put in to ensure that people with really really poor eyesight can actually get the same experience as everyone else.

I tried expanding the text size on dozens of major websites and it appears there probably is some limit where it's not worth considering fixing overflowing divs on large text size.

So what does everyone else do?

Is this the right place to ask?

I have this problem making this menu and I have multible <h1></h1> on each title of the of stuff. It seems that the text gets bigger and bigger then when its to big then the text in the <h1> goes back smaller. Is there a way to fix this?
Here is my code.

Code:

h1 { font-family: cursive, sans serif;
 font-weight: normal; font-size: 200%; font-style: cursive;}

EDIT:The strange thing is that I know of this wird effect only happens in IE.

Thank you, sorry to be a bother but I do want to have a good first impression on my site that I am working for Ernies Bar & Grill at my town.

Hey,
wondering if any of you could help me with regards to syntax needed in CSS (im guessing) to make text fields in a form taller and wider?
Thanks,Sean