Floating Issue

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
gazzieh
Forum Commoner
Posts: 40
Joined: Wed May 19, 2010 7:46 am

Floating Issue

Post by gazzieh »

I have an issue and I cannot find the solution anywhere.

I have an issue with viewing a webpage in IE7 or below. IE8 is fine and all FFs are perfect; but it seems to be related to floating or possibly having a width:auto.

First, screenshots (IE in Compatibilty Mode then Firefox):

Image

Image

Code: Select all

@charset "utf-8";
/* 	CSS Document
 	Written by Gary Newport
	Started: May 2010
	Version 0.3

	MAIN DOCUMENT INFORMATION */

body
	{
	background-color: #eee;
	font-family: Arial, Helvetica, sans-serif;
	}
	
img
	{
	border-style: none;
	}

/* 	Font Definitions */
	
.title
	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	}
	
.author
	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: right;
	color: #9475B9;
	}

/* 	Button Definitions */
	
#login_btn
	{
	background: url(images/buttons/login.png) center no-repeat;
	height: 75px;
	width: 50px;
	border: none;
	vertical-align: -15px;
	}
	
#save_btn
	{
	background: url(images/buttons/save.png) center no-repeat;
	height: 75px;
	width: 50px;
	border: none;
	vertical-align: -15px;
	}

#login:hover, #save:hover
	{
	cursor: pointer;
	}
		
/* 	Container DIV definitions */
	
#container
	{
	margin: auto;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 900px;
	}
	
#content_top
	{
	position: relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	width: 900px;
	background: #eee url(images/bcktop.png) center top no-repeat;
	}

#top_padding
	{
	height: 110px;
	}

#nav
	{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #9475B9;
	font-weight: bold;
	width: 860px;
	text-align:right;
	}
	
#content_top a
	{
	color: #000;
	text-decoration: none;
	}
	
#content_top a:hover
	{
	color: #00f;
	text-decoration: underline;
	}
	
#content_main
	{
	position: relative;
	width: 900px;
	min-height: 200px;
	background: #eee url(images/bckmid.png) center top repeat-y;
	}
	
#content_bottom
	{
	height: 128px;
	width: 900px;
	background: #eee url(images/bckbot.png) center bottom no-repeat;
	}
	
#content_bottom div
	{
	position: relative;
	top: 40px;
	text-align: center;
	font-size: 9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

#main
	{
	position: relative;
	width: 830px;
	left: 35px;
	}
	
#anchor1
	{
	height: 140px;
	width: 100px;
	margin-left: 100px;
	background: url(images/button.png) center center no-repeat;
	}
	
#anchor1:hover
	{
	height: 140px;
	width: 100px;
	margin-left: 100px;
	background: url(images/button_dn.png) center center no-repeat;
	}

/* MESSAGE BOX PARAMETERS */

.MSG
	{
	border: #7E58AC 1px solid;
	width: 200px;
	min-height: 20px;
	background-color: #FFFFFF;
	}
	
.MSG_Top
	{
	width: 100%;
	height: 12px;
	background-color: #7E58AC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 10px;
	text-align: center;
	font-weight: bold;
	}
	
.MSG_Main
	{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	}
	
.MSG_Main p, .MSG_Main a
	{
	font-size: 10px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;
	}
	
.MSG_Main a:hover
	{
	color: #00f;
	text-decoration: underline;
	}
	
/* Posting Space */

#area_left
	{
	float: left;
	min-width: 200px;
	}

#area_right
	{
	float: right;
	}
	
/* Article Space */

#article
	{
	width: 600px;
	}
	
/* Main Menu Definitions */

.category
	{
	width: auto;
	float: left;
	}
	
.category .topic
	{
	float: right;
	}

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link href="rro.css" rel="stylesheet" type="text/css">		
        <title>Welcome to Revision Rocks Online</title> 
	</head>
	<body>
		<div id="container">
			<div id="content_top">
					<div id="top_padding">
</div>
<div id="nav">
	<span style="vertical-align: 40px;">Welcome,&nbsp;Mr&nbsp;Admin</span>    <a href="index.php?action=control"><img src="images/buttons/control.png" alt="Control Room"></a>    <a href="index.php"><img src="images/buttons/home.png" alt="Home Page"></a>
    <a href="./cmsadmin/login.php?action=logout"><img src="images/buttons/logout.png" alt="Log Out"></a>
</div>
<div style="clear:both;"></div>			</div>
			<div id="content_main">
				<div id="main">
                	<div id="area_left">
                    	<div class="category">
                        	<img src="images/buttons/history.png" alt="History">
                            <div class="topic">
                            	<img src="images/buttons/germany.png" alt="Germany 1919-1945">
                            </div>
                            <div class="topic">
                            	<img src="images/buttons/coldwar.png" alt="The Cold War">
                            </div>
                            <div class="topic">
                            	<img src="images/buttons/ameridiv.png" alt="America 1941-1980">
                            </div>
                            <div class="topic">
                                <img src="images/buttons/america.png" alt="America 1919-1941">
                            </div>
                        </div>
                        <div style="clear:both;"></div>
                        <br>
                        <div class="category">
                    		<img src="images/buttons/english.png" alt="English">
                            <div class="topic">
                            	<img src="images/buttons/miceandmen.png" alt="Of Mice and Men">
                            </div>
                        </div>
                    </div>
                    <div id="area_right">
						
<div class="MSG" style="left: 620px;">
	<div class="MSG_Top">
    	Latest Information
    </div>
    <div class="MSG_Main">
		<p><a href="article.php?id=4&act=v">One Flew Over The Cuckoo's Nest</a></p><p><a href="article.php?id=2&act=v">Second World War</a></p><p><a href="article.php?id=1&act=v">Of Mice and Men</a></p>    </div>
</div>
<br>                        <div class="MSG" style="left: 620px;">
	<div class="MSG_Top">
    	Useful Key
    </div>
    <div class="MSG_Main">
    <table>
		<tr>
			<td><a href="./cmsadmin/login.php?action=logout"><img src="images/icons/logout.png" alt="Log Out"></a></td>
			<td><p style="text-align:left;"><a href="./cmsadmin/login.php?action=logout">Log out</a></p></td>
		</tr>
		<tr>
			<td><a href="index.php"><img src="images/icons/home.png" alt="Home Page"></a></td>
			<td><p style="text-align:left;"><a href="index.php">Return to the home page</a></p></td>
		</tr>
		        	<tr>
								<td><a href="control.php" ><img src="images/icons/control.png" alt="Control Room"></a></td>
				<td><p style="text-align:left;"><a href="control.php" >Enter the Control Room</a></p></td>
							</tr>
        </table>
    </div>
</div>
<br>					</div>
                    <div style="clear:both;"></div>
				</div>
            </div>
            <div id="content_bottom">
				<div style="width: 500px; left: 200px;">
            		<a href="http://validator.w3.org/" target="_blank"><img src="images/valid-html401.png" alt="Valid HTML 4.0" style="float: left; left: 35px;"></a>
Copyright Revision Rocks Online &copy;2010&nbsp;&nbsp;&brvbar;&nbsp;&nbsp;Contact Us&nbsp;&nbsp;&brvbar;&nbsp;&nbsp;About Us
<a href="http://jigsaw.w3.org/css-validator/" target="_blank"><img src="images/vcss.gif" alt="Valid CSS 2.1" style="float: right"></a>                </div>
            </div>
		</div>	</body>
</html>
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: Floating Issue

Post by Jade »

I don't think IE versions 7 and below support the width:auto; functionality. Try defining actual percentages, ie width: 75%;
gazzieh
Forum Commoner
Posts: 40
Joined: Wed May 19, 2010 7:46 am

Re: Floating Issue

Post by gazzieh »

Jade wrote:I don't think IE versions 7 and below support the width:auto; functionality. Try defining actual percentages, ie width: 75%;
Thanks Jade

Actually it was easier to fix the actual width rather than using a %.
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: Floating Issue

Post by Jade »

As long as you're aware that it won't stretch to auto-fill the window as the window size changes then I'd say you're good to go :)
Post Reply