CSS - Sizing Individual Input Box

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>

For caching purposes and/or maximum performance would it be more beneficial to have the same large css document referenced in every page on my site or to have a much smaller different one referenced for each page in my site.

Hello,

I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table.

Im not very experienced with css and would perfer to keep it simple.

any info will help

thanks
Nick Carlevaris

I want to create a css menu where a chunk or block is highlighted on mouse over but inside that block are individual hyperlinks that are also highlighted on mouse over.

Here's the catch, I can't use any doctype tags like this one

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

because it makes the rest of my page look like junk.

The top nav on this page is exactly what I want to do.

http://www.smashingmagazine.com/tag/showcases/

This is not too important but my site (http://www.o0matte0o.myby.co.uk/)

Sorry nearly fixed it sorry

just gotta work out how to get the background to cover the text aswell

OK, I am pulling my hair out on this one. Since new users are banned from posting url's in the body of a post you will have to get my domain out of my user profile and add "/wordpress" for the page and "/wordpress/wp-content/themes/Rancho%20Vista%20Theme/style.css" for the css).

There are three areas that I am having a problem with. For reference, if you view this in Safari 3, you will get an idea of what it should look like.

1. In a Mozilla browser (Flock), the main menu is lower than it should be, and the size of the box in "Upcoming Events" is a couple pixels too small (you will see it cuts off the triangle at the bottom

2. In IE6 the "Last Blog Post" and "Upcoming Events" boxes' sizes are way too big. The white space between the logo and the green nav bar is too large.

3. In IE7 the "Last Blog Post" and "Upcoming Events" boxes' sizes are too small.

Can somebody help please? CSS & HTML validate as well.

I am relatively new to css, and I am having a hard time designing cross-browser code. There has to be an easier way.

FMI (For My Information) - is there any information out there that shows a listing of what css is not recognized by each of the browsers?

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

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

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.

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?

hover color for an individual piece of link on a page full of links.
So not like this in the header:
Code:

<STYLE>
a:hover {color:#FF0000}
</STYLE>

but something like this, but then it has to work :
Code:

<a href="page.html" style="hover-color:#FF0000;">
Link text</a>

I noticed that 'text-decoration: none' works in the second way, but i dont know how this hover color has to be done in that way.

Hi,

I'm having a problem and was wondering if CSS can help me do what I need to.

I have to build a form based on dynamic fields taken from a database. The form front end has to look nice and conform to spacing that is laid out in the paper version of it.

An example of this would be:

Name: ____________________ Address: __________________

That's the first line of one particular form. The problem lies in the fact that these fields are all dynamic, so I have no idea how long the field label will be. In one case it could be "Name" but in another it could be "First Name".

I'd like to know if it's possible to set the text fields to automatically size to fill in the empty space left between each label.

Otherwise I guess I'm going to have to setup a table that has a fixed width for the labels based on what I think could be the longest label name.

Now that I've decided to use CSS and divs to hold my content, how do I make my page expand if a reader enlargens font size through his or her browser (especially if they use Firefox which can keep enlargening the font many sizes)?

After enlargening the font size two steps in FF, the text expands so much it covers up other text in other divs, hides to the left and right, etc.

Is liquid design what I want? Is liquid design what keeps divs expanding to accommodate enlargened font size? If so, where can I best learn liquid design online?

Hi all,

I'm building my first experimental CSS site, and I'm trying to attain accessibility for the widest array of users. While testing various browser settings, I came across this issue.

(I'm looking at the site in IE, as I'm at work. I'll be able to look it over in other browsers when I get home.)

When my site is viewed with text set to "Medium," everything appears fine:

http://www.flickr.com/photos/251449...in/photostream/

When my site is viewed with text set to "Larger," the text in the middle left section doesn't fit:

http://www.flickr.com/photos/251449...in/photostream/

Fair enough. But here's what has me stumped: when the site is viewed with the text set to "Largest," it fits again:

http://www.flickr.com/photos/25144998@N00/4997174984/

I've learned alot very quickly in the last week or so, but this really has me over a barrel. Any ideas?

CSS

Code:

body
{
background-color: #393939;
font-family: sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}

.header
{
text-align: right;
font-weight: bold;
font-size: 1.6em;
}

.clickables
{
text-align: right;
font-weight: bold;
font-size: 0.95em;
}

.content
{
text-align: right;
font-size: .8em;
}

.navbutton
{
float: right;
width: 5em;
background-color: #ffcc00;
color: #666666;
height: 1em;
text-align: right;
font-weight: bold;
font-size: 0.95em;
margin: .75em 0.2em .75em 0em;
}

#mother
{
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
width:expression(document.body.clientWidth < 500? "500px": "auto" );
}

#UpperLeftWrapper
{
float: left;
width: 35%;
background-color: #7d7d7d;
}

#UpperLeft
{
height: 8em;
margin: 0;
background-color: #7d7d7d;
}

#UpperRightWrapper
{
float: right;
width: 65%;
background-color: #666666;
}

#UpperRight
{
float: right;
width: 7em;
height: 7em;
margin: 0;
padding: .5em;
background-color: #666666;
color: #ffcc00;
}

#MiddleLeftWrapper
{
float: left;
width: 35%;
background-color: #ffd426;
}

#MiddleLeft
{
float: right;
width: 8em;
height: 1.2em;
color: #7d7d7d;
background-color: #ffd426;
margin: 0;
padding: 0.6em;
}

#MiddleRightWrapper
{
float: left;
width: 65%;
background-color: #ffcc00;
}

#MiddleRight
{
float: right;
width: 24.85em;
height: 2.45em;
background-color: #ffcc00;
margin: 0em .6em 0em 0em;
}

#LowerLeftWrapper
{
float: left;
width: 35%;
background-color: #e5e5e5;
}

#LowerLeft
{
float: right;
width: 5.8em;
height: 75em;
color: #7d7d7d;
background-color: #e5e5e5;
padding: 0.7em;
}

#LowerRightWrapper
{
float: left;
width: 65%;
background-color: #ffffff;
}

#LowerRight
{
float: right;
height: 88em;
color: #666666;
background-color: #ffffff;
padding: 0.8em 1.1em 2em 2em;
}

HTML

Code:

<!DOCTYPE html>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<title>layout three</title>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>
<div id="mother">

	<div id="UpperLeftWrapper">
		<div id="UpperLeft" class="header">
		</div>
	</div>
	<div id="UpperRightWrapper">
		<div id="UpperRight" class="header">
		<p>demonstration<br>layout<br>number two</p> 
		</div>
	</div>

		
	<div id="MiddleLeftWrapper">
		<div id="MiddleLeft">
		  <div class="clickables">
		  <p>additional reading</p>
		  </div>
		</div>
	</div>
	<div id="MiddleRightWrapper">
		<div id="MiddleRight">
		  <div class="navbutton">
		  <p>tab one</p>
		  </div>		  
		  <div class="navbutton">
		  <p>tab two</p>
		  </div>
		  <div class="navbutton">
		  <p>tab three</p>
		  </div>
		  <div class="navbutton">
		  <p>tab four</p>
		  </div>
		  <div class="navbutton">
		  <p>tab five</p>
		  </div>
		</div>
	</div>

	<div id="LowerLeftWrapper">
		<div id="LowerLeft" class="clickables">
		  <p>
		  first link<br>
		  second link<br>
		  third link<br>
		  fourth link<br>
		  fifth link<br>
		  sixth link<br>
		  seventh link<br>
		  eighth link<br>
		  </p>	
		</div>
	</div>
	<div id="LowerRightWrapper">
		<div id="LowerRight" class="content">
		  <p>
		  Body content here...
		  </p>
		</div>
	</div>

</div>
</BODY>
</HTML>

Thanks in advance for any advice!