Help - Search - Members - Calendar
Full Version: <li> Alignment Issue
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
TheMovieman
Ok, I'm having a browser compatibility issue again. On my review page, I have a list (<li>) to display certain info about the DVD (special features, technical info, etc). Well, even though the other text displays in the right place on both browsers, for some reason the bullets are further over to the left on FF bleeding into a table I have set up.

Here are screencaps for each:
INTERNET EXPLORER:
IPB Image

FIREFOX:
IPB Image

Here's part of the code that deals with that section:
CODE

    <TR>
    <TD>
    <TABLE WIDTH="100%" BORDER="0">
        <TR>
        <TD WIDTH="150" VALIGN="top">
           <TABLE WIDTH="100%" class="frameborder">
            <TR>
               <TD ALIGN="center" class="ratingsblock">
                  <img src="../../files/transparent.gif" height="5"><BR>
<?php

$safequery7 = sprintf("SELECT amazon, dvd_cover, rating_film, rating_features, rating_audiovideo, rating_overall, rating_video, rating_audio FROM dvd_reviews WHERE id='%s'", mysql_real_escape_string($id));
$ratings = @mysql_query($safequery7);

while ($ratingtbl = mysql_fetch_array($ratings)) {
    $amazon = $ratingtbl['amazon'];
    $cover = $ratingtbl['dvd_cover'];
    $film = $ratingtbl['rating_film'];
    $features = $ratingtbl['rating_features'];

    $av = $ratingtbl['rating_audiovideo'];
    $display_av = ($av)?"<span class='ratingheads'>A U D I O &<BR>.:: V I D E O ::.</span><BR><img src='../../images/stars/set03/$av.gif' border='0'><BR><HR COLOR='gray'>":"";

    $video = $ratingtbl['rating_video'];
    $display_video = ($video)?"<span class='ratingheads'>.:: V I D E O ::.</span><BR><img src='../../images/stars/set03/$video.gif' border='0'><BR><HR COLOR='gray'>":"";

    $audio = $ratingtbl['rating_audio'];
    $display_audio = ($audio)?"<span class='ratingheads'>.:: A U D I O ::.</span></font><BR><img src='../../images/stars/set03/$audio.gif' border='0'><BR><HR COLOR='gray'>":"";

    $overall = $ratingtbl['rating_overall'];
    echo "
                  <A HREF='http://www.amazon.com/exec/obidos/ASIN/$amazon/moviemsguidet-20' class='inframe2' target='_blank'><img src='../../images/posters/dvd/dvdcover_$cover.jpg' border='1' width='130' alt='Buy this DVD from Amazon.com!'></a><BR>

                  <span class='ratingheads'>.:: F I L M ::.</span><BR>
                  <img src='../../images/stars/set03/$film.gif' border='0'><BR>
                  <HR COLOR='gray'>

                  <span class='ratingheads'>S P E C I A L<BR>.: F E A T U R E S :.</span><BR>
                  <img src='../../images/stars/set03/$features.gif' border='0'><BR>
                  <HR COLOR='gray'>

                  $display_av

                  $display_video

                  $display_audio

                  <span class='ratingheads'>.:: O V E R A L L ::.</span><BR>
                  <img src='../../images/stars/set03/$overall.gif' border='0'><BR>";
}
?>
               </TD>
            </TR>
           </TABLE>
        </TD>
        <TD WIDTH="410" VALIGN="top">
           <TABLE WIDTH="100%" BORDER="0">
            <TR>
               <TD CLASS="crewinfo">
<center><strong><font size="4">.::MOVIE INFORMATION::.</font></strong>
<HR COLOR="gray" WIDTH="90%"></center>

<?php

$safequery8 = sprintf("SELECT director, writer, cast, theater_releasedate, supplemental_features, discs, chapters, screenformat, audio_english, subtitles FROM dvd_reviews WHERE id='%s'", mysql_real_escape_string($id));
$crewdvdinfo = @mysql_query($safequery8);

while ($movietech = mysql_fetch_array($crewdvdinfo)) {
    $director = htmlspecialchars($movietech['director']);
    $writer = htmlspecialchars($movietech['writer']);
    $cast = htmlspecialchars($movietech['cast']);
    $theaterdate = htmlspecialchars($movietech['theater_releasedate']);
    $specialfeatures = $movietech['supplemental_features'];
    $discs = $movietech['discs'];
    $chapters = $movietech['chapters'];
    $format = htmlspecialchars($movietech['screenformat']);
    $audio_english = htmlspecialchars($movietech['audio_english']);
    $subtitles = htmlspecialchars($movietech['subtitles']);
    echo "

<strong>Director:</strong> $director<br />
<strong>Writer(s):</strong> $writer<br />
<strong>Cast:</strong> $cast<br /><br />

<strong>Theatrical Release Date:</strong> $theaterdate<br /><br />

<center><strong><font size='4'>.::DVD INFORMATION::.</font></strong>
<HR COLOR='gray' WIDTH='90%'></center>

<strong>Supplemental Material:</strong>
$specialfeatures<br /><br />

<strong>Technical Information:</strong><br />
Number of Discs: $discs<br />
$format<br />
$audio_english<br />
Subtitles: $subtitles";

}
?>
               </TD>
            </TR>
           </TABLE>
        </TD>
        </TR>
    </TABLE>
    </TD>
    </TR>


Any help would be appreciated smile.gif
- Brian
Frederiek
It would have been simpler if you posted the url of the page too: http://www.moviemansguide.com/reviews/DVD/...?id=untraceable

Start by fixing the (structural) errors reported by the online validator (link on this page). That might already fix it.
TheMovieman
Sorry, here's the page in the screen caps: http://www.moviemansguide.com/reviews/DVD/...-untraceable-bd

I ran it through the validation page and so far have 157 errors (started at over 200 before I fixed issues like capitalization and simple things).

There's just too many and I cannot even begin to wrap my head around them right now. For now it'll just have to be like this until I can get around to recoding the entire thing. I tried using the "Clean up Markup" but that didn't help at all (using that, the ratings table and the technical info were no longer side by side).

Anyway, thanks for replying. When I get the time/energy I may go back and redesign it...
Frederiek
At least fix the structural errors then.
TheMovieman
I will then.
TheMovieman
Ok, I had been working on starting over from scratch. This is just some basic code, and yet the alignment issue is still there.

Here's the page:
http://www.moviemansguide.com/reviews/DVD/read2.php

Here's the validation page (16 errors):
http://validator.w3.org/check?uri=http%3A%...s=1&group=0

I had even made another stripped down page (no left side menus, headers, etc) and interestingly I could get both together (the table on the left and the info on the right) and have the bullets align correctly, yet once I put <ul> tags around the <li> codes, it would misalign and the bullets would move into the table again. But even when I removed 'em on this "read2.php" page, nothing happened.
Brian Chandler
Is the list (with the bullets) in something with a floated box to the left? If so, it seems the CSS specification is simply idiotic, and says the bullets _ought_ to be misaligned. Can't remember the details, but the treatment of margins is just obviously wrong, and this means it is best to avoid having a bulleted list in anything that goes round a left float.

TheMovieman
I checked and even though my old code had a float: left property, the new one does not. In fact, working on another code (re-working the layout), the bullets still are misaligned...
pandy
I don't see the problem in the new page?

Anyway, this has to do with how floats work and a bug in IE. If you try this, you'll see that the bullets dissapear in both IE and FF.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>

<style type="text/css">
<!--
img { float: left }
-->
</style>

</head>

<body>

<img src="http://htmlhelp.com/icon/wdglogo.gif">
<ul>
<li>Item item item</li>
<li>Item item item</li>
<li>Item item item</li>
</ul>

</body>
</html>


This is because a float only pushes inline content to the side. The list actually stretches all the way to the left behind the float. Now, IE has a bug that occurs under certain circumstances, when the whole box beside the float is pushed to the right. That seems to be what happens in your page and that's why the bullets show where you want them in IE.
http://www.positioniseverything.net/floatmodel.html

You fix this problem for example by giving the UL a left margin that's wide enough to let it go free from the float. You could also use 'list-style-position: inside' to move the bullets inside the list. Then this won't happen. It's probably better than the margin fix because of the IE bug.
http://www.w3.org/TR/CSS2/generate.html#pr...-style-position

Oh, you can't have LIs on their own like that without a UL or OL wrapped around them!

FYI Brian, similar problems exist with pure HTML floats (align=left|right), but IIRC they mostly manisfest themselves in IE then.
TheMovieman
It worked. Perfect.

Thanks Pandy smile.gif

And now I can still concentrate on cleaning up that code.
pandy
Sorry, I pasted the wrong URL to the spec above (corrected now).
http://www.w3.org/TR/CSS2/generate.html#pr...-style-position
TheMovieman
Thanks for the links and thanks for the help, really appreciate it!
Brian Chandler
QUOTE
You fix this problem for example by giving the UL a left margin that's wide enough to let it go free from the float. You could also use 'list-style-position: inside' to move the bullets inside the list. Then this won't happen. It's probably better than the margin fix because of the IE bug.http://www.w3.org/TR/CSS2/generate.html#pr...-style-position


Uh, no, this does not "fix" the problem, because the block we're talking about no longer flows around the float, which is the whole point of having a float in the first place (unless you're just using it in some "clever" CSS-kludge).

The fact is that CSS is a broken mess, and needs to be replaced by something designed properly.
Christian J
QUOTE(pandy @ May 13 2008, 06:18 AM) *

You fix this problem for example by giving the UL a left margin that's wide enough to let it go free from the float. You could also use 'list-style-position: inside' to move the bullets inside the list.


Here's another idea, but it requires an extra SPAN inside each LI. Haven't tested in IE6:
This was no good, it simply behaves like "list-style-position: inside". In IE7 you can fix it by giving the SPAN "display: inline-block", but I had no luck with my other browsers.

CODE
ul, li {
padding: 0;
margin: 0;
list-style: none;
}

li span {
margin-left: 5px;
padding-left: 35px;
background: url(bullet.gif) center left no-repeat;
}
TheMovieman
Yeah, I know things are a mess. I've had this site for 3 years and it's undergone several redesigns and unfortunately I was careless. I did run the css file through the validator and made some corrections.

Thanks again for the help. I plan on starting over clean at some point, but right now I've got a stack of things to do so it will have to be put on the back-burner for now.
pandy
QUOTE
Uh, no, this does not "fix" the problem, because the block we're talking about no longer flows around the float, which is the whole point of having a float in the first place (unless you're just using it in some "clever" CSS-kludge).


I don't see anything flowing around in the OP's page.

QUOTE
The fact is that CSS is a broken mess, and needs to be replaced by something designed properly.


So?
QUOTE(pandy @ May 13 2008, 06:18 AM) *

FYI Brian, similar problems exist with pure HTML floats (align=left|right), but IIRC they mostly manisfest themselves in IE then.



As I've said before, if you don't like CSS, stop using it. I don't see how you constantly trying to discourage and misinform people who want to use it is helpful to anyone.
cazza
IE problems! Please help. I've read over this thread, but I can't seem to figure out what's going wrong with my list. I've got a vertical menu, which i've wrapped with id's to recognise the current page (I'm new to it though, so it may be flawed).

The problem is that my list of links looks great in Firefox, but IE moves it over about 15px like i've got padding on th left of it.
In firefox:
IPB Image

In IE:
IPB Image
My list is sitting inside a float:left container called #menubar.

My page address is: http://www.cccaust.com/dev/

My Css for the relative bit is:
#menuarea {
float: left;
width: 195px;
height: auto;
}

#menuarea ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-position: inside;
}
#menuarea li a {
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif, "Futura Md BT";
line-height: 25px;
text-decoration: none;
font-size: 12px;
color: #000000;
list-style-type: none;
list-style-position: inside;
width: 165px;
background-color: #dadada;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
margin: 0px;
padding-left: 20px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
background-image: url(images/menuabg.gif);
background-repeat: no-repeat;
display: block;

}
#home #menuarea #nav-home a {
background-image: url(images/menuacurrentbg.gif);
}
#find #menuarea #nav-find a{
background-image: url(images/menuacurrentbg.gif)
}

Please help if you know what my problem is.
Carol.
pandy
Remove 'list-style-position: inside' from the rule for #menuarea li a . You should remove all list related properties. They don't apply to an anchor.

Must be an IE peculiarity that makes it reserve space for a bullet. But there's more to it, because I can't repeat it with simpler code. wacko.gif
pandy
Yes, I can! Check this.

HTML
<html>
<head>
<title></title>
<style type="text/css">
<!--
a.foo { list-style-position: inside }
-->
</style>
</head>

<body>

<ul>
<li><a href="">DDDD</a></li>
<li><a href="" class="foo">DDDD</a></li>
</ul>

<ol>
<li><a href="">DDDD</a></li>
<li><a href="" class="foo">DDDD</a></li>
</ol>

</body>
</html>


Doesn't seem to "work" with other list properies. Well, thanks for the demo, cazza. This was a new one for me. happy.gif
Brian Chandler
[quote name='pandy' date='May 14 2008, 03:13 AM' post='24253']
[quote]Uh, no, this does not "fix" the problem, because the block we're talking about no longer flows around the float, which is the whole point of having a float in the first place (unless you're just using it in some "clever" CSS-kludge).[/quote]

I don't see anything flowing around in the OP's page.
[/quote]

No, perhaps the OP is not using the float in a way that actually results in anything flowing - but what is the meaning of a "float" if not something that "ordinary" text flows around? Or does "float" actually mean : "Um, let's alter the way that text behaves somewhere else"?


[quote]
[quote]The fact is that CSS is a broken mess, and needs to be replaced by something designed properly.[/quote]

So?
[/quote][/quote]

So it is *helpful* to point out to people that the reason they are having problems may not necessarily be because they are klutzes, but sometimes because the "designers" of CSS were klutzes. Can you explain how that is "misinformation"?

It is not a question of "liking" or "not liking" CSS: as I have pointed out before, CSS is bound to a false assumption, that "style" is a unary property of elements of the document tree, which stems from the false assumption that there is necessarily a dichotomy between "style" and "content". Parts of CSS that actually relate to genuine unary properties seem to work almost universally well, parts that don't, don't.

pandy
I don't know if I can. I know I won't bother to try. You make these posts just for the sake of arguing and I don't want to play. I suggest that in the future you start a new topic when you want to discuss the shortcomings of CSS and don't post the rant in the middle of thread where someone looks for help.

There is a lot of things about computers and computer languages I don't understand. I don't automatically assume their creators are idiots.
cazza
QUOTE(pandy @ May 20 2008, 12:40 AM) *

Doesn't seem to "work" with other list properies. Well, thanks for the demo, cazza. This was a new one for me. happy.gif


Thanks so much for replying. I'm glad that it was new to you... but I'm not sure what the conclusion was? Is this a fix I can use? If so, how do I apply it to my situation? Do I just add this comment into my css or my html? Sorry, I don't have much experience with fixes.

Cazza
cazza
oh ok. I see taking off 'inside' from my ul and li fixed it. Oh so simple - so long to figure it out. Thanks for your help.
biggrin.gif
pandy
Yes, but I'm afraid you miss the most important point. '#menuarea li a' selects an anchor that's inside a LI that's inside an element with the id 'menuarea'. It doesn't select either UL or LI.

So the list properties you have in that rule simply don't apply and should mean nothing to browsers. Except a funny bug in IE makes one of them "work", even if it shouldn't. You should remove everything list related from that rule. It's plain wrong and it does nothing - except in IE.
Brian Chandler
QUOTE(pandy @ May 20 2008, 03:21 PM) *

I don't know if I can. I know I won't bother to try. You make these posts just for the sake of arguing and I don't want to play. I suggest that in the future you start a new topic when you want to discuss the shortcomings of CSS and don't post the rant in the middle of thread where someone looks for help.

There is a lot of things about computers and computer languages I don't understand. I don't automatically assume their creators are idiots.


The creators aren't always idiots at all - sometimes they start from someone else's work, and push it a step too far, sometimes they just repeat mistakes that other clever people made in the 1950s and 60s. And so on.

Anyway, I am not really interested in just ranting about CSS, but when someone is having problems, and it looks as though those problems may be related to a CSS design defect, what should one say? The OP very specifically has a problem that list bullets are in the wrong place - splatted over the area to the left, if I remember correctly. Such splatting is not normally (ever?) the desired effect, but CSS does produce splatting in certain contexts. (Of course, the point is that in a well-designed software system, the behaviour of properties does not capriciously depend on the context.) My purpose in pointing out to the questioner that this is so is intended to help - I'm sure if you can supply suggestions of hacks that may get round the problem this may also be helpful, but the OP has to decide how much time to spend hacking.

Please tell me: I get the impression many CSS-enthusiasts don't use floats at all? I like to float illustrations left or right, and have the text flow round, because: (1) I don't like (forced) wide multi-column layouts (2) I often have very small illustrations, which I don't think look good left on a line by themself. My current heuristic is - if there is a list, numbered or unnumbered, in the vicinity, do not ever float left, because of the splatting problem. This seems very unsatisfactory to me, because it's a capricious constraint - have I missed anything?

Frederiek
I think the issue is not the CSS spec itself, but the (lack of or interpreted) implementation of it by browsers.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.