Forum Moderators: not2easy
Mozilla 2 and 3 in Mac, however, defy gravity and possibly the time-space continuum. This is the situation:
- #wrap is 762px.
- then, header: 750
- then, main menu: 750
Both header and main menu are then closed. This puts "minimenu" into #wrap: technically, it should be a-ok that #minimenu is 752px, making it 2px more than preceding elements. This enables me to align all three perfectly, while slapping on borders within the minimenu background .jpg for visual effect. Some elements below are also styled, and also align.
Problem: Mozilla makes my 752px "minimenu" background image appear as being 2 extra pixels long! I found a 1px background Mozilla bug, and somehow took care of the left extra pixel by position:relative the thing 1px to the left in combination with swapping "top left" with "0 0" positioning (which fixes some other Mozilla background bugs) - which had the effect of removing only the left extra pixel.
How is this even possible? The header and menu images are both confined to 750px, plus 1px border on both sides. the minimenu image is only 752px, sans border. Does Mozilla expand my #minimenu background image? Or contract the preceding two images? What is going on here?
Since it aligns perfectly in all other browsers, I'm unsure whether this is bad coding on my part, or some Mozilla wackadoo to circumvent. Obviously, this extends down to the background image I've assigned to #inwrap (the wrapper for all content below the menus).
And then the code. I've left some #:s out. Display:table is also what keeps things neat in Firefox, I'm a junkie.
#header
{
padding:0;
width:750px;
height:250px;
margin: 0 auto;
margin-top:5px;
background:url(img/header3.jpg) center center;
border:1px solid #333;
display:table;
}
#menu
{
width:750px;
height:90px;
padding:0;
margin: 0 auto;
border:1px solid #000;
border-top:0;
border-bottom:0;
background:#f8a500 url(img/menu.jpg) bottom center
no-repeat;
display:table;
}
#minimen
{
width:752px;
height:63px;
padding:0;
margin:0 auto;
margin-bottom:-1px;
background:url(img/mini2.jpg) 0 0 no-repeat;
display:table;
}
#inwrap
{
width:752px;
background:url(img/shadow2.jpg) 0 0 repeat-y;
padding-top:20px;
padding-bottom:20px;
margin-bottom:25px;
margin:0 auto;
display:table;
}
Anyone encounter this before?