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;
}
-----------------------------------
CSS and <div> renders wrong
-
- Guest
hrmm... the html got chewed up by the forum... dont know if i can use bbcode or not o_O
eh i guess thats my lesson for not using the preview button.
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
- Posts: 2293
- Joined: August 10th, 2003, 12:12 pm
- Location: UK
- Contact:
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.
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
-
- Posts: 552
- Joined: May 8th, 2004, 3:09 pm
- Location: Manhattan , NY
- Contact: