pawciak Posted February 14, 2007 Share Posted February 14, 2007 Hi, I wrote this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML</title> <style type="text/css"> body {behavior: url(csshover.htc);} img {border:0px;} ul, li { margin: 0; padding: 0; } #nav ul { background: #ffc; display: none; } #nav li:hover ul { display: block; } #tabela, #tabela li {margin:0;padding:0;} #tabela a, #tabela img { display: inline; } #tabela {width:150px;} </style></head><body><ul id="nav"> <li><span>Sekcja</span> <ul id="tabela"> <li><a href="1"><img src="sklad2_17.jpg" height="13" /></a></li> <li><a href="2"><img src="sklad2_18.jpg" height="16"/></a></li> <li><a href="3"><img src="sklad2_19.jpg" height="15" /></a></li> <li><a href="4"><img src="sklad2_20.jpg" height="17" /></a></li> </ul> </li></ul></body></html> I made here a menu based on List - everything is okey it works fine but I have one big problem - I have free spaces between IMG's (between LI) - and I don't know how to delete them. I have tried to use display:inline but It didn't work. Please help me - what I'm doing wrong?:| Link to comment Share on other sites More sharing options...
croatiankid Posted February 14, 2007 Share Posted February 14, 2007 i don't know if you have spaces up and down, or left and right, but try this anyway:first try adding to your CSS #tabela img{display:block;} if that doesn't work, then try #tabela li {display:block;} , if that doesn't work, then you will have to delete all spaces in your html code between UL and /UL, making <ul id="nav"><li><span>Sekcja</span><ul id="tabela"> <li><a href="1"><img src="sklad2_17.jpg" height="13" /></a></li><li><a href="2"><img src="sklad2_18.jpg" height="16"/></a></li><li><a href="3"><img src="sklad2_19.jpg" height="15" /></a></li><li><a href="4"><img src="sklad2_20.jpg" height="17" /></a></li></ul></li></ul> Link to comment Share on other sites More sharing options...
Rantzien Posted February 14, 2007 Share Posted February 14, 2007 It's simpler than that: li { line-height:0;} Link to comment Share on other sites More sharing options...
pawciak Posted February 14, 2007 Author Share Posted February 14, 2007 thx:) it works now - I have one more question - why is that when I'm using padding-top or margin-top some lenght in IE is other than in Firefox? I am asking because This menu works that when somebody will roll over the UL area background will change to other picture, and the List will be displayed - As you see there are some IMG links - and I want to make sure that this img's are in properly place - because i want to fit it with background - so why when for exaplme using padding-top 52 and it works great in IE, in FF isn't good - and I need to give more px to the padding to fit it in FF. grr;/ Link to comment Share on other sites More sharing options...
croatiankid Posted February 16, 2007 Share Posted February 16, 2007 it might be because one of them gives LIs padding, the other gives them margin (not sure which gives which). Here's a tip for you that will make CSS so much easier in the future: when you just start making your CSS, the first line you shouuld put in is *{padding:0;margin:0;} That gets rid of any browser-default paddings and margins, and if you give an element padding-top:5px;, it will have 5 px of padding in every browser. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now