Forum Moderators: not2easy

Message Too Old, No Replies

Mysterious Mozilla background bug: 2 impossible pixels

         

machi

6:32 pm on May 24, 2008 (gmt 0)

10+ Year Member



I usually only lurk on forums whenever I run into a bug, since 99% of the time, someone else already has dealt with the same thing. This time - I'm just baffled. The design looks and works as intended in most major browsers (save for a small issue with the first paragraph I'll get around to fixing).

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?

machi

8:46 pm on May 24, 2008 (gmt 0)

10+ Year Member



GAH why do I keep doing this? I mean SAFARI. Not Mozilla. Geez.