CSS and <div> renders wrong

User Help for Mozilla Firefox
Post Reply
Guest
Guest

CSS and <div> renders wrong

Post by Guest »

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 by Guest »

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.
User avatar
Pike
Posts: 2293
Joined: August 10th, 2003, 12:12 pm
Location: UK
Contact:

Post by Pike »

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 by Guest »

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
Contact:

Post by DUNSEL »

Because you designated a size for it.
Post Reply