CSS - Ie Inexplicable Sizing - Help!

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

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?

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.

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

So my code works fine in webkit(Safari/Chrome), and it almost works in Firefox. If you want to try it out for yourself, just make sure you use a large image, like 500x500 pixels or larger so you can see what I mean.

In the tutorial I watched they were able to make it work in Firefox, and the video is almost 1yr old, so it should work.

Code:

<html>
<head>
<title>Background Size and Images</title>
<style>

body { background: blue; 
 margin: 0;
 padding: 0; }

#container { background: white;
 width: 75%;
 height: 600px;
 padding: 50px;
 margin: 1em auto; }

#container div { background: tan; 
 border: 1px solid; 
 margin-right: 50px;
 float: left; }

#container #one { width: 80%;
 height: 100px; 
 background: url(samplesample.png) no-repeat;
 -webkit-background-size: 100%;
 -moz-background-size: 100%; }

#container #two { width: 150px;
 height: 50px; 
 background: url(samplesample.png) no-repeat;
 -webkit-background-size: 150px 50px;
 -moz-background-size: 150px 50px; }

#container #three { width: 100px;
 height: 250px;
 background: url(samplesample.png) repeat;
 -webkit-background-size: 25px 25px;
 -moz-background-size: 25px 25px; }

</style>
</head>

<body>

<div id="container">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</div>

</body>
</html>

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!

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

Hi folks,
I am super excited about the box-sizing css rule. I've always thought the original IE box model was better and it was a shame that we had to ditch their superior model for the w3c one to be cross browser.

Now all the browsers are starting to support box-sizing which will allow me to go back to the model I prefer. Unfortunately, pioneering the border-box sizing model, the only way I can get to it (that I know of) in IE6/7 is via quirksmode. Quirksmode has a whole bunch of other issues I don't want so this doesn't see a solution.

I'm hoping someone out there will no how I can trigger box-sizing: border-box; in IE6/7 without quirksmode. If it's possible I'll be ditching the w3c box model in a hurry.

Cheers,
Pete

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.

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.

Help I just can't get this thing to size. I've tried all sort of stuff This is so simple I must be missing something obvious.

Here is what I want:
on the left the rss feed link. to it's right the legend link with a button background behind it. I've gotten stuff like this to work before so I must be missing something.

Here is what it does:
The RSS feed link is fine, but the problem is the bg graphic is truncating and I want all of it to show. It also cuts it off in the vertical direction.

Here is the current code (may change again by the time you look at it though!)

Code:

<a href="rss/calrecent.rss"   ><img src="images/feed-icon-14x14.png" height="14" width="14" alt="rssfeed" border="0" /> Calendar FEED </a> 
<span  id="lar1" style="background: url(images/leg-button.gif) top left no-repeat; height: 31px; width: 183px;  " ><a href="#" onclick="return dynpop('genrelegend',600,700);" style="text-align: center;"> Legend</a> </span>

I tried putting the background on the <a> element and setting its size with a style. and making it a#lar1 but that didn't work. So my latest try would be to size a span element. Here is the style of lar1

span#lar1 { height: 31px; width:183px; }

Here it is in situ http://demo.tixrus.us/calendar.php

Thanks

I know I've made this kind of thing work before so what stupid thing am I missing in my blindness and frustration?? Thanks,
and the one who answers will probably be Kravvitz but anybody can take a swing at it.

GO SOX!

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.

Isnt it annoying when you have created a fantastic design with unordered list menus, its looks very fantastic then you open it up on someone elses browser and the design breaks because they have increased/descreased the text size through the browser.

One alternative to this is to use text sizes that prevent modifying the text size through browser. However, this doesnt FIX the problem, it only prevents it which means old lady wont be able to read your site.

My main problem is the fact that I have background images and when I increase text size, the text increases, but the background images to steatch with the content.

Anyway to fix this?