CSS - Font Scaling In Firefox?

Got it sorted now

Thanks - Dan.

Is there a way to tell a browser to NOT zoom it when the user tries to zoom the text... I ask because I use text in a menu bar that I do not want to scale at all. Thanks

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.

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

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?

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.

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 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.

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?

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Hi there,

Does anyone know what font this is that is used for text such as

"Everything you need to get a professional website online" at the top and below: "Takeaway Website Standard"

When I highlight it, it has a black bacground which is unusual.

Any ideas?

Thanks!

I have a 'DIV' tag, its css height property is set to 15px.
Why is it, that it's not really 15px until I insert
"font: 10px Verdana " *** one of the rules?


So fi I have:

#topSeperate {
height: 15px;
width: 100%;
background-color: #00FF00;
font-weight: bold;
font: 10pt Verdana;
}

The div is perfect, but as soon as I remove the font: tag,
it grows in height about 4px even though there is no text
typed in the 'DIV'.

If this doesnt make sense and you need further explaination, Let me know.

Hi guys
I've started this thread in this CSS forum, because I need to find a solution in CSS code.

I was given the following image. I must make same menu, using CSS. But this is not a problem. My problem is to find in css a real typography that mimics following image.



Does any1 know which css code and which font should I use ? The man who gave me that image doesn't know which font was used
Thanks a lot in advance