The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> <li> Alignment Issue, IE vs. Firefox (of course)
TheMovieman
post May 12 2008, 10:36 AM
Post #1





Group: Members
Posts: 8
Joined: 10-May 08
Member No.: 5,623



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

This post has been edited by TheMovieman: May 12 2008, 11:08 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 12 2008, 12:05 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheMovieman
post May 12 2008, 01:27 PM
Post #3





Group: Members
Posts: 8
Joined: 10-May 08
Member No.: 5,623



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 12 2008, 03:00 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



At least fix the structural errors then.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheMovieman
post May 12 2008, 06:06 PM
Post #5





Group: Members
Posts: 8
Joined: 10-May 08
Member No.: 5,623



I will then.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheMovieman
post May 12 2008, 07:12 PM
Post #6





Group: Members
Posts: 8
Joined: 10-May 08
Member No.: 5,623



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post May 12 2008, 10:04 PM
Post #7


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheMovieman
post May 12 2008, 10:56 PM
Post #8





Group: Members
Posts: 8
Joined: 10-May 08
Member No.: 5,623



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

This post has been edited by TheMovieman: May 12 2008, 11:16 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 12 2008, 11:18 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheMovieman
post May 12 2008, 11:22 PM
Post #10





Group: Members
Posts: 8
Joined: 10-May 08
Member No.: 5,623



It worked. Perfect.

Thanks Pandy smile.gif

And now I can still concentrate on cleaning up that code.

This post has been edited by TheMovieman: May 12 2008, 11:33 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 12 2008, 11:35 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



Sorry, I pasted the wrong URL to the spec above (corrected now).
http://www.w3.org/TR/CSS2/generate.html#pr...-style-position
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheMovieman
post May 12 2008, 11:36 PM
Post #12





Group: Members
Posts: 8
Joined: 10-May 08
Member No.: 5,623



Thanks for the links and thanks for the help, really appreciate it!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post May 13 2008, 02:08 AM
Post #13


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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.

This post has been edited by Brian Chandler: May 13 2008, 02:08 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 13 2008, 07:57 AM
Post #14


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



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;
}


This post has been edited by Christian J: May 13 2008, 05:53 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheMovieman
post May 13 2008, 10:28 AM
Post #15





Group: Members
Posts: 8
Joined: 10-May 08
Member No.: 5,623



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.

This post has been edited by TheMovieman: May 13 2008, 10:34 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 13 2008, 01:13 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cazza
post May 19 2008, 11:47 PM
Post #17


Newbie
*

Group: Members
Posts: 12
Joined: 17-September 07
Member No.: 3,836



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.

This post has been edited by cazza: May 20 2008, 12:11 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 20 2008, 12:33 AM
Post #18


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 20 2008, 12:40 AM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post May 20 2008, 12:56 AM
Post #20


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



[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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th April 2024 - 08:50 AM