<div>-expand problems in firefox

Forum Moderators: not2easy

Message Too Old, No Replies

<div>-expand problems in firefox

exmx

7:08 pm on Jun 26, 2008 (gmt 0)

The best way for me to explain my problem is to show two pictures of my design.

The first on is from IE wich is how i want my site to look in firefox aswell

---

As you can see, the red-dotted box wont expand correctly in firefox.

CSS for the red-dotted box:
{ width: 100%; background: #black; border: none; margin: 0; padding: 0; }
CSS for the yellow-dotted box:
{ width: 687px; border: none; margin: 0 auto; padding: 0; float: left;}
CSS for the green box:
{ width: 250px; border: none; margin: 0 auto; padding: 0; float: right;}

Without float: left; (yellow-dotted box) and float: right; (green box) the red-dotted box expands correctley, but the yellow and green is not in the correct position then.

[edited by: jatar_k at 2:16 pm (utc) on June 27, 2008]
[edit reason] no urls thanks [/edit]

webfoo

7:11 pm on Jun 26, 2008 (gmt 0)

how about

height: 100%;

or whatever percent you need it to be

exmx

7:16 pm on Jun 26, 2008 (gmt 0)

no effect. :\

but thanks

Seb7

9:29 pm on Jun 26, 2008 (gmt 0)

A common different between IE and firefox is that one will inherit styles from the previous tag, and the other doesnt - not sure if this is the problem I can see here.

Can you post the HTML?

Is the text actually coded within the DIVs?

exmx

9:49 pm on Jun 26, 2008 (gmt 0)

Here you go :)

------------------------

HTML:

<body>

<div class="meny-last"></div>
<div class="meny-bg"><p><a href="#">Kontakt</a></p></div>
<div class="meny-l"></div>
<div class="meny-r"></div>
<div class="meny-bg"><p><a href="#">Guider</a></p></div>
<div class="meny-l"></div>
<div class="meny-r-inac"></div>
<div class="meny-bg-inac"><p><a href="#">Bilder</a></p></div>
<div class="meny-l-inac"></div>
<div class="meny-r-inac"></div>
<div class="meny-bg-inac"><p><a href="#">Portfolio</a></p></div>
<div class="meny-l-inac"></div>
<div class="meny-r-inac"></div>
<div class="meny-bg-inac"><p><a href="#">Meg</a></p></div>
<div class="meny-l-inac"></div>
<div class="meny-r-inac"></div>
<div class="meny-bg-inac"><p><a href="#">Hjem</a></p></div>
<div class="meny-l-inac"></div>
</div>
</div>
<div class="hovedtab3">
<div class="hovedtab-innhold">

<div class="hovedtab-innhold2">
<div class="hovedtab-sti">DU ER HER: hjem</div>
<div class="hovedtab-innhold3">
<div class="hovedtab-innhold4">
TEXT IN THE YELLOW-DOTTED BOX HERE<br />
</div>
</div>
<div class="hovedtab-hoyre">
<?php require("greenbox.php"); ?>
</div>
</div>
</div>
</div>
<div class="hovedtab4"></div>
<div class="hovedtab5">
<div class="hovedtab-copyright">copyright osv osv.. </div>
</div>
</body>
</html>

CSS:

div.hovedtab { background: #153d56; width: 100%; border: none; margin: 0; padding: 0;}
div.hovedtab-logo { width: 977px; height: 150px; border: none; margin: 0 auto; padding: 0; }
div.hovedtab2 { background: url(img/topbg.gif); width: 100%; height: 28px; border: none; margin: 0; padding: 0;}
div.hovedtab2-over { background-color: #A0B842; width: 100%; height: 12px; border: none; margin: 0; padding: 0;}

/* THE RED-DOTTED BOX */
div.hovedtab3 { width: 100%; background: black; border: none; margin: 0; padding: 0;}

div.hovedtab-innhold { width: 977px; height: 100%; background-image: url(img/sidefade.gif); background-position:top right; background-repeat:no-repeat; border: none; margin: 0 auto; padding: 0; }
div.hovedtab-sti { width: 937px; border: none; margin: 0 auto; padding: 10px; }
div.hovedtab-innhold2 { width: 957px; border: none; margin: 0 auto; padding: 0; }

/* YELLOW-DOTTED BOX */
div.hovedtab-innhold3 { width: 687px; border: none; margin: 0 auto; padding: 0; float: left;}

div.hovedtab-innhold4 { width: 677px; border: none; margin: 0 auto; padding: 0; }
div.hovedtab-hoyre { width: 250px; border: none; margin: 0 auto; padding: 0; float: right;}
div.hovedtab4 { background: url(img/btmbg.gif); width: 100%; height: 20px; border: none; margin: 0; padding: 0; }
div.hovedtab5 { width: 100%; border: none; margin: 0; padding: 0; }
div.hovedtab-copyright{ width: 977px; border: none; margin: 0 auto; padding: 0; }

/* MENU */
div.hovedtab-meny { width: 977px; height: 28px; border: none; margin: 0 auto; padding: 0;}
div.meny-last { float: right; background-image: url(img/menu_r_last.gif); width: 15px; height: 28px; border: none; margin: 0; padding: 0; }
div.meny-bg { float: right; background-image: url(img/menu_bg.gif); background-position: bottom;
background-repeat: repeat-x; width: 100px; height: 28px; border: none; margin: 0; padding: 0px 10px; text-align: center;}
div.meny-bg p { line-height:25px; font-family: Georgia, "Times New Roman", Times, serif; font-size:14px; margin:0; padding:0;}
div.meny-l { float: right; background-image: url(img/menu_l.gif); width: 7px; height: 28px; border: none; margin: 0; padding: 0; }
div.meny-r { float: right; background-image: url(img/menu_r.gif); width: 11px; height: 28px; border: none; margin: 0; padding: 0; }
div.meny-bg-inac { float: right; background-image: url(img/menu_bg_inac.gif); background-position: bottom; background-repeat: repeat-x; width: 100px; height: 28px; border: none; margin: 0; padding: 0; text-align: center;}
div.meny-bg-inac p { line-height:25px; font-family: Georgia, "Times New Roman", Times, serif; font-size:14px; margin:0; padding:0;}
div.meny-l-inac { float: right; background-image: url(img/menu_l_inac.gif); width: 7px; height: 28px; border: none; margin: 0; padding: 0; }
div.meny-r-inac { float: right; background-image: url(img/menu_r_inac.gif); width: 11px; height: 28px; border: none; margin: 0; padding: 0; }

/* GREEN BOX */
div.hmeny { width: 240px; height: 300px; background-color:#00CC33;}

swa66

5:00 am on Jun 27, 2008 (gmt 0)

since your yellow dotted box is floated it is supposed to be taken out of the flow and unable to stretch the red dotted box.
As always, IE got it wrong (even if you wanted the effect), trying playing with either floating the red dotted box as well (that way it collapses differently), or the overflow settings, or something after the floated elements that clears them and remains in the parent ...