MozillaZine

CSS and <div> renders wrong

User Help for Mozilla Firefox
Guest
Guest
 

Post Posted September 21st, 2004, 4:48 am

Firefox renders the nested "menu_item"s outside of the containing "menu_group" div tags. Pushed over to the right side.
In IE: http://www.csupomona.edu/~jtcash/wehatess.gif
In Firefox 1.0PR: http://wehate.org/upload/whpss.gif

-- The HTML ---------------------
<div class="menu_group">
Menu Group<br>
<a href="http://wehate.org/test/"><div class="menu_item">Item 1</div></a><br>
<a href="http://wehate.org/test/"><div class="menu_item">Item 2</div></a><br>
</div>
<div class="menu_group">
Menu Group 2<br>
<a href="http://wehate.org/test/"><div class="menu_item">Item 3</div></a><br>
<a href="http://wehate.org/test/"><div class="menu_item">Item 4</div></a><br>
<a href="http://wehate.org/test/"><div class="menu_item">Item 5</div></a><br>
</div>
-----------------------------------



-- The CSS ---------------------
a:link, a:visited, a:hover {
color: black;
text-decoration: none;
}

div.menu_item {
width: 200px;
border: 1px;
border-style: solid;
padding: 1px;
margin: 3px;
background: #f9fafb;
font: 10pt "Trebuchet MS","Tahoma",sans-serif;
text-align: left;
}

div.menu_item:hover {
background: #e4e8ea;
}

div.menu_group {
width: 200px;
border: 1px;
border-style: solid;
padding: 1px;
margin-top: 3px;
margin-bottom: 10px;
margin-left: 3px;
margin-right: 3px;
background: #dde5ea;
font: 10pt "Trebuchet MS","Tahoma",sans-serif;
text-align: right;
}
-----------------------------------

Guest
Guest
 

Post Posted September 21st, 2004, 4:52 am

hrmm... the html got chewed up by the forum... dont know if i can use bbcode or not o_O

Code: Select all
<div class="menu_group">
   Menu Group<br>
   <a href="http://url/"><div class="menu_item">Item 1</div></a><br>
   <a href="http://url/"><div class="menu_item">Item 2</div></a><br>
</div>
<div class="menu_group">
   Menu Group 2<br>
   <a href="http://url/"><div class="menu_item">Item 3</div></a><br>
   <a href="http://url/"><div class="menu_item">Item 4</div></a><br>
   <a href="http://url/"><div class="menu_item">Item 5</div></a><br>
   </div>


eh i guess thats my lesson for not using the preview button.

Pike

User avatar
 
Posts: 2293
Joined: August 10th, 2003, 12:12 pm
Location: UK

Post Posted September 21st, 2004, 5:22 am

Why do you assume IE is right and Firefox is wrong? Simple mathematics says that a 200px wide box with a 3px gap around it (not even to mention the padding and border) won't fit inside another 200px box?

Anyway, enough of my pretentious Firefox fanboy ranting :-) You've hit an IE bug (maybe even two different ones, I can't be bothered to check for sure) causing it to miscalculate the widths. I'd suggest removing the width property from the inner item (div.menu_item) since divs automatically stretch to fill all available space. That should make the code look the same in both buggy and non-buggy browsers.

Guest
Guest
 

Post Posted September 21st, 2004, 6:15 am

Hrmm it could be an IE thing, and that was my guess but i dont understand why the containing box wouldent get streched just like any other container...
But yes, my first instinct was 'an IE bug" also, and im still leaning towards it, just posted this to see what others thought...

DUNSEL
 
Posts: 552
Joined: May 8th, 2004, 3:09 pm
Location: Manhattan , NY

Post Posted September 21st, 2004, 6:17 am

Because you designated a size for it.

Return to Firefox Support


Who is online

Users browsing this forum: Google [Bot], Google Adsense [Bot] and 22 guests