CSS - Stop Browser Text Sizing

i want to fit in my 'Did you know?' panel beside my ad, but i'm having a lot of trouble... the ad is 468x60. here is the panel:

Code:

<div class='ocontentsection panelmargins floatleft' style='margin-left:8px; height:101px; width:167px;'>
    <h2 class='aligncenter' style='text-indent:0;'>
    	Did you know?
    </h2>
    
    <div class='contenttext' style='font-size:9px;'>
            <p class='nomargins'>
                
                    <?php
                    $tips = array(
                        "The formula generating your VIPortals Score is:
                        <strong>Games Played * 2 + Votes Casted * 3 + Comments Added * 4 + (Games Played + Votes Casted + Comments Added) * 5</strong>",
                        "The money awarded to the winners of every contest comes from the <strong>advertisers</strong> who are paying us to place their ads here."
                    );
                    $rand_index = round(rand(0, count($tips) - 1));
                    echo $tips[$rand_index];
                    ?>
                
            </p>
    </div>
</div>

look here in the middle of the page
i want the text to fit inside the box too :S is there a better way of doing this? as you can see, i had to set a bunch of widths and stuff...

thanks.

At http://alphaworks.co.uk/problems/non-flowing/ how can I get the three "Address line x" lines to line up under one another and not flow back to the left under the "Address:" label?

Thanks,
Geoff

I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods

ie

testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something

how can I make css break that up so the browser window won't scroll vertically?

I have a textarea in a <td>which asks for users for some description.

If users enter text and don't use any space or enter, the
width of the table gets bigger and bigger and damages the pages
design.


What can I add (to td.fixed_width css for example )to make the line
break after the width of the table is reached???


There is a solution that I put a div in td and then
Code:

#desc {
	width:"100%";
	width::fixed;
	overflow:scroll;}

but it is not exactly what I want

I am having few html pages with external CSS used. Now when i want to change the brower text using View->Text size, its not allowing.
Yes, i can change the font size in my CSS but I dont want all should see in the same font. Few people viewing those pages may not like that font.

So, Can any body help me to find out how to change the text size of an html page having CSS.

When I resize the browser window on this page, the text "onclick" and the Cart and Search text stay in one place while the other text and background move. Why is this happening, I need everything to move together.

This only seems to be happening IE, FF and Chrome seem fine.



http://makethemoviehappen.com/darix.html

Hi,

I have a page that works fine in opera, but for some reason screws up in IE. It's a basic container div, with 2 main divs inside this, one a column to the left, the other filling up the remaining space. In Opera, I insert this second div and all is fine. In IE, however, my once square container div is suddenly stretched several hundred pixels down. The easiest thing is to show you:

CSS:

Code:

/* CSS Document */

body 
{
	background-color:white;
	font-size:x-small;
	font-family:Verdana;
	text-align:center;
}

#container{
	margin-left:auto;
	margin-right:auto;
	width:700px;
	height:550px;
	background-color:#C7E8FD;
	text-align:left;
}

#topbar
{
	width:700px;
	height:56px;
	background-color:#3300CC;
}

#midbar
{
	width:700px;
	height:10px;
	background-color:#96D6FF;
}

#welcometext
{
	width:690px;
	height:15px;
	font-family:Verdana;
	font-size:x-small;
	color:#3300cc;
	text-align:left;
	padding:5px;
}


#leftcontainer
{
	width:280px;
	height:459px;
	padding-top:10px;
}

#dropdown{
	width:260px;
	height:80px;
	margin:3px;
	background-image:url(images/dropdown.gif);
	background-repeat:no-repeat;
	margin-top:0px;
	padding:7px;
}

#lefttop{
	width:260px;
	height:80px;
	margin:3px;
	padding-top:15px;
	padding-left:15px;
	background-image:url(images/leftopbg.gif);
	background-repeat:no-repeat;
}

#leftmiddle{
	width:260px;
	height:80px;
	margin:3px;
}

#leftinfo
{
	width:260px;
	height:125px;
	margin:3px;
	background-image:url(images/information.gif)
}

#imagecontainer
{
	width:420px;
	height:400px;
	background-color:red;
	left:270px;
	top:-455px;
	position:relative;
	
}

.menutext{
	font-family:Verdana;
	font-size:x-small;
	color:#3300cc;
	font-weight:bold;
	padding:4px;
}

.searchbox{
	border-color: #3300CC;
	border-width: 1px;
	border-style: solid;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:x-small;
	font-weight:bold;
	color:#3300CC;
}

.searchbutton{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #3300CC;
	background-color: #C7E8FD;
	border-color: #3300CC;
	border-width: 2px;
	border-style:double;
}

.smalldesctext
{
	font-family:Verdana;;
	font-size:xx-small;
	color:#3300CC;
	line-height:10px;
	font-weight:normal;
}

The page in question is here

The red box (#imagecontainer) is the div that appears to be causing the problem, since when I take it out it's fine. I have tried using different DOCTYPES, and my CSS is valid according to W3C.

Help, please!

Thx in advance

Hi,

I am using the code below to try and create a resizable page.

the problem is when the i cant get left nav to stretch the full height of the content div..... so when it is resized the footer etc all go over the top of the image...which looks wrong as iwant it all to stay in proportion

any help would be much apreciated

css

body { /*sets properties for the body of the document*/
background-color:#ffffff;
margin:0px 0px 0px 0px;
}
#container {

margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 50px;
padding: 0px;
background-color: orange;
width: 80%;
min-width: 241px;
}
#footer {
padding: 0px;
position: relative;
padding: 0px;
background-color: yellow;
width: 100%;
}

#content {
margin-left:182px;
width:100% - #leftnav;
background-color: red;
align: right;
min-width: 50px;

}

#leftnav { /*sets properties for the left nav bar*/

float:left;
background-color : #66ccff;
width: 180px;
border-right:2px solid;
border-color:#663300;
height:100%;


}

html

<div id="container"> container
<div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"></div>

<div id="content">content content content content content content content content
content content content content content content content content content content</div>
<div id="footer">footer</div>
</div>

Is there a way to get IE to display an element's size properly when the element contains another larger element within it?

OK, so I have two divs. Div1 has a height of 150px. Div2 contains an image that is 200px which I want to "overhang" below the first div's bottom border. So my code looks roughly like:

Code:

<div id="one" style="height:150px; background-color: #EEEEEE;">
   <div id="two" style="float:right; position:relative; top:115px; margin-right: 15px;>
      <img src="someImage.gif"/>
   </div>
</div>

Firefox displays this properly, maintaining Div1's height at 150 and pushing Div2 down so that it hang's over. IE allows Div2 to hang, but it resizes Div1 to be 200px.

How can I stop IE from expanding the height to be larger than what I define it to be, even if a child element is larger?

Okay this is still the same page I posted about but a little different problem as I fixed the other one.

In IE my wrapper is extending way beyond 770px to about 991px. You can see this in the image below. It shows the green border way beyond where the main content ends to the right.

Edited to add that I figured out my problem with the image aligning to the right. I had 2px padding set all round on the container box for it

All the content looks correct in FF (suprise suprise).



My CSS:

Code:

#wrapper {
  text-align: left;
  margin: 0px auto;
  width: 770px;
}

/* column container */
#colcont {
  float: left;
  width: 550px;
}

/* columns */
#lcol {
  float: left;
  width: 180px;
  max-width: 180px;
  vertical-align: top;
}
#mcol {
  float: right;
  width: 366px;
  vertical-align: top;
}
#rcol {
  float: right;
  width: 210px;
  max-width: 210px;
  margin-left: 10px;
  vertical-align: top;
}
/* login box */
.metro_wrap {
  width: 200px;
  margin-left: 10px;
}
.login_top {
  width: 200px;
  height: 260px;
  background: #54B043 url(/theme/Metrocom/login_top.gif) top right no-repeat;
}
.metrologin {
  background: #54B043 url(/theme/Metrocom/login_bottom.gif) no-repeat;
  height: 588px;
  color: #FFFFFF;
  vertical-align: top;
}
.loginbar {
  background: #54B043;
  padding: 4px;
  color: #FFFFFF;
  font-weight: bold;
  height: 34px;
}

HTML -- This is the DIV that holds the image
Code:

<div class="metro_wrap">
  <div class="login_top"></div>
  <div class="loginbar">
      Welcome to www.tdsmetro.net.<br />
      Please sign in.
  </div>
  <div class="metrologin">
    <?if($msg) {?>
      <span class="autherr">$msg</span>
    <?}?>
    <div class="login">
      <form class="nopad" action="/login.php" method="post" onsubmit="return(ck_login(this.user));">
      <input class="login" type="text" name="user" maxlength="50" size="24" />
      <br />
      <strong>User Name</strong> (joe.smith@tds.net)<br /><br />
      <input class="login" type="password" name="pass" maxlength="30" size="24" />
      <br />
      <strong>Password</strong><br /><br />
      <div align="center">
        <input class="login" type="submit" value="Sign In" name="submit" />
      </div>
      </form>
    </div>
    <br />
  </div>
</div>

Here is the way that the divs are laid out. I didn't want to put evertyhing because it'd be huge.
Code:

<div id="wrapper">
 ...some nav stuff...
<div id="colcont">
  <div class="animetro_news">
    some more stuff
  </div>
  <!-- Left Column -->
  <div id="lcol">left column</div>
  <!-- Middle Column -->
  <div id="mcol">middle</div>
</div>  <!-- end colcont-->
<!-- Right Column -->
<div id="rcol">right column</div>
</div> <!-- end wrapper -->

Hi I need something simple done.

I need to decrease the size of a textbox (Image verification) on this page:

http://quickonline.co.za/

Im not sure what to put in CSS , I tried this:
Code:

input.chrono_verification {
width:50px;
}

nevermind Its a Id not a class

What is the most recommended way to set font size for my Web site?

I would like my users to be able to resize the text on my pages via the View>Fonts feature in IE or the View>Text Size feature in Firefox.

I'm using a stylesheet with the font set to "100%" and in my pages I have CSS styles such as style="font-size: 1em."

Thing is, my XHTML 1.0 validates. It looks great in IE but comes out way too large in Firefox.

What's going on and what to do about it?

Is there any way to scale the size of a background image? I know there probably isn't but I thought I would ask. I would like the background image of a div to be a gradient that scales in proportion to the size of the div. I've thought about doing this using a expression type css rule where I have a backround DIV rather than it being the background of the div but older ie 5.0 doesnt seem to like those. Any thoughts?

Let me know if you would like me to explain more....

Yes I know IE has a gradient filter but id rather not use Proprietary code

Hello all, I'm a copywriter who's recently been forced into web design by my boss because of general tech savvy. I've replaced his old ugly website with a new, prettier one.

I would post a url but it says I'm a new user and I can't - I don't know when that ban gets lifted.

I did the layout with a table which I KNOW is incorrect and will make further development difficult, but my boss insisted and I don't feel too bad about it as this really isn't what I'm being paid for. (If he wants a correct, professionally designed website he can hire a professional web designer to do it correctly).

However, there is one issue I'd like to fix, if I can. On the second, third and fourth pages (What Vehicles We Buy, FAQs, and Why Sell to Auto Buyer?) the table sizes incorrectly in IE 8 - but not in Firefox, Chrome or any phone I've been able to check it on. If you can open it in IE you should see what I'm talking about. Right off the bat, the navigation bar near the top is too low, and it gets worse the farther you get down the page. The images in the middle are way off.

This is only the case on these three pages, all the site's other pages are fine. I'm at a loss on how to fix it. If I need to post the full code for you to see, I can do that but I don't want to clutter this post if it's not necessary. Here's the style codes for the background image and the table, respectively:

#bg {
vertical-align: top;
width: 1601px;
position: absolute;
top: 0;
left: 0;
}

#Table_01 {
vertical-align: top;
width: 1601px;
position: absolute;
top: 0;
left: 0;
}

If anyone can see why I'm having a problem, I'd be extremely grateful. Thanks in advance.