5 replies [Last post]
jarodsafehouse71
jarodsafehouse71's picture
Offline
newbie
Georgia
Last seen: 9 years 41 weeks ago
Georgia
Timezone: GMT-4
Joined: 2012-10-21
Posts: 3
Points: 6

<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!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jarodsafehouse71
jarodsafehouse71's picture
Offline
newbie
Georgia
Last seen: 9 years 41 weeks ago
Georgia
Timezone: GMT-4
Joined: 2012-10-21
Posts: 3
Points: 6

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

AttachmentSize
jarrod.gif 38.73 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jarodsafehouse71
jarodsafehouse71's picture
Offline
newbie
Georgia
Last seen: 9 years 41 weeks ago
Georgia
Timezone: GMT-4
Joined: 2012-10-21
Posts: 3
Points: 6

That's all it took?!!!

Gary you are the bomb! Thanks so much.

Such an easy fix.

Arifi
Arifi's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT-7
Joined: 2012-11-01
Posts: 1
Points: 1

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]