Sun, 2012-10-21 09:00
<div style="float:left;height:155px;width:133px;"><a href="bluebloods.php"><img src="titles/bluebloods_thumb.jpg" border="0"></a></div> <div id="film">BLUE BLOODS (2011) (TVS)</div> <ul> <li>Episode: <b>"Hall of Mirrors"</b> (episode # 1.13) 2 February 2011, as Sonny Malevski</li> <li>Episode: <b>"Little Fish"</b> (episode # 1.11) 19 January 2011, as Sonny Malevski</li> </ul> <div style="clear:left"></div>
Using this code, the list is not indented and the bullets aren't appearing. I noticed, when I removed the float:left property, the bullets appear and it is indented but the image then sits above the text instead of being left aligned to the text.
What am I doing wrong?
Thanks!
Sun, 2012-10-21 12:30
#1
Unable to replicate
With the info provided, I can't replicate your issue. Do you have additional style sheets; maybe with a global reset?
cheers,
gary
Sun, 2012-10-21 15:16
#2
Removed link to external style sheet and menu
I do have an external style sheet. I've removed the link to it as well as my menu but I'm still getting the same problem.
http://www.jarodsafehouse.com/_test.php
It appears to be the float:left property that is not allowing the list to work.
<div style="float:left;height:155px;width:133px;><a href="bluebloods.php"><img src="titles/bluebloods_thumb.jpg" border="0"></a></div> <div id="film">BLUE BLOODS (2011) (TVS)</div> <ul> <li>Episode: <b>"Hall of Mirrors"</b> (episode # 1.13) 2 February 2011, as Sonny Malevski</li> <li>Episode: <b>"Little Fish"</b> (episode # 1.11) 19 January 2011, as Sonny Malevski</li> </ul> <div style="clear:left;"></div>
The div id class "film" includes a float:left property. I've also removed the div and used just an img class that also includes the float:left property. Each one breaks the list. Remove them all and the list works ... It's very strange.
Sun, 2012-10-21 16:06
#3
This may be a browser thing
This may be a browser thing with the list markers. See my x-window dump attached. The list container, ul, is sliding under the float as it should, with the inline stuff wrapping around the float. To cause the ul to be aware of the float, you need to create a new block formatting context for it. Add
ul { overflow: hidden; }
cheers,
gary
| Attachment | Size |
|---|---|
| jarrod.gif | 38.73 KB |
Sun, 2012-10-21 16:53
#4
That's all it took?!!!
Gary you are the bomb! Thanks so much.
Such an easy fix.
Thu, 2012-11-01 05:52
#5
The float property defines
The float property defines the side around which other elements will flow around the big methods. A great way to create a pull-quote style is to float a div or paragraph of text message.[Spam link removed. ~gt]