CSS - Box-sizing: Border-box In Ie Strict Mode

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?

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

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?

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

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

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?

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

Hi.

Have created some simple tabs using table cells.

Active tab should have bottom-border color equal to page background-color.
Non-active tabs should have bottom-border=black.

Works fine in IE, but does not work very well in Firefox.

If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell.

So is there a way to make this work in both IE and Firefox...
and hopefully most other browsers...

See code below:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
	a.menu_top:link {color: #000000; text-decoration: none;}
	a.menu_top:visited {color: #000000; text-decoration: none;}
	a.menu_top:hover {color: #000000; text-decoration: none;}
	a.menu_top:active {color: #000000; text-decoration: none;}
	
	td.menu_top_passive { 
		background-color: #777;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #000000 solid;
		
		text-align: center;
		
		cursor:pointer;
		font-weight: bold;
		
		padding: 5px 20px 5px 20px; 
		 
		margin: 0;
		 
	}
		
	td.menu_top_active { 
		
		background-color: #bbb;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #bbb solid;
		
		text-align: center;
	
		cursor:pointer;
		font-weight: bold;
		padding: 5px 20px 5px 20px;
		
		margin: 0;
		
	}
	

</style>

<script language="JavaScript">


function change(id, url) {
	for (i=1; i<6; i++){
		eval("document.getElementById("+i+").className='menu_top_passive'");
	}	
	eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>

</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?

</center>
<br><br><br>
	<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
		<tr>
			<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a  href="javascript:;" class="menu_top">Item 1</a></td>
			<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>	 
			<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a  href="javascript:;" class="menu_top">Item 3</a></td>				
			<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a  href="javascript:;" class="menu_top">Item 4</a></td>
			<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a  href="javascript:;" class="menu_top">Item 5</a></td>

		</tr>
	</table>
</body>
</html>

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?

Is there anyway to stop someone from changing the text size with their browser? Before everyone starts shouting "NO DON'T DO THIS!", I don't want to do it for everything. I have some buttons that are created with CSS and lose the formating when the text size is changed. I tried adding:

Code:

font-size:8pt;

but that didn't work.

I have a combo box written via JS that only seems to work in quirks mode in firefox. In IE it works in both quirks and SC mode.

here is my js code (i know this is the CSS forum but javascript is changing the css)

Code:

var fInitCombo=true;	
	// resdraw the combo box locations based on the windo resizing -- if need be
	window.onresize=resizeCombos;
	
	function resizeCombos(complete) {
		// i take the select and place it in the right position.  I also size the text box to be the same size as the combos
		var oText, oSelect, obj, x, y;
		
		for(var i in arrCombo) {	
			x=0;
			y=0;
			oText=arrCombo[i].textField;
			oSelect=arrCombo[i].selectField;
			obj=oText;

			while(obj.tagName!="BODY") {
				x+=obj.offsetLeft;
				y+=obj.offsetTop;
				obj=obj.offsetParent;
			}	
	
			if(fInitCombo) {
				oText.style.width=oText.offsetWidth-16;
				//oSelect.selectedIndex=-1;
				fInitCombo=false;
			}
			if(complete) {
				//oSelect.selectedIndex=-1;
				oText.style.marginRight=16;
			}	
			
			oSelect.style.left=x;
			oSelect.style.top=y;
			oSelect.style.width=oText.offsetWidth+16;
			oSelect.style.clip="rect(0,"+(oText.offsetWidth+18)+","+(oText.offsetHeight)+","+(oText.offsetWidth-2)+")";
			oSelect.style.display="block";
		}
	}

	function updateCombo(instance,use,oHiddenField) {
		var oText=arrCombo[instance].textField;
		var oSelect=arrCombo[instance].selectField;
		if(use == "t")
		{
			oText.value = oSelect.options[oSelect.selectedIndex].text
		}
		else if(use == "v")
		{
			oText.value = oSelect.options[oSelect.selectedIndex].value
		}
		
		if(arguments.length > 2)
		{
			oHiddenField.value = oSelect.options[oSelect.selectedIndex].value
		}
		updateComboSelection(arrCombo[instance].selectField,arrCombo[instance].textField);
	}
	function comboLoad() {
			resizeCombos(true);

	}
	
	function updateComboSelection(oSelect,oText) 
	{
		oSelect.selectedIndex=-1;
		for(var i=0;i<oSelect.options.length;i++) 
		{
			
			//if(oSelect.options[i].text==oText.value) 
			if(oSelect.options[i].text.indexOf(oText.value) == 0)
			{
				oSelect.selectedIndex=i;
				break;
			}	
		}
	}

subset of my html
Code:

<form action="##" name="data">
<fieldset style="width:600px">
	<LEGEND>Appointment time</LEGEND>
	
	<table>
		<tr>
			<td>
				Start: <input type="text" name="start_time" id="start_time" onchange="changeHandler(this);" /><select name="start_time_select" id="start_time_select" onchange="changeHandler(this);" style="position:absolute;display:none;"><option>asdfasd</option></select>
			</td>
		</tr>
	</table>
</fieldset>
</form>

arrCombo is just an array of objects pointing to the text and select fields.

Any idea why this only works in quirks mode rather than SC mode

it's the Resize combo method is the one thats running to do the combos

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!

Hi everyone,

I've been fixing my blog's CSS issues, and managed to figure out everything expect for 1 thing:

If you re-size the browser's window or use CTRL+mouse scroll to zoom in/out, you will notice that the nav menu doesn't follow the rest of the layout, but gets positioned on its own somehow.

URL : howtohollywoodvideo dot com

Here's my CSS for the layout.

Header
Logo
Nav Menu

#header {
background: url(images/header-bg.jpg) bottom left repeat-x;
width: 100%;
float: left;
}

#header-left { /* For the Logo */
width: 490px;
float: left;
padding: 5px 0 5px 0;

#navigation {
width: 100%;
float: left;
color: #fff
font-color: #fff;
font-size: 18px;
font-family: Verdana;
}


What is the solution for my problem? I tried position: properties, but nothing could make the menu get re-sized the same way as the rest of the layout.

Hey, does anyone know if there's a mozilla equivilent to writing-mode?

um .. that's all

Thanks