...

View Full Version : Very Strange Firefox Floating Issues



ChetG
02-25-2009, 10:39 PM
Hello everyone,

I can't seem to get this particular page to behave correctly. I know it's a float and clear issue. The Footer isn't wanting to hang down where it belongs, and the whole content section isn't bumping down.

Here's the page: http://www.shsu.edu/~rca_www/bearkatcamp/html/schedule.html

Here's the CSS:



@import url("http://www.shsu.edu/master_template/master_css/style8/style.css");
@import url("http://www.shsu.edu/master_template/master_css/dropdown/horizontal.css");
@import url("http://www.shsu.edu/master_template/master_css/dropdown/vertical.css");
@import url("css/print.css");

/*This is the style sheet for the Bearkat Traditions Camp. It is adapted from the SHSU Master Template: Style 8. It will eventually be implemented across the whole of the Recreational Sports Website.*/

/*Structure*/

body {
background-color: #343434;
}

#header .header_1 {
font-family: impact;
font-weight: bold;
font-style: italic;
text-align: left;
margin: 25px 300px 0;
}

#header .header_2 {
width: 400px;
float: none;
top: 0;
z-index: 6;
position: absolute;
}

#header .header_3 {
width: 300px;
top: 18px;
font-weight: bold;
}

#header #navbar {
background-image: url(../images/navbar.jpg);
background-position: top left;
background-repeat: repeat-x;
width: 100%;
height: 30px;
z-index: 5;
}

#header{
background-color: #f7923a;
background-image: none;
min-height: 125px;
margin: 25px 0 0;
z-index: 5;
}

#container {
width: 900px;
maring: 0 auto;
background: none;
border: none;
background-color: #343434;
}

#leftbar {
min-height: 800px;
width: 215px;
background-image: url(../images/nav.jpg);
background-position: top center;
background-repeat: repeat-y;
float: left;
}

#nav {
margin-top: 75px;
}

#contact {
text-align: center;
padding-top: 649px;
background-image: url(../images/runningman.png);
background-position: center;
background-repeat: no-repeat;
}

#contact p {
color: #FFF;
font-size: 16px;
font-weight: 700;
}

#content-container {
float: right;
margin: 0;
padding: 0;
}

#img_box {
width: 680px;
height: 300px;
}

#img_box #show {
margin: 0;
}

#content {
width: 680px;
max-height: 400px;
float: right;
}

#content_box {
float: left;
width: 472px;
min-height: 500px;
}

#sub_content_box {
float: right;
background-color: #f7923a;
min-height: 490px;
font-weight: 700;
}

.clear {
clear: both;
}

#footer {
background-color: #f7923a;
clear: both;
}

#extra1, #extra2, #extra3 {
margin-top: 135px;
}

#extra1 {
background-image: url(../images/stripes.jpg);
background-position: top left;
background-repeat: repeat-x;
}

#extra2 {
display: none;
}

/*Headings*/

#content_box h2 {
padding: 0 10px;
text-align: center;
}

#sub_content_box h2 {
display: block;
margin: 0;
padding: 5px;
font-size: 16px;
text-align: center;
background-color: #343434;
}

Excavator
02-26-2009, 01:21 AM
Hello ChetG,
try making these changes

#container {
width: 900px;
maring: 0 auto;
background: none;
border: none;
overflow: auto;
background-color: #343434;
}
#content-container {
margin: 0 0 0 215px;
padding: 0;
background: #fff; /*for testing*/
overflow: auto;
}
#content {
width: 680px;
background: #f00;
overflow: auto;
}



overflow: auto; is one method of clearing floats - http://www.quirksmode.org/css/clearing.html
Doesn't fix much though. You can see how your rotating image is just too wide to fit in the div your trying to contain it in.

Have a look at the box model to help you get things to fit - http://www.w3.org/TR/CSS2/box.html

drhowarddrfine
02-26-2009, 04:34 AM
You are looking at IE and expecting other browsers to work the same. Never, ever do that. Work in a modern browser like Firefox and then look to see if/when IE screws things up. And, as always, you are seeing a known IE bug and expecting all other browsers to work the same. Excavator's 'overflow' fix will clear that up at least.

Also, keep in mind that IE has huge issues with floats. Firefox by far does a better job.

jhaycutexp
02-26-2009, 06:23 AM
well as i see this my friend, the sum of the width of the left and right content exceeds the width of the containing div..

if i were you i would just adjust the width of the container..

just be sure to count the margins and padding when specifying the width of your containers... just my 10million cents.. hehehe

hope this helps..

good luck..

ChetG
02-26-2009, 02:45 PM
Okay so I found a way to get the code to behave itself. Thanks for your help everyone.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum