Divs within Firefox 1

[Gazzieh]

okay, now need help.

I have been working on a site and everything was fine except for one issue; a div container was not being placed correctly within Firefox (fine in IE7).

I have modified the CSS and xHTML and everything is placing correctly except for this set below.

The CSS is:

#footer
{
width: 680px;
height: 32px;
border-top: 1px solid #333;
}

.element1
{
float: left;
width: 87px;
height: 32px;
}

.element2
{
float: left;
width: 500px;
height: 32px;
text-align: center;
vertical-align: top;
font-size: 0.9em;
}

.element2 a, .element2 a:link, .element2 a:visited
{
color: #333;
font-weight: normal;
text-decoration: none;
}

.element2 a:hover
{color: #f90}

The xHTML is:

<div id="footer">
<div class="element1"><a href="

http://validator.w3.org/check?uri=referer"><img

src="images/valid-html401.png" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a></div>
<div class="element2"><a href="[company web address]" target="_blank">Website developed in partnership with [company name]</a> | Copyright &copy; 2008</div>
<div class="element1"><a href="

http://jigsaw.w3.org/css-validator/"><img

style="border:0;width:88px;height:31px" src="images/vcss.gif" alt="Valid CSS!"></a></div>
</div> <!-- End div footer -->

The thing I wanted was to have the three elements side by side (E1, E2, E1) but in FF E2 appears low down against the first E1, and the same for the second E1 against E2.

If I simply set them all as class Element1 then everything works fine. If I set a style=" width: 500px;" within the div declaration then the system fails again.

The middle div must be wider to accomodate text but cannot be left to autosize because the text does not run completing from left to right over 500 pixels.

Any suggestions/advice? Thanks in advance...

 

[colorplane]

Sure, here are a couple ideas...

It looks like you want your valid HTML and CSS buttons on opposite sides of the text. So, if you essentially want one on the left and one on the right you might as well float one to the left and one to the right. The important thing is that the CSS validator div, if set to [tt]float: right;[/tt] in the CSS, will need to come before the div that's floated to the left, so you would have valid-css, valid-html, text. In that case you shouldn't need to specify the exact width for the inner text as it will be bounded by the two boxes (just remove the [tt]width[/tt] and [tt]float[/tt] properties from [tt].element2[/tt]).


Alternatively, you can use absolute positioning for your images, but that gets a bit more complicated and I would recommend sticking with floats.

    #footer
        {
        [COLOR=red]position: relative;[/color]
        width: 680px;
        height: 32px;
        border-top: 1px solid #333;
        }

    .element1
        {
        [COLOR=red]position: absolute;
        top: 0;[/color]
        width: 87px;
        height: 32px;
        }
[COLOR=red]
    .left { left: 0; }
    .right { right: 0; }
[/color]  
        
    .element2
        {
        [COLOR=red]padding: 0 87px;[/color]
        height: 32px;
        text-align: center;
        vertical-align: top;
        font-size: 0.9em;
        }

And your HTML (which is not XHTML)

<div id="footer">
                    <div class="element1 [COLOR=red]left[/color]"><a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer"><img[/URL] src="images/valid-html401.png" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a></div>
                    <div class="element2"><a href="[company web address]" target="_blank">Website developed in partnership with [company name]</a> | Copyright &copy; 2008</div>
                    <div class="element1[COLOR=red] right[/color]"><a href="[URL unfurl="true"]http://jigsaw.w3.org/css-validator/"><img[/URL] style="border:0;width:88px;height:31px" src="images/vcss.gif" alt="Valid CSS!"></a></div>
            </div> <!-- End div footer -->

 

[Gazzieh]

Thanks for the reply. I had in fact solved this much later into the evening and the site is now live. The actual fault lay outside this area and related to a previous div overrunning into the footer div area.

However, the information you have given is a great idea and reduces the CSS even further. I'll give it a shot!

 

[Vragabond]

While you're reducing stuff... there is no need to put images in the divs. You can simply float the images (like colorplane suggested). Works great.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Gazzieh]

Yeah, thanks Vragabond.

The primary thing the customer needed was the site up so I have achieved that for all major browsers. From this stage forward I will review and see about simplification in the way suggested.

I had a play at what you have suggested but it failed at first. Best not to play with a live system! )

On to next customer...

 

[ChrisHunt]

I'd do it like this:

<div id="footer">
  <a id="validhtml">href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer"><img[/URL] src="images/valid-html401.png" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
  <a id="validcss" href="[URL unfurl="true"]http://jigsaw.w3.org/css-validator/"><img[/URL] style="width:88px;height:31px" src="images/vcss.gif" alt="Valid CSS!"></a>
  <a href="[company web address]" target="_blank">Website developed in partnership with [company name]</a> | Copyright &copy; 2008
</div>
[code]
[code]
#footer {
        width: 680px;
        height: 32px;
        border-top: 1px solid #333;
        text-align: center;
        font-size: 0.9em;
} 

#footer a:link, #footer a:visited {
        color: #333;
        font-weight: normal;
        text-decoration: none;
}

#footer a:hover {color: #f90}

#footer a img { border: 0; }

#validhtml { float: left; }
#validcss { float: right; }
 }

Float the images left and right, and the text will centre itself in between.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd