CSS positioning and Firefox

HTML & CSS
1

Im having a floating issue with Firefox. The version of FF i have is 3.5.7 and I am using Joomla 1.5
Ok if you look at this in IE and you look at spot 1 and 2 you see that it aligns at the top with header that says mini frontpage. However if you look at this in FF you will see that the spot 1 and 2 drops down.
http:
//anderbergmedia.com/joomdev15/

I am enclosing the entire index page so you can look at it, and it is the DIV “midSpots” that is wrapped in “mainContent” that is the problem at hand:

<?php
/*

  • @copyright Copyright (C) All rights reserved.
  • @license
    */
    // no direct access

defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );

?>

<!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” xml:lang=“<?php echo $this->language; ?>” lang=“<?php echo $this->language; ?>” >

<head>

<jdoc:include type=“head” />
<link rel=“stylesheet” href=“<?php echo $this->baseurl ;?>/templates/system/css/system.css” type=“text/css” />
<link rel=“stylesheet” href=“<?php echo $this->baseurl ;?>/templates/system/css/general.css” type=“text/css” />
<link rel=“stylesheet” href=“<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css” type=“text/css” />
<?php if($this->direction == ‘rtl’) : ?>
<link href=“<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template_rtl.css” rel=“stylesheet” type=“text/css” />
<?php endif; ?>

<link href=“css/template.css” rel=“stylesheet” type=“text/css” />
</head>

<body>

<div id=“wrapper”>
<div id=“top”>
<div id=“logo”><a href=“http://anderbergmedia.com/joomdev15/”></a></div>
<div id=“headerNav”>
<jdoc:include type=“modules” name=“user1” style=“none” />
</div>
</div>
<div id=“topNav”>
<jdoc:include type=“modules” name=“top” style=“none” />
</div>
<div id=“header”>
<jdoc:include type=“modules” name=“user2” style=“none” />
</div>
<div id=“leftBar”>
<jdoc:include type=“modules” name=“left” style=“table” />
<jdoc:include type=“modules” name=“user4” style=“none” />
<br />
</div>

<div id=“mainContent”>
<div id=“midSpots”>
<jdoc:include type=“modules” name=“user3” style=“none” />
</div>
<div id=“component”>
<jdoc:include type=“component” />
</div>

</div>
<div id=“footer”></div>
<div id=“bottom”>
<jdoc:include type=“modules” name=“footer” style=“none” />
<jdoc:include type=“modules” name=“bottom” style=“none” />
</div>
</div>
</body>
</html>

Thanks for any help or suggestions

2

Hi ladybadone, welcome to SitePoint!

When IE and Firefox differ, you can be sure that it’s IE at fault. The layout looks fine in Firefox to me. Could you explain more clearly what look you want for those without IE?

Live link: http://anderbergmedia.com/joomdev15/

3

Amazingly enough its FF that is not showing it right this time. OK you see the big black image that says spot 1 and 2 it drops down to far and is not aligned with the Main Menu at the top. There is more of a margin between the top banner and the spot 1 and 2. If you look at IE you can see it aligns as it should and there is not so much of a margin btw.

4

OK, I see what you mean.

No, IE is showing what you want, but Firefox is behaving correctly. You see, the black image is contained within a paragraph, and that paragraph has default top and bottom margins on it. So Firefox is doing just what it should.

The solution is simple: remove the default padding on the paragraph element. Here’s a way to do it: add this to your stylesheet:


#midspots p {
    margin: 0;
}

Remember that browsers give default margins and paddings to various elements, and unless you set your own rules for each element, the defaults will take over. Never use elements like paragraphs, headers etc without making sure you have styled them as you want. :slight_smile:

5

Thank you so much. As we are working with Joomla, this has been a problem on and off, as creating HTML modules using the Joomla admin, this problem occur ever so often in the front. This fix truly resolved it.

6

Glad it helped! :slight_smile: