Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS layout Firefox error

Status
Not open for further replies.
ClulessChris

ClulessChris

IS-IT--Management
Jan 27, 2003
890
GB
I've cobbled together the following rules for my site.
This works well with IE7, Safari, and Opera, but appears broken with Firefox (ff).
When viewed in ff the content div appears partially hidden under the navigation div (navBar), and not wide enough.

I’m able to fix this (at the cost of other browsers) by increasing the width of the wrapper div.

How can I get this to run in ff without breaking it for other browsers?

Code: 
html, body, #wrapper{
	min-height: 100%;
	width: 80%;
	height: 100%;
	}

html>body, html>body#wrapper{ height: auto; }
html>body div#header { position: fixed; }
html>body div#navBar { position: fixed; } 
.banner{ height: 99px; width: 100%; }

#wrapper{
	position: absolute; 
	left: auto; 
	Top: 0;
	width: 80%;
	Padding: 0px;
	}
	
#header{
	position: absolute;
	top: 0px;
	left: 2%;
	height: 99px;
	border: 1px solid black;
	width: 96%;
	margin: 0 auto;
	background-color: #FFFFFF;
	}
	
#navBar{
	position: absolute;
	width: 20%;
	left: 2%;
	Top: 100px;
	height: 80%;
	padding: 25px 5px 25px 5px;
	border: 1px solid black;
	font-size: .95em;
	line-height: 3em;
	background-color: #FFCC66;
	}

#content{
	float: right;
	width: 90%;
	padding: 7em 1em 0 6em;
	border: none;
	overflow: hidden; 
	font-size: 1em;
	}

Never knock on Death's door: ring the bell and run away! Death really hates that!
 
Sort by date Sort by votes
You will have to provide the markup you are using as well.

As a starting point though, I'd question the use of the absolute positioning. Is this really necessary?


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
 
Upvote 0 Downvote
ca8msm
Thanks for your responce.
the absolute positioning is to use the fixed divisions method as described
I'm very new to css but this seem a nice method.
Here's a template of my markup.
regards
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
	"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
  	<head>
  		<title>Template</title>

  		<link rel="stylesheet" type="text/css" href="Scripts and Styles\main.css">

		<!--[if IE]>
			<style type="text/css">		
				body {
					overflow: hidden;
					}
					
				div#content {
					height: auto;
					overflow: hidden;
					}
			</Style>
		<![endif]-->
    	
    	<script language="JavaScript" type="text/javascript" src="Scripts and Styles\navanddisplay.js"></script>	
    	
	</head>
	
	<Body onLoad="init();">
		<div id="wrapper">
		  <div id="header">
			<img src="An Image" class="banner" 
			alt="a Caption">
		  </div> <!--header -->

		  <div id="navBar" class="column">
		   	   <a href="index.html" onMouseOver="hideAll();">Home</a><br>
		       		       
		  </div> <!--navBar -->

		  <div id="content" class="column">


				

		  </div> <!--content -->
			
		  <div id="footer"> 
				<p><a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer"><img[/URL]
        			src="[URL unfurl="true"]http://www.w3.org/Icons/valid-html40"[/URL]
        			alt="Valid HTML 4.0 Transitional" height="31" width="88" class="rThumb"></a></p> 	
		  </div>
			
		</div> <!--Wrapper -->
		
	</body>
</html>

Never knock on Death's door: ring the bell and run away! Death really hates that!
 
Upvote 0 Downvote
Ok not a fix but a workaround.
I've scrapped the fluid layout in favour of a fixed layout design. for some reason this has not resolved the issue an I'm up and running on all mayjor browsers.
many thanks for your time.

Never knock on Death's door: ring the bell and run away! Death really hates that!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
743
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
595
PeDa
PeDa
MitGandhi
  • Locked
  • Question
WebGL Error
Replies
3
Views
733
spamjim
spamjim
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
204
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top