navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

Clear Issue Firefox

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Clear Issue Firefox
Page: [1]
 
markhawker

 

Posts: 511
Joined: 5/31/2004
From: UK
Status: offline

 
Clear Issue Firefox - 6/22/2006 9:36:53   
Hi all, I'm having a problem with clearing DIVs in Firefox (they seem to "work" in IE). I have a main content DIV that has two columns - one floated left and the other floated right (see attached) - and my problem comes when I have more than one DIV loaded at the same time. I'm using clear: left on my left floated DIVs which IE understands but Firefox appears to want to position the floated right element in a different position. Has anyone got any ideas? I can upload the CSS if that helps?

Cheers in advance,



Thumbnail Image
:)

Attachment (1)

_____________________________

Mark Hawker
personal - http://www.meeid.com/markhawker
markhawker

 

Posts: 511
Joined: 5/31/2004
From: UK
Status: offline

 
RE: Clear Issue Firefox - 6/22/2006 9:38:32   
IE shows:


Thumbnail Image
:)

Attachment (1)

_____________________________

Mark Hawker
personal - http://www.meeid.com/markhawker

(in reply to markhawker)
Tailslide

 

Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Clear Issue Firefox - 6/22/2006 11:11:17   
Mark

Can we see the live code please - it's not really possible to tell from the image what's going on - we'd really need to see the live site to be able to help. Failing that, the markup and full CSS

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to markhawker)
markhawker

 

Posts: 511
Joined: 5/31/2004
From: UK
Status: offline

 
RE: Clear Issue Firefox - 6/22/2006 11:17:46   
I'm not able to get you a live copy at the minute, but my code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
	<title>Project Sunbeam - Logged In</title>
		<meta name="robots" content="none" />
		<meta name="description" content="Sunbeam is a fully customisable, all-in-one CRM and Project Management solution for small to medium businesses." />
		<meta name="keywords" content="sunbeam, crm, Customer Relationship Manager, Mark Hawker, thebubblejungle, contacts, modules" />
		<meta name="save" content="history" />
        <script type="text/javascript" src="http://localhost/sunbeam/themes/default/static/js/sorttable.js"></script>
		<link rel="stylesheet" href="http://localhost/sunbeam/themes/default/static/css/stylesheet.css" type="text/css" />
        <!-- Expand/Collapse Menus //-->
        <script type="text/javascript">
		function expand(location){
   			if(document.getElementById){
      			var foc=location.firstChild;
      			foc=location.firstChild.innerHTML?location.firstChild:location.firstChild.nextSibling;
      			foc.innerHTML=foc.innerHTML=='+'?'-':'+';
      			foc=location.parentNode.nextSibling.style?location.parentNode.nextSibling:location.parentNode.nextSibling.nextSibling;
      			foc.style.display=foc.style.display=='block'?'none':'block';
            }
        }
        </script>
</head>

<body >
<div id="pagewidth">

	 <div id="header"><img src="http://localhost/sunbeam/themes/default/static/img/sunbeamlogo.gif" alt="Project Sunbeam" width="250" height="100" /></div>

     <div id="navigation">
			<ul><li id="current"><a title="home">home</a></li><li><a href="http://localhost/sunbeam/modules/tasks/" title="tasks">tasks</a></li><li id="logout"><a href="http://localhost/sunbeam/modules/general/login.php?logout=1" title="logout">logout</a></li></ul>
     </div>

     <div id="wrapper" class="clearfix">

     	<div id="maincontent">
        
     <div id="usernavigation" class="clear">
     	<div class="minwidth">
        <div class="layout">
        <div class="container">
        	<span class="heading"><a href="javascript:void(0)" class="toplevel" onclick="expand(this)" title="Click to expand/contract"><span class="button">+</span>user menu</a></span>
      		<div class="continued"><hr />
                <span class="heading"><a href="javascript:void(0)" class="toplevel" onclick="expand(this)"><span class="button">+</span>Change Details</a></span><div class="continued">                <form accept-charset="UTF-8" method="post" action="modules/users/index.php?action=edituser" id="edituser" enctype="application/x-www-form-urlencoded">	<table class="tableform"><tr>	<td class="textlabel">Full Name</td>	<td><input name="fullname" type="text" class="" id="fullname" size="20" maxlength="96" value="Mark Hawker"  /></td></tr><tr>	<td class="textlabel">Company Name</td>	<td>
        				<select name="company" id="company">            			<option selected="selected" value="1">thebubblejungle</option><option value="2">Test Company</option>                	
                    	</select>
                    </td></tr><tr class="hidden"><td colspan="2"><input name="oldname" type="hidden" id="oldname" value="Mark Hawker"  /></td></tr><tr class="hidden"><td colspan="2"><input name="oldcompany" type="hidden" id="oldcompany" value="thebubblejungle"  /></td></tr><tr class="hidden"><td colspan="2"><input name="oldcompanyid" type="hidden" id="oldcompanyid" value="1"  /></td></tr><tr class="hidden"><td colspan="2"><input name="thisusername" type="hidden" id="thisusername" value="mark"  /></td></tr><tr>	<td class="textlabel"></td>	<td><input name="submit1" type="submit" class="" id="submit1" value="Submit"  /></td></tr>	</table></form>                </div>
                <span class="heading"><a href="javascript:void(0)" class="toplevel" onclick="expand(this)"><span class="button">+</span>Change Password</a></span><div class="continued">                <form accept-charset="UTF-8" method="post" action="modules/users/index.php?action=changepassword" id="changepassword" enctype="application/x-www-form-urlencoded">	<table class="tableform"><tr>	<td class="textlabel">Password</td>	<td><input name="oldpassword" type="password" class="" id="oldpassword" size="20" maxlength="32" value=""  /></td></tr><tr>	<td class="textlabel">New Password</td>	<td><input name="newpassword" type="password" class="" id="newpassword" size="20" maxlength="32" value=""  /></td></tr><tr>	<td class="textlabel">Confirm Password</td>	<td><input name="confirmpassword" type="password" class="" id="confirmpassword" size="20" maxlength="32" value=""  /></td></tr><tr class="hidden"><td colspan="2"><input name="username" type="hidden" id="username" value="mark"  /></td></tr><tr>	<td class="textlabel"></td>	<td><input name="submit2" type="submit" class="" id="submit2" value="Submit"  /></td></tr>	</table></form></div>
            </div>
		</div>
        </div>
        </div>
     </div>
     <div id="usernavigationicons" class="clear">
     	<div class="minwidth">
        <div class="layout">
        <div class="container">
        	<img src="http://localhost/sunbeam/themes/default/static/img/icons/user_m.gif" alt="Mark Hawker" height="16" width="16" />
            <img src="http://localhost/sunbeam/themes/default/static/img/icons/briefcase.gif" alt="thebubblejungle" height="16" width="16" />
            <img src="http://localhost/sunbeam/themes/default/static/img/icons/cli.gif" alt="Client" height="16" width="16" />
            <img src="http://localhost/sunbeam/themes/default/static/img/icons/bricks.gif" alt="0 Projects" height="16" width="16" />
            <img src="http://localhost/sunbeam/themes/default/static/img/icons/time.gif" alt="Login: 2006-06-22 15:58:16" height="16" width="16" />
            <img src="http://localhost/sunbeam/themes/default/static/img/icons/computer.gif" alt="IP: 127.0.0.1" height="16" width="16" />
		</div>
        </div>
        </div>
     </div>
    <div id="mytasks">
    	<span class="heading"><a href="javascript:void(0)" class="toplevel" onclick="expand(this)" title="Click to expand/contract"><span class="button">+</span>My Tasks (0)</a></span>
      		<div class="continued"><hr /><table cellspacing="0" class="" id="mytaskstable"><tr class="headerrow">
                	<td>Subject</td>
                    <td>Status</td>
                    <td>Start Date</td>
                    <td>End Date</td>
                    <td>Completed</td>
                    <td>Category</td>
                </tr>	<tr class="even">
                            	<td colspan = "6">No Results Found</td>
                            </tr></table>
            </div>
    </div>

        </div> <!-- close maincontent //-->

	</div> <!-- close wrapper //-->

	<div id="footerlinks"><span id="modules"><a href="http://localhost/sunbeam/" id="home"><img src="http://localhost/sunbeam/themes/default/static/img/icons/home.gif" alt="Home" width="16" height="16" /></a><a href="#" id="Links"><img src="http://localhost/sunbeam/themes/default/static/img/icons/Links.gif" alt="Links" width="16" height="16" /></a><a href="#" id="Help"><img src="http://localhost/sunbeam/themes/default/static/img/icons/Help.gif" alt="Help" width="16" height="16" /></a></span></div>

	<div id="footer">Copyright 2006 - Project Sunbeam</div>
    <div id="disclaimer">Project Sunbeam Development Version 0.1</div>

</div> <!-- close pagewidth //-->
</body>
</html>


/* Page Defaults */

html, body {
margin: 0;
padding: 0;
background: #885;
font-family: "Verdana", Tahoma, Arial, sans-serif;
color: #000;
width: 100%;
}

hr { height: 1px; color: #ddc; background: #ddd; border: 0; }

p { font-size: 0.8em; }

span { font-size: 0.8em; }

.error {
color: #f00;
background: #fff url('../img/icons/cancel.gif') no-repeat;
width: auto;
padding-left: 20px;
display: block;
font-weight: bold;
/* white-space: nowrap; */ /* w3c */
}

div#pagewidth {
width: auto;
/*text-align: left;
margin-left: auto;
margin-right: auto;*/
}

div#header {
position: relative;
height: 100px;
background: #ff9;
color: #885;
width: 100%;
padding-right: 0;
/* border-bottom: 1px solid #aaa; */
}

div#header span#title { }
div#header img { border: 0; float: right; }

/* Navigation Styles */

div#navigation {
position: relative;
height: 30px;
background: #ddd; /* w3c */
/* background: #ddd url('../img/navigationbar.gif') repeat-x; */
/*width:;*/ /* w3c */
border-bottom: 1px solid #aaa;
text-align: left;
color: inherit; /* w3c */
}

div#navigation ul {
height: 23px;
margin: 0;
padding-top: 7px;
padding-bottom: 0;
padding-left: 0;
font-size: smaller;
width: 100%; /* w3c */
/*color: #aaa;*/
white-space: nowrap;
}

div#navigation li {
/*padding-top: 5px;*/ /* w3c */
list-style-type: none;
display: inline;
padding: 0;
}

div#navigation li a {
text-decoration: none;
padding: 7px 10px;
}

div#navigation li a:link { color: #aaa; background: #ddd; }

div#navigation li a:visited { color: #aaa; background: #ddd; }

div#navigation li a:active { color: #ddd; background: #ff9; }

div#navigation li a:hover { color: #aaa; background: #ff9; }

li#current a { font-weight: bold; color: #aaa; background: #ff9; }
/* Fixed For IE */ div#navigation li#current { font-weight: bold; color: #333; background: #ff9; }

li#logout a { /* color: #fff; */ /* w3c */ }
/* Fixed For IE */ div#navigation li#logout { }

div#maincontent {
float: left;
display: block;
width: 100%; /* w3c */
position: relative;
/*min-height: 100px;
height: auto !important; height: 10em;*/
}

div#wrapper {
padding: 5px;
background: #fff;
color: #000;
}

div#footerlinks {
height: 30px;
background: #fff;
color: #000;
border-top: 1px solid #ddd;
width: 100%;
text-align: right;
display: block;
}

/* Images used in footer links */

div#footerlinks img { border: 0; margin-top: 5px; margin-right: 5px; }

div#footer {
height: 30px;
background: #ff9;
color: #000;
clear: both;
border-bottom: 1px solid #aaa;
border-top: 1px solid #aaa;
line-height: 2.6em;
font-size: 0.7em;
text-align: center;
}

div#disclaimer {
background: #885; /* w3c */
color: #fff; /* w3c */
clear: both;
font-size: 0.7em;
text-align: center;
padding-top: 5px;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-Mac */

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* End Hide from IE-Mac */

/* Form Styles */

form { margin: 5px; }

input, textarea, select {
border: 1px solid #aaa;
font-family: "Verdana", Tahoma, Arial, sans-serif;
/*color: #000;*/
font-size: 0.8em;
/* background: inherit; */
}

input.text { padding-left: 2px; }
input button { }

input.fielderror { border: 1px solid #f00; background: #ffc; color: #000; }

table.tableform { }
table.tableform tr { }
table.tableform td { }
table.tableform td.textlabel { font-size: 0.8em; white-space: nowrap; }
table.tableform tr.hidden { display: none; } /* Hide hidden form elements */

/* Min-Width Fix http://www.webreference.com/programming/min-width/ */

* html .minwidth { padding-left: 240px; }
* html .container { margin-left: -240px; position: relative; }

/*\*/
* html .minwidth, * html .container, * html .content, * html .layout  { height: 1px; }
/**/

/* User Navigation */

div#usernavigation {
position: relative;
height: auto;
/* margin-right: 5px; */
background: #ffc;
color: #000; /* w3c */
width: 25%;
min-width: 240px;
border: 1px solid #ddd;
text-align: left;
float: left;
padding: 5px;
margin-bottom: 5px;

}

div#usernavigation img { margin-right: 5px; vertical-align: middle; }
div#usernavigation span.user { }
div#usernavigation span.heading { }

div#usernavigationicons {
position: relative;
height: auto;
/* margin-right: 5px; */
background: #ffe;
color: #000; /* w3c */
width: 25%;
min-width: 240px;
border: 1px solid #ddd;
text-align: left;
float: left;
padding: 5px;
margin-bottom: 5px;
}

div#usernavigationicons img { margin-right: 5px; vertical-align: middle; }
div#usernavigationicons span.user { }
div#usernavigationicons span.heading { }

div.clear { clear: left; }

/* My Tasks */

div#mytasks {
/*
position: relative;
height: auto;
margin-right: 5px;
*/
margin-bottom: 5px;
float: right;
width: 70%;
background: #ffe;
color: #000; /* w3c */
border: 1px solid #ddd;
text-align: left;
padding: 5px;
}

div#mytasks img { margin-right: 5px; vertical-align: middle; }
div#mytasks span.user { }
div#mytasks span.heading { }
div#mytasks hr { height: 1px; color: #ddc; background: #ddd; border: 0; }

table#mytaskstable { width: 100%; border: 1px solid #ddd; font-size: 0.9em; }
table#mytaskstable tr { height: 25px; }
table#mytaskstable td { padding: 3px; }

table#mytaskstable tr.headerrow { background: #ffd; color: #777; }
table#mytaskstable tr.headerrow  a { text-decoration: none; background: auto; color: #777; }
table#mytaskstable tr.headerrow a:hover { background: auto; color: #777; }
table#mytaskstable tr.headerrow td.right { text-align: right; }

table#mytaskstable tr.odd { background: #eee; color: #333; }
table#mytaskstable tr.even { background: #fff; color: #333; }

table#mytaskstable td.subject { width: 40%; }
table#mytaskstable td.status { width: 10%; }
table#mytaskstable td.start { width: 15%; }
table#mytaskstable td.end { width: 15%; }
table#mytaskstable td.completed { width: 10%; }
table#mytaskstable td.category { width: 10%; }

/* Collapsible Menus */

.save { /* behavior: url(#default#savehistory); */ }
a.toplevel { color: #888; text-decoration: none; display: block; background: inherit; /* w3c */ }
a.toplevel:hover { color: #777; background: inherit; /* w3c */ }
a.toplevel:active { color: #aaa; background: inherit; /* w3c */ }
a.toplevel span.button { padding-right: 2px; }
.continued { display: none; font-size: 0.9em; }


_____________________________

Mark Hawker
personal - http://www.meeid.com/markhawker

(in reply to Tailslide)
Tailslide

 

Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Clear Issue Firefox - 6/22/2006 11:31:26   
It appears the mytasks div isn't in the right place to achieve the effect you want.

If you move it up to just after the first left hand box div thingy then it will float to the right level. It will also do this if you put the right hand div before the two left hand ones (probably neater and less confusing to do it this way)

If you particularly need the right hand div to be after the two left hand ones in the code then you'll need to place the two left hand divs inside another div and float that (obviously remove all the floats from the now contained inner divs). This will also achieve the correct effect.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to markhawker)
markhawker

 

Posts: 511
Joined: 5/31/2004
From: UK
Status: offline

 
RE: Clear Issue Firefox - 6/22/2006 12:03:13   
Thanks a bunch, the second one worked as doing the first simply caused the left hand side DIVs to not position correctly!

_____________________________

Mark Hawker
personal - http://www.meeid.com/markhawker

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Clear Issue Firefox
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts