Solved

CSS UL Background Image position off in IE works in FF

Posted on 2009-04-02
7
909 Views
Last Modified: 2013-12-08
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
.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;

}

Open in new window

ie-vs-ff.jpg
0
Comment
Question by:adworldmedia
  • 3
  • 3
7 Comments
 
LVL 14

Accepted Solution

by:
amar31282 earned 500 total points
ID: 24053918
Try this

.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;
        margin-left:0px;
        padding-left:0px;
}
0
 

Author Comment

by:adworldmedia
ID: 24053982
I tried that, and it seems a tad bit better; but then the text is all messed up..
ie-vs-ff-2.jpg
0
 
LVL 14

Expert Comment

by:amar31282
ID: 24054001
can you please add the html part also
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:adworldmedia
ID: 24054330
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>

Open in new window

0
 

Author Comment

by:adworldmedia
ID: 24054341
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>										

		

Open in new window

0
 
LVL 14

Expert Comment

by:amar31282
ID: 24054648
try something like this

.moduletableheadbox ul.latestnewsheadbox  {
        background-image: url(/images/box/bg_left_small_content.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;
}

0
 

Expert Comment

by:page2pagepro
ID: 24054665
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!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 51
Google chrome pages randomly timing out 3 41
stop navigation from wrapping 7 52
send keys not working in vba 7 38
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now