CSS Forum

**FuZion** · 10-15-2008, 11:55 PM

Hi there,

I have a CSS based web page that is not functioning correctly in older versions of IE. The orange box of my "box" classes does not stretch to the specified width value. The website is http://northvillebasketball.com/girls/

I cannot figure out why this does not work, you will notice the boxes along the right side of the page.

The CSS for the boxes..

Code:

.box {
    position: relative;
    left: 10px;
    margin-bottom: 10px;
    }
    
    .box .outer{
        background: url(/girls/images/box-header-right.png) top right no-repeat;
        width: inherit;
        float: left;
        height: 31px;
        }
    
    .box .inner {
        background: url(/girls/images/box-header-left.png) top left no-repeat;
        float: left;
        position: relative;
        right: 10px;
        height: 30px;
        padding-left: 10px;
        padding-top: 5px;
        font-size: 15px;
        color: #FFF;
        font-weight: bold;
        }
        
    .box .box-content {
        position: relative;
        right: 10px;
        clear: both;
        padding: 3px;
        }

The HTML...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="/girls/global/style.css" />
<title>Northville High School Girls Basketball | Northville, MI</title>

<script type="text/javascript" src="global/js/jquery.js"></script>
<script type="text/javascript" src="global/js/jquery-validate.js"></script>
<!-- JS REMOVED FOR POST LENGTH -->
</head>

<body>
    <div id="page-outer-container">
		<div id="page-shadow">
        	<div id="page-inner-container">
            	<div id="page-header">
                
                </div>
                <div id="page-body">
                	<div id="page-home-left">
                    	<div id="welcome">
                            <font style="font-size:16px; font-weight: bold;">Welcome to the official Website of Northville High School Girls Basketball!</font>
                            <br /><br />Please bear with us as we work on building our Web presence.  We hope to use this site as a channel of communication for use with not only current players and families, but also as a means to promote our program to our supporters and the general public.  
                            
                            <br /><br />We want to bridge the gap with our distinguished Northville Basketball Alumni.  With this presence, they can keep us updated on their whereabouts while following the progress of the current team at the same time.
                             
                            <br /><br />As you will see, our history and tradition is extremely important to us.  Compiling historical information and statistics seems like a never-ending and daunting task. We are always looking for resources (print or people) to assist with missing data and/or verification. If you feel something is misrepresented on these pages, please contact us. 
                            
                            <br /><br />We plan to continually add to our existing content. Please share your ideas, suggestions and thoughts on ways to improve our Website.
                        </div>
                    </div>
                    <div id="page-home-right">
                    	<div class="box" style="width:192px;">
                        	<div class="outer"><div class="inner">Contact Us</div></div>
                            
                            <div class="box-content">		
                            	<b>School:</b><br />
                                xxx<br />
                                xxx<br />
                                <br />
                                <b>Phone:</b> xxx<br />
                                <a style="color:#454545;font-weight:bold;text-decoration:none;" href="mailto:gudithto@northville.k12.mi.us">Email</a>
                            </div>
                        </div>
                        <div class="box" style=" width:192px;">
                        	<div class="outer"><div class="inner">Our Mailing List</div></div>
                            
                            <div class="box-content">		
                            	<center>
                                	<div id="mail_msg" style="color:#F00;font-weight:bold;padding:5px;font-size:11px;"></div>
                                    Enter your email address:<br />
                                	<form id="mail_list" action="index.php">
                                        <input name="email" type="text" style="width: 140px;" /><br />
                                        <input type="submit" value="Subscribe" />
                                    </form>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Thank you in advance, any help is greatly appreciated!

FuZion

**LadynRed** · 10:56 AM

Ok, 1 you don't need all that position:relative.

When you float a div, you MUST give it a defined width.

You also have not CLEARED your floats and your "page container" isn't 'containing' anything.

You have a serious case of div-itis- definitely overkill. You don't need a div within a div within a div to make an orange button with text on it.

Please.. get rid of that dead <font> tag and use CSS to style your text. Putting an inline style on a <font> tag is putting lipstick on a pig!

**FuZion** · 10-16-2008, 03:51 PM

If I don't need all those divs, what would you suggest? I created it like that so that I could reuse the boxes with different widths at different parts of the site. What should I do instead?