2 replies [Last post]
Vik
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2008-01-17
Posts: 12
Points: 0

This HTML/CSS seems to be fine in Windows Firefox, IE6 and in Safari, but in Mac Firefox it has an odd bug. If I run the cursor over the button a few times to see the rollover button, the text in the paragraph below it gets blurred on the right. I have been working on this all day and I can't figure out yet how to fix it.

Here's a link to a a jpeg that illustrates what happens:

http://www.flavorzoom.com/offset_anomaly.gif

Here's a link to a stripped-down demo page:

http://www.flavorzoom.com/offset_anomaly.html

To see the bug, stretch the window out so that the greek text extends past the right of the h2 text "...for the day," and run the cursor over the "Calories" button to reveal the rollover image a few times.

Here's the text of the demo page:

Add to Your Food List. Include all the foods you'd like to eat for the day.

html {
margin: 0px;
padding: 0px;
}

body {
margin: 0px;
padding: 0px;
background: #f6f1d4 ; /* cream */
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {margin:0px 0px 0px 10px;
position:relative;
width:800px;
height:25px;
z-index:100;
border-left: 1px solid #000;
}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0;
margin:0;
list-style-type: none;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {display:block;width:110px;
font-size:90%;
text-align: center;
color:#fff;
height:24px;
line-height:24px;
text-decoration:none;
text-indent:5px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background: url("/images/menu-buttons.gif") no-repeat 0 0;
}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#pmenu li {float:left;
background:#096327;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative; background-position: 0 -24px;}
/* Make the hovered list color persist */
#pmenu li a:hover {background-position: 0 -24px;
color:#fff; }

#mainbody {
padding-left: 24px;
padding-right: 30px;
padding-top: 0px;
}

#usda_foods_Main {
padding:0;
}

#usda_foods_Sidebar {
width: 40%;
float: left;
margin:0;
padding:0;
}

#usda_foods_Main-content {
width: 50%;
padding: 20px;
float: right;
}

hr.usda_foods_cleaner {
clear:both;
height:1px;
margin: 0; padding:0;
border:none;
visibility: hidden;
}







Add to Your Food List.
Include all the foods you'd like to eat for the day.





Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia hendrerit pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus egestas metus id odio. Suspendisse at urna at nunc ullamcorper convallis. Praesent in orci. Aliquam pede diam, consectetuer in, varius eu, rutrum nec, dui. Duis lacinia scelerisque lacus. Fusce blandit turpis ut mi. Nullam ipsum. Phasellus sed felis elementum dolor ullamcorper consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus et erat eget lectus tincidunt facilisis. Vestibulum sodales orci at ante. Duis lectus magna, cursus ac, dignissim in, hendrerit et, lorem. Morbi urna. Proin vitae nisl vitae mi semper malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque in pede quis nulla euismod dictum. In bibendum urna et dui.

Pellentesque nonummy, arcu gravida congue commodo, mauris quam convallis mi, eget ullamcorper velit ipsum sit amet augue. Phasellus erat nibh, posuere eget, varius quis, consectetuer a, tellus. Aenean vehicula arcu at ligula. Sed tristique, pede id porttitor pretium, ante ligula dapibus lacus, ac gravida tortor lacus vitae augue. Morbi et sem quis tortor porttitor malesuada. Aliquam erat volutpat. Sed egestas lorem non felis. Integer eget tellus. Nulla interdum mollis urna. Quisque erat lectus, tempus ac, condimentum imperdiet, venenatis ut, neque. Mauris in lectus vel enim sodales pharetra.







Foods will appear here when you search. Foods entered by your fellow Zoomers will be boldfaced.







Here's what you have added to your food list so far:

Bananas, raw

Beef stew, canned entree

Beef, brisket, flat half, separable lean and fat, trimmed to 0" fat, choice, cooked, braised

Beef, cured, thin-sliced beef

Bread, french or vienna, toasted (includes sourdough)

Bread, Krusteaz, Cracked Wheat Bread Mix

Bread, Multi-Grain, toasted (includes whole-grain)






Footer text


Footer text


Footer text


Footer text

How can I fix this? Thanks very much in advance to all for any info.

AttachmentSize
offset_anomaly.gif81.31 KB
Vik
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2008-01-17
Posts: 12
Points: 0

Fixed! I just had to

Fixed! I just had to add:

...below

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Thanks for letting us know.

Thanks for letting us know. What you describe sounds like a float clearing issue; there are other solutions.

Verschwindende wrote:
  • CSS doesn't make pies