adworldmedia
asked on
CSS UL Background Image position off in IE works in FF
In Firefox it works wonderfully, as you can see in the attached image.. (The right part)...
BUT in IE, the background image is indented; I can't seem to figure out how to fix this.
HELP! :)
Thanks
BUT in IE, the background image is indented; I can't seem to figure out how to fix this.
HELP! :)
Thanks
.moduletableheadbox ul.latestnewsheadbox {
background-image: url(/images/box/bg_left_small_content.gif);
color: #FFF;
text-align: left;
list-style-type:disc;
list-style-position:inside;
margin-top: 0px;
margin-right: 0px;
padding-bottom:15px;
text-indent: -18px;
font-size: 15px;
}
ie-vs-ff.jpg
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
can you please add the html part also
ASKER
Its part of a Joomla module... The module code is as follows..
<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<ul class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php foreach ($list as $item) : ?>
<li class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php echo $item->text; ?></a>
</li>
<?php endforeach; ?>
</ul>
ASKER
The rendered HTML is as follows
<!--Start 2 Column Header Module--><table width="100%" border="0"><tr><td valign="top"> <div class="moduletableheadbox">
<h3>Recent Features</h3>
<ul class="latestnewsheadbox">
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1747-footage-from-mega-shark-vs-giant-octopus.html" class="latestnewsheadbox">
Footage From 'Mega Shark vs Giant Octopus'</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1748-b-d-casting-call-hellraiser-remake.html" class="latestnewsheadbox">
B-D Casting Call: 'Hellraiser' Remake</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1749-final-casting-for-its-a-wonderful-afterlife.html" class="latestnewsheadbox">
Final Casting For 'It's a Wonderful Afterlife'</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1750-rumor-control-new-halloween-2-poster-is-not-official.html" class="latestnewsheadbox">
Rumor Control: New 'Halloween 2' Poster is NOT Official</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1751-official-one-sheet-for-screen-gems-the-stepfather-remake.html" class="latestnewsheadbox">
Official One Sheet For Screen Gems' 'The Stepfather' Remake</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1752-halloween-sequel-heads-to-er.html" class="latestnewsheadbox">
'Halloween' Sequel Heads to E.R.</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1753-full-trailer-for-french-horror-mutants.html" class="latestnewsheadbox">
Full Trailer For French Horror 'Mutants'</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1754-not-only-is-cloverfield-2-happeningits-filming-right-now.html" class="latestnewsheadbox">
Not Only is 'Cloverfield 2' HappeningýItýs Filming Right Now!</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1755-a-dozen-hi-res-stills-from-blood-the-last-vampire.html" class="latestnewsheadbox">
A Dozen Hi-Res Stills From 'Blood: The Last Vampire'!</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/3-newsflash/1756-the-weinstein-company-going-french-crazy-at-cannes.html" class="latestnewsheadbox">
The Weinstein Company Going French Crazy at Cannes</a>
</li>
</ul> </div>
<div class="moduletableheadbox">
<h3>Indie Horror News</h3>
<ul class="latestnewsheadbox">
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1738-second-teaser-one-sheet-for-the-graves.html" class="latestnewsheadbox">
Second Teaser One Sheet For 'The Graves'</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1739-solid-new-pig-hunt-one-sheet-theatrical-dates.html" class="latestnewsheadbox">
Solid New 'Pig Hunt' One Sheet, Theatrical Dates</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1740-clips-poster-and-festival-run-for-spike.html" class="latestnewsheadbox">
Clips, Poster and Festival Run For 'Spike'</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1741-little-big-top-plays-new-bev-cinema-march-31st.html" class="latestnewsheadbox">
'Little Big Top' Plays New Bev Cinema March 31st</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1742-solid-french-production-co-brings-you-section-eight-on-myspace.html" class="latestnewsheadbox">
Solid French Production Co. Brings You 'Section Eight' on MySpace!</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1743-inside-version-of-zombies-of-mass-destruction.html" class="latestnewsheadbox">
Inside Version of 'Zombies of Mass Destruction'</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1744-night-of-the-living-dead-reanimated-trailer.html" class="latestnewsheadbox">
'Night of the Living Dead: Reanimated' Trailer</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1745-first-trailer-from-james-russos-dark-woods.html" class="latestnewsheadbox">
First Trailer From James Russo's 'Dark Woods'</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1746-genre-vets-loads-up-godkiller-cast.html" class="latestnewsheadbox">
Genre Vets Loads Up 'Godkiller' Cast</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/33-indie-horror-news/1598-death-ensues-in-the-broken-imago-images.html" class="latestnewsheadbox">
Death Ensues in 'The Broken Imago' Images</a>
</li>
</ul> </div>
</td><td valign="top"> <div class="moduletableheadbox">
<h3>Movie Reviews</h3>
<ul class="latestnewsheadbox">
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1703-seventh-moon.html" class="latestnewsheadbox">
Seventh Moon</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1704-not-quite-hollywood-florida-film-fest.html" class="latestnewsheadbox">
Not Quite Hollywood (Florida Film Fest)</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1705-lake-mungo-sxsw.html" class="latestnewsheadbox">
Lake Mungo (SXSW)</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1706-make-out-with-violence-sxsw.html" class="latestnewsheadbox">
Make-Out with Violence (SXSW)</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1707-it-came-from-kuchar-sxsw.html" class="latestnewsheadbox">
It Came From Kuchar (SXSW)</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1708-the-haunting-in-connecticut.html" class="latestnewsheadbox">
The Haunting in Connecticut</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1709-lesbian-vampire-killers-uk.html" class="latestnewsheadbox">
Lesbian Vampire Killers (UK)</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1710-knowing.html" class="latestnewsheadbox">
Knowing</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1711-walled-in-v.html" class="latestnewsheadbox">
Walled In (V)</a>
</li>
<li class="latestnewsheadbox">
<a href="/movie-reviews/bloody-horror-reviews/31-bloody-horror-reviews/1712-the-children-the-day.html" class="latestnewsheadbox">
The Children (The Day)</a>
</li>
</ul> </div>
<div class="moduletableheadbox">
<h3>Horror News</h3>
<ul class="latestnewsheadbox">
<li class="latestnewsheadbox">
<a href="/news/fangoria-news/1728-do-you-have-scars-if-so-skinlab-wants-you.html" class="latestnewsheadbox">
Do you have SCARS? If so, SKINLAB wants YOU!</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/fangoria-news/1729-blog-robert-halls-almost-human.html" class="latestnewsheadbox">
Blog: ROBERT HALL'S ALMOST HUMAN</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/fangoria-news/1730-reposaws-darren-lynn-bousman-doin-la-fango-con.html" class="latestnewsheadbox">
REPO!/SAWs Darren Lynn Bousman doin LA Fango con</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/fangoria-news/1731-exclusive-music-video-pics-comments-plus-new-poster-from-the-graves.html" class="latestnewsheadbox">
Exclusive music video, pics, comments, plus new poster from THE GRAVES!</a>
</li>
<li class="latestnewsheadbox">
<a href="/news/fangoria-news/1732-splinter-donkey-punch-shuttle-dvdetails.html" class="latestnewsheadbox">
SPLINTER, DONKEY PUNCH, SHUTTLE DVDetails</a>
</li>
</ul> </div>
</td></tr></table><!--End 2 Column Header Module--></td>
</tr>
</table>
try something like this
.moduletableheadbox ul.latestnewsheadbox {
background-image: url(/images/box/bg_left_sm all_conten t.gif);
background-color:#000;
color: #FFF;
text-align: left;
list-style-type:disc;
list-style-position:inside ;
margin-top: 0px;
padding-bottom:15px;
text-indent: -18px;
font-size: 15px;
padding-left:25px;
}
.moduletableheadbox ul.latestnewsheadbox {
background-image: url(/images/box/bg_left_sm
background-color:#000;
color: #FFF;
text-align: left;
list-style-type:disc;
list-style-position:inside
margin-top: 0px;
padding-bottom:15px;
text-indent: -18px;
font-size: 15px;
padding-left:25px;
}
Greetings:
Personally, I prefer not using negative margins, and use nested DIV to create a more fluid site. Try the link below and see if it helps:
http://www.page2pagepro.com/expert-exchange/example0001/
For DIV to be 'happy' in both IE and FF, the border is created by nesting DIV also. This forces the DIVs to be the same dimension cross-browser.
You may also consider using a universal 'CSS RESET':
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
This helps to start on the same foot.
-Cheers!
Personally, I prefer not using negative margins, and use nested DIV to create a more fluid site. Try the link below and see if it helps:
http://www.page2pagepro.com/expert-exchange/example0001/
For DIV to be 'happy' in both IE and FF, the border is created by nesting DIV also. This forces the DIVs to be the same dimension cross-browser.
You may also consider using a universal 'CSS RESET':
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
This helps to start on the same foot.
-Cheers!
ASKER
ie-vs-ff-2.jpg