<li> Alignment Issue, IE vs. Firefox (of course) |
<li> Alignment Issue, IE vs. Firefox (of course) |
TheMovieman |
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: FIREFOX: 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 - Brian This post has been edited by TheMovieman: May 12 2008, 11:08 AM |
Frederiek |
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. |
TheMovieman |
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... |
Frederiek |
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.
|
TheMovieman |
May 12 2008, 06:06 PM
Post
#5
|
Group: Members Posts: 8 Joined: 10-May 08 Member No.: 5,623 |
I will then.
|
TheMovieman |
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. |
Brian Chandler |
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.
|
TheMovieman |
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 |
pandy |
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. |
TheMovieman |
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 And now I can still concentrate on cleaning up that code. This post has been edited by TheMovieman: May 12 2008, 11:33 PM |
pandy |
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 |
TheMovieman |
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!
|
Brian Chandler |
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 |
Christian J |
May 13 2008, 07:57 AM
Post
#14
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. 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 |
TheMovieman |
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 |
pandy |
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? 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 |
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: In IE: 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 |
pandy |
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. |
pandy |
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. |
Brian Chandler |
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. |
Lo-Fi Version | Time is now: 26th April 2024 - 08:50 AM |