3 replies [Last post]
http
http's picture
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-29
Posts: 13
Points: 0

The " list-style " bug:

Couldn't find info on PIE / google / CSS Creator / css-d

Please can you help:

I have a flash object as a list item in a DOM expandable menu. It can be see near the bottom right in a blue box with notes on (click) at http://ekstasis.net/

Added to an unordered list, as a list item, Firefox(Win1.07) moves the flash object out to the right much more than IE(Win6). Opera(Win7) or Safari(1.3Mac). doesn't at all.

I believe it does this because of the different list styles. I cannot seem to find a way to change this. I have list-style: none; on most. I saw this but it didn't help: http://www.meyerweb.com/eric/css/list-indent.html

I have adjusted the flash object by moving it 82px to the left then, using the parsing bug, an extra 15px to the left in IE browsers.

But it has now moved the full amount to the left in Opera or Safari.

If I include the object in an unordered list - but not as a list item, just bare within the tags - it works fine - the same in all browsers.
But then it isn't W3C valid.

I need to know:

Is it possible to remove the variance ((caused by the invisible bullet point) for list items with flash objects in) or use a hack which only targets Opera & Safari browsers.

I have set up a test demo of just the menu to make sure it's not affected by the other floats at:

http://ekstasis.net/list-stylebug.htm

Many thanks in advance,
mat

----------------------------------------------
The CSS hack I've used:

#turntable {
position: relative;
list-style: none;
float: left;
left: -82px;
width: 160px;
}

* html #turntable {
left: -15px;
}

----------------------------------------------
The CSS for the expandable list:

#mainMenuExp1 {
background: url(../images/backgrounds/menuexpmiddle.gif) repeat-y 0em 0.3em;
border: none;
color: #000;
width: 203px;
}

#menuListExp1 {
margin: 0px;
padding: 10px 0px 10px 0px;
}

a.actuator1 {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 0px;
text-decoration: none;
}

li.menubarExp1 {
background: none;
list-style: none;
}

.menuExp1, .submenuExp1 {
display: none;
margin-left: 0px;
padding: 0px;
}

.menuExp1 li, .submenuExp1 li {
background: none;
list-style: none;
margin-left: 0px;
}

span.key {
text-decoration: underline;
}

#turntable div {
position: relative;
margin: 0px;
left: 0px;
padding: 0px;
width: 160px;
}

#turntable {
position: relative;
list-style: none;
float: left;
left: -82px;
width: 160px;
}

* html #turntable {
left: -15px;
}

img.menuexppic {
position: relative;
float: left;
padding-left: 12px;

}

img.menuexpbase {
position: relative;
top: 4px;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

----------------------------------------------

----------------------------------------------

The HTML:

<img id="menuexpbase" src="images/backgrounds/menuexpbottom.gif" width="150" height="25" alt="&nbsp;" />

<br /><br /><br /><br />

<div id="mainMenuExp1">
<img class="menuexptop" src="images/backgrounds/menuexptop.gif" alt="&nbsp;" width="150" height="21" />

<ul id="menuListExp1">
<li class="menubarExp1">
<a href="#" id="picActuator" class="actuator1" accesskey="z"><img class="menuexppic" src="images/backgrounds/downexpand.gif" alt="click for decks" width="126" height="50" border="0" /></a>

<ul id="picMenu" class="menuExp1">
<li class="turntable1">
<div id="turntable">
<div>
<script type="text/javascript" src="scripts/flashobject.js"></script>
<div id="flashcontent4"> A flash movie should be visable here. Please update your flashplayer.
</div>
<script type="text/javascript">
var fo = new FlashObject("flash/turntable.swf", "turntable", "160", "133", "6", "#ffffff");
fo.addParam("quality", "high");
fo.addParam("wmode", "transparent");
fo.write("flashcontent4");
</script>
</div><!-- END turntable div span -->
</div><!-- END turntable -->

</li>
</ul><!-- END picMenu -->
</li><!-- END menubarExp1 -->
</ul><!-- END menuListExp1 -->

<img class="menuexpbase" src="images/backgrounds/menuexpbottom.gif" width="150" height="25" alt="&nbsp;" />
</div><!-- END mainMenuExp1 -->
</div><!-- END floatright -->

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The list-style bug

Hmm, there are all sorts of "odd" things in your code. So much so that I think its unlikely the fault lies with Firefox.

For a start...

why are you floating #turntable & .menuexppic left?
Both are constrained by their container and are supposed to appear one above the other, no floating is necessary. FF is placing the image 70px further out than IE, because its busy floating it correctly!

http
http's picture
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-29
Posts: 13
Points: 0

list-style bug

Thanks for the suggestion.

I've removed the floats - I agree they were unnecessary.
Adding / Removing the float on the turntable div makes no difference.

I've added borders to the test demo and checked to make sure it's the same problem with a gif image.

http
http's picture
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-10-29
Posts: 13
Points: 0

Incorrect use of JavaScript

I removed the positioning: relative and removed all the unnecessary code for the flash movie (á la ALA) and it appears that Opera and Firefox treated the JavaScript (for including valid transparent flash movies) differently to IE. Looked at the JavaScript and couldn't see why but I'll remove the script to fix this problem.

http://www.ekstasis.net/list-stylebug3.htm