...

View Full Version : Firefox CSS Style Width Issue



cupcakedream
01-12-2010, 07:03 PM
Hello Everyone -

I cant seem to figure out this issue, maybe i'm missing something.

In all browser except for firefox, I set the width for my child element "div.servicesbox" inside of my parent "div.container" - and the multiple "div.servicesbox" will show up as expected. In firefox the width get's reset to the parent element.

Additionally when viewing the page source in firebug I see that there is no style applied to my "div.servicesbox" ? What the heck

Here is my css sheet

[CODE]
@charset "utf-8";
/* CSS Document */

html {
}

body {
background:#000000 url(../images/background.jpg);
background-position:center;
background-position:top;
background-repeat:no-repeat;
padding: 0px;
margin: 0px;
font-family: 'Tahoma';
font-size : 11px;
color : #000000;
}

/* Header */

div.header {
width:1028px;
height:auto;
margin:auto;
}

/* Nav */

div.nav_container {
width:1028px;
height:auto;
margin: auto;
}

div.nav_left {
width:auto;
float: left;
}

div.nav_links {
width:auto;
height:auto;
float: left;
}

div.nav_links#services {
width:93px;
height:62px;
background-image:url(../images/index_06.jpg)
}

div.nav_links#contact {
width:82px;
height:62px;
background-image:url(../images/index_07.jpg)
}

div.nav_links#right {
width:48px;
height:62px;
background-image:url(../images/index_08.jpg)
}

div.nav_links#services:hover {
background-image:url(../images/index_links_06.jpg);
}

div.nav_links#contact:hover {
background-image:url(../images/index_links_07.jpg)
}

/* Body Top */

div.container {
width:1008px;
margin: auto;
background-color: #4188BC;
padding: 10px;
height: 100%;
}

div.content_border {
width:988px;
background-color:fff;
border: 10px solid #CCC;
margin: auto;
height: auto;
}

div.content_1 {
width:988;
background-image:url(../images/index_11.jpg);
clear: both;
height: 285px;
padding-right: 10px;
padding-left: 10px;
}

div.mediaplayer {
height:auto;
float: left;
}

div.welcome {
margin:auto;
padding-top: 25px;
float: left;
}

/* Content 2 */

div.content_2 {
height: 600px;
}

div.content_2_top {
margin:auto;
height:68px;
width: 988px;
clear: both;
}

div.content_2_title {
width:500px;
float: left;
}

div.content_2_bubble {
float:right;
width: 300px;
}

div.horizontal_bar {
width:100%;
heigh:2px;
background-image:url(../images/horizontal_border.jpg;
background-repeat:repeat-x;
clear:both;
height: 10px;
}

/* Content 3 */

div.servicesbox_container {
float: left;
height: 400px;
width: 900px;
margin-right: 42px;
margin-left: 42px;
}

div.services#row1 {
background-color:#093;
float:none;
width: 200px;
}

div.services#row2 {
background-color:307cb6;
float:left;
}

[CODE]

and my html:

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Document (Firefox Float Bug)</title>
<link type="text/css" rel="stylesheet" href="style/style.css">

</head>

<body>

<div class="container">
<div class="services" id="row2">I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.</div>
<div class="services" id="row2">I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.</div>
<div class="services" id="row2">I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.</div>
</div>
</body>
</html>
[CODE]

Excavator
01-12-2010, 07:50 PM
Hello cupcakedream,
If you strip out all the CSS that's not doing anything you end up with a very basic layout example that is just executed wrong.

Run this through the validator and you can see a few mistakes that will change your layout once corrected -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Document (Firefox Float Bug)</title>
<style type="text/css">
body {
background: #000000 url(../images/background.jpg) no-repeat center top;
padding: 0px;
margin: 0px;
color : #000000;
font: 11px Tahoma;
}
div.container {
width:1008px;
margin: auto;
background: #4188BC;
padding: 10px;
height: 100%;
}
div.services#row2 {
background-color:307cb6;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="services" id="row2">
<p>
I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7,
but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the
time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.
</p>
</div>
<div class="services" id="row2">
<p>
I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7,
but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the
time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.
</p>
</div>
<div class="services" id="row2">
<p>
I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7,
but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the
time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.
</p>
</div>
<!--end container--></div>
</body>
</html>

To point out a few, look at the CSS for div.services#row2. You need to give your floats a width or else they don't work.

cupcakedream
01-12-2010, 08:40 PM
Thanks for the response! I ran my code through a validator - and I found some issues, and fixed them.

I found the when i take out "background-image:url(../images/horizontal_border.jpg;" from the css, my div.servicebox elements float like a champ! Is the markup wrong on that line?

[CODE]
div.horizontal_bar {
background-image:url(../images/horizontal_border.jpg;
background-repeat:repeat-x;
clear:both;
height:10px;
}
[CODE]

cupcakedream
01-12-2010, 08:43 PM
Ugghhh - got it! I need the single quotes in there. So this one little thing has been killing me for hours. I got to get these details, agh!

Are there any code editors that will highlight errors like these while editing?

Excavator
01-12-2010, 09:39 PM
Are there any code editors that will highlight errors like these while editing?

DreamWeaver does, to some extent. Can't beat the validator though.

cupcakedream
01-12-2010, 11:31 PM
I use dreamweaver and if you're using dreamweaver's auto-complete for writing css - it doesnt use the single quotes. Although it does mark it differently (wrong if you know what to look for) - you'd think to trust the auto complete in the first place!

Excavator
01-13-2010, 12:01 AM
Thanks for the response! I ran my code through a validator - and I found some issues, and fixed them.

I found the when i take out "background-image:url(../images/horizontal_border.jpg;" from the css, my div.servicebox elements float like a champ! Is the markup wrong on that line?

[CODE]
div.horizontal_bar {
background-image:url(../images/horizontal_border.jpg;
background-repeat:repeat-x;
clear:both;
height:10px;
}
[CODE]



I never use single quotes on anything.
In that code you provided in your first post there is no <div class="horizontal_bar>
It's kind of hard to see what's going on when you don't provide all the information. We don't even know if you're using a DocType. It would be best if you could just link us to the test site, especially since there are images involved.

Whenever posting code, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

cupcakedream
01-13-2010, 12:15 AM
Have you used that css property without single quotes? It was causing major issues for me!

I'm new to posting website code, so thanks for the advice.

Excavator
01-13-2010, 12:27 AM
I never use single quotes on anything......



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum