CSS - Css Dilema - Overflow Or Broken Navigation D=

Hey,

I had a website which ran for about an year on most browsers with no probs. Now when Firefox v4 struck my site css is broken and im struggling to make it work on all sites properly.

I know its shameless of me to ask to look trough the whole site but i just cant pick out where the problem exactly lies.

the site is www . alterum . ee

in firefox v4 main menu just breaks and seems like drags the content-wrapper with it. other browsers work fine atm.

i would really appriciate if someone heped me with that problem. Or ill have to redo whole css from scratch which would be a bummer.

I am working on a template that looks great in IE and Chrome but Firefox makes it look really ugly so I was curious if anyone would mind looking at my site and telling what they think I need. centextechs is the site

Any help is greatly appreciated

Randy

For some reason my sidebar keeps breaking the wrapper and floating under my content on my blog page.

universitysquarecondos. com / owners-2 / updates/

Sorry about wack url but it wont let me post urls since it thinks I may be spamming or something...

Note that this only happens in IE, not in Mozilla (of course... )

Any ideas?

Thanks for helping a noob get his sealegs,

Reid

Hi everyone,

Help please. I'm relatively new to CSS. I've coded the following application form and when opened in Chrome and IE9 the formatting and layout is shown as expected. IE8 doesnt seem as friendly and the 2nd page 'Questionnaire' has broken borders.

Can anyone help?

Here is the CSS behind the 'Job Application Form'

@charset "UTF-8";
/* CSS Document */
body{
background-image: url(xxxxxx);
background-repeat: no-repeat;
background-position: top left;
background-color: #CBCBCB}
form{
background-color:#FFFFFF;
width:800px;
margin:90px auto;
border:2px solid #A9A9A9;
padding: 20px;
}
#header_content
* {font-family:Arial,Helvetica,sans-serif!important}
#content {margin-bottom:20px;}
#sectionCandInf,
.sectionContent,
#content div *{background-color:#FFF}
#aq523 {width:650px;}
#aq515 {width:650px;}
#aq516 {width:650px;}
#aq517 {width:650px;}
#aq519 {width:650px;}
#aq522 {width:650px;}
#aq524 {width:650px;}
#aq521 {width:650px;}
#aq525 {width:650px;}
#aq518 {width:650px;}
#aq520 {width:650px;}
#aq2922 {width:650px;margin-bottom:10px;}
#aq2924 {width:650px;margin-bottom:10px;}
#aq2916 {width:650px;margin-bottom:10px;}
#aq2917 {width:650px;margin-bottom:10px;}
#aq2918 {width:650px;margin-bottom:10px;}
#aq2919 {width:650px;margin-bottom:10px;}
#aq2920 {width:650px;margin-bottom:10px;}
#aq2923 {width:650px;margin-bottom:10px;}
#aq2926 {width:650px;margin-bottom:10px;}
#aq2925 {width:650px;margin-bottom:10px;}
#chpLoginSection{margin-top:20px; border:2px dotted #0092B5}
#chpCreateSection {margin-top:20px;border:2px dotted #0092B5}
h5 {
font-size: 110%;
font-weight: bold;
margin: 0;
padding: 20 20px;
background-color: #fff!important;
color: #FFFFFF;
width: 25em;
float: left;
color: #000;
}
#reqstar{margin-bottom: 20px; margin-right: 80px}
.section fieldset {
clear: left;
width:100%;
padding: 5px 0;
color: inherit;
background-color: #CCCCFF;
border:1px solid #A9A9A9;
}
#sectionDocument {padding-right:0px;padding-top:8px;margin-left: 30px;margin-right:30px; border:1px solid #A9A9A9}}
#sectionDocument,
.sectionContent
#sectionDocument select, #sectionDocument input {margin-bottom:10px;}
#sectionDocument #aq2822, #sectionDocument #aq2824 {width:400px;}
#sectionDocument #aq2822 label, #sectionDocument #aq2824 label {width:40px;}
.submit input, #footersubmitbav div input,
input.chpbutton, input.footerbutton {font-size:12px;
font-family:Arial,Helvetica,sans-serif;
border: 1px solid #7F7F7F!important;
background-color:#547EA8!important;
text-align:center; cursorointer; text-decoration:bold !important; font-weight:normal; color:#ffffff;padding:4px 6px 4px 6px !important;
}
/*Job summary headers*/
.headerlabel1, .headerlabel2, .headerlabel3 {font-weight:bold;color:#A32425;}
.headerlabel1, .headerlabel2 {padding-left:0px;}
.headervalue1, .headervalue2, .headervalue3, .headerlabel1, .headerlabel2, .headerlabel3 {font-size: 14px;}
.headerlabel3 {padding-left:0px;}
.bodyAppProc h4 {font-size: 17px; font-weight:bold; color:#A32425;}
.bodyAppProc h5, .bodyAppProc h6 {font-size: 14px; font-weight:bold;color:#A32425;}
.bodyAppProc input, .bodyAppProc textarea, .bodyAppProc select{font-size: 11px;}
#saveApp {margin-top:20px; margin-bottom: 20px;}
#step_navigation_content,
#content h4{margin-left:00px;}
#headertable{padding: 10px 0px 10px 0px; line-height:1.7em; }
.section h5{padding-left:0;}
#chpCreateSection {border-left:1px dotted #C8B08BF!important}
#step1input input, #step2input input,#step2input input,#step3input input, a.currentStep {font-size: 14px!important}
/* migration 28B -> 28C */
#sMobilePhoneNumber {width:220px;}
#tem {border:none;}
#sectionWelcome {background-color: #fff}
/*MedusaTech Additions*/
#aq6783 {margin-bottom:10px}
#aq6696 {margin-bottom:10px}
#aq6700 {margin-bottom:10px}
#navbarValue a, #navbarValue input {font-size:14px;color:#4F6DB6;text-decoration:none;padding-top:1px;}
#navbarValue a:hover, #navbarValue input:hover {text-decoration:underline;}
#navbarValue .disabledLink a, #navbarValue .disabledLink input {color:#000000;}
#navbarValue .disabledLink a:hover, #navbarValue .disabledLink input:hover {text-decoration:none;}
#navbarLabel {font-size:14px;}
.navbarLine {padding:0;margin:0;}
#sectionAttachContent
{border: 1px solid #A9A9A9;}
.label {width:242px;}
#sectionAttachContent .value {}

I'm having a very hard time getting a particular website to look correctly in IE6. It looks perfect in Safar, Firefox, and IE7. But of course, IE6 can't seem to figure out what I want done.

If you go to www . sixpak . org/~chafer2002/tactical/index.php (remove the spaces between www and sixpak and sixpak and org), you'll see the page. The page is laid out with a branding area, navigation area, a main content <div>...and within the main content <div>'s there are three "sub" <divs>...a left content, middle content (for the bulk of the content), and a right content. For some reason, the right content <div> "breaks" the middle content <div> and is pushed off to the left.

I can't figure out how to get it back where it belongs...on the left side of the page. You can view the same link in Firefox. It looks fine.

I'd appreciate any ideas on how to get this page to look right. Thanks!

Russell

Hi guys.

For some reason, this page's layout is broken.. I'm suspecting that it's a problem with css.

Page is
mtvicdojo.org.nz/2008/03/20/thanks/

Here is my css.
mtvicdojo.org.nz/wp-content/themes/theme_mtvicdojo/style (dot) css

Any ideas why it is broken..?

Thanks.

We've implemented a slightly modified form of suckerfish dropdowns...apparently I can't post links, but it's at jlfurnishings.com

Here's the markup and javascript:

Code:

<ul id="nav-bar" class="nav-bar">
	<li><a href="/jlf/pages/facility" >Facility</a></li>
	<li><a href="#" >About Us</a>				
		<ul>
			<li><a href="/jlf/pages/aboutjlf" >JLF</a></li>
			<li><a href="/jlf/pages/aboutlm" >Lone Meadow</a></li>
		</ul>
	</li>
	<li><a href="/jlf/pages/designerresources" > Designer Resources</a></li>
	<li><a href="#" >Projects / Clients</a>								<ul>
			<li><a href="/jlf/pages/hotels" >Hotels</a></li>
			<li><a href="/jlf/pages/restaurants" >Restaurants</a></li>

		</ul>
	</li>
	<li><a href="/jlf/pages/links" >Links</a></li>
	<li><a href="/jlf/pages/newsevents" >News / Events</a></li>
	<li><a href="/jlf/pages/calendar" >Calendar</a></li>
	<li class="nav-bar-white">			
		<a href="/jlf/pages/contactus"><font style="color:#2E350A;">Contact Us</font></a>
	</li>
</ul><!--end nav-bar -->


<script type="text/javascript"><!--//--><![CDATA[//><!--

	sfHover = function() {
		var sfEls = document.getElementById("nav-bar").getElementsByTagName("LI");
		if (!sfEls) sfEls = document.getElementById("nav-bar-products").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Here's the CSS:
Code:

#nav-bar {
	position:relative;
	float:left;
	width:595px;
	height:25px;
	
	text-align:left;
	padding-left:6px;
	margin-left:30px;
	line-height:25px;
	
}

.nav-bar {
	position:relative;
	float:left;
	width:595px;
	height:25px;
	background:url(../img/content-nav-bg.jpg) #FFF no-repeat;
	text-align:left;
	padding:0px;
	margin:0px;
	padding-left:6px;
	margin-left:30px;
	line-height:25px;
	color:#FFF;

}

.nav-bar li {
	position:relative;
	list-style:none;
	display:inline;
	margin:0px;
	margin-left:-4px;
	padding:0px;
}

.nav-bar a {
	color:#FFFFFF;
	font-size:11px;
	font-weight:normal;
	padding:0px;
	padding-left:12px;
	padding-right:8px;
	margin:0px;
	border-right:solid 1px #FFF;
	margin:0px;
	margin-left:-4px;
	
}

.nav-bar a:hover {
	position:relative;
	color:#2E350A;
	background:#FFF;
	padding:7px;
	padding-left:12px;
	padding-right:8px;
	margin:0px;
	margin-left:-4px;
}

.nav-bar li.nav-bar-highlight {
	position:relative;
	color:#FFF;
	background:#FFFFFF;
	font-size:11px;
	font-weight:normal;
	padding:7px;
	padding-left:12px;
	padding-right:8px;
	margin:0px;
	margin-left:-4px;
}

.nav-bar li.nav-bar-highlight a {
	position:relative;
	color:#2E350A;
	background:#FFFFFF;
	font-size:11px;
	font-weight:normal;
	padding:7px;
	padding-left:12px;
	padding-right:8px;
	margin:0px;
	margin-left:-4px;
}

/** this is for the "contact us" item that has a white background **/
.nav-bar-white {
	background:#FFFFFF;
}

.nav-bar li ul, .nav-bar-products li ul { /* second-level lists */
	position: absolute;
	background: #E1E1E1;
	z-index:9;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

.nav-bar li ul li, .nav-bar-products li ul li {
	border:0px;
	float:left;
	clear:left;
	margin-left:5px;
	z-index:900;
}

.nav-bar li ul li a, .nav-bar-products li ul li a {
	color:#4C4C4C;
	border:0px;
	width: 10em;
}

#nav-bar li:hover ul, #nav-bar li.sfhover ul, #nav-bar-products li:hover ul, #nav-bar-products li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	left:-20px;
	top:10px;
	z-index:900;
	width: 10em;
}

They work fine in Firefox (for the most part...feels a little unstable), but in IE6 (and 7, I believe), the dropdowns are all jacked. Can anyone shed any light on this? I've played with it, but I'm not making any progress. My client is freaking out because this is overdue and my css guy is MIA and I'm about to rip my hair out. Any insight at all would be welcome...

(URL address blocked: See forum rules)

(dropdowns for 'About Us' and 'Projects / Clients')

On a sidenote: how do you guys do this? I'm a PHP developer and CSS is like black magic to me :-) I can usually get things working fine in non-IE browsers, but then I pull up the site in IE and I'm completely mystified. Kudos to you all...

This is a first I've seen my problem and I'm hoping it's something silly stupid.

check out the site, code is listed below as well: http://bigoak.kjellandrew.com

Ultimately I'm trying to float the sidebar to the left of the main content.

First thing I notice is that the banner image has excess margin that is anywhere in the CSS. I've tried everything to eliminate that spacing and am starting to think it's related to my other problem.

Second is that when I try to float the side bar (float: left on content and float: left on sidebar) it kills the div #body prematurely. You can tell cause the background color disappears and using firebug proves it showing that the body div is shortened. I've tried specifying heights (min height does extend it, but ultimately not a fix). I've made sure all of my divs are closed in proper order. And I've checked for random ", ', }, or / in my CSS and html and it's totally clean. It validates just fine too.

HELP
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Big Oak - Home</title>

	<style type="text/css">
		* { margin: 0; padding: 0;}
		a img {
			border: none;
		}
		.clear {
			clear: both;
		}
		body {
			background: url('_img/outside_bg.png') no-repeat top center #59858b;
		}
		#body {
			margin: 0 auto;
			margin-top: 50px;
			background-color: #fff;
			width: 950px;
			height: 100%;
		}
		#header {
			background: url('_img/header_wood.jpg') no-repeat top;
			width: 950px;
			height: 75px;
		}
			#header h1 {
				text-indent: -9000px;
				font-size: 0;
			}
			#header img.logo {
				float: left;
				position: relative;
				top: -50px;
			}
			#header img.banner {
				margin: 0px auto;
			}
			#header ul {
				float: left;
				list-style: none;
				padding-top: 40px;
				width: 480px;
			}
				#header li {
					display: inline;
					margin: 10px;
					font-family: helvetica;
					font-weight: normal;
					font-size: 1em;
				}
				#header li a:link, 
				#header li a:active {
					text-decoration: none;
					color: #231f20;
				}
				
				#header li a:hover,
				#header li a:active {
					border-bottom: 2px solid #444;
				}
		#header form {
			float: left;
			margin: 30px 5px 0 0;
			display: inline;
		}

				.searchbox {
					height: 1.5em;
					font-size: 1em;
					padding: 2px 2px 2px 5px;
					width: 140px;
					vertical-align: middle;
					border: 1px solid #ccc;
				}
				.searchsubmit {
					vertical-align: middle;
				}
		#social_links img {
			float: left;
			padding: 30px 5px 0 0;
		}
		
	#container {
		width: 890px;
		margin: 0px auto;
	}
	#content {
		width: 560px;
		float: left;
	}
		
		#sidebar {
			width: 270px;
			margin-left: 25px;
		}
	</style>

</head>
<body>
	<div id="body">
		<div id="header">
			<h1>Big Oak</h1>
			<a href="/"><img src="_img/bigoak_logo.png" alt="big oak logo" class="logo" height="119" width="142"></a>
	
			<ul class="nav">
				<li><a href="#">about</a></li>
				<li><a href="#">speaking</a></li>
				<li><a href="#">a:life</a></li>
				<li><a href="#">go events</a></li>
				<li><a href="#">contact</a></li>
			</ul> <!-- ends main navigation list -->
			
			<form method="get" action="">
				<p><input type="text" class="searchbox">
				<input type="image" src="_img/go.png" class="searchsubmit"></p>
			</form>
			
			<div id="social_links">
				<a href="#"><img src="_img/facebook.png" alt="facebook"></a>
				<a href="#"><img src="_img/twitter.png" alt="twitter"></a>
				<a href="#"><img src="_img/rss.png" alt="rss"></a>
			</div> <!-- ends social links div -->
						
		</div> <!-- ends header div -->
		<div id="container">
			<img src="_img/header_img.jpg" alt="banner" class="banner" width="890" height="270">
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
			</div> <!-- ends content area -->
			<div id="sidebar">
				<h3>Cool Sidebar</h3>
					<ul>
						<li>item 1</li>
						<li>item 2</li>
					</ul>
			</div><!-- ends sidebar div -->
		</div> <!-- ends container div for main area of content -->
		
		
	</div>
</body>
</html>

Hi, we are hoping someone can help us figure out why (besides the obvious) our CSS isn't rendering our site correctly in any version of IE.

If you take a look at our website (DJDeals) in Chrome or Safari, you'll see how it should look. Then take a look in IE. The shopping cart and other major features are WAY our of place...

help?

I run a personal website which has a theme utilizing 960 grid system, and recently restructured parts of my theme to make it utilize this more. Unfortunately, though, it seems that if I open it on either Firefox for Android or Android Browser from my Asus Eee Pad Slider with Ice Cream Sandwich, the container divs are broken. It seems that the height from the div with id "BasicContainer" is not being passing its height up to its parent div, id "Content". Currently, it uses position relative, but this should still pass its height. I tried investigating with Weinre, but I couldn't figure out what was wrong with it even with that. Perhaps someone more experienced with mobile web development can take a look and help me figure out what's going on?

My site is smartboyssite dot net. Thanks to anyone who helps.

the menu at the site I am building myself at:
http://sphinxgaming.ath.cx/

Works perfectly in firefox, all links are missing on the menu in IE

And the validator gives me some very strange errors (document type does not allow element "BODY", for example)
http://validator.w3.org/check?uri=h...lidator%2F1.654

Any ideas?

By the way, I have tried 3 different DOCTYPES, with no better results

I am having a problem displaying text under images in IE, it looks fine on FF though.
In IE the text runs down the side of the images and looks really bad. Can someone tell me why it does not display properly in IE?

Here is an example page
product_info.php?products_id=209
And this is the stylesheet
stylesheet.css

Any help would be much appreciated.

Thanks
Peter
PS. Looks like I am not allowed to post links yet, I can send them to you if you like?

Hello Everybody,

I had this site working in opera and IE and it works beautifully. When it comes to firefox, the box form extends for a hundred pixels and I don't know why. The sheet is set at a specific width and i can't change anything with the form in css. can anyone please help me with this, thank you.

here is the site
Firefox not working for form

Hi I have done two pages and they seem to work fine in IE8 but when I view it in firefox there are a couple of issues:

link

On the home page i have a lightbox set up for the polaroids with specific width and height. In IE the div is exact in size but in firefox the div seems to expand beyond the dimensions of the div (a red dotted border is displayed on click)

On the Products page, the right hand side of the book has products listed in which you hover over and the polaroids will reflect different angled shots of the product that the cursor is over. Each product line is a hyperlink but in Firefox some of these lines are unlinkable whereas in IE there is no problem here! It is the same instance with the sub menu on the left hand page too

Can anyone point me in the right direction of solving these issues please?

So I'm trying to debug some major issues in IE6. In both my "Home" page and in my "Bio and Press" page my mainbody div and my mainbodyalt div are broken out of the three column laaout and the two column layout and pushed to the bottom of the other div columns.

I am stumped as to why this is doing this, may I have some help on the subject please.

Here is the link:
http://www.lonniebruhn.com/sitelab/index.html

Both pages validate

Thank you
LB