Page 1 of 1

Floating Issue

Posted: Wed Jun 23, 2010 3:49 pm
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>

Re: Floating Issue

Posted: Wed Jul 07, 2010 2:23 pm
by Jade
I don't think IE versions 7 and below support the width:auto; functionality. Try defining actual percentages, ie width: 75%;

Re: Floating Issue

Posted: Wed Jul 07, 2010 3:39 pm
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 %.

Re: Floating Issue

Posted: Thu Jul 08, 2010 9:48 am
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 :)