1. Home
  2. Forums Index
  3. Browser Side / CSS 4:06 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Extra height added in Firefox

inserted flash object displays ok in IE but Firefox adds apx 100px to top

         

charles95621

7:14 am on Jun 18, 2006 (gmt 0)

10+ Year Member



I am having some trouble with a Firefox display. My intention is to display a Flash animation inside my page. I way a 20px top margin from the bottom of my Head section. I want a graphic floated to the left and text to the left of my navigation panel but below my animation and graphic. In Firefox I am getting about 100px added above my Animation. Ironicaly this displays as intended in Internet Explorer.

I have defined the following CSS rules

{
margin: 0 0;
padding: 0 0;
}

body
{
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #336699;
padding-left: 10px;
}

#Head
{
position: relative;
width: 955px;
height: 100px;
background-repeat: no-repeat;
background-image: url(../Images/ClearFullLogo.gif);
z-index: 2;
left: 10px;
top: 0px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#NavPanel
{
position: relative;
width: 88px;
height: 499px;
z-index: 1;
left: 0px;
top: 0px;
padding-left: 10px;
float:left;
}

#Content
{
position: relative;
width: 858px;
height: 499px;
z-index: 3;
padding-left: 10px;
border-bottom-width: medium;
border-top-style: none;
border-bottom-style: solid;
}

#Content #Introflash
{
margin-left: 10px;
/*margin-top: 20px;*/
position:relative;
top:20px;
margin-bottom: 20px;
float: left;
display:block;

}

#HeadComment
{
position:absolute;
width:323px;
height:75px;
z-index:1;
left: 338px;
top: 24px;
}

#Container
{
position: relative;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

I have the following XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xi amdfio as</title>

<link href="Styles/base.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

-->
</style>
</head>

<body>
<div id="Container">
<div class="header" id="Head">
<div id="HeadComment">
jkdfa kard9; aierer
</div>
</div>
<div class="nav" id="NavPanel">
<a href="afei;a.html" title="j;fsrtr">Home</a> <br />
<a href="aerer.html" title="aera Offered">areea</a><br />
<a href="wraerr.html" title="aerea s">arera a</a><br />
</div>
<div id="Content" style="left: 0px; top: 0px">
<div id="Introflash">
<object type="application/x-shockwave-flash" data="Animations/CodeClutter.swf" width="300" height="300">
<param name="movie" value="Animations/CodeClutter.swf" />
<param name="loop" value="false" /><param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<img src="Images/CodeClutter.gif" width="300" height="300" alt="kjdfrera ifkjaerap" />
</object>
</div>
<div style="padding-left:500px; margin-top:100px">
<img src="Images/Quetioner.gif" alt="Person with a question" />
</div><br />
<div style="margin-left:20px; margin-right:30px;clear:both">
kdjfara jadjfoeir aiue rakdr iearprer aeoirua iarteareu oierapirua iuaeru ar u .</div>
</div>
</div>
</body>
</html>

As you can see I have not explicitly defined this extra space and want to get rid of it and still display correctly in both browsers.

doodlebee

11:16 pm on Jun 18, 2006 (gmt 0)

10+ Year Member



First of all, this:

#Content #Introflash {

needs to be this:

#Content, #Introflash {

Note the comma.

Otherwise...I'm not sure yet why it would be doing that!

Setek

2:17 am on Jun 19, 2006 (gmt 0)

10+ Year Member



Firstly, charles95621 is right: 
#Content #Introflash
is the proper hierarchy. 
#Introflash
is within 
#Content
. He's not trying to apply those values to both 
#Content
and 
#Introflash
(or is he? :D).

Secondly, it's not just Firefox that you're getting extra "space" - it's IE too, once you resize the browser width small enough.

The problem is you're floating your left menu, but not your right content (

#Introflash
is, but it's 
#Content
that needs to be) - so it's still displaying block, and taking up the entire width of the screen (thus the effect of extra "space" when in reality it's just pushed below the menu.)

As many asides go:

  1. Capitals in the web isn't fantastic - I'd avoid using 
    /Images/ClearFullLogo.gif
    , or anything, especially things a user has to type (they get confused easily) and it's just easier for consistency if they get avoided altogether;
  2. Code efficiency - 
    border-bottom-width
    , 
    border-bottom-style
    , 
    border-bottom-color
    properties can be combined: 
    border: thin solid #000;
    (same goes for 
    margin: 0 0 0 0;
    = 
    margin: 0;
    and 
    background-repeat
    , 
    background-image
    = 
    background
    )
  3. The first selector you have... isn't a selector. I think you're after 
    * { margin: 0; padding: 0; }
    (* is the wildcard that will apply to all elements - at that specificity)
  4. More on efficiency - hex values for colours that are repeated values (e.g. 
    #FFFFCC
    ) can be reduced down to 
    #ffc

  5. font-size
    in absolute sizing is baaad - IE cannot resize that according to user, which is a plus for accessibility.

P.S.: Sorry for being nitpicky :)

charles95621

3:31 pm on Jun 19, 2006 (gmt 0)

10+ Year Member



Thanks
That float on the content seemed to do the trick. I thought I had prevented wraparound by puting the entire thing in a div called containter. That is apparently not working because as you pointed out the content wraps when resized and the content drops below the nav panel. I didn't catch this before because to the previous problem.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:06 am May 2, 2026