CSS - Prevent Text From Scaling?

How come IE obeys fixed and em font sizes and firefox doesn't?

I want all my site text to be scaleable apart from the navigation text which I gave a fixed size of 10px. In IE the scaling is observed and all fonts are em apart from the navigation. In firefox however it scales ALL fonts which is very annoying. Is this a known problem?

Hello, I'm new to these forums and I have a question. I am making a website (c-pj.net/lowercase/), and I'm having a problem. If I add too many posts or make a post to long it goes off the page, or at least the text does. What I mean by that is that the text ends up going onto the header and past my content holder image. Can anyone take a look at the source code, and my style sheet and tell me how I could make the height of my content area scale to the proper size, when I try to set it to auto it doesn't display at all. This could be caused by the fact that my content are is absolutely positioned but I'm just looking for some advice hopefully you guys understand my question. My style sheet is located he c-pj.net/lowercase/stylesheets/default.css

Hi,

I am having a problem with some getting a div to scale to the full height that I want it to. Any help would be much appreciated.

Here is the link to the page in question:
http://www.paultheillustrator.com/template.html

Basically, I have 3 divs (wrapped in another div), floating left of each other. The left and right div are simply background shading images. The center div is where the content (on this page, my blog) is.

The centre div and wrapper div heights are set to auto (as I want them to expand with the amount of content in the centre div). However, because of this, the left and right divs (which have no content, just a repeating background image), do not appear. Currently I have their height set to 100%.

Any solutions would be much appreciated!

Thanks,

Paul

Here is the CSS:

Code:

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(../images/bg.gif);
	background-repeat: repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height:14px;
	color:#666666;
}

html, body {
	height:100%;
}

#centre-right a:link {
	color: #000000;
	text-decoration: none;
	background-color:#FFFF00;
}
a:visited {
	text-decoration: none;
	color: #000000;
	background-color:#FFFF00;
}
a:hover {
	text-decoration: underline;
	color: #333333;
	
}
a:active {
	text-decoration: none;
	color: #44C3F3;
	background-color:#FFFF00;
}

h2{
	/*letter-spacing:-1px;*/
	color:#999999;
	font-family: Arial, Helvetica, sans-serif;
	line-height:20px;
	font-weight:100;
	font-size:24px;
	margin-left:-2px;
}

#overall_wrapper{
	width:737px; 
	height:auto; 
	margin:0px auto;
}

#main_top{
	width:737px; 
	background-image:url(../images/top-main.png); 
	background-repeat:no-repeat; 
	height:198px;
}

#menu_wrapper{
	width:737px;
}

#left_bar{
width:28px; 
	height:auto; 
	background-image:url(../images/bg_left-strip.png); 
	background-repeat:repeat-y; 
	float:left;
}

#centre{
	background-color:#FFFFFF; 
	height:auto; 
	width:681px; 
	float:left;
}

#centre-left{
	width:168px;
	height:100%; 
	float:left;
	margin-left:28px;
	margin-top:28px;
	margin-bottom:28px;
}

#centre-right{
	width:428px;	
	height:auto;
	float:left;
	margin-left:28px;
	margin-top:28px;
	margin-bottom:28px;
	
}

#dots{
	margin-top: 14px;
	width:70px;
	height:14px;
	background-image:url(../images/arrows-dots.gif);
	float:left;
}

#centre-right .blog{
	margin-top: 14px;
	float:left;
	width: 334px;
	margin-left:14px;
	
}

.header-text{
}

#right_bar{
	width:28px; 
	height:100%; 
	background-image:url(../images/bg_right-strip.png); 
	background-repeat:repeat-y; 
	float:left;
}

#footer{
	width:737px;
	height:257px;
	background-image:url(../images/footer.png);
	float:left;
}

I am writing my site in XHTML 1.1 (application/xhtml+xml) entirely using ems. The page scales really nicely with browser text resizes however all of my rounded corners (background images), image bullet points, and any other background images do not.

Is there any way to specify the background image width in ems? I think I'm going to have to mix presentational images with content otherwise.

Prior to doing any serious mobile work, I learned if you had an image that was mostly decorative and didn't need to be read as part of the content, you used a background image.

In today's world you have to support many mobile devices. There's a nice trick with <img> tags where you give them a max-width of 100%, and they will scale down proportionately on mobile devices.

As far as I can tell, there isn't quite as good of a solution for background-images.

Say I have a background image in a div, and I set the dimensions to match the background size - 600 x 300. To allow it to scale down on mobile devices, I set a max-width of 100%. But that doesn't scale the background image down, just crops it.

So I set background-size: contain, which makes the background scale, but the div is still 300px tall. And that's where I run into the problem. How do I tell the div to only be as tall as its background?

Am I missing something?

Hi:

I am having trouble implementing a background image using CSS for compatibility with IE7, and if possible, IE6.

In my CSS, I have the following code defined

Code:

body{
	margin:0px;
	height:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: black;
	background-color:#fff;
	background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: absolute;
	background-size: 100%;
}

/*
body{
	margin:0px;
	height:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: black;
	background: #fff url(../images/bg.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
*/

The results work fine in Chrome, Safari and Firefox on both PC and Mac. However, the image does not scale and gets cropped in IE7.

I have tried it two different ways, both of which are in the code, and one of which is commented out. Neither way works properly with IE7.

Does anyone have a solution to this that they could share with me.

Thanks.

I am just trying to create a simple layout, where there are specific
margins around two color boxes. I'd like the color boxes to fill the
space between the margins, 100% and to each take of 50% of height.

I have kind of faked it...but I know there must be a better way.

Any help would be great. Thanks.

http://www.skimdesign.com/projects/mnomentana/

I have also reworked the code a bit, finding that if the position isn't "absolute" somewhere, the boxes won't show at all. Not sure why this is. But here is the reworked code:

body {
margin:20px 15px 10px 100px;
font-family: trebuchet, verdana, sans-serif;
}

#leftcontent {
float:left;
width:25%;
background:#fff;
}

#rightcontent {
position: absolute;
width:75%;
height:100%;
min-height:100%;
}

#green{
height:50%;
min-height:50%;
background-color:#CCFF33;
}

#grey{
height:50%;
min-height:50%;
background-color:#999999;
}

thanks.

Hi all,

I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address:

http://www.magic-photography.co.uk/photoselector.html

It works fine in Chrome using the following simple CSS:

Code:

a img { border: none; height: 50%; width:auto; text-align: left; }

however in IE/Firefox the images do not re-scale at all.

Very very grateful for any help offered.

Thanks

I have an image I want to display in a <td> cell, that scales with the cell dimensions. How do I do that?

Hello everyone, Ive been trying to reconstruct a web design from a photoshop design and it has bars going down the side of a center container where the content is, the problem im having is when the text and such in the content 'rule' goes over one line, prior to what i thought would happen, only the content 'rule' scales to the amount of text and the container rule does nothing. Is there a way to make the container scale with the content and have the bars scale with the container...?

Heres the css and the html
Code:

#container
{
	margin-left: auto;
	margin-right: auto;
	top: 0;
	width: 875px;
	margin-top: -8px;
	padding: 0;
	overflow: visible;
	background: #FFFFFF;
}
#secondbar
{
	margin-left: 102px;
	margin-right: auto;
	width: 40px;
	top: 0;
	position: absolute;
	background: #4D220F;
}
#bar
{
	margin-left: 6px;
	margin-right: auto;
	width: 96px;
	top: 0;
	position: absolute;
	/*[empty]height:;*/
	background: #E3C98E;
}
#thirdbar
{
	margin-left: 123px;
	margin-right: auto;
	width: 21px;
	top: 0;
	position: absolute;
	background: #7F8FA6;
}
#content
{
	margin-left: 154px;
	margin-right: auto;
	top: 0;
	width: 709px;
	position: absolute;
	background: #FFFFFF;
}

Code:

<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href= "styles.css">
</head>
<body bgcolor="f4f1ea">
<div id="container"><div id="bar">&nbsp;</div><div id="secondbar">&nbsp;</div><div id="thirdbar">&nbsp;</div>&nbsp;<div id="content">&nbsp;</div></div>
</body>

Thanks for any help, sorry if its a bit confusing
Xidus

I'm working with a portal system where-in various different modules can be applied to the main system. The problem I'm running into is when I want a module to have complete reign over it's appearance, completely ignoring the pre-set design of the surrounding system.

Is there a CSS tag hiding somewhere that can disable all inheritance from the parent on up?

I understand that styles declared closer to the output will take precidence, but I also don't feel like modifying the current and very complex stylesheet of a module I'm porting to make sure every attribute of every tag is being set to something compatible.

Surely there must be a way to disable inheritance for a block...?

I have a table that uses style sheets:
<table class="Border">
but then when I place a table inside of it, it inherits the same class. Is there a way to prevent this?

Thanks!
Scott.

I've got a side navigation that displays correctly in every browser EXCEPT IE 6. Big shock... I want the navigation DIV to only be as wide as the content inside it. It does this in IE7, FF, Safari, etc. Any help would be greatly appreciated.

The CSS:
Code:

#nav    { background-color: #fff; width: 218px; height: 400px; float: left }
#menuContainer    { margin-top: 120px; margin-left: 12px; position: fixed }
#menuContainer h3  { font-size: 11px; font-weight: 900; text-transform: uppercase; margin: 0 0 4px }
.menu    { list-style: none; margin: 0; padding: 6px 0; border-top: 1px dashed; border-bottom: 1px dashed }
.menu li  { font-size: 20px; font-weight: 900; text-align: right; text-transform: uppercase; margin: 3px 0; padding: 0 }
.menu a  { color: #000; text-decoration: none }
.menu a:hover  {}
.menu ul    { list-style: none; margin: 0; padding: 0 }
.menu ul li    { font-size: 12px; font-weight: bold; line-height: 14px; text-transform: lowercase; margin: 0; padding: 0 }
.menu ul a   { color: #c00 }
.menu ul a:hover  { color: #000 }

And the HTML:
Code:

<div id="nav">
	<div id="menuContainer">
		<h3>Site Name</h3>
		<ul class="menu">
			<li><a href="...">Page</a></li>
			<li><a href="...">Page</a></li>
			<li><a href="#">Page</a>
				<ul>
					<li><a href="...">Page</a></li>
					<li><a href="...">Page</a></li>
					<li><a href="...">Page</a></li>
					<li><a href="...">Page</a></li>
				</ul>
			</li>
			<li><a href="...">Page</a></li>
			<li><a href="#">Page</a>
				<ul>
					<li><a href="...">Page</a></li>
					<li><a href="...">Page</a></li>
				</ul>
			</li>
			<li><a href="...">Page</a></li>
		</ul>
	</div>
</div>

So here's the deal. I need the nav buttons to stretch across so that it's flush with the gray background but when I add another pixel to padding-right:7px it wraps to the next line.
I'm somewhat new to CSS so I don't know what to do to fix it.

-Johnny

Here is the code:
/* ---------- Primary Nav ---------- */
div#primaryNav {clear:both;background-color:#EEEEEE;width:754px;}
div#primaryNav ul {border:0;margin:0;padding:0;list-style-type:none;text-align:center;}
div#primaryNav ul li {display:inline;float:left;text-align:center;padding:0;margin:0;padding-bottom:5px;padding-right:7px;}
div#primaryNav ul li a {width:116px;height:17px;border:1px solid #D9D9D9;background:#FFFFFF;margin:0px;padding:0;padding-top:2px;color:#707070;display:block;text-align:center;text-decoration:none;}
div#primaryNav ul li a:hover {}
div#primaryNav ul li a.selected {font-weight:bold;color: #FFFFFF;background-color: #FFAB00;border: inherit #FFAB00;}

Here is the navi:
<div id="primaryNav">
<ul>
<li><a href="Item">Item</a></li>
<li><a href="Item">Item</a></li>
<li><a href="Item">Item</a></li>
<li><a href="Item">Item</a></li>
<li><a href="Item">Item</a></li>
<li><a class="selected" href="Item">Item</a></li>
</ul>
</div>

This is a simple question.

In my menu system, I want my "items" to look like links. I've put the text in an Anchor tag... but I then get the, for this time at least, undesired blue underline action going on...

What CSS do I need to use to prevent this. I want my <div> tag and/or my <a> tags to not change...

Thanks.